- 懒加载:懒加载为按需加载,针对于长页面来说,一个长页面使用到的图片很多,若加载所有的图片但客户仅能看到可视区域的图片,则会很大程度上影响页面响应时间以及客户体验性。;在加载长页面时,仅加载用户可视区域的内容,随着客户滚动屏幕再去加载其他内容,加快页面显示速度及减少服务器的负载,适用图片较多列表较长的部分;图片加载时,当赋值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来优化前端性能
前端性能优化方式
最新推荐文章于 2024-09-01 13:33:34 发布