【校招VIP】前端浏览器之性能和加载优化

考点介绍：

随着前端项目不断扩大，浏览器渲染的压力变得越来越重。配置好一点的计算机可以顺利地展现页面；配置低一些的计算机渲染页面的性能就不那么可观了。性能优化部分的面试题主要考察应试者对网站性能优化的了解。如何做好性能优化，哪些操作会引起性能优化的问题，性能优化指标是什么等，都值得应试者关注。因为性能优化变得越来越重要，所以很多企业专门建立团队去做性能优化。

本期分享的前端浏览器之性能和加载优化，分为试题、文章以及视频三部分。

答案详情解析和文章内容可扫下方二维码或链接即可查看！

一、考点题目

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

解答：

网站重构是指在不改变外部行为的前提下，简化结构、添加可读性，且在网站前端保持一致的行为。也就是说，在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
对于传统的网站来说，重构通常包括以下方面
1.把表格（ table）布局改为DV+CSS。
2.使网站前端兼容现代浏览器。
3.对移动平台进行优化。
4.针对搜索引擎进行优化。

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

解答：

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

3、谈谈性能优化问题。

解答：可以在以下层面优化性能。
1.缓存利用：缓存Ajax，使用CDN、外部 JavaScript和CSS文件缓存，添加 Expires头，在服务器端配置Etag，减少DNS查找等。
2.请求数量：合并样式和脚本，使用CSS图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。

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

解答：

优化方式如下。

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

2.适当使用 touch事件代替 click事件。

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

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

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

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

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

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

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

解答：具体方法如下。

1.优化图片

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

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

4.在网址后加斜杠

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

（答案点​击下方链接或者扫海报二维码查看哦）

二、考点文章

1、浏览器性能优化-JS篇

众所周知，JS的加载和执行会阻塞浏览器渲染，所以目前业界普遍推荐把script放到之前，以解决js执行时找不到dom等问题。但随着现代浏览器的普及，浏览器为我们提供了更多强大的武器，合理利用，方可大幅提高页面加载速度。

2、如何系统地进行前端性能优化【加载篇】

加载优化分两种情况，一种是新用户第一次打开我们页面，这里面临的挑战是各种缓存都无法起作用，怎么保证将加载速度控制在用户可以接受的范围，提升转化率。第二种情况是老用户，这里我们的优势为能用上各种缓存，挑战是如何把性能做到极致，实现低代价更新，提升用户留存率

3、前端性能优化之预加载

性能优化是老生常谈的问题了，很多同学都直呼，什么性能优化，我都是脚手架一把梭。其实在脚手架中已经使用了很多手段进行了性能优化，例如：代码压缩、代码分割、树摇、样式抽离等。可能你的脚手架已经帮你实现了，只是你没有发现。下面来介绍一下什么是预加载。

（扫下方海报二维码查看完整版）

三、考点视频

1、从浏览器输入URL到展示页面的全流程是怎么样的

本题目可以理解为从本地终端（如手机、电脑）访问一个网站，怎么处理请求并且加载出数据的。实际上考察的是计算机网络TCP/IP协议栈。

主要的得分项为TCP协议各层的描述、数据传送的封装和解包、一次页面包含多个TCP连接，另外还有一个加分项，能不能考虑到浏览器缓存的情况。​​​​​​​