21道关于性能优化的面试题(附答案)

可以在以下层面优化性能。

• 缓存利用：缓存Ajax，使用CDN、外部 JavaScript和CSS文件缓存，添加 Expires头，在服务器端配置Etag，减少DNS查找等。

• 请求数量：合并样式和脚本，使用CSS图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。

• 请求带宽：压缩文件，开启GZIP 。

• CSS代码：避免使用CSS表达式、高级选择器、通配选择器。

• JavaScript代码：用散列表来优化查找，少用全局变量，用 innerHTML代替DOM操作，减少DOM操作次数，优化 JavaScript性能，用 setTimeout避免页面失去响应，缓存DOM节点查找的结果，避免使用with（with会创建自己的作用域，增加作用域链的长度），多个变量声明合并。

• HTML代码：避免图片和 iFrame等src属性为空。src属性为空，会重新加载当前页面，影响速度和效率，尽量避免在HTML标签中写 Style属性

4、移动端性能如何优化？

优化方式如下。

• 尽量使用CSS3动画，开启硬件加速。

• 适当使用 touch事件代替 click事件。

• 避免使用CSS3渐变阴影效果。

• 可以用 transform:translateZ（0）来开启硬件加速。

• 不滥用 Float, Float在渲染时计算量比较大，尽量少使用。

• 不滥用Web字体，Web字体需要下载、解析、重绘当前页面，尽量少使用。

• 合理使用requestAnimation Frame动画代替 setTimeout。

• 合理使用CSS中的属性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）触发GPU渲染。过度使用会使手机耗电量増加。

5、如何对网站的文件进行优化？

可以进行文件合并、文件压缩使文件最小化；可以使用CDN托管文件，让用户更快速地访问；可以使用多个域名来缓存静态文件。

6、请说出几种缩短页面加载时间的方法。

具体方法如下。

（1）优化图片

（2）选择图像存储格式（比如，GIF提供的颜色较少，可用在一些对颜色要求不高的地方）

（3）优化CSS（压缩、合并CSS）

（4）在网址后加斜杠

（5）为图片标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小。如果图片很多，浏览器需要不断地调整页面。这不但影响速度，而且影响浏览体验。当浏览器知道高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容，从而优化加载时间，提升浏览体验）。

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