前端提高性能的方式

Posted 2021-01-29 j--l

1、DNS预解析

可以通过预解析的方式来预先获取域名所对应的IP。

2、浏览器缓存

　　强缓存与协商缓存。

　　强缓存表示在缓存期间不需要请求。　

　　如果缓存过期了，我们就可以使用协商缓存来解决问题。协商缓存需要请求，如果缓存有效会返回 304。

协商缓存需要客户端和服务端共同实现。

3、预加载

　　有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载。唯一缺点就是兼容性不好。

4、懒加载

　　懒加载就是将不关键的资源延后加载。

　　懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等等。

5、文件优化

　　图片优化：减少像素点、减少每个像素点能够显示的颜色。

6、CDN 加载

　　静态资源尽量使用 CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie。

7、使用 Webpack 优化项目

　　对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩

　　使用 ES6 模块来开启 tree shaking，这个技术可以移除没有使用的代码

　　优化图片，对于小图可以使用 base64 的方式写入文件中

　　按照路由拆分代码，实现按需加载

　　给打包出来的文件名添加哈希，实现浏览器缓存文件

8、如何渲染几万条数据并不卡住界面

　　可以通过 requestAnimationFrame 来每 16 ms 刷新一次