【面试题】前端性能优化

参考文章:
前端性能优化 24 条建议
前端必会！四步带你吃透浏览器渲染基本原理
大公司里怎样开发和部署前端代码？
前端性能优化的七大手段
和面试官吹嘘一下我的Vue项目性能优化

优化原理

1、网络：
请求次数：合并文件（抽取公共库），@import会增加请求次数、减少重定向、雪碧图与base64
文件大小：各种静态资源（三剑客和流数据）压缩、gzip、webp、去除空格consolelog注释并混乱变量、轻量的文件类型比如iconfont代替图
缓存：协商缓存、强缓存、CDN缓存、DNS缓存，浏览器预读取（阅读模式？）
连接：长连接（http1.1）、并行连接（http1.1 最大并行6）、多路复用（http2）
2、渲染：
异步下载：script的defer（html解析后执行）和async、防抖与节流（尤其是滚动条）、防止重绘与重排、css头js尾（如果是布局相关的js也要放在头）
按需加载：懒加载、webpack按需加载
服务端渲染
vue的v-if和v-show
3、机器资源：
首屏、白屏时间
内存：减少闭包、垃圾回收、事件代理
CPU：选择器、CSS动画
4、工程化（打包）
打包公共代码
剔除无用代码：tree shaking
公用代码内联至index.html

一、输入url到页面呈现的过程

解析URL
浏览器本地缓存
DNS解析
建立TCP/IP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器根据深度遍历的方式把html节点遍历构建DOM树
遇到CSS外链，异步加载解析CSS，构建CSS规则树
遇到script标签，如果是普通JS标签则同步加载并执行，阻塞页面渲染，如果标签上有defer / async属性则异步加载JS资源
将dom树和CSS DOM树构造成render树
渲染render树

1、域名解析及请求
用户输入浏览器后，浏览器核心会将url进行拆分解析。会把domain（域名，比如www.alibaba.com）发送给DNS服务器，DNS服务器会根据domain查询到对应的ip，然后将ip返回给浏览器。浏览器拿到ip后，将ip放到协议中，携带请求相关参数发送到网络中，经过局域网、交换机、路由器、主干网络，最终发送到服务端。服务端拿到数据后会返回响应。
2、浏览器解析文档
浏览器拿到响应后，会进行如下操作：

DOM：浏览器解析html，生成DOM树
CSSOM：浏览器解析css规则（css文件和标签中的style），形成CSSOM树
Render：通过DOM和CSSOM合成Render树
Layout：计算出Render树的节点具体位置，进行布局
Painting：通过显卡GPU绘制Layout
Reflow、repaint
以上步骤是一个渐进的过程，为了提高用户体验，渲染引擎试图尽可能快的把结果显示给最终用户。它不会等到所有HTML都被解析完才创建并布局渲染树

二、屏幕刷新率

大多数设备的刷新频率是60Hz，也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验

优化思路:

1、网络方面：Dns缓存、减少http请求、减小http请求大小、浏览器端缓存、CDN。
2、文件方面：源代码、图片、多媒体数据。
3、异步加载：script标签async和defer、懒加载、服务端渲染等等
4、代码层面：CSS、JS编程风格

具体优化

一、网络方面

建议学习：半个小时搞懂HTTP、HTTPS、HTTP2