加载中... 前端性能优化 - semyin's blog
12°

前端性能优化

网络相关

1 DNS预解析

<link rel="dns-prefetch" href="//xxx.cn" />

2 缓存

强缓存

Expires // HTTP 1.0
Cache-Control  // 出现于 HTTP / 1.1 优先级高于Expires
Expires: Wed, 22 Oct 2018 08:41:00 GMT

协商缓存

Last-Modified // 本地文件最后修改日期
If-Modified-Since

Last-Modified 表示本地文件最后修改日期,If-Modified-Since 会将 Last-Modified 的值发送给服务器,询问服务器在该日期后资源是否有更新,有更新的话就会将新的资源发送回来。

ETag 
If-None-Match

ETag 类似于文件指纹,If-None-Match 会将当前 ETag 发送给服务器,询问该资源 ETag 是否变动,有变动的话就将新的资源发送回来 Tag 优先级比 Last-Modified 高

对于大部分的场景都可以使用强缓存配合协商缓存解决,但是在一些特殊的地方可能需要选择特殊的缓存策略

对于某些不需要缓存的资源,可以使用 Cache-control: no-store ,表示该资源不需要缓存 对于频繁变动的资源,可以使用 Cache-Control: no-cache 并配合 ETag 使用,表示该资源已被缓存,但是每次都会发送请求询问资源是否更新。 对于代码文件来说,通常使用 Cache-Control: max-age=31536000 并配合策略缓存使用,然后对文件进行指纹处理,一旦文件名变动就会立刻下载新的文件。

3使用 HTTP / 2.0

2.0比1.0多了请求并发

在 HTTP / 2.0 中引入了多路复用,能够让多个请求使用同一个 TCP 链接,极大的加快了网页的加载速度。并且还支持 Header 压缩,进一步的减少了请求的数据大小。

预加载

<link rel="preload" href="http://example.com" />

懒加载

图片压缩

图片使用base64

CDN

Gzip

CSS放Header script放底部 因为js会阻塞页面加载

webpack打包 压缩 开启 tree shaking


已有 0 条评论

    我有话说: