中级前端工程师面试

电玩女神 2022-10-23 08:07 175阅读 0赞

你对页面进行性能优化的思路和思想是什么？

[https://zhuanlan.zhihu.com/p/25701897][https_zhuanlan.zhihu.com_p_25701897]  
  
**页面生成过程**

网页的生成过程，大致可以分成五步。

1.  HTML代码转化成DOM
2.  CSS代码转换成CSSOM
3.  结合CSSOM和DOM，生成一棵渲染树（包含每个节点的视觉信息）
4.  生成布局（layout),即将所有渲染树所有节点进行平面合成
5.  将布局绘制（paint)在屏幕上

这五步里面，第一步到第三步都非常快，耗时的是第四步和第五步。

**"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70][]

> 1.HTML代码转化为DOM

[https://www.cnblogs.com/xuanhun/p/9499348.html][https_www.cnblogs.com_xuanhun_p_9499348.html]

动态创建Node的3种方法

1.  innerHTML
2.  DOMParser
3.  DocumentFlagment

> 2.CSS代码转化成CSSOM

首先，我们先了解CSSOM是什么

CSSOM（CSS Object Model）：CSS对象模型

*  CSSOM是一个建立在web页面上的CSS样式映射
 *  浏览器将DOM和CSSOM结合来渲染web页面
 *  CSSOM将样式表中的规则映射到页面对应的元素上

Web浏览器使用CSSOM去渲染页面

Web浏览器展示页面的4个步骤：

1.  检查HTML并构建DOM
2.  检查CSS并构建CSSOM
3.  Web浏览器将DOM和CSSOM结合，并构建出render tree
4.  展示Web页面

window.outerWidth,outerHeight:整个浏览器的大小

window.innerWidth,innerHeight:浏览器页面中可视区的大小，不包括：菜单栏，工具栏，调试器

window.pageXOffset,pageYOffset:页面滚动中水平方向和垂直方向的距离

window.screenX,screenY:浏览器窗口在显示器中的位置，screenX表示水平位置，screenY表示垂直位置

window.screenLeft,screenTop

sreen对象：

screen.width,height显示器的宽度，高度

screen.availWidth,availHeight 显示器可用宽度，高度

screen.colorDepth:显示器的颜色深度

[https://www.jianshu.com/p/7c3e2493c7a7][https_www.jianshu.com_p_7c3e2493c7a7]

[https://blog.csdn.net/lu92649264/article/details/114572451][https_blog.csdn.net_lu92649264_article_details_114572451]

> 3.结合DOM和CSSOM，生成一棵渲染树

当DOM树和CSSOM树都构建完之后，浏览器根据这两个树构建一棵渲染树

> 4.生成布局（layout），即将所有渲染树的所有节点进行平面合成

渲染树构建完成以后，浏览器计算所有元素大小和绝对位置

> 5.将布局绘制（paint）在屏幕上

[https://blog.csdn.net/qq\_41635167/article/details/83932920][https_blog.csdn.net_qq_41635167_article_details_83932920]

布局计算完成后，浏览器在页面渲染元素。经过渲染引擎处理后，整个页面就显示出来

> 6.减少 HTTP 请求（合并 CSS/JS，小于 10k 的图片 base64）

为什么？

就是要给服务器减轻压力

尽量减少HTTP请求数里的减少图片请求数量 。

为什么？

我们都知道，一个网站的一个页面可能有很多小图标，例如一些按钮、箭头等等。当加载html文档时，只要遇到有图片的，都会自动建立起HTTP请求下载，然后将图片下载到页面上，这些小图片可能也就是十几K大甚至1K都不到，假如我们的一个页面有一百个小图标，我们在加载页面时，就要发送100个HTTP请求，如果你的网站访问量很大并发量也很高，假如上百万访问量，那发起的请求就是千万级别了，服务器是有一定的压力的，并且一个用户的一个页面要发起那么多请求，是很耗时的。

解决办法：我们优化的方案就是：将这些十几K、几K的小图标合并在一张图片里，然后用CSS的`background-image`和`background-position`属性来定位要显示的部分。

[https://blog.csdn.net/qq\_36663951/article/details/78320597][https_blog.csdn.net_qq_36663951_article_details_78320597]

> 7.减少 DOM 操作（可使用 DocumentFragment）

[https://www.cnblogs.com/lyt0207/p/13998058.html][https_www.cnblogs.com_lyt0207_p_13998058.html]

> 8.避免不必要的重绘与重排（重排必定导致重绘）

[https://blog.csdn.net/chenjuan1993/article/details/82020024][https_blog.csdn.net_chenjuan1993_article_details_82020024]

[https://www.cnblogs.com/wpshan/p/9268194.html][https_www.cnblogs.com_wpshan_p_9268194.html]

一个页面由两部分组成：

DOM:描述该页面解构

render:描述节点在页面上如何呈现

当DOM元素的属性发生关系时（如color),浏览器会通知render重新描述相应的元素，此过程称为repaint

如果该次变化涉及元素布局（layout),浏览器则摒弃原有属性，重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。

不管页面发生了重绘还是重排，它们都会影响性能（最可怕的是重排 ，应尽量避免）

下列情况会发生重排

*  页面初始渲染
 *  添加/删除可见DOM元素
 *  改变元素位置
 *  改变元素尺寸（宽、高、内外边距、边框等）
 *  改变元素内容（文本或图片等）
 *  改变窗口尺寸

> 9.优化 CSS 选择器（从右向左匹配）

[https://www.cnblogs.com/zhaodongyu/p/3341080.html][https_www.cnblogs.com_zhaodongyu_p_3341080.html]

不懂

> 10.CSS/JS minify，减少文件体积

> 11.开启 Gzip 压缩

> 12.将 CSS 放到顶部，JavaScript 放到尾部（JavaScript 会阻塞页面）

> 13.压缩图片以及使用 CSS Sprite

> 14.使用 CDN 加速，适当进行文件缓存

> 15.合理控制 cookie 大小（每次请求都会包含 cookie）

[https_zhuanlan.zhihu.com_p_25701897]: https://zhuanlan.zhihu.com/p/25701897
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70]: /images/20221023/3705a698a7de4796a296bf50af919324.png
[https_www.cnblogs.com_xuanhun_p_9499348.html]: https://www.cnblogs.com/xuanhun/p/9499348.html
[https_www.jianshu.com_p_7c3e2493c7a7]: https://www.jianshu.com/p/7c3e2493c7a7
[https_blog.csdn.net_lu92649264_article_details_114572451]: https://blog.csdn.net/lu92649264/article/details/114572451
[https_blog.csdn.net_qq_41635167_article_details_83932920]: https://blog.csdn.net/qq_41635167/article/details/83932920
[https_blog.csdn.net_qq_36663951_article_details_78320597]: https://blog.csdn.net/qq_36663951/article/details/78320597
[https_www.cnblogs.com_lyt0207_p_13998058.html]: https://www.cnblogs.com/lyt0207/p/13998058.html
[https_blog.csdn.net_chenjuan1993_article_details_82020024]: https://blog.csdn.net/chenjuan1993/article/details/82020024
[https_www.cnblogs.com_wpshan_p_9268194.html]: https://www.cnblogs.com/wpshan/p/9268194.html
[https_www.cnblogs.com_zhaodongyu_p_3341080.html]: https://www.cnblogs.com/zhaodongyu/p/3341080.html