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,不明的话看一看官方的解释,在此不做举例了。。。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发送 & 接收信息 数据是以“数据包”的形式通过互联网发送,而数据包以字节为单位。当你编写一些 HTML、CSS ...
    mongofeng阅读 983评论 0 0
  • 发送 & 接收信息 数据是以“数据包”的形式通过互联网发送,而数据包以字节为单位。当你编写一些 HTML、CSS ...
    IT界中小PQ阅读 414评论 0 0
  • 2019.8.131.什么是闭包阮一峰博客闭包就是连接内部函数和外部函数的桥梁,用函数嵌套实现内部函数请求到外部函...
    清汤饺子阅读 1,840评论 0 12
  • 用户在使用浏览器访问一个网站时需要先通过HTTP协议向服务器发送请求,之后服务器返回HTML文件与响应信息。这时,...
    dosher_多舍阅读 875评论 0 1
  • Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度...
    hnscdg阅读 665评论 0 0