前端提高性能的方式

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 刷新一次

posted @   JJLB  阅读(287)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
点击右上角即可分享
微信分享提示