前端面试指南-性能优化

☞恰巧喜欢☜

已于 2024-10-24 09:53:12 修改

阅读量764

点赞数 22

CC 4.0 BY-SA版权

文章标签： 1024程序员节

于 2024-10-24 09:51:28 首次发布

本文链接：https://blog.csdn.net/qq_63534905/article/details/143200939

1、谈谈你对重构的理解。

网站重构是指在不改变外部行为的前提下，简化结构、添加可读性，且在网站前端保持一致的行为。也就是说，在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的 UI。对于传统的网站来说，重构通常包括以下方面。

如果一个页面上有大量的图片（大型电商网站），网页加载很慢，可以用哪些方法优化这些图片的加载，从而提升用户体验？

对于图片懒加载，可以为页面添加一个滚动条事件，判断图片是否在可视区域内或者即将进入可视区域，优先加载。如果为幻灯片、相册文件等，可以使用图片预加载技术，对于当前展示图片的前一张图片和后一张图片优先下载。如果图片为CSS图片，可以使用 CSS Sprite、SVG sprite、 Icon font、Base64等技术。如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩得特别小的缩略图，以提高用户体验。如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后，图片大小与展示的就一致了。

2、谈谈性能优化问题。

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

缓存利用：缓存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属性

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

尽量使用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渲染。过度使用会使手机耗电量増加。

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

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

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

具体方法如下。

（1）优化图片

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

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

（4）在网址后加斜杠

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