标签
前端/性能优化
字数
455 字
阅读时间
2 分钟
序言
- 从输入 URL 到页面加载完成，发生了什么？
- DNS 解析域名找到 ip 地址
- 与 ip 地址对应的服务器建立 TCP 连接
- 向服务器抛出 HTTP 请求
- 服务端处理请求，HTTP 响应返回
- 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户
HTTP 优化 （资源压缩与合并）
- 减少请求次数
- 减少单次请求的响应时间
webpack 优化方案
构建过程中优化
- 不要让 loader 做太多事情 在 loader 配置时通过写入 exclude 去避免 babel-loader 对不必要的文件的处理
- 用 DllPlugin 处理文件
- 基于 dll 专属的配置文件，打包 dll 库
- 基于 webpack. config. js 文件，打包业务代码
- Happypack——将 loader 由单进程转为多进程
构建结果体积压缩
- tree-shaking 删除冗余代码
- UglifyJsPlugin 去除 console 、注释等
开启 GZIP
文件大小可压缩 70%
图片处理
JPG/JPEG
有损压缩、体积小、加载快、不支持透明 常用于banner，背景图，大轮播图
PNG
无损压缩、质量高、体积大、支持透明 常用于小logo，小的高对比度的图片
SVG
文本文件、体积小、不失真、兼容性好，渲染成本高
Base64
文本文件、依赖编码、小图标解决方案 ，减少HTTP请求次数。----雪碧图
WebP 格式
是 Google 专为 Web开发的一种旨在加快图片加载速度的图片格式，它支持有损压缩和无损压缩。 兼容性不好。
AVIF
进阶版WebP