转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

时间:2022-10-11 07:39:25

作者:德来

segmentfault.com/a/1190000004292479

如有好文章投稿,请点击 → 这里了解详情

一、从一个面试题说起

面试前端的时候我喜欢问一些看上去是常识的问题。比如:为什么大家普遍把<script src=""></script>这样的代码放在body最底部?(为了沟通效率,我会提前和对方约定所有的讨论都以chrome为例)

应聘者一般会回答:因为浏览器生成Dom树的时候是一行一行读HTML代码的,script标签放在最后面就不会影响前面的页面的渲染。

我很鸡贼地接着问:既然Dom树完全生成好后页面才能渲染出来,浏览器又必须读完全部HTML才能生成完整的Dom树,script标签不放在body底部是不是也一样?

“页面渲染出来了” 指的是什么?

严格来说,我的最后一问是有歧义的:我们需要统一一下什么叫我们经常挂在嘴边的“页面渲染出来了” —— 指的是是 “首屏显示出来了” 还是 “页面完整地加载好了”(后面统称StepC) ?

如果指的是首屏显示出来了,那么问题又来了:假设网页首屏有图片,这里的“首屏” 指的是 “显示了全部图片的首屏”(后面统称StepB) 还是 “没有图片的首屏”(后面统称StepA)。

确定清楚 “页面渲染出来了” 指的是 StepA、StepB、StepC 中的哪一个是非常关键的(虽然至今还没有一个应聘者尝试这么做过),如果 “页面渲染出来了” 指的是 StepC,那么我的最后一问的答案是肯定的——script标签不放在body底部不会拖慢页面完整地加载好的时间。

显然,我们往往更关心首屏时间,所以,如果 “页面渲染出来了” 特指“没有图片的首屏”,那我的最后一问变成了下面这样,又该如何回答呢?

既然Dom树完全生成好后才能显示“没有图片的首屏”,浏览器又必须读完全部HTML才能生成完整的Dom树,script标签不放在body底部是不是也一样?

陷阱

然而上面的问题还是存在一个陷阱——既然Dom树完全生成好后才能显示“没有图片的首屏”这句话是带欺骗性的,“没有图片的首屏”并不以“完整的Dom树”为必要条件。也就是说:在生成Dom树的过程中只要某些条件具备了,“没有图片的首屏”就能显示出来。

所以,抛开这些歧义和陷阱,我的问题变成了:

script标签的位置会影响首屏时间么?

然而答案并不是那么显而易见,这得从浏览器的渲染机制说起。(再一次说明:本文所说的浏览器都是指chrome)

二、浏览器的渲染机制

Google Web Fundamentals 是一个非常优秀的文档,里面讲到了跟web、浏览器、前端的方方面面。我总结一下其中的 Ilya Grigorik 写的 Critical rendering path 浏览器渲染机制部分的内容如下:

几个概念

1、DOM:Document Object Model,浏览器将HTML解析成树形的数据结构,简称DOM。

2、CSSOM:CSS Object Model,浏览器将CSS代码解析成树形的数据结构。

3、DOM 和 CSSOM 都是以 Bytes → characters → tokens → nodes → object model. 这样的方式生成最终的数据。如下图所示:

转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

4、Render Tree:DOM 和 CSSOM 合并后生成 Render Tree,如下图:

转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

Render Tree 和DOM一样,以多叉树的形式保存了每个节点的css属性、节点本身属性、以及节点的孩子节点。

注意:display:none 的节点不会被加入 Render Tree,而 visibility: hidden 则会,所以,如果某个节点最开始是不显示的,设为 display:none 是更优的。(具体可以看这里)

浏览器的渲染过程

  1. Create/Update DOM And request css/image/js:浏览器请求到HTML代码后,在生成DOM的最开始阶段(应该是 Bytes → characters 后),并行发起css、图片、js的请求,无论他们是否在HEAD里。

    注意:发起 js 文件的下载 request 并不需要 DOM 处理到那个 script 节点,比如:简单的正则匹配就能做到这一点,虽然实际上并不一定是通过正则:)。这是很多人在理解渲染机制的时候存在的误区。

  2. Create/Update Render CSSOM:CSS文件下载完成,开始构建CSSOM

  3. Create/Update Render Tree:所有CSS文件下载完成,CSSOM构建结束后,和 DOM 一起生成 Render Tree。

  4. Layout:有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout,顾名思义就是计算出每个节点在屏幕中的位置。

  5. Painting:Layout后,浏览器已经知道了哪些节点要显示(which nodes are visible)、每个节点的CSS属性是什么(their computed styles)、每个节点在屏幕中的位置是哪里(geometry)。就进入了最后一步:Painting,按照算出来的规则,通过显卡,把内容画到屏幕上。

以上五个步骤前3个步骤之所有使用 “Create/Update” 是因为DOM、CSSOM、Render Tree都可能在第一次Painting后又被更新多次,比如JS修改了DOM或者CSS属性。

Layout 和 Painting 也会被重复执行,除了DOM、CSSOM更新的原因外,图片下载完成后也需要调用Layout 和 Painting来更新网页。

看 Timeline,一目了然

我把扒了一段有赞PC首页的代码到本地,通过Node跑起来。Node作为Server端,对/js/jquery.js 做了延时2s返回的处理,并且把<script src="http://127.0.0.1:8080/js/jquery.js"></script> 放到导航栏的下面,结果是这样的:

转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

从上面的Timeline我们可以看出:

  • 首屏时间和DomContentLoad事件没有必然的先后关系

  • 所有CSS尽早加载是减少首屏时间的最关键

  • js的下载和执行会阻塞Dom树的构建(严谨地说是中断了Dom树的更新),所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。

  • 普通script标签放在body底部,做与不做async或者defer处理,都不会影响首屏时间,但影响DomContentLoad和load的时间,进而影响依赖他们的代码的执行的开始时间。

三、问题的答案

回到前面的问题:

script标签的位置会影响首屏时间么?

答案是:不影响(如果这里里的首屏指的是页面从白板变成网页画面——也就是第一次Painting),但有可能截断首屏的内容,使其只显示上面一部分。

四、再进一步

所以,总算弄清楚这个众所周知的常识了。但设计开发中可能会遇到难以把所有的js放到页面最底部的情形。比如:你的页面是分模块来写的,每一个模块都有自己的html、js甚至css,当把这些模块凑到一个页面中的时候就会出现js自然而然地出现在HTML中间部分。

我们也遇到了这样的问题,所以就做了一个开源项目:Tiny-Loader —— A small loader that load CSS/JS in best way for page performance 简单好用。

回答下题目中所提到的问题,JS一定要放在Body的最底部么?如果用了Tiny-Loader,JS可以不放在Body最底部:)

转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制的更多相关文章

  1. JS一定要放在Body的最底部么? 聊聊浏览器的渲染机制

    请参看文章 https://segmentfault.com/a/1190000004292479 网上的回答: 1.js加载会阻塞其它内容加载,使页面加载时间更长,尤其是js文件太大,有的页面js文 ...

  2. JS一定要放在Body的最底部么?

    一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如:为什么大家普遍把 <script src=""></script> 这样的代码放在 ...

  3. JS学习笔记:(一)浏览器页面渲染机制

    浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里 ...

  4. &lbrack;转&rsqb;浏览器渲染机制——一定要放在body底部的js引用

    转自:http://blog.csdn.net/u012251421/article/details/50536265 说明: 本文提到的浏览器均是指Chrome. “script标签“指的都是普通的 ...

  5. 通过easyui tab添加的子页面JS脚本必须放在body才生效

    通过easyui tab添加的子页面JS脚本必须放在body才生效 可通过Chrome查看元素时,head标签是否含有你自己写的JS代码

  6. Dev中控件的js事件代码放在form标签中存在问题

    Dev中控件的js事件代码放在form标签中会获取不到(head标签中有其他js代码,未验证是否是这个问题)

  7. 从进度条和alert的出现顺序来了解浏览器 UI 渲染 &amp&semi; JS进程

    项目里有一个需求是在上传文件的时候需要显示进度条,那么理所当然的在上传完成后就需要提示用户上传完毕并且更新进度条. 之前的预期表现是,上传完毕后,先更新进度条到100%,再alert出提示,所以代码如 ...

  8. 脚本放在 &lt&semi;body&gt&semi; 元素的底部

    建议把脚本放在 <body> 元素的底部. 这会提高网页加载速度,因为 HTML 加载不受制于脚本加载.

  9. 分享一段js,判断是否是在iPhone中的Safari浏览器打开的页面

    头部引用jquery包 将下面的一段js写在</body>的前面 <script type="text/javascript"> var ua = navi ...

随机推荐

  1. Charles

    1. charles使用教程指南+客户端弱网测试:http://blog.csdn.net/anualday/article/details/51423457 2.使用Charles对Https请求进 ...

  2. Leetcode 160&period; Intersection of two linked lists

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  3. hdu 3037 Saving Beans Lucas定理

    Saving Beans Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  4. Gradle的配置实例

    错过了Maven,但是遇到了Gradle. 网上关于Gradle的讲解和培训已经很多了. 我就直接贴几个我测试过的配置文件吧: ① 依赖maven资源库 repositories { mavenCen ...

  5. eclipse 设置jvm 内存

    Eclipse 中设置JVM 内存 今天在eclipse 中测试把文档转换为图片的时候,报出了下面的错误: java.lang.OutOfMemoryError: Java heap space 从上 ...

  6. Linux学习 -- 用户和用户组管理

    1 用户配置文件 1.1 用户信息文件 /etc/passwd 查看帮助 man 5 passwd -- account:password:UID:GID:GECOS:directory:shell ...

  7. webapp万能选择器:iosselect

    iosselect是个什么东西? 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示.下面是 ...

  8. SpringMVC的各种注解

    @RequestMapping 这个注解标注在方法名上,如 /** * 拦截所有请求: * @RequestMapping(value="/*", method = {Reques ...

  9. 查找IDEA 项目中的依赖包存放在&period;m2位置

    原因:在maven项目pom.xml中添加依赖,可能由于网络不好,下载不完全,导致再次下载一直报错. 就会导致出现依赖一直报错.

  10. git多账号切换

    修改: git config --global user.name "Your_Username" git config --global user.email username@ ...