中级前端工程师面试

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

https://zhuanlan.zhihu.com/p/25701897

页面生成过程 

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

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

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

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

1.HTML代码转化为DOM

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://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 

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

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

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

https://www.cnblogs.com/lyt0207/p/13998058.html 

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

https://blog.csdn.net/chenjuan1993/article/details/82020024 

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

不懂 

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

11.开启 Gzip 压缩 

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

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

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

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