前端优化总结

前端性能优化一直都是一个老生常谈的问题，面试中也经常被问到，今天就结合雅虎前端团队的35条前端优化原则来总结下我在前端开发过程中的一些优化手段。
我将从六个方面来优化我们的前端页面，分别是：网页内容、服务器、cookie、css、js、图片。

cookie

减少cookie的传输的大小，主要从以下几个方面去做

• 去除没有用的cookie，如果网页不需要就完全禁掉
• 将cookie大小减到最小
• 设置合适的过期时间

使用无cookie域名，因为对于一些静态资源没必要使用cookie，所以我们通常用一个单独的域名来存放这些静态资源，这样一个节省带宽，提高网站的访问速度。

css

将样式表置顶，放在head标签底部，这样可以逐步加载已经下载好的网页，不让用户一直等待在白屏上，提高用户体验。

避免使用css表达式，使用js代替，原因在于它的效率低，性能损耗大。

link代替import，import相当于将css放在网页内容底部，只有当页面内容全部加载完毕后才进行加载。

避免使用滤镜，IE5-IE8支持，IE9不支持，使用滤镜会导致图片下载时阻塞网页渲染，还会导致内存使用的问题，总之性能低下。

js

将脚本至于body底部，因为脚本加载的时候会阻塞浏览器加载其它资源（其它什么事都干不了），如果放在顶部，会有一段的白屏时间，用户体验不好，所以一般放在body底部，等待网页内容下载完毕后再去加载脚本。

使用defer关键字，可以让脚本在网页加载完毕后在执行，主流浏览器都支持。

使用async关键字，HTML5新增，可以让脚本异步执行。

使用外部的脚本文件，可以被浏览器缓存，代码复用；减少网页内容大小；

去除多余的代码和注释（压缩）

减少DOM操作

• 缓存已经访问过的元素
• 设置display为none，在更新节点，更新完之后，再显示
• 减少reflow
• 使用事件委托绑定事件

图片

保证质量的情况下，压缩图片到最小。

使用图片精灵（CSS Sprite）

使用小且可以缓存的favicon.ico。

服务器

使用CDN加速，提高网站的访问速度，大型网站必不可少。

添加Expires或者Cache-Control响应头部，充分使用浏览器缓存（304）。

gzip压缩传输内容，减少传输内容。

配置ETags，还是利用浏览器的304缓存。

能够用Ajax get请求就使用它，不能够采用post。

网页内容（压轴）

减少HTTP请求，有以下方式

• 多个文件合并，利用前端自动化工具gulp，webpack，grunt。
• css sprites
• 内联图片，base64

减少DNS查询次数，域名不要太多

避免页面跳转，如301永久重定向，浏览器接收到这个响应后，会再次发送http请求，url为响应中的location。

缓存Ajax，虽然Ajax可以异步下载所需东西，但是我们再使用它的时候，采用下面的规则可以提高下载速度

• 添加Expires或者Cache-Control报文头部使响应可以被客户端缓存。
• 压缩响应内容
• 减少DNS查询
• 避免跳转
• 配置Etags

延迟下载，这点很重要，但是我们首先需要保证网页最初打开时能工作的最小内容集是什么，剩余的就属于延迟加载的东西，比如常见的滚动到底部加载更多。

提前加载，与延迟加载目的相反，提前加载接下来需要访问的资源，如谷歌当网页加载完成后，马上去下载一个所有页面都用到的image sprites。还有一个例子是根据用户的输入推断要加载的内容，很多搜索引擎都这样做。

减少DOM数量。

根据域名划分内容，浏览器一般对同一个域的下载连接数有限制，按照域名划分内容可以增大浏览器并行下载，但是注意控制域名在2-4个左右，不然dns查询也是个问题。

减少iframe
优点

• 加载速度较慢的内容，如广告
• 浏览器会对iframe中的内容进行安全控制
• 脚本可以并行下载

缺点

• 阻止页面渲染
• 不利于SEO