1.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肯定已经生成了。

2.js的执行依赖前面的样式。即只有前面的样式全部下载完成后才会执行js,但是此时外链css和外链js是并行下载的。

  css需要分块,首页的css独立,其余的css需要动态加载,因为html的绘制会被css阻塞,这样可以减少首次进入时的白屏时间。

3.外链的js如果含有defer="true"属性,将会并行加载js,到页面全部加载完成后才会执行,会按顺序执行。

  defer属性的作用是,告诉浏览器,等到DOM加载完成后,再执行指定脚本。

  1. 浏览器开始解析HTML网页
  2. 解析过程中,发现带有defer属性的script标签
  3. 浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
  4. 浏览器完成解析HTML网页,此时再执行下载的脚本

  对于内置而不是连接外部脚本的script标签,以及动态生成的script标签,defer属性不起作用。

4.外链的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属性。如果同时使用asyncdefer属性,后者不起作用,浏览器行为由async属性决定。

关于js css html加载顺序整理的更多相关文章

  1. js css html加载顺序

    1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控.正常的网页加载流程是这样的.浏览器一边下载HTML网页,一边开 ...

  2. 关于html,css,js三者的加载顺序问题

    <head lang="en"> <meta charset="utf-8"> <title></title> ...

  3. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  4. css样式加载顺序

    css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...

  5. 性能优化之html、css、js三者的加载顺序

    前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...

  6. JS/CSS/IMG加载顺序关系之DOMContentLoaded事件

    DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...

  7. 图片预加载 js css预加载

    图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden">        <script type= ...

  8. 用node.js搭建一个静态资源站 html,js,css正确加载 跳转也完美实现!

    昨天买了一个服务器想着用来测试一些自己的项目,由于是第一次建站,在tomcat,linux,node.js间想了好久.最终因为node搭建比较方便没那么麻烦就决定用node.js来搭建网站项目. 搭建 ...

  9. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

随机推荐

  1. boolean 和 Boolean 类型数据的差别

    工作中遇到页面传递布尔类型的数据问题,需要在代码中判断不能为null,就此思考一下,boolean和Boolean之间的区别?boolean是基本数据类型Boolean是它的封装类,和其他类一样,有属 ...

  2. SQL 字段保留下划线后部分

    select  SUBSTRING(b.SUMMARY,0,charindex('_',b.SUMMARY))as SUMMARY  from UltimusDB.dbo.INCIDENTS b

  3. WSADATA

    中文名 WSADATA 操作系统 Windows CE 版本: 大于等于1.0 定义位置: Winsock.h 目录 1 说明 2 结构原型 3 参数说明 4 备注 说明编辑 WSADATA结构被用来 ...

  4. centos设置编码

    CentOS6.5解决中文乱码与设置字符集 Windows的默认编码为GBK,Linux的默认编码为UTF-8.在Windows下编辑的中文,在Linux下显示为乱码.为了解决此问题,修改Linux的 ...

  5. 20145212 《Java程序设计》第1周学习总结

    20145212 <Java程序设计>第1周学习总结 教材学习内容总结 看了毕向东老师的视频,我对Java有了进一步的了解.相比于其他的计算机编程语言(比如C语言),Java有一大特点就是 ...

  6. JavaWeb学习笔记——表达式语言

    使用表达式语言,可以方便地访问标志位(JSP中有page(pageContext).request.session和application4种标志位)中的属性内容,可以避免出现许多的Scriptlet ...

  7. Java递归算法——汉诺塔问题

    //================================================= // File Name : Tower_demo //-------------------- ...

  8. Java——Selector

  9. 2012 Theory for Forward Rendering

    http://miss-cache.blogspot.com/2012/08/lighting-transparent-surfaces-with_26.html http://aras-p.info ...

  10. Camera

    Unity摄像机Viewport使用   http://blog.sina.com.cn/s/blog_64ab3f630100y7e7.html http://blog.sina.com.cn/s/ ...