前端性能优化学习笔记——网络篇

一道常见的前端面试题

从输入URL到页面加载完成，发生了什么

过程解答：

1. 通过DNS（域名解析系统）将URL解析为对应的IP地址
2. 与解析后的IP地址确定的服务器建立TCP网络连接
3. 向服务器抛出HTTP请求
4. 服务器处理请求，HTTP返回响应
5. 浏览器拿到响应数据，解析响应内容，将解析后的内容渲染出来

前端优化的核心想法就是在以上5个步骤反复打磨出最适合的性能优化方案

webpack 性能调优与Gzip原理

webpack的性能瓶颈

1. webpack的构建过程耗时长
2. 打包结果体积大

优化方案

构建过程提速策略

减少loader需要做的事情

1. 通过用include或exclude避免不必要的工作

2. 根据需要开启缓存将转移结果缓存起来，以提升loader的工作效率

   第三方库

Externals某些情况下会引发重复打包的问题

CommonsChunkPlugin每次构建时都会重新构建一次vendor

推荐使用DllPlugin处理第三方库，这个插件会把第三方库单独打包到一个文件中，这个文件就是一个单纯的依赖库。这个依赖库不会跟着业务代码一起重新打包，只有当依赖自身发生版本变化是才会重新打包

DllPlugin处理文件：

1. 基于dll专属的配置文件，打包dll库
2. 基于webpack.config.js文件，打包业务代码

图片优化与图片格式选择

JPEG/JPG

关键字： 有损压缩、体积小、加载快、不支持透明

使用场景： 不影响图片质量的大图，类似轮播图等线条感较弱，颜色对比不明显的无需透明背景的非矢量图形

PNG-8与PNG-24

关键字：无损压缩、质量高、体积大、支持透明

8与24的区别： 8位最多支持256种颜色。24位支持1600万种颜色

使用场景：小的Logo、颜色简单对比强烈的图片或背景

SVG

关键字：文本文件、体积小、不失真、兼容性好

SVG与PNG和JPG相比，文件体积更小，可压缩性更强，图片无限放大不失真，作为文本文件支持定制修改该具有较强的灵活性

使用场景： 将SVG写入独立文件后引入HTML，引用后缀名为.svg的文件

Base64

关键字：文本文件、依赖编码、小图标解决方案

Base64是一种用于传输8Bit字节码的编码方式，通过对图片进行Base64编码，可以直接将编码结果写入HTML或者CSS，减少HTTP请求的次数

但是将图片进行Base64编码时图片大小会膨胀，会明显增加图片体积得不偿失

满足Base64编码的图片：

• 图片的实际尺寸很小
• 图片无法以雪碧图的形式与其他小图结合
• 图片的更新频率非常低

Base64编码工具： webpack的 url-loader ，

WebP

Google开发的旨在加快图片加载速度的图片格式，支持有损压缩和无损压缩，既有JPG的优点，又像PNG一样支持透明，也可以像GIF一样显示动图

但是WebP最为新兴格式存在兼容问题，同时会增加服务器的负担，相比于JPG编码同样质量的WebP文件会占用更多的计算资源

常见的WebP的兼容性写法

<img src="//img.alicdn.com/tps/i4/TB1CKSgIpXXXXccXXXX07tlTXXX-200-200.png_60x60.jpg_.webp" alt="手机app - 聚划算" class="app-icon">

解析：站点会先进行兼容性判断，支持WebP 的浏览器会优先使用WebP格式，否则会把图片降级为jpg格式

学自：前端性能优化与实践