一道常见的前端面试题
从输入URL到页面加载完成，发生了什么
过程解答：
- 通过DNS（域名解析系统）将URL解析为对应的IP地址
- 与解析后的IP地址确定的服务器建立TCP网络连接
- 向服务器抛出HTTP请求
- 服务器处理请求，HTTP返回响应
- 浏览器拿到响应数据，解析响应内容，将解析后的内容渲染出来
前端优化的核心想法就是在以上5个步骤反复打磨出最适合的性能优化方案
webpack 性能调优与Gzip原理
webpack的性能瓶颈
- webpack的构建过程耗时长
- 打包结果体积大
优化方案
构建过程提速策略
减少loader需要做的事情
-
通过用include或exclude避免不必要的工作
-
根据需要开启缓存将转移结果缓存起来，以提升loader的工作效率
第三方库
Externals某些情况下会引发重复打包的问题
CommonsChunkPlugin每次构建时都会重新构建一次vendor
推荐使用DllPlugin处理第三方库，这个插件会把第三方库单独打包到一个文件中，这个文件就是一个单纯的依赖库。这个依赖库不会跟着业务代码一起重新打包，只有当依赖自身发生版本变化是才会重新打包
DllPlugin处理文件：
- 基于dll专属的配置文件，打包dll库
- 基于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格式
学自：前端性能优化与实践