性能优化——雅虎军规35条

性能优化基本原则

Posted by Shiyanping on January 12, 2019

思维导图引用来自一位大佬。传送门

一、 页面内容

1.1 减少 HTTP 请求

前端页面中图片,js,css,请求都属于 HTTP 请求,现代浏览器虽然说对于同时多个 HTTP 请求有优化,但是请求数太多也会导致加载太慢,同域名下多个请求一起访问,会导致部分 HTTP 请求处于 pending 状态。我记得谷歌浏览器同一个域名下的请求最多好像是 6 个(还有待考证)。

所以减少 HTTP 请求就尤为重要了,比如可以将图片做成雪碧图,合并 js 和 css,使用 node 合并后端接口。

1.2 减少 DNS 查询

浏览器输入域名之后,第一步就是通过 DNS 查询,找到域名对应的 IP,我们对于 DNS 的优化,可以在前端页面使用 DNS 预解析的功能。

1.3 避免重定向

减少重定向这个就更不用说了,平时访问一个页面的时间,如果使用了重定向,相当于要访问两个甚至更多的页面,这就会导致用户看到最后呈现的页面时间更长,体验更差,减少重定向,可以从根本上解决页面加载过慢的问题。

1.4 缓存 Ajax 请求

通过使用 Etag,expiress,cache-control 缓存请求,能有效减少同一个请求多次访问所需要的时间,大大优化的 HTTP 往返耗时。

1.5 延迟加载

非首屏的图片,请求,我们可以等首屏出现之后再加载,减少了首屏出现的时间。

1.6 预加载

当前页面有空闲时间是,我们就可以使用预加载去加载下一个页面的资源。

quicklink 就可以实现在空闲时间加载视窗范围的请求。

1.7 减少 DOM 元素

页面内 DOM 元素太多,会影响页面渲染,如果一个页面有 100 个元素,和一个页面有 1000 个元素,渲染的速度肯定会有所不同。

而且我们在用 JS 操作 DOM 的时候,对需要重复使用的 dom 要进行缓存,防止多次获取,这里也涉及到了重绘。

1.8 划分内容到不同的域名

上面也说到了,浏览器对于同一个域名下的请求是有并行的个数限制的,所以我们尽量将不同功能的资源放到不同的域名下,比如静态资源有静态资源的服务器。

1.9 减少 iframe 的使用

虽然 iframe 有好处,他可以用来加载第三方的页面,可以并行下载脚本。

但是 iframe 加载的代价太昂贵了,会阻塞页面 load 事件触发,并且 iframe 缺少语义化,浏览器在做 SEO 的时候,也无法识别。

1.10 避免 404 错误

404 有些时候是不可避免的,但是 404 会导致我们加载一些无用的资源,所以我们尽量要减少 404 错误。

二、 服务器

2.1 使用 CDN

有条件的话一定要使用 CDN 分发内容,CDN 架设在全世界不同的位置,身处不同地理位置的用户,通过 CDN 可以获得自己访问最快的服务器,让用户浏览器更高效的获取资源。

2.2 启用 Gzip

目前在访问服务器之前一般都会有反向代理服务器,比如 nginx,nginx 可以直接开启 gzip 压缩,访问资源更小,访问速度就提升了。

2.3 添加缓存

添加缓存的方式有很多种:

  • Expires
  • cache-control
  • Etag
  • last-modified

同样在服务器上或者反向代理服务器上都可以配置,浏览器不管是匹配强缓存还是协商缓存,只要是缓存,就可以加快资源访问。

2.4 能使用 GET 请求的尽量使用 GET 请求

因为 POST 请求是先发送 Http header,然后再发送 data,但是 get 请求只发送一次数据包,所以能使用 GET 请求尽量使用 GET 请求。

2.5 避免 src 和 href 为空

src 或者 href 为空会对服务器造成不必要的请求压力。

2.6 SSR

如果有真实业务场景符合 SSR,并且技术上可以支持,那一定要使用 SSR,可以帮助用户更快的呈现页面。

四、 CSS

  • 把样式放到 head 中,减少重绘

  • 将多个 CSS 进行压缩合并

五、 JavaScript

  • 把 js 放到页面底部,尽量不要对页面进行阻塞

  • 多个 js 文件要压缩合并,将共用的 js 进行提取,避免重复

  • 上面提过的,一定要减少 DOM 操作,和避免重复获取 dom 元素,减少重绘

六、 图片

  • 能使用 css 和 svg 的,一定不要使用图片

  • 可以使用 webp 格式的图片就使用 webp

  • 使用 css sprite 并且一定要做优化

  • favicon.ico 在 PC 端可以使用更小的,或者使用 base64 位的,在移动端完全可以将其去掉。

1
2
<!-- 移动端不浪费加载icon的浏览 -->
<link rel="icon" href="data:;base64,=" />
  • 不要在 html 中对图片进行缩放