访问网页后HTML,CSS,JavaScript文件的加载顺序
来源:互联网 发布:java中的wait和notify 编辑:程序博客网 时间:2024/05/23 02:00
目录
- 目录
- 前言
- 一般网页的加载流程
- JS的执行依赖前面的样式
- script标签的defer属性
- script标签的async属性
- 参考
前言
本文转载自:html,css,js加载顺序
一般网页的加载流程
(注:js放在head中会立即执行,阻塞后续的资源下载与执行。因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控。)
1. 浏览器一边下载HTML网页,一边开始解析;
2. 解析过程中,发现<script>
标签;
3. 暂停解析,网页渲染的控制权转交给JavaScript引擎;
4. 如果<script>
标签引用了外部脚本,就下载该脚本,否则就直接执行;
5. 执行完毕,控制权交还渲染引擎,恢复往下解析HTML网页。
如果外部脚本加载时间很长(比如一直无法完成下载),就会造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。html需要等head中所有的js和css加载完成后才会开始绘制,但是html不需要等待放在body最后的js下载执行就会开始绘制,因此将js放在body的最后面,可以避免资源阻塞,同时使静态的html页面迅速显示。将脚本文件都放在网页尾部加载,还有一个好处。在DOM结构生成之前就调用DOM,JavaScript会报错,如果脚本都在网页尾部加载,就不存在这个问题,因为这时DOM肯定已经生成了。
JS的执行依赖前面的样式
js的执行依赖前面的样式。即只有前面的样式全部下载完成后才会执行js,但是此时外链css和外链js是并行下载的。
css需要分块,首页的css独立,其余的css需要动态加载,因为html的绘制会被css阻塞,这样可以减少首次进入时的白屏时间。
<script>
标签的defer
属性
外链的js如果含有defer=”true”属性,将会并行加载js,到页面全部加载完成后才会执行,会按顺序执行。
defer属性的作用是,告诉浏览器,等到DOM加载完成后,再执行指定脚本。
1. 浏览器开始解析HTML网页;
2. 解析过程中,发现带有defer属性的script
标签;
3. 浏览器继续往下解析HTML网页,同时并行下载script
标签中的外部脚本;
4. 浏览器完成解析HTML网页,此时再执行下载的脚本;
对于内置而不是连接外部脚本的script标签,以及动态生成的script标签,defer属性不起作用。
<script>
标签的async
属性
博主注:async 属性是 HTML5 中的新属性。
外链的js如果含有async=”true”属性,将不会依赖于任何js和css的执行,此js下载完成后立刻执行,不保证按照书写的顺序执行。因为async=”true”属性会告诉浏览器,js不会修改dom和样式,故不必依赖其它的js和css。
async属性的作用是,使用另一个进程下载脚本,下载时不会阻塞渲染。
1. 浏览器开始解析HTML网页;
2. 解析过程中,发现带有async属性的script
标签;
3. 浏览器继续往下解析HTML网页,同时并行下载script
标签中的外部脚本;
4. 脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本;
5. 脚本执行完毕,浏览器恢复解析HTML网页。
async属性可以保证脚本下载的同时,浏览器继续渲染。需要注意的是,一旦采用这个属性,就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行那个脚本。另外,使用async属性的脚本文件中,不应该使用document.write方法。
一般来说,如果脚本之间没有依赖关系,就使用async属性,如果脚本之间有依赖关系,就使用defer属性。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。
参考
- (转)JS属性defer的好处
- 访问网页后HTML,CSS,JavaScript文件的加载顺序
- 网页加载 html javascript 顺序
- HTML网页显示一下后消失的原因—HTML与javascript的执行顺序
- HTML 加载CSS文件和javascript的思考
- html、css、js文件加载顺序及执行情况
- html、css、js文件加载顺序及执行情况
- html、css、js文件加载顺序及执行情况
- html、css、js文件加载顺序及执行情况
- html、css、js文件加载顺序及执行情况_0
- html、css、js文件加载顺序及执行情况
- html、css、js文件加载顺序及执行情况
- html、css、js文件加载顺序及执行情况
- html、css、js文件加载顺序及执行情况
- html、css、js文件加载顺序及执行情况
- html、css、js文件加载顺序及执行情况
- html、css、js加载顺序
- html,css,js加载顺序
- html,css,js加载顺序
- cgicc thttpd经常用的调试命令
- Python几种并发实现方案的性能比较
- android webview增强版,对原生webview的一些解决方案
- 系统开关机时oracle自启动和关闭脚本(for aix和linux)
- MySQL查询不区分大小写问题
- 访问网页后HTML,CSS,JavaScript文件的加载顺序
- 《Linux C编程实战》中一些基础C语言知识 && 一些笔试面试题总结
- Python-Image 基本的图像处理操作
- ScrollView嵌套ListView只显示一行
- 资源文件帮助类ResourceHelper
- bzoj3159 决战 LCT
- python编程之GUI的选择
- 使用PowerDesigner画ER图详细教程
- 文章标题