前端性能优化

丑小鹈鹕

已于 2023-04-10 16:38:15 修改

阅读量38

点赞数

分类专栏：前端文章标签：前端 javascript 开发语言性能优化

于 2023-03-31 14:30:12 首次发布

本文链接：https://blog.csdn.net/littlepelican/article/details/129879446

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章探讨了如何优化网页性能，包括懒加载和预加载技术，如图片的延迟加载和列表的分片渲染。同时，介绍了HTTP缓存机制，如强缓存和协商缓存，以及代码结构优化，如CSS放在头部，JS放在底部，和JavaScript的压缩与优化策略，如防抖和节流。此外，提到了图片压缩方法，如base64编码和WebP格式。

摘要由CSDN通过智能技术生成

资源加载（减少http请求数）

懒加载

图片

视图外的图片不加载，图片进入可视范围后再加载
- 原理：图片初始化时，显示默认静态图片（src属性），图片进入可视范围后，将src替换为图片真实url地址
- 实现：
  - 元素距页面顶端的位置 < 浏览器窗口大小 + 网页上方的滚动高度
    el.offsetTop < el.clientHeight + document.documentElement.scrollTop
  - 元素的顶部在视口范围内
    getBoundingClientRect()
  - 元素和视口范围有交叉
    intersectionObserve()
组件

js模块：动态import

预加载

预先加载后续内容

列表渲染

分片渲染
- 时间分片
- 分页渲染
虚拟列表
- 只加载可视范围的列表，计算当前数据首尾索引，只渲染这些数据，其余的数据删除

图片压缩

base64

将较小的图片以base64格式内嵌到html中

webpack url-loader配置
WebP

google推出的图片格式，能压缩图片大小
SVG
缩略图

列表展示图片时使用缩略图
精灵图

多张图片合并为一张大图，使用background-pisition设置图片位置

HTTP缓存

强缓存

缓存过期前，强制使用缓存数据，不发送新请求

响应头中设置：
- Cache-Control: max-age = <second>
  
  资源过期秒数
- Expries: <Time>
  
  资源过期时间戳
协商缓存

缓存过期后，和服务器协商确认数据是否要更新

响应头中设置：
- Last-Modify: <Time>
  
  资源最后被修改的时间戳
- If-Modified-Since: <Time>
  
  资源过期后，向服务器发送请求，询问“该时间戳后该资源是否有被更改”
  
  服务端比对If-Modified-Since与服务器中该资源的最后修改时间
  
  无修改：返回304
  
  修改：返回200 + 最新数据
- ETag
  
  可以为hash值或版本号
- If-None-Match