2021年最新面试题2-前端性能优化相关问题

2021年最新面试题2

1. 前端性能优化方法
   减少代码间的耦合，让代码保持弹性。严格按规范编写代码。
   压缩 JavaScript、CSS、 image等前端资源（通常由服务器来解决）
   采用CDN来加速资源加载。
   图片懒加载，可以为页面添加一个滚动条事件
   如果为幻灯片、相册文件等，图片预加载技术
   图片为CSS图片，可以使用 CSS Sprite、SVG sprite、 Icon font、Base64等技术
   1，缓存利用：缓存Ajax，使用CDN、外部 JavaScript和CSS文件缓存，添加 Expires头，在服务器端配置Etag，减少DNS查找等。
   2，请求数量：合并样式和脚本，使用CSS图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
   3，请求带宽：压缩文件，开启GZIP 。
   4，CSS代码：避免使用CSS表达式、高级选择器、通配选择器。
   5，JavaScript代码：用散列表来优化查找，少用全局变量，用 innerHTML代替DOM操作，减少DOM操作次数，优化 JavaScript性能，用 setTimeout避免页面失去响应，缓存DOM节点查找的结果，避免使用with（with会创建自己的作用域，增加作用域链的长度），多个变量声明合并。
   6，HTML代码：避免图片和 iFrame等src属性为空。src属性为空，会重新加载当前页面，影响速度和效率，尽量避免在HTML标签中写 Style属性

精灵图合并，减少HTTP请求；压缩HTML、CSS、JavaScript文件；使用CDN托管静态文件；使用 localstorage缓存和 mainfest应用缓存。

3. 性能优化后如何去检测
   吞吐量（TPS, QPS）：简单来说就是每秒钟完成的事务数或者查询数。通常吞吐量大表明系统单位时间能处理的请求数越多，所以通常希望TPS越高越好
   响应时间：即从请求发出去到收到系统返回的时间。响应时间一般不取平均值，而是要去掉不稳定的值之后再取均值，比如常用的90%响应时间，指的就是去掉了10%不稳定的响应时间之后，剩下90%的稳定的响应时间的均值。从聚类的观点看，其实就是去掉离群点。
   错误率：即错误请求数与总请求数之比。随着压力增加，有可能出现处理请求处理不过来的情况，这时错误数会不断增加。

4. 如何处理兼容性问题，除了用babel以外，如何去处理一些babel无法处理的兼容性问题

5. 线上的问题如何解决，介绍一下控制台条件断点

6. 发现的问题如何排查，是否了解过线上错误日志上报？加载线上错误日志对这种问题比较容易复现

7. 如何查找各个函数的调用时间

8. 使用谷歌控制台 performance 性能分析工具
   选中Performance。我们可以看到如上界面。
   表示绘制火焰图，可实时绘制一段时间当前页面时间轴的性能轨迹，然后生成一张图表（这个在后面详细讲）
   表示网速控制，可选3G快、3G慢、或者自定义网速
   表示是否对CPU进行减速，可选4倍减速、6倍减速，可用来测试CPU在极端环境下对页面性能的影响

9. 说一下网站性能优化的思路
   代码层面： 避免使用 css 表达式，避免使用 高级选择器，通配选择器。
   缓存利用： 缓存 ajax， 使用 CDN ，使用外部 js 和css 文件一遍缓存，添加Expires 头，服务端配置 ETag 减少 DNS 查找等
   请求数量： 合并样式和脚本，使用css 图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
   请求带宽： 压缩文件，开启 Gzpi

10. 页面渲染慢可能是什么问题