浏览器显示html过程,浏览器显示页面的流程

简单说步骤如下：

1：浏览器拿到html之后，开始解析html，生成dom tree

2：在dom解析中，遇到js的外链或者script代码，浏览器会停止dom解析，在完成js代码下载执行之后，再继续解析。遇到css的外链或者css的代码，浏览器会继续解析dom，并且会下载css，并行解析css生成cssom tree (dom 和 cssom是并行的)

3： dom tree 和 cssom tree 会合并生成render tree(渲染树)，浏览器layout并paint，这是一个渐进的过程。为达到更好的用户体验，render引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建render树和设置布局。

从上面的步骤不难看出，css放在头部，js放在尾部对页面优化的提升作用。 css并不阻塞dom解析(css只会阻塞渲染，css加载慢会让页面一开始很丑，但是不影响用户看，但是丑对用户就是一种伤害....)，而js会(除非少部分影响页面构建的js，剩下的js应该在底部加载执行)。

现在的浏览器很聪明，并不是解析到html的script或者link标签再去下载静态资源，这些都在浏览器dom解析到之前被定位出来提前下载。另外js的执行会被之前cssom的生成(css文件下载并解析)所阻断。

参考链接

浏览器显示html过程,浏览器显示页面的流程相关推荐

浏览器解析html过程,浏览器解析HTML，CSS过程
原标题:浏览器解析HTML,CSS过程每个浏览器都会有自己的呈现引擎,不同内核浏览器之间的解析顺序和方法存在差异,但都是大同小异: a)呈现引擎,呈现引擎一开始会从网络层获取请求文档的内容,内容的大 ...
从浏览器输入URL到页面显示的过程
从浏览器地址栏输入url到显示页面的步骤: 目录 1.概述浏览器根据请求的URL交给DNS域名解析器,找到真实IP,向服务器发起请求: 三次握手建立连接,服务器交给后台处理完成后返回数据,浏览器接收 ...
清除浏览器缓存之后为什么还是显示旧的html页面_H5缓存机制浅析-移动端Web加载性能优化...
1 H5缓存机制介绍 H5,即HTML5,是新一代的HTML标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5引入的离线存储,这意味着 web 应用可进行缓存,并可在没 ...
从浏览器地址栏输入url到显示页面的步骤
从浏览器地址栏输入url到显示页面的步骤(以HTTP为例) - 在浏览器地址栏输入URL - 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 - 如果资源未缓存,发起新请求 ...
【重难点】【计算机网络 01】OSI 七层模型和 TCP/IP 四层模型、IP 地址分为哪几类、ping 的原理、从浏览器地址栏输入 URL 到显示网页的过程、什么是 socket
[重难点][计算机网络 01]OSI 七层模型和 TCP/IP 四层模型.IP 地址分为哪几类.ping 的原理.从浏览器地址栏输入 URL 到显示网页的过程.什么是 socket 文章目录 [重难点 ...
360浏览器兼容问题html,该页面显示了360浏览器中的异常兼容性问题
简介: 在Web应用程序的开发过程中,发现某些页面无法在360浏览器上正确显示,但是在其他浏览器上360浏览器页面显示不全,它们都处于正常状态. 有什么问题吗? 询问: 网页在360浏览器上显示不正确 ...
html页面在ie上出现404怎么解决,ie浏览器网页上有错误显示不全的解决方法
ie浏览器网页上有错误显示不全的解决方法有时候打开网页发现内容的排版比较混乱,比如上下两行的文字部分重叠,字体大小看起来很不协调,本来是一行的文字显示成两行,等等.这是因为浏览器的设置出了问题,很多 ...
清除浏览器缓存之后为什么还是显示旧的html页面_Web缓存知识
缓存优点通常所说的Web缓存指的是可以自动保存常见http请求副本的http设备.对于前端开发者来说,浏览器充当了重要角色.除此外常见的还有各种各样的代理服务器也可以做缓存.当Web请求到达缓存时, ...
浏览器输入网址到浏览器渲染页面的过程
1) 在客户端浏览器中输入网址URL. 2) 发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址. 3) 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接. 4) 客户端浏览器向对 ...

浏览器显示html过程,浏览器显示页面的流程

浏览器显示html过程,浏览器显示页面的流程相关推荐

最新文章

热门文章