前端性能优化

如何进行前端性能优化？（必会）

1、减少 http 请求
减少 HTTP 请求的方案主要有：合并 JavaScript 和 CSS文件、合并图片 CSS Sprites、图像映射（Image
Map）和使用 Data URI 来编码图片，图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2、减少对 DOM 的操作
修改和访问 DOM 元素会造成页面的 Repaint（重绘）和 Reflow（重排），循环对 DOM 操作更是
不推荐的行为。所以合理的使用 JavaScript 变量储存内容，考虑大量 DOM 元素中循环的性能开
销，在循环结束时一次性写入。
减少对 DOM 元素的查询和修改，查询时可将其赋值给局部变量。
注：在 IE 中:hover 会降低响应速度。

3、使用 JSON 格式来进行数据交换
JSON 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。
同时，JSON 是 JavaScript 原生格式，这意味着在 javaScript 中处理 JSON 数据不需要任何特殊的
API 或工具包。与 XML 序列化相比，JSON 序列化后产生的数据一般要比 XML 序列化后数据体积
小。

4、高效使用 HTML 标签和 CSS 样式
HTML 是一门标记语言，使用合理的 HTML 标签前你必须了解其属性，比如 Flow Elements，Metadata
Elements ，Phrasing Elements。比较基础的就是要知道块级元素和内联元素、盒模型、SEO 方面
的知识。
CSS 是用来渲染页面的，也是存在渲染效率的问题。CSS 选择符是从右向左进行匹配的，当
页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以要避免低效。

5、使用 CDN 加速（内容分发网络）
其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容
传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层
智能虚拟网络，CDN 系统能够实时的根据网络流量和各节点的连接、负载状况以及到用户的距离
和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上

6、将 CSS 和 JS 放到外部文件中引用，CSS 放头，JS 放尾

7、精简 CSS 和 JS 文件

8、压缩图片和使用图片 Sprite 技术

9、注意控制 Cookie 大小和污染
因为 Cookie 是本地的磁盘文件，每次浏览器都会去读取相应的 Cookie，所以建议去除不必要的
Coockie，使 Coockie 体积尽量小以减少对用户响应的影响；
使用 Cookie 跨域操作时注意在适应级别的域名上设置 coockie 以便使子域名不受其影响
Cookie 是有生命周期的，所以请注意设置合理的过期时间，合理地 Expire 时间和不要过早去清除
coockie，都会改善用户的响应时间