前端性能优化原理及方法小记

一、浏览器打开方式和过程

浏览器核心是 浏览器引擎

1. 连接到 URL 所在服务器

查询 DNS 服务器，获取 URL 所在网站 IP ，向该地址发起请求。

2. 获取页面 HTML 文档

无论请求是一个静态的 HTML 文件或者是动态脚本（ASPX、PHP、JS），服务器返回给浏览器。

3. 解析文档并获取资源

获取 HTML 文件之后进行解析，目的是知道所需资源以及生成 DOM 树，两者是并行工作的。

4. JS 及 CSS 文件

页面处理 JS 文件：

• 按照在 HTML 文中出现的顺序执行
• JS 执行时，依赖的 DOM 树已经生成好

CSS 文件一般用于控制页面元素的显示效果，因为加载 CSS 之后，浏览器会对元素重新进行渲染，因此建议将 CSS 文件放在 HTML 文件最前面加载。

5. onload 事件

当 HTML 文件解析完成之后，所需资源都已经成功下载和执行之后，浏览器发出 onload 事件并回调 HTML 文件中的 onload 函数。对浏览器来说，onload 事件是最接近页面就绪的事件，但 onload 事件执行完成，并不完全代表页面已经就绪，用户可以进行操作，还有一些 javascript 脚本需要在其后执行（在 ajax 的网页上很常见）。

二、提高前端性能的方法

主要有两个方面：

1. 减少页面加载的时间
2. 提升用户角度的感官体验

减少页面加载所需要的时间，可以从请求数量、请求并发及网络传输的角度出发；提升用户感官体验，则主要是让页面尽快展示。

1. 减少网络时间

所有的服务端资源都经过 DNS 解析 至 建立连接 至断开连接的过程，因此可以从以下几个方面入手

• 使用 DNS 缓存技术
  • 一般浏览器本身具有一定的 DNS 缓存机制，所以服务端的 DNS 缓存不能引起太大的提升
• 减少传输文件的尺寸
  • 将文件进行压缩
  • 利用混淆的方式减少 JS 文件和样式表的大小
  • 从 JS 文件中去掉不需要的部分
• 加快文件传输速度
  • 使用 CDN 技术

2. 减少请求的数量

• 利用浏览器缓存
  • 为充分利用浏览器缓存，需要在服务器端保证每个可以被缓存的资源在服务端返回时附带合适的 expires 头信息
  • 尽量把页面中很少改变的部分提取出来
  • 使用引用的方式加载 JS 和样式表
  • 使用 URI
• 使用合并的图片文件
  • 当页面包含很多小图片文件时，可以考虑将小图片合并成一个大图片，在页面中使用 CSS Sprites 技术将大图片显示分割成小图片，这种方式可以大量减少 http 请求数量

3. 提高浏览器下载的并发度

• JS 文件放在 HTML 文件最后加载
• 使用多个域名

4. 让页面尽早显示

• 将样式表放在 HTML 文件头部加载
• JS 引用放在最后加载

三、常见的前端性能工具

1. Firebug

2. HttpWatch

3. Chrome 自带开发者工具

4. Page Speed

5. DynaTrace AJAX Edition