关于js css html加载顺序整理
1.js放在head中会立即执行,阻塞后续的资源下载与执行。因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控。
正常的网页加载流程是这样的。
- 浏览器一边下载HTML网页,一边开始解析
- 解析过程中,发现
<script>
标签 - 暂停解析,网页渲染的控制权转交给JavaScript引擎
- 如果
<script>
标签引用了外部脚本,就下载该脚本,否则就直接执行 - 执行完毕,控制权交还渲染引擎,恢复往下解析HTML网页
如果外部脚本加载时间很长(比如一直无法完成下载),就会造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。html需要等head中所有的js和css加载完成后才会开始绘制,但是html不需要等待放在body最后的js下载执行就会开始绘制,因此将js放在body的最后面,可以避免资源阻塞,同时使静态的html页面迅速显示。将脚本文件都放在网页尾部加载,还有一个好处。在DOM结构生成之前就调用DOM,JavaScript会报错,如果脚本都在网页尾部加载,就不存在这个问题,因为这时DOM肯定已经生成了。
2.js的执行依赖前面的样式。即只有前面的样式全部下载完成后才会执行js,但是此时外链css和外链js是并行下载的。
css需要分块,首页的css独立,其余的css需要动态加载,因为html的绘制会被css阻塞,这样可以减少首次进入时的白屏时间。
3.外链的js如果含有defer="true"属性,将会并行加载js,到页面全部加载完成后才会执行,会按顺序执行。
defer
属性的作用是,告诉浏览器,等到DOM加载完成后,再执行指定脚本。
- 浏览器开始解析HTML网页
- 解析过程中,发现带有
defer
属性的script标签 - 浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
- 浏览器完成解析HTML网页,此时再执行下载的脚本
对于内置而不是连接外部脚本的script标签,以及动态生成的script标签,defer
属性不起作用。
4.外链的js如果含有async="true"属性,将不会依赖于任何js和css的执行,此js下载完成后立刻执行,不保证按照书写的顺序执行。因为async="true"属性会告诉浏览器,js不会修改dom和样式,故不必依赖其它的js和css。
async
属性的作用是,使用另一个进程下载脚本,下载时不会阻塞渲染。
- 浏览器开始解析HTML网页
- 解析过程中,发现带有
async
属性的script
标签 - 浏览器继续往下解析HTML网页,同时并行下载
script
标签中的外部脚本 - 脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本
- 脚本执行完毕,浏览器恢复解析HTML网页
async
属性可以保证脚本下载的同时,浏览器继续渲染。需要注意的是,一旦采用这个属性,就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行那个脚本。另外,使用async
属性的脚本文件中,不应该使用document.write
方法。
一般来说,如果脚本之间没有依赖关系,就使用async
属性,如果脚本之间有依赖关系,就使用defer
属性。如果同时使用async
和defer
属性,后者不起作用,浏览器行为由async
属性决定。
关于js css html加载顺序整理的更多相关文章
- js css html加载顺序
1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控.正常的网页加载流程是这样的.浏览器一边下载HTML网页,一边开 ...
- 关于html,css,js三者的加载顺序问题
<head lang="en"> <meta charset="utf-8"> <title></title> ...
- css样式加载顺序及覆盖顺序深入理解
注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...
- css样式加载顺序
css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...
- 性能优化之html、css、js三者的加载顺序
前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...
- JS/CSS/IMG加载顺序关系之DOMContentLoaded事件
DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...
- 图片预加载 js css预加载
图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden"> <script type= ...
- 用node.js搭建一个静态资源站 html,js,css正确加载 跳转也完美实现!
昨天买了一个服务器想着用来测试一些自己的项目,由于是第一次建站,在tomcat,linux,node.js间想了好久.最终因为node搭建比较方便没那么麻烦就决定用node.js来搭建网站项目. 搭建 ...
- js图片预加载
图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...
随机推荐
- oneM2M标准发展神速 实现万物联网的愿景
http://m2m.iot-online.com/news/2013102224849.html oneM2M则将负责解决独立于接取网路中通用的M2M服务层的关键需求:使其可更方便地嵌入于各种软硬体 ...
- BZOJ3226: [Sdoi2008]校门外的区间
感觉很有趣的题呢. 每个点拆成两个,线段树维护. 不过这题难点其实在输入输出. #include<bits/stdc++.h> #define N (1<<17) #defin ...
- android语音识别和合成第三方 .
讯飞语音云 http://open.voicecloud.cn/index.php 目前支持6大类型的SDK下载,包括Android. iPhone平台移动应用的接入,Windows.Linux平台P ...
- sp_executesql 使用
sp_executesql 比 之前的exec @sql 区别在可以实现参数的传入传出 如 declare @sql nvarchar(2000) declare @pid varchar(20) s ...
- PHP责任链设计模式
<?php //责任链设计模式 /** * 每个对象,储存着对自己上级的引用, * 如果自己处理不了,交给上一级. */ class board{ protected $power=1; pro ...
- 自然语言22_Wordnet with NLTK
QQ:231469242 欢迎喜欢nltk朋友交流 https://www.pythonprogramming.net/wordnet-nltk-tutorial/?completed=/nltk-c ...
- 利用a标签解析URL
参考资料 http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html 很多时候我们有从一个URL中提取域名,查询关键 ...
- Http请求之--C#的HttpWebRequest实现POST方式请求
1.添加头信息和请求方法.有两种方式添加 req = (HttpWebRequest)WebRequest.Create("http://zhidao.baidu.c ...
- union联合体使用详解
1.联合体联合体(union)与结构体(struct)有一些相似之处.但两者有本质上的不同.在结构体中,各成员有各自的内存空间, 一个结构变量的总长度是各成员长度之和.而在联合体中,各成员共享一段内存 ...
- Form表单中的action路径问题,form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关
Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com 网友分享于: 2014-08-14 08:08:01 浏览数44525次 ...