面试之如何进行前端性能优化？各位面试官快来打分！

面试官：如何进行性能优化？说说项目里是怎么进行优化的？渲染层面是怎么优化的？怎么提高页面访问速度？webpack/vite如何配置的？。。。
你对这些问题是否感到熟悉又陌生？你可能会不假思索的说出如下方案：
减少http请求数量
压缩代码
使用缓存
按需加载
路由懒加载
。。。
大多写性能优化方案的文章都是这么总结的，只要做到死记硬背也能记个八九不离十，但是一到面试时是否总会遇到有几条记不住，或者磕磕绊绊东一句西一句，有的文章会根据加载时和运行时分类，但还是太笼统，到最后记的很混乱（其实还是记得不熟哈哈），而且面试时只是抛出这几个点也太简洁了。
总结：死记硬背只是知其然，要嘴巴说出来还得知其所以然。
那么如何回复这种问题？怎么把脑子里的东西串成一串儿自然的流露出来呢？
一切还得从浏览器说起，首先作为一个“专业”的前端开发，浏览器加载页面的一系列步骤肯定要知道：
输入url–>查资源缓存–>http连接–>发起请求–>服务端响应–>浏览器解析html并加载静态资源–>页面渲染
所谓性能优化，目的就是让页面出来更快，而以上的每一步都是影响速度的绊脚石，那么我们要做的就是让每一步的影响变的更小。
第一步：url解析
浏览器拿到了url之后，首先要解析域名，找到要访问的IP，浏览器也很“聪明”，在家里能拿到的信息肯定比去外面(网络)找来的快，所以会先本地找缓存，没有的话再去网络里找，这一步我们可以介入的部分不多，毕竟不能要求用户把网站IP给写死在本地呀。
第二步：查资源缓存
这就是熟悉的浏览器强缓存，协商缓存啦，对要请求的静态资源如css，js，图片等，浏览器会优先查找缓存，没有则请求服务器。那在这里我们能做的优化便是告诉浏览器缓存静态资源，具体就是Cache-control，etag，lastmodified等请求头的事了。
第三步：http连接
创建连接需要经过tcp三次握手，这是耗时的点之一，虽然http1.1长连接让多个请求复用同一连接，但是服务端确要按照顺序一个个响应，如果某个请求阻塞了，那么后面的都得等着。针对这点，http2的多路复用可以缓解这个问题，最新的http3更是彻底解决了阻塞问题。http2的服务端推送也优化了静态资源加载。
第四步：浏览器发起请求
对于同一域名，浏览器发起请求数量是有限制的。所以我们可以尽量减少请求数量，具体怎么减少？小图片合并，文件合并，能合并的合并，该压缩的压缩；使用CDN存放静态资源，解决单一域名限制。
第五步：服务器响应
服务器响应的速度有两点：网络和文件大小。网络我们控制不了，文件大小还是可以缩小的。开启Gzip，打包的时候使用插件来压缩文件，公共文件提取，js提取，css提取，尽可能拆分文件更小，当然也要考虑请求数量的问题，不能过分小。这块就涉及具体打包配置啦。
第六步：浏览器解析html请求静态资源
浏览器拿到html，之后便是请求静态资源，浏览器是单线程，执行js文件的时候就没空去加载别的了，所以script脚本尽量放在最后加载，而且js里不要频繁操作dom，否则会触发浏览器重排重绘。怎么减少重排重绘？具体方案网络找找啦。
第七步：渲染页面
到上一步就基本结束了，接下来就进入Vue/React构建页面流程了，在这里就是代码方面的优化了，比如路由懒加载，es6模块化，提取公共组件，keep-alive缓存页面，组件添加key值优化dom更新等等，总之就是让框架更快的渲染页面。

了解了上面的流程，脑海里记录的优化手段是不是系统串起来了呢？上面的每一个步骤都能扩展出很多知识点，也为后面的问题留出了空间，面试时尽量往自己熟悉的点引导，可别自己带坑里了。

各位面试官，看到这样的回答您会给几分呢？请评论留下您的建议吧！

如果这篇文章对你有帮助，请留下你的指印吧！欢迎大家评论提出建议！