web前端面试题@十三（浏览器渲染页面的原理及流程、call,apply和bind的区别及扩展）

一、浏览器渲染页面的原理及流程

浏览器将域名通过网络通信从服务器拿到html文件后，如何渲染页面呢？

1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。

2.构建渲染树（Render Tree）。构建渲染树，根据渲染树计算每个可见元素的布局，并输出到绘制流程，将像素渲染到屏幕上。

（渲染树（Render Tree）由DOM树、CSSOM树合并而成，但并不是必须等DOM树及CSSOM树加载完成后才开始合并构建渲染树。三者的构建并无先后条件，亦非完全独立，而是会有交叉，并行构建。因此会形成一边加载，一边解析，一边渲染的工作现象。）

3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。

  基本原理如下：

1、浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：

2、解析HTML，构建DOM树

3、解析CSS，生成CSS规则树

4、合并DOM树和CSS规则，生成render树（DOM树和CSSOM树连接在一起形成render tree .‘渲染数’）

5、布局render树（Layout/reflow），负责各元素尺寸、位置的计算

6、绘制render树（paint），绘制页面像素信息

7、浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上

渲染配图

二、call,apply和bind的区别及扩展

1、call,apply和bind的区别

它们在功能上是没有区别的，都是改变this的指向，它们的区别主要是在于方法的实现形式和参数传递上的不同。call和apply方法都是在调用之后立即执行的。而bind调用之后是返回原函数，需要再调用一次才行，

2、总结一下call，apply，bind方法：

a：第一个参数都是指定函数内部中this的指向（函数执行时所在的作用域），然后根据指定的作用域，调用该函数。

b：都可以在函数调用时传递参数。call，bind方法需要直接传入，而apply方法需要以数组的形式传入。

c：call，apply方法是在调用之后立即执行函数，而bind方法没有立即执行，需要将函数再执行一遍。有点闭包的味道。

d：改变this对象的指向问题不仅有call，apply，bind方法，也可以使用that变量来固定this的指向。

附菜鸟教程https://www.runoob.com/w3cnote/js-call-apply-bind.html，不明的话看一看官方的解释，在此不做举例了。。。