网站前端性能优化
Gzip （HTML/CSS/JS/SVG）
服务器启用Gzip是必须的，另外，图片转DataURI在Gzip之后的大小和图片差不多
设置浏览器缓存
不用多提了，Last-modified和max-age啥的，max-age可以设置到1年以上，当然需要有科学的机制能保证新版本发布后能自动更新文件而不会被缓存的文件影响到新特性
压缩静态文件 （HTML/CSS/JS/SVG/图片）
合并CSS、JS文件，以及使用CSS Sprite来合并图片
内联关键的js代码
延迟加载JS/CSS/图片
延迟解析JS
CSS放到文档的头部
JS放到文档的底部
设置代理缓存
分离标签和行为
避免不同的媒体类型使用不同的CSS文件，比如print、screen、mobile等，有的浏览器会全部下载
避免使用CSS @import
在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程（也就是增加页面的总体加载时间）
在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载，这会阻碍页面的渲染，让人感到页面比较慢。
本文通过多个实验，介绍了@import的多种用法对网站性能的影响，如果你颇为关注网站的性能，本文将会改变你对于LINK和@import的看法。移除无用的CSS规则
Data URI——小图片可以使用DataURI 来减少请求
避免空img标签
服务器端裁剪图片尺寸
指定图片大小
不要浏览器中缩放图片
使用渐进式JPG图片
使用WebP图片
合理使用图标字体
去除错误的资源链接
这个其实不算性能优化点，这种错误本身不应该出现的
最小化HTTP请求（请求数和请求大小）
避免URL跳转
减少DNS轮询
使用域名分区——使用多个域名来增加浏览器并行下载数量，但总域名不要超过4个，否则看上一条
减小cookie大小
缓存静态数据
AJAX请求中使用GET
相同资源使用统一的URL
静态文件使用cookie-free域名
提高后台服务器性能
为移动终端设定viewport
指定文档编码
评论（0）