前端性能优化一直都是一个老生常谈的问题，面试中也经常被问到，今天就结合雅虎前端团队的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
