美文网首页
浏览器如何渲染页面

浏览器如何渲染页面

作者: 曾祥辉 | 来源:发表于2017-10-07 03:22 被阅读0次

1. CSS和JS在网页中的放置顺序是怎样的?

  • CSS放置在HTML的head标签里。
  • JS放在网页的底部body关闭标签前。

2. 解释白屏和FOUC

  • 白屏:由于某些场景,如js加载缓慢或无法加载,或css样式表放在页面文件底部等特殊情况,在浏览器新开窗口或刷新时会出现白屏。
  • FOUC(Flash of Unstyled Content)无样式内容闪烁:是指css样式最后才加载出来渲染html。因此会先看到混乱的网页,再看到正常的页面。

原因:因为浏览器对HTML元素和CSS的解析渲染需要一个过程,构建好DOM树和cssom树之后再组合成渲染树(render tree),如果在构建DOM树和cssom树时,请求html元素或css样式表出现阻塞,将无法组合成渲染树即无法将内容绘制到屏幕上,此是部分浏览器会将页面以白屏的方式展示。而FireFox等部分浏览器的渲染机制不同会将已经请求成功的元素和样式组成渲染树,先绘制已加载的部分,如果后续有新加载的元素和样式将再刷新渲染树,继而刷新页面内容,直到完全加载,即FOUC(无样式内容闪烁)。

3. async和defer的作用是什么?有什么区别

  • 加载JS时有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
  • 加载JS时有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,OMContentLoaded 事件触发之前完成。
  • 区别在于defer:脚本延迟到文档解析和显示后执行,有顺序;async:不保证顺序。

4. 简述网页的渲染机制

  1. 首先解析html标签形成,DOM树
  2. 然后解析css,构建cssom树
  3. 把DOM和CSSOM组合成渲染树(render tree)。
  4. 在渲染树的基础上进行布局,计算每个节点的几何结构。
  5. 把每个节点绘制到屏幕上(painting)。

投稿

相关文章

  • 浏览器渲染原理与过程

    浏览器如何渲染网页 要了解浏览器渲染页面的过程,首先得知道一个名词——关键渲染路径。关键渲染路径是指浏览器从最初接...

  • 浏览器渲染原理与过程【转】

    浏览器如何渲染网页 要了解浏览器渲染页面的过程,首先得知道一个名词——关键渲染路径。关键渲染路径是指浏览器从最初接...

  • 深入浅出浏览器渲染

    一、浏览器如何渲染网页 要了解浏览器渲染页面的过程,首先得知道一个名词——关键路径渲染。关键渲染路径(Critic...

  • 前端之路——浏览器是如何「画」出页面的

    浏览器是如何渲染页面的 关于浏览器渲染页面,不得不提的就是“回流”和“重绘”。浏览器读取一个html文件后,会自上...

  • html标签——Html学习笔记1

    文档类型声明,告诉浏览器如何渲染页面;若不加,渲染会用怪异模式渲染 lang属性告...

  • 前端运行机制--页面渲染流程

    浏览器渲染页面的原理及流程 浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据html...

  • web前端面试题@十三(浏览器渲染页面的原理及流程、call,a

    一、浏览器渲染页面的原理及流程 浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据ht...

  • JS基础

    浏览器是如何渲染页面和加载页面 解析HTML以重建DOM树(Parsing HTML to construct t...

  • 浏览器层合成与页面性能优化

    一个web页面由多层构成的 比如掘金: 浏览器渲染页面 在编写页面中,我们要知道浏览器如何处理HTML、JavaS...

  • 常见浏览器及其内核

    浏览器内核:即浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息,负责对网页语法的解...

网友评论

      本文标题:浏览器如何渲染页面

      本文链接:https://www.haomeiwen.com/subject/eehexxtx.html