优化网站性能最佳实践

[lvwxx]

优化网站性能最佳实践

HTTP 方面

• 减少 HTTP 请求

  • 合并文件
  • CSS Sprites: 减少 image 的请求，将多个背景图片合并到一张图片，然后使用 CSS backgroud-image 和 backgroud-position 属性来展示这个大背景图片的一部分
  • 内联图片: 使用 data: URL scheme 形式的图片格式，这样虽然增加减少了一次 http 请求，但是也增加了 html 文档的体积。把内联图片加到 css 文件中然后缓存 css 文件，这样既不会增加页面的体积，也可以减少 http 请求

• 缓存 http response

  • server response 加入 Expires 或者 Cache-Control Header: 对于静态的不经常变的内容（如：jquery等）可以使用 Expires 然后设置一个较长时间的值。对于经常变更的内容，可以使用 Cache-Control header 配合 etag 和 last-modified 等字段实现缓存和更新

• 减少 http response 体积，加快响应速度

  • Gzip 压缩 response 内容： HTTP/1.1 开始 web 客户端支持在 HTTP request中加入 Accept-Encoding Header 来表明客户端支持的压缩方式。

    Accept-Encoding: gzip, deflate
  

  • 如果 web Server 发现客户端 request Header 中有这个字段，server 可以使用客户端提供的压缩方式压缩 response，并且在 response Header 中告诉客户端使用的压缩方式

    Content-Encoding: gzip
  

代码层面

css js

• css 放到最上面： 浏览器从上到下加载和执行代码，我们希望浏览器能可能快的展示出内容给用户。当我们的网站有大量的内容而且用户的信号不好时，能尽快给用户视觉上的反馈是极其重要的。当把 css 放到文档底部会禁止浏览器渐进式渲染。这些浏览器会阻止页面呈现以避免在样式发生变化时重新绘制整个页面，会给用户呈现一个白屏状态直到 css 加载完成。

• 避免使用 css 表达式

• 使用外链的方式加载 css 和 js，充分利用 HTTP 的缓存。

• js 放到文档底部： js 加载和执行会阻塞页面的渲染，js 放到底部可以页面渲染完成后在加载和执行。

• js 文件加入 defer： js文件可以并行的加载和执行而不阻塞页面的渲染，当 js 文件加载完成后，在 DOMContentLoaded 事件之前执行。

• 当 js css 文件有很多时，放到不同的域名下。

content

• 减少 dom 的数量

• 缓存 dom 节点

• 使用事件代理

• 减少图片体积

预加载

• prefetch: 是一种告诉浏览器获取一项可能被下一页访问所需要的资源方式。这意味着资源将以较低优先级地获取。这意味着 prefetch 的主要用途是加速下一页访问速度，而不是当前页面的速度。

• preload: 最基本的使用方式是提前加载较晚发现的资源而不阻塞页面的渲染。比如字体文件等。

懒加载

• 利用 webpack 实现懒加载或者按需加载