大厂前端面试题总结（性能优化篇）

Bertha 。 2023-02-28 15:15 44阅读 0赞

> 点击标题可上下切换内容呦！  
> 资料收集整理不易，如果客官看得进去，请小小的`点个赞`支持下，谢谢！

## 系列文章 ##

*  [大厂前端面试题总结（CSS篇）][CSS]
 *  [大厂前端面试题总结（ES6篇）][ES6]
 *  [大厂前端面试题总结（浏览器篇）][Link 1]
 *  [大厂前端面试题总结（Web安全篇）][Web]
 *  [大厂前端面试题总结（JS手写篇）][JS]
 *  [大厂前端面试题总结（JS理论篇）][JS 1]
 *  [大厂前端面试题总结（Vue篇）][Vue]

## 性能优化 ##

**一、性能评测标准**  
**二、前端性能优化手段**  
**三、SPA应用的首屏加载速度慢优化**  
**四、伪静态的作用**

### 一、性能评测六项标准 ###

*  **首次内容绘制时间**：标记了渲染出首个文本或首张图片的时间；
 *  **首次有效绘制时间**：测量了网页主要内容开始对用户显示的时间；
 *  **速度指数**：表明了网页内容的可见填充速度；
 *  **首次CPU闲置时间**：标记了网页的主线程首次有空处理输入操作的时间；
 *  **可交互前的耗时**：指网页需要多长时间才能提供完整交互功能；
 *  **首次输入延迟最长预估值**：衡量用户首次与您的网站进行交互（即当他们单击链接，点击按钮或使用自定义的JavaScript驱动的控件）到浏览器实际上能够响应该交互之间的时间。

[参看链接][Link 2]  
[评测网站-谷歌测速网][-]

### 二、前端性能优化手段 ###

web前端是应用服务器处理之前的部分，前端主要包括：`HTML,CSS,javascript,image等各种资源，针对不同的资源有不同的优化方式。`  
**1. 内容优化**  
(1)减少HTTP请求数：这条策略是**最重要最有效**的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。

> 常见方法：合并多个CSS文件和js文件，利用CSS Sprites整合图像，Inline Images(使用 data：URL scheme在实际的页面嵌入图像数据 )，合理设置HTTP缓存等。

(2)减少DNS查找  
(3)避免重定向  
(4)使用Ajax缓存  
(5)延迟加载组件，预加载组件  
(6)减少DOM元素数量：页面中存在大量DOM元素，会导致javascript遍历DOM的效率变慢。  
(7)最小化iframe的数量：iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。  
(8)避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

**2. 服务器优化**  
(1)使用内容分发网络（CDN）：把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。  
(2)GZIP压缩  
(3)设置ETag：ETags（Entity tags，实体标签）是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。  
(4)提前刷新缓冲区  
(5)对Ajax请求使用GET方法  
(6)避免空的图像src

**3. Cookie优化**  
(1)减小Cookie大小  
(2)针对Web组件使用域名无关的Cookie

**4. CSS优化**  
(1)将CSS代码放在HTML页面的顶部  
(2)避免使用CSS表达式  
(3)使用<link>来代替@import  
(4)避免使用Filters

**5. javascript优化**  
(1)将JavaScript脚本放在页面的底部。  
(2)将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。  
(3)缩小JavaScript和CSS  
(4)删除重复的脚本  
(5)最小化DOM的访问：使用JavaScript访问DOM元素比较慢。  
(6)开发智能的事件处理程序  
(7)javascript代码注意：谨慎使用with,避免使用eval Function函数,减少作用域链查找。

**6. 图像优化**  
(1)优化图片大小  
(2)通过CSS Sprites优化图片  
(3)不要在HTML中使用缩放图片  
(4)favicon.ico要小而且可缓存

[原文链接][Link 3]

### 三、SPA应用的首屏加载速度慢优化 ###

**SPA（single page web application）：单页面应用。** 第一次进入页面时会请求一个html文件，刷新清除一下，切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容却变化了。

**原理：** js会感知到url的变化，通过这一点可以用js动态地将当前页面的内容清除，然后将下一个页面的内容挂载到当前页面上。这个时候的路由不再是后端来做了，而是前端来做，判断页面显示相应的组件，清除不需要的。

页面跳转： js渲染
    优点： 页面切换快
    缺点： 首屏时间稍慢，SEO差

**优化方案：**

*  将公用的JS库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度；
 *  在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel的体积，在调用某个组件时再加载对应的js文件；
 *  加一个首屏loading图，提升用户体验

[参考链接][Link 4]

### 四、伪静态的作用 ###

伪静态是相对真实静态来讲的，通常我们为了增强搜索引擎的友好面，都将文章内容生成静态页面，但是有的朋友为了实时的显示一些信息。或者还想运用动态脚本解决一些问题。不能用静态的方式来展示网站内容。但是这就损失了对搜索引擎的友好面。怎么样在两者之间找个中间方法呢，这就产生了伪静态技术。就是展示出来的是以html一类的静态页面形式，但其实是用ASP一类的动态脚本来处理的。

*  从URL结构以及页面名称看，伪静态和静态页面是一样的。伪静态的页面后缀可以是`html`、`htm`或者是目录格式
 *  伪静态只是改变了URL的表现形式，实际上还是动态页面
 *  静态页面可以节省服务器资源，而伪静态严格说是增加服务器资源消耗的

总结，在SEO方面，伪静态和静态页面的功能是相同的，但是伪静态本质上还是动态页面，所以消耗资源是和动态页面一样的，而且因为Rewrite服务器还需要消耗额外的资源。

[原文链接][Link 5]

[CSS]: https://blog.csdn.net/qq_37820580/article/details/107289944
[ES6]: https://blog.csdn.net/qq_37820580/article/details/107503676
[Link 1]: https://blog.csdn.net/qq_37820580/article/details/107556093
[Web]: https://blog.csdn.net/qq_37820580/article/details/107658086
[JS]: https://blog.csdn.net/qq_37820580/article/details/107809181
[JS 1]: https://blog.csdn.net/qq_37820580/article/details/107358309
[Vue]: https://blog.csdn.net/qq_37820580/article/details/113549411
[Link 2]: https://www.leadong.com/id3294593.html
[-]: https://www.googlespeed.cn/
[Link 3]: https://www.cnblogs.com/bobo-site/p/9317930.html
[Link 4]: https://www.jianshu.com/p/a02eb15d2d70
[Link 5]: https://zhidao.baidu.com/question/492657455729897772.html