js一定要放在body的最底部么？聊聊浏览器的渲染机制

今天看了一篇前段大全推送的“js一定要放在body的最底部么？聊聊浏览器的渲染机制”。正好今天在《javascript Dom 编程艺术》上看到有说，<script>标签应该放在body的底部，所以就很有兴趣点进去学习了。

 

学习了几个概念：

1.DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM.

2.CSSOM：CSS Object Model，浏览器将CSS代码解析成树形的数据结构。

3.DOM和CSSOM都是以Bytes->characters->tokens->nodes->object model.这样的方式生成最终的数据。DOM树的构建过程是一个深度遍历的过程：当前节点的所有节点都构建好了才会去构建当前节点的下一个兄弟节点。

3.Render Tree : DOM和CSSOM合并后生成Render Tree。Render Tree和DOM一样，以多叉树的形式保存了每个节点的css树形、及诶到哪本身属性和节点的孩子节点。

小知识点：display：none的节点不会被加入RenderTree，而visiblility：hidden会，所以若某及诶到哪最开始是不显示的，设为display：none是更优的。

 

浏览器的渲染过程

1.create/update DOM And request css/image/js:浏览器请求到html代码后，在生成DOM的最开始阶段（Bytes->characters后），并行发起CSS、图片、js的请求

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

3.Create/update Render Tree：所有CSSOM构建结束后，和DOM一起生成Render Tree

*之所以用Create/update是因为这三步都可能在第一次Painting后被更新多次，比如JS修改了DOM或者CSS属性

4.Layout：有了Render Tree，浏览器已经知道网页中有哪些节点、及各个节点的CSS定义及他们的从属关系，这一步就是计算出每个节点在屏幕中的位置。

5.Painting：按照规则，通过显卡，把内容画到屏幕上。

*Layout和painting也会执行多次，如在图片等资源下载好后。

 

此文章作者经过跑了一个网站的代码，通过timeline得出浏览器的实际处理过程：

1.运行浏览器自带脚本->发起请求，包括CSS、图片、js->资源全部下载好后触发load事件，然后painting了一次->等到jquery.js下载并执行好后又Painting了一次->触发DomContentload事件

因此得出：

1.首屏事件和DomContentload事件没有必然的先后关系。

2.所有CSS尽早加载是减少首屏事件的最关键因素。（首屏不代表一个完整页面，可能只是渲染了一部分）

3.js的下载会中断Dom树的更新，所以script标签放在首屏范围内的HTML代码段中会截断首屏的内容。（所以，为了更快速显示出完整的界面，个人认为js放在最后加载，可以使完整的画面更早出来，放在底部是有一定道理的。）

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

 

得出结论：js放置位置。不会影响首屏时间，但是首屏可能会有所截断，使其只显示上面的一部分

 

工作中学到的小知识点：

1.在js中，存在父窗口和子窗口，则在子窗口可以用parent获取到父窗口的对象，如父窗口的tabpanel，在子窗口可以使用parent.tabpanel获取到。

2.Ext.util.Format.nl2br(value)可以将value中换行符转换成<br/>

 

2017年1月16日