DNS预解析 dns-prefetch 通过预解析获取域名对应的ip地址
<link rel="dns-prefetch" href="//blog.poetries.top">
缓存策略
- 良好的缓存策略可以降低资源的重复加载 提升网页加载速度
- 浏览器缓存策略分为 强缓存 和 协商缓存
强缓存：两个响应头Expires 和 Cache-Control 缓存期间不需要请求
Expires: Wed, 23 Oct 2022 08:41:00 GMT
http 1.0的产物
如果资源超过 Wed, 22 Oct 2018 08:41:00 GMT 这个时间需要再次请求
并且Expires受本地时间限制🚫 如果修改本地时间 会导致缓存失效
Cache-Control： max-age=30
http1.1产物 资源会在30S后失效 需要重新请求 优先级>Expires
协商缓存：如果强缓存过期 会使用协商缓存 /需请求服务器 缓存有效返回304
需要客户端服务端共同实现
1.Last-Modified 和 If-Modified-Since
Last-Modified表示本地最后修改日期，If-Modified-Since会把Last-Modified值发送给服务器，询问在改日期后资源是否更新，如果有更新则返回新资源。但是在本地打开缓存文件，也会导致Last-Modified被修改 所以http1.1出现了Etag
2.Etag 和 If-None-Match
If-None-Match 把Etag发送给服务器 询问资源是否变动 有变动返回新资源 优先级>Last-Modified Etag类似于指纹
大部分场景可以使用强缓存搭配协商缓存
1.对于不需要缓存的 Cache-Control：no-store
2.频繁变动的 Cache-Control：no-store搭配Etag
3.代码文件 Cache-Control：max-age= 搭配策略缓存 对文件进行指纹处理 一旦文件名变动会立刻下载新的
预加载 preload 强制浏览器请求资源 不会阻塞onload
<link rel="preload" href="http://example.com">
- 降低首屏加载时间 不影响首屏但是重要的文件延后加载
- 兼容性不好
预渲染 prerender 预先在后台渲染
<link rel="prerender" href="http://poetries.com">
- 确保用户100%打开网页(否则白白浪费资源) 提高网页加载速度
懒执行/懒加载
懒执行：将逻辑延迟到使用时再计算 可用于首屏优化 定时器/事件调用唤醒
懒加载：不关键的资源延后加载 例如 图片的占位符 图片进入可视区域才将src替换
webpack优化项目
- webpack4开启production 会自动开启代码压缩
- ES6模块开启tree shaking摇树 所谓摇树🌲就是把没有使用的树叶摇下来 可以移除未使用的代码
- 路由拆分 按需加载
- 打包出来的文件名添加哈希 实现浏览器缓存
