前端面试题大合集8----性能优化篇

一、哪些方法可以提升网站前端性能

1、Http请求优化

主要分为减少Http请求次数，减小请求数据量和缓存三方面。

• 减少Http请求次数，可以通过以下方法实现：

合并js、css文件；使用css-spirites技术合并图片；压缩图片大小，避免使用多个域名；

• 减小请求的数据量来降低网络带宽消耗

这样一来，可以提高页面加载速度。实现方式包括：压缩JS、CSS文件；开启gzip压缩响应数据，精简html代码

• 缓存

在浏览器缓存中缓存静态资源则可以减少Http请求次数，提高页面加载速度。可以通过设置Expires头信息；设置Cache-control头信息，使用Etag头信息等方式来实现强缓存或者协商缓存。

2、资源加载请求优化

主要分为异步加载js文件、延迟加载图片、使用CDN三种方法。

• 异步加载js文件

即采用诸如async、defer等方式将JS文件异步加载，避免JS阻塞页面渲染的情况，提高页面加载速度

• 延迟加载图片

避免在页面加载同时请求大量图片，降低网络带宽消耗，提高页面加载速度，期间可以次采用骨架屏等方式来提高用户体验

• 使用CDN

即利用CDN将资源分发到离用户更近的服务器上，提高资源加载速度

3、页面渲染优化

主要包括：减少Dom操作次数、避免table布局、采用Css动画等

• 减少Dom操作次数

可以减轻浏览器的负担，提高页面渲染速度，主要通过缓存Dom元素和一次性对Dom元素进行修改来实现

• 避免table布局

table布局牵一发而动全身，修改一个小标签会使得页面渲染速度变慢，建议使用div+css布局或者flex布局

• 使用CSS动画

代替JavaScript动画。CSS动画可以减少JS操作DOM的次数，提高页面渲染速度。

4、代码优化

主要分为避免使用全局变量、优化重复执行代码两个方面

• 避免使用全局变量。过多的全局变量会占用过多的内存空间，影响页面性能，为此我们使用命名空间避免全局变量污染或者将全局变量封装在闭包中。
• 将重复执行的代码进行优化。将重复执行的代码进行优化可以减少代码运行时间，提高页面渲染速度，通过缓存DOM元素、事件委托等形式都可以实现。

综上所述，前端性能优化是提高用户体验的重要手段，以上共讲述了四点，在日常学习工作中，我们应该根据具体的项目需求选择合适的优化手段，从而提高页面加载速度和渲染速度。

二、减少页面加载时间的方法有哪些

1、优化图片，图片格式的选择，比如说提供的颜色比较少，可用在一些对颜色要求不高的地方的话，推荐格式采用gif格式；

2、优化CSS，压缩合并css的某些属性，比如说margin-left，margin-top，这些可以简写成margin：上 右 下 左；

3、标明宽度和高度，如果浏览器没有找到者两个参数的话，比如说图片，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断的调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好。

4、减少http请求（合并文件，合并图片，采用css-spirit）

5、网址后加斜杠（如www.campr.com/目录，会判断这个这个目录是什么文件类型，方便快速定位到具体的文件）

三、测试代码性能都用哪些工具？

Profiler、JSPerf、Dromaeo

四、简述你知道的web性能优化方法

1、压缩图片和源码

JS通常采用混淆压缩，CSS进行普通压缩，JPG图片根据具体质量压缩到50%-70%，压缩质量太低会导致图片失真，选择合适的质量进行压缩，把PNG图片从24色压缩成8色以去掉一些PNG格式信息等

2、选择合适的图片格式

颜色多，色彩比较丰富的多用JPG格式，采用webp格式或者svg格式的，这两种格式的图片的体积比较小

3、合并静态资源，减少Http请求，把多个css合并为一个css，把图片组合成雪碧图

4、开启服务器端的gzip压缩（对文本资源非常有效）

5、使用cdn，对公开库共享缓存

6、延长静态资源缓存时间

7、把css放在页面头部，把JS代码放在页面底部（这样可以避免阻塞页面渲染而使页面出现长时间的空白）

8、减少Dom节点数量，Dom节点太多会影响页面的渲染，应尽量减少Dom节点数量

9、尽量使用Css3动画，避免通过JS直接操作Dom去实现动画，合理使用requestAanimationFrame动画代替setTimeout，适当使用canvas动画（5个元素以内使用css动画，5个元素以上使用canvas动画，ios8中可以使用webGL）；

10、对于高频触发事件，像是scroll，resize可以导致多次渲染，解决办法如下：

使用requestAanimationFrame监听帧变化，以便在正确的时间进行渲染；

增加响应变化的时间间隔，减少重绘次数。

函数防抖/节流模式，减少触发次数。

五、简述如何对代码进行性能优化

利用性能分析工具监测性能，包括静态Analyze工具和运行时的Profile工具。

一般也会用Chorome浏览器的debugger工具中的performance（性能）去分析程序的运行时间，点击按钮开始，应用程序开始运行，就能获取到整个应用程序所消耗时间的分布和百分比。

为了保证数据分析在同一使用场景下的真实性，一定要使用真机。

六、简述CSS如何优化性能

1、正确使用display属性，display属性会影响页面的渲染，因此要注意以下几方面：

• display：inline后，不应该再使用width、height、margin、padding、float；
• display：inline-block后，不应该再使用float；
• display：block后，不应该再使用vertical-align；
• display：table-*后，不应该再使用margin或者float；

2、不滥用float，不声明过多的font-size，当值为0时不需要单位；

3、高级选择器不容易读懂，执行时间也长；避免让选择符看起来像正则表达式；

4、尽量使用id、class选择器设置样式，避免使用style属性设置行内样式，尽量使用css3动画，减少JS直接操作dom去实现动画；

5、减少重绘和回流。

七、简述Html如何优化性能

1. 对于资源加载，按需加载和异步加载；
2. 首次加载的资源不超过1024kb，即越小越好；
3. 压缩html，css，js文件
4. 减少Dom节点
5. 避免空src，空src在部分浏览器中会导致无效请求
6. 添加favicon.ico，如果没有设置图标，则默认的图标会导致发送一个404或者500请求。

八、简述JavaScript如何优化性能

1. 缓存Dom的选择和计算
2. 尽量使用事件委托模式，避免批量绑定事件
3. 合理使用requestAnimationFrame动画代替 setTimeout
4. 尽量避免在高频事件(例如scroll，resize)中修改视图，这会导致多次渲染。

九、如何优化服务器端的接口

1. 接口合并：如果一个页面需要请求两部分以上的数据接口，则建议合并成一个，以减少Http请求次数；
2. 减少数据量：去掉接口返回的数据中不需要的数据；
3. 缓存数据：首次加载请求后，缓存数据，对于非首次请求，优先使用上次请求的数据，这样可以提升非首次请求的响应速度。