发布于 2016-01-13 08:03:06 | 173 次阅读 | 评论: 0 | 来源: 分享
这里有新鲜出炉的Javascript教程,程序狗速度看过来!
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
面试前端的时候我喜欢问一些看上去是常识的问题。比如:为什么大家普遍把<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.
这样的方式生成最终的数据。如下图所示:
DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
4、Render Tree:DOM 和 CSSOM 合并后生成 Render Tree,如下图:
Render Tree 和DOM一样,以多叉树的形式保存了每个节点的css属性、节点本身属性、以及节点的孩子节点。
注意:display:none
的节点不会被加入 Render Tree,而 visibility: hidden
则会,所以,如果某个节点最开始是不显示的,设为 display:none
是更优的。(具体可以看这里)
以上五个步骤前3个步骤之所有使用 “Create/Update” 是因为DOM、CSSOM、Render Tree都可能在第一次Painting后又被更新多次,比如JS修改了DOM或者CSS属性。
Layout 和 Painting 也会被重复执行,除了DOM、CSSOM更新的原因外,图片下载完成后也需要调用Layout 和 Painting来更新网页。
我把扒了一段有赞PC首页的代码到本地,通过Node跑起来。Node作为Server端,对/js/jquery.js
做了延时2s返回的处理,并且把<script src="http://127.0.0.1:8080/js/jquery.js"></script>
放到导航栏的下面,结果是这样的:
从上面的Timeline我们可以看出:
回到前面的问题:
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最底部:)