作为一名只会喊666的咸鱼，只能作为伸手党，参（chao）照（xi）一波别人的劳动成果来加深自己的记忆 其实是自己肚子没墨水 。既然是参照，直接进入正题吧。

避免阻塞

1. 优化HTTP请求

1 - 减少请求次数：

1. 合并代码。

2. sprite化图片。

3. 小于8kb的用base64作为src源。

4. 缓存ajax，对于每次请求返回内容都相同的ajax，可以设置cache属性进行缓存。

5. 剔除重复性的脚本。

2 - 减少请求体积：

1. 让后台dalao们使用GZIP。

2. 压缩代码，减少文件的空白字符。

3. 优化图片，压缩IMG-PNG8格式，压缩图片。

3 - 减少请求资源自带cookie的体积，也叫cookie隔离，使用CDN就好，有兴趣可以看看Cookie - Free Domains技术。

4 - 减少页面中空引用的href与src标签，因为你什么都不写，浏览器还是会对服务器发起一个空的HTTP请求，会对服务器产生一些不必要的压力。

5 - 突破请求限制，同一时刻向一个域名请求下载的并行数有限，可以使用不同域名分别存放静态资源，增大并行下载量。

6 - 使用大杀器，CDN。

7 - 不要滥用post请求，post翻译过来是邮递的意思，获取数据还是用get请求。而且在大部分浏览器中post还是有分步操作，而get是一步到位，虽然效率上差别不会很明显，但这不是混淆语义的理由。

顺便附上一个get与post区别的link： get与post的区别。

8 - css置顶，script置底，如需在头部放置script，可以使用defer与async异步的script引入。

9 - 避免使用css表达式。

10 - 使用懒加载。

11 - 减少DNS查找。每次DNS查询都会有30-120ms的耗时，可以使用DNS预加载。

12 - 减少页面重定向。每次重定向都会有资源的损耗，尽量减少不必要的重定向。

渲染

1 - 减少DOM树的深度，DOM树越深，越吃浏览器的渲染资源。尽量减少不必要的DOM层级。

2 - 优化体积过大的css文件，css体积过大需要更多的时间加载，关键的资源需要进行拆分渲染，保证首屏加载速度，提高用户体验。

3 - 避免在HTML中直接缩放图片，在HTML中直接缩放图片会使页面内容重绘，会影响页面中其他操作的效率，可能会产生卡顿。

4 - 优化js加载，耗时的script应当在html底部渲染，或者使用异步加载，与首屏无关的js也应当延迟加载。

5 - 避免使用<table>与<iframe>：

table是将整个table元素渲染完毕再一次性绘制到页面上，特别吃性能，相比而言可以用其他列表元素代替，譬如ul、dl。

iframe会因为加载源页面(即src='xxx')，而造成父级进入渲染阻塞的状态，等待iframe的源页面加完完毕才会回到父级继续往下渲染，如果是必要时，可以用异步的方式动态加载iframe。

6. 避免使用css滤镜，与css表达式，太吃性能的玩意儿暂时不要玩儿吧，浏览器hold不住。

缓存

预加载

1 - 使用DNS预解析，像天猫阿里的元信息里面都有用到：

使用dns-prefetch的姿势。