如何做好前端性能优化

发表于 分类于

性能优化的目的是减少用户流量消耗，提升用户首屏体验，提升用户访问速度。web 开发的任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而影响网站的性能，影响用户体验。

页面结构

  • 将 CSS 和 JS 放到外部文件中引用，CSS 放顶部，JS 放底部
  • 减少重绘和回流：
    • Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。
    • Reflow(重排)就是DOM的变化影响到了元素的几何属性，浏览器会重新计算元素的几何属性，重新渲染DOM。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化等。
    • 修改样式多的时候尽量使用 class，动画效果使用绝对定位，将多次改变样式属性的操作合并成一次操作，在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量。
  • 减少 DOM 节点，减少对 DOM 的操作
  • 不使用 CSS 表达式
  • 减少 iframe 标签数量：iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。而且iframe不利于网站的SEO

请求优化

  • 减少请求：合并图片（CSS Sprites），合并 CSS 和 JS 文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。
  • 压缩精简 HTML、CSS、JS 文件，移除重复脚本，图像优化
  • 使用 CDN：内容分发网络（Content delivery network）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。(维基百科)
  • 缓存：添加 Expires头，Cache-Control，配置 ETag，
  • 使 AjaX 可缓存，Ajax 使用GET方式请求
  • 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限， 增加域可以提高并行下载量