html渲染顺序:
(1)下载和渲染顺序从上到下。下载渲染同时进行
(2) 遇到语义解释性标签嵌入文件(图片,css
样式),IE下载过程会启用单独链接进行下载
(3)样式表css
文件下载完成后会和以前样式表一起解析,重新渲染
(4)JS,CSS
如果有重定义,后定义函数覆盖前定义函数
js加载:
(1)不能并行下载和解析(阻塞下载)。
(2)当引用了JS时候,浏览器发送1个JS request
就会一直等待该request
返回。因为浏览器需要一个稳定的DOM
树结构,而JS
中有可能有改变DOM
树的代码,如插入节点appendChild,document.write
或者location.href
等
所以,js
可以异步加载,也可以写在html
文档的最下面。
加快HTML
页面加载速度:
1.页面减肥:
- a.删除不必要的注释和空格
- b.将
inline
(内嵌:写在HTML内)css,js
外链的形式导入 - c.
HTML Tidy
工具检查HTML
2.减少文件数量
- a.减少页面上引用的文件数量减少
http
连接数 b.js、css
文件能合并就合并
3.减少域名查询:DNS
查询和解析域名也需要消耗时间,减少对外部js
、css
、图片资源的引用,不同域名使用越少越好
4.缓存重用的数据
5.优化页面加载顺序:首先加载页面最初显示的内容和与之相关的js
和css
,然后加载html
相关的东西(最初不显示的图片、flash、视频等)
6.减少inline---js
的数量
7.使用合法的css
标签
8.不要使用嵌套table
浏览器详细加载解析html
:
- 用户输入网址发送请求
- 浏览器开始载入
html
代码,发现标签有一个标签引用外部css
文件 - 浏览器发出加载该
css
文件的请求,服务器返回这个css
- 浏览器继续载入
html
中部分代码,并且css
文件下载好了,开始渲染页面 - 浏览器在代码中发现一个标签引用一张图片,向服务器发出请求,浏览器不等图片下完,而是继续渲染后面的代码
- 服务器返回图片,由于图片占用一定面积,影响后面段落的排布,因此浏览器需要回头重新渲染这部分代码
- 浏览器发现一个包含一行
js
代码的
JS
基础知识——CSS
和JS
的放置顺序
相关知识点
css,js
的放置位置- 浏览器的渲染机制
- 白屏现象
FOUC
async
和defer
正确的放置姿势是,将css
文件放在head
中,将js
文件放在body
内,而且最好把js
放在body
的底部。
下面我们来探讨一下原因。
首先,我们需要知道浏览器的渲染机制。
- 解析
html
标签,构建dom tree
。 - 解析
css
标签,构建cssom tree
。 - 把
dom tree
和cssom tree
组合成渲染树(render tree
)。 - 在渲染树的基础上进行布局,计算每个节点的几何结构。
- 把每个节点绘制到屏幕上。
为什么需要把css文件放在前面?
如果我们把样式放在了底部的话,对于ie
浏览器,某些场景下(新窗口 ,刷新等情况下),页面会出现白屏现象,而不是内容逐步展现,即使是使用@import
标签,将css
放入link
,并且放在头部依然会出现白屏现象。
为什么需要把js文件放在底部?
如果把js
文件放在前面会阻挡后面内容的呈现,会阻塞其后组件的下载。
对于图片和css
,在加载时会并发加载,但在加载js时,会禁用并发,并且阻止其它内容的下载,所以把js放在页面顶部会导致白屏现象。
FOUC
既然提到了白屏现象,那么我们再来看看另一个常常会出现的现象,无样式内容闪烁(FOUC
):
其实,有的是叫做浏览器样式闪缩,两种叫法都指的是,浏览器逐步加载无样式的内容,也就是先解析了html
,等加载了css
后再突然出现样式。
解决方法就是乖乖使用link
标签把css
文件放在head
中就好啦。
上述看来,难道js
只能在加载完html
,css
后才能被加载吗?我们的理想情况应该是js
的加载和其它文档的加载同时进行,而且不影响dom
的渲染,那么,下面我们来谈谈js
的异步加载。
js异步加载
平时,我们最常见的js
加载模式就是这样的同步加载模式,也叫做,阻塞模式,就像是塞车道路一样,得一辆辆的走,不能同时过好几辆。
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
async
<script async src="script1.js"></script>
async
属性是HTML5
新增的属性,加载和渲染后续文档元素的过程将和script.js
的加载与执行并行进行,但是要在onload
事件触发之前完成。
“Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer,这样IE 4之后的所有 IE 都支持异步加载,但是要注意,async会覆盖掉defer。”
defer
<script defer src="script1.js"></script>
添加了defer
后,加载后续文档元素的过程将和script.js
的加载并行进行,但是js
文件的执行要在所有元素解析完成后。这样的话,就可以把js
文件放在head
中了,而不用放在body
的底部。
“但是并非所有的浏览器都支持defer(对于一些modern浏览器,如果声明defer,其内部脚本将不会执行document.write及DOM渲染操作。IE4+均支持defer属性)。这意味着,如果想确保自己的延迟脚本能在文档加载后运行,就必须将所有延迟脚本的代码都封装在诸如jQuery之$(document).ready之类的结构中。这是值得的,因为差不多97%的访客都能享受到并行加载的好处,同时另外3%的访客仍然能使用功能完整的JavaScript。”