前端性能优化方式

最新推荐文章于 2024-09-01 13:33:34 发布

千山万水找到你

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量66

点赞数

文章标签：前端 webpack node.js

本文链接：https://blog.csdn.net/weixin_40247192/article/details/130883413

版权

懒加载：懒加载为按需加载，针对于长页面来说，一个长页面使用到的图片很多，若加载所有的图片但客户仅能看到可视区域的图片，则会很大程度上影响页面响应时间以及客户体验性。；在加载长页面时，仅加载用户可视区域的内容，随着客户滚动屏幕再去加载其他内容，加快页面显示速度及减少服务器的负载，适用图片较多列表较长的部分；图片加载时，当赋值src时会请求图片资源，因此当为以下时，执行图片加载。
```
img.offsetTop < document.body.scrolltop + window.innerHeight
```
图片优化：对图片进行压缩、选择正确的图片格式、使用懒加载等方式来减少页面加载时间。
动画优化：将动画的position属性设置为absolute或fixed,将动画脱离文档流，减少直接操作DOM树
避免回流和重绘：
使用防抖和节流
渲染优化：减少直接dom操作，使用css3动画代替js实现动画效果，将脚本放在页面底部来加快渲染
CDN（内容分发网络）加速：加速页面资源的加载，减少请求延迟和网络瓶颈
缓存优化：利用 HTTP 缓存策略（如 cache-control 和 expires ）来减少 HTTP 请求，加速页面的加载速度。
性能监控：使用性能监控工具，例如 Google Analytics、WebPagetest和PageSpeed Insights 等，得到页面的性能数据，以此为依据进行优化。
使用webpack来优化前端性能

关注