前端优化总结

基本规则

• css放到中
• js 放到底部 前面
• 内联加载快
• 外置能够被复用，能够被缓存

浏览器并发数

Browser	HTTP1.0	HTTP1.1
IE6,7	2	4
IE8	6	6
Firebox	6	6
Safari	4	4
Chrome	6	6
Opera	4	4

图片

1. css 雪碧图

   优势

   • 减小加载网页图片时对服务器的请求次数
   • 能减小图片的字节,比多张图片字节更小。

   缺点

   • 维护比较麻烦
   • 自适应屏幕下，容易出现背景断裂
   • 元素的位置，须要计算

2. 图片质量优化

   • 若是是颜色丰富的图片，通常选择jpg
   • 若是是动画图片，通常选择gif
   • 若是须要清晰图片或透明图片，通常选择png 并尽可能使用png 8

3. 图片压缩（tinypng）

4. 使用更小更快更强，新一代图片格式 WebP
   WebP是谷歌在10年推出一种新型图片格式，最先也是应用在谷歌产品中，谷歌发布的Android Studio 2.3正式版中就包括对WebP支持的更新，在实测中，webp 格式比 jpg 格式减少约 20%。这对优化用户体验，减小CDN带宽消耗有很好的效果，但并非全部浏览器都支持 webp ，因此为了使用 webp，须要作一点兼容性的工做。

5. base64： 减小http请求，字节小图可以使用。

6. iconfont： 优势太多，适用小图标，大小颜色可变。经常使用icon无需设计。iconfont库资源丰富

7. 图片延迟加载(懒加载)

CSS

1. css选择器： 从右到左匹配
2. 尽可能少使用计算属性，如calc()、expression等
3. 不要使用@import
4. 重绘和重排 重绘（repaint）、重排（reflow）
   repaint：屏幕的一部分进行了重画，好比某个 css 中改变背景色，元素尺寸没有变。
   reflow：任何一个元素的尺寸发生了变化，须要从新验证并计算 render tree，就会形成重排。

常见引发重排的操做：

• js添加或删除元素
• 元素大小发生改变 （border、padding、width）
• 浏览器窗口大小改变
• 元素位置改变
• 设置style属性
• 页面首次渲染

常见引发重绘的操做：

color、background、background-position、box-shadow、border-radius等。

优化重排和重绘

• 减小DOM操做
• 利用添加class 修改样式
• 动画使用CSS动画，开启GPU加速
• 不要使用table
• 可让其脱离文档流，position:absolute,fixed

JavaScript

1. 压缩、合并、混淆
2. 使用async 或 defer
3. 减小全局变量使用，慎用闭包
4. 使用事件委托
5. 避免使用for in 循环
6. 服务器端渲染
7. 减小DOM操做

能够参考----雅虎35条军规

浏览器缓存

1. 浏览器缓存机制
   浏览器缓存机制是指经过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制。
   Cache-Control 用于控制文件在本地缓存有效时长
   Last-Modified 是标识文件在服务器上的最新更新时间。
2. Web Storage
   分为 sessionStorage 和 localStorage
   经过存储字符串的 Key/Value ，存储大小为5MB（Cookies 4KB)
3. Web SQL Database
   又名html5本地数据库，用户能够像访问本地文件那样轻松地对本地数据库进行直接访问
   目前基本已经被放弃, 新一代的前端存储方案--indexedDB
4. Application Cache
   离线缓存，可在没有因特网链接时进行访问
   HTML5的离线存储是基于一个manifest文件(缓存清单文件，后缀为.appcache)的缓存机制(不是存储技术)，经过这个文件上的清单解析离线存储资源，这些资源就会像cookie同样被存储了下来。以后当网络在处于离线状态时，浏览器会经过被离线存储的数据进行页面展现。

其它

1. 静态文件存储到CDN上
2. 避免重写向
3. 少用iframe，阻塞onload，占用并发
4. 升级http为http2.0

下次面试官问你时，不要只说表面的那几个了~

• 浏览器缓存机制