性能优化

节流开源

网站性能优化14条

1. 尽可能减少HTTP的请求数

2. 使用CDN（Content Delivery Network）

   • 减少物理距离，从而减少下载速度

3. 添加Expires头（或者Cache-control）

   • 设置HTTP响应头，告诉客户端额定时间内不处理请求

4. Gzip 组件

5. 将CSS样式放置在页面上方

6. 将脚本放到body下方（包括内联的）

7. 避免使用CSS中的Expressions

8. 将JS和CSS独立成外部文件

   • 设置不常变动的文件，配合第三条使用，不然就增加了请求次数

9. 减少DNS查询，或者进行DNS预解析

<link rel=”dns-prefetch” href=”http://api.twitter.com”/>

DNS预解析参考

10. 压缩JS和CSS（包括内联的）

11. 避免重定向

12. 移除重复的脚本

    • 现在没有人会做重复脚本啦！

13. 配置实体标签（ETags）
    + 文件打标签，发请求前查找标签是否一样，若一样就不下载。

14. 使用AJAX缓存

    • 现在没有什么效果，已过期

15. 由于互联网在发展、浏览器也在变化，故以上可能都不适用

---

• 请求文件（资源）要小【压缩，减少……】
• 网速快【多地区设备cdn的静态服务器，加快用户访问速度】
• 请求次数要少【】

1. 尽量减少HTTP请求次数

   • 合并js、css、sprite
   • 优化图片大小（压缩）

2. 延迟加载内容

   • 图片懒加载（曝光后加载）
   • 数据懒加载（点击查看更多）
   • 功能懒加载（曝光或者点击后加载HTML、js功能模块）

3. 使用离线缓存

   • 把常用的变动又少的js、css、图片存储到localstorage，第二次访问的时候直接走本地缓存。

4. CSS、JS放置正确位置

   • 把css 放在head中，保证页面看到的时候样式是对的。
   • 把js放到body里最后的位置，防止加载js阻塞页面。

5. 静态资源压缩

   • 图片、css、js发布前压缩

6. 静态资源使用多个域名

   • 对图片、css、js，可使用几个域名。并发加载

7. 静态资源使用cdn存储

   • 用户与网站服务端的接近程度会影响时间的长短。可以把静态资源放到内容分发网络（Content Delivery Network, CDN）中加快访问

8. 预加载

   • 在某个功能还没展现时，在空闲时间预先加载相关图片和JS代码

9. DOM操作优化

使用JavsScript访问DOM元素比较慢，因此为了获取更多的页面，应该做到

• 1. 缓存已访问过的有关元素
  • 2. 线下更新完节点后在添加到DOM
  • 3. 避免使用JavaScript来修改页面布局

10. 优化算法
    在js处理中优化查找、排序算法。尽量少用嵌套循环

---

使用时间代理

减少DNS查找次数

根据域名划分页面内容【2-4个域名比较好】

跳转的正确使用