前端性能优化总结

前端性能优化总结

 
  1. 减少DNS查找次数：合并文件、使用css sprites，因为初次访问网站，响应时间大部分用来下载各项内容
  2. 减少DNS查找次数：减少主机名的数量可以减少DNS查找次数。url地址（获取地址的IP） -> 本地DNS缓存（找到就返回IP地址，并停止下一步） -> DNS服务器（返回IP地址）。在这个过程中浏览器什么都不会做直到DNS查找完毕。
  3. 可缓存的AJAX：对于请求不变的内容可以缓存到本地
  4. 推迟加载内容：哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？
  5. 预加载：和推迟加载类似，在浏览器空闲时将后面页面可能用到的资源缓存
  6. 减少DOM元素数量：提升JavaScript遍历DOM的效率
  7. 根据域名划分页面内容：HTML内容和动态内容放到一个域名上，将页面各种组件（图片、脚本、CSS)存放另一个域名上
  8. 减少使用iframe
  9. 使用CDN内容分发网络
  10. 设置缓存：为文件头指定Expires或Cache-Control
  11. Gzip压缩文件内容：图像和PDF文件由于已经压缩过了，再进行gzip压缩效果不明显
  12. 把样式表置于顶部：在文档<head />内加载你的样式表
  13. 避免使用CSS表达式：使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响
  14. 使用外部JavaScript和CSS：因为外部JavaScript和CSS文件都能在浏览器中产生缓存
  15. 精简JavaScript和CSS：去除无用代码、压缩、混淆
  16. 用<link>代替@import：对于两者区别，可以网上查看
  17. 把脚本置于页面底部
  18. 减少DOM访问
  19. 使用事件代理处理相同事件
  20. 减小Cookie体积
posted @ 2020-08-18 17:16  刘义斌  阅读(208)  评论(0)  编辑  收藏  举报