前端如何做优化

网络通信阶段的优化：

1. 减少HTTP请求数
   1. 合并资源，如合并 JavaScript 文件、CSS 文件，利用 CSS Sprite 合并图片等
   2. 内联图片,data url节省了HTTP请求,但是如果这个图像在网页多个地方显示会加大网页的内容，延长下载时间。
2. 域名提前解析，在页面中不同域名的链接需指定预取域名：<link rel="dns-prefetch" href="http://this-is-a.com">，IE9+支持
3. 避免重定向（重定向会增加http请求的次数）
4. cookie优化，cookie越多会导致请求头越大
5. 启用GZIP压缩（Accept-Encoding：g-zip）
6. 使用 CDN加速，减小服务器压力
7. 合理利用HTTP缓存，通过设置Expires

页面渲染阶段的优化：

1. 建议将 CSS 文件放在页首，以便构建 DOM 树；而将 JavaScript 文件尽量放在页面下方，防止阻塞构建 DOM 树；而 JavaScript 的 onload 事件里，不要写太多影响首屏渲染的、操作 DOM 树的 JavaScript 代码。
2. 精简 JavaScript 和 CSS 代码，并进行代码压缩，使得css和js资源更快的下载
3. 编写高效的CSS代码
4. 重要的图片或者想让用户优先看到的图片使用img标签，次要的图片使用background引入

减少reflow/repaint：

1. 不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。
2. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
3. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
4. 不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

编写css时应当注意：

　　CSS选择符是从右到左进行匹配的。所以比如#nav li，会去找所有的li，然后再去确定它的父元素是不是#nav。因此，写css的时候需要注意：

　　1. dom深度尽量浅。

　　2. 减少inline javascript、css的数量。

　　3. 使用现代合法的css属性。

　　4. 不要为id选择器指定类名或是标签，因为id可以唯一确定一个元素。

　　5. 避免后代选择符，尽量使用子选择符。原因：子元素匹配符的概率要大于后代元素匹配符。

　　6. 避免使用通配符。

编写js时应当注意：

　　1. 将所有的script标签放到页面底部，也就是body闭合标签之前，这能确保在脚本执行前页面已经完成了DOM树渲染。

　　2. 尽可能地合并脚本。页面中的script标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。

　　3. 采用无阻塞下载 JavaScript 脚本的方法： 

　　　　（1）使用script标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）； script标签的defer属性规定了是否对脚本进行延迟，直到页面加载为止。　　

　　　　（2）使用动态创建的script元素来下载并执行代码；