为什么js的加载会阻塞页面渲染
展开全部
因为页面的渲染是从上到下的，比如下面HTML结构
<head>
<script src="..."></script>
</head>
<body>
</body>
页面从上到下渲染，当运行到script这个标签时，会把script内的代码进行解读，在没有解读完成之前，渲染不会继续向下进行，这时候head后的内容就无法解读，导致阻塞，所以我们有时会把script标签放到</body>标签前，让body以前的基本结构都渲染完成，再进行解读js。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2018-07-27 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
我觉得会。
我的一些理解：
页面呈现过程是：
1、取回html代码，从上往下进行解析。
2、解析我觉得就是构建dom树和render树以及renderlayer树，前面是html各节点的结构树，后两棵用于渲染页面。构建dom树我理解为，比如说我遇到<html>就构建一个html节点，后面遇到<body>我就把html视为父亲节点，节点存放指向body。一直遇到</html>代表后面没有了子节点。
3、如果构建dom树过程中遇到了script、img或者css就加载进来，我用chrome的时候，发现这些资源是并行加载的，就是发送请求的时间一样。（这里就有个小问题想请教，如果构建dom树是从上往下的话，应该遇到这些标签时间应该有先后，那么chrome是怎么实现的并行额？）
4、dom树构建和render树构建renderlayer树构建是同时进行的，第3点说到遇到script就加载，加载完后会马上执行，所以dom树后续节点并不能构建，这里就会发生运行阻塞了。
注：js单线程的相关知识说js引擎和渲染不是同一线程，这里跟js阻塞渲染不矛盾，因为dom树构建到script标签时候，后续节点被阻塞构建，但是可能render树和renderlayer树还在构建（前面的节点），这两树构建（实际上dom树构建我怀疑也在渲染线程里面）属于渲染线程。所以这时就是js在运行，渲染在工作，符合两线程的特点。
我的一些理解：
页面呈现过程是：
1、取回html代码，从上往下进行解析。
2、解析我觉得就是构建dom树和render树以及renderlayer树，前面是html各节点的结构树，后两棵用于渲染页面。构建dom树我理解为，比如说我遇到<html>就构建一个html节点，后面遇到<body>我就把html视为父亲节点，节点存放指向body。一直遇到</html>代表后面没有了子节点。
3、如果构建dom树过程中遇到了script、img或者css就加载进来，我用chrome的时候，发现这些资源是并行加载的，就是发送请求的时间一样。（这里就有个小问题想请教，如果构建dom树是从上往下的话，应该遇到这些标签时间应该有先后，那么chrome是怎么实现的并行额？）
4、dom树构建和render树构建renderlayer树构建是同时进行的，第3点说到遇到script就加载，加载完后会马上执行，所以dom树后续节点并不能构建，这里就会发生运行阻塞了。
注：js单线程的相关知识说js引擎和渲染不是同一线程，这里跟js阻塞渲染不矛盾，因为dom树构建到script标签时候，后续节点被阻塞构建，但是可能render树和renderlayer树还在构建（前面的节点），这两树构建（实际上dom树构建我怀疑也在渲染线程里面）属于渲染线程。所以这时就是js在运行，渲染在工作，符合两线程的特点。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
