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属性决定。

html,css,js加载顺序的更多相关文章

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

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

  2. (转)JS加载顺序

    原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...

  3. css样式加载顺序

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

  4. javascript不依赖JS加载顺序事件对象实现

    背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常 ...

  5. 组件推荐Forloop.HtmlHelpers 用来实现MVC的js加载顺序

    最近在开发的时候遇到js加载顺序的问题,layui在底部声明了js,但是我想在页面其他地方使用分布视图,分布视图内有自己的js逻辑,发现不能执行,一看就发现,这里的js应该加在layui后面执行才能有 ...

  6. cookie.js 加载顺序问题

    今天遇到一个问题,在使用cookie.js时,只有在jquery.js文件后加载整体才有效 有效加载顺序 <head> <script type="text/javascr ...

  7. 记录一个bootstrap因js加载顺序导致的问题(tstrap-table-mobile.min.js:7 Uncaught TypeError: Cannot read property 'defaults' of undefined)

    问题描述: 网上找了会没看到答案,然后看了下源码,发现也没有问题,想到js加载的顺序,改了下,发现问题没了. 正确的顺序: 我之前把 <script src="/js/plugins/ ...

  8. 小程序页面的四种文件(JSON、WXML、WXSS、JS)加载顺序

    一个小程序页面由四种文件组成: 1)json 页面配置文件 2)js 页面逻辑文件(必需) 3)wxml 页面结构文件(必需) 4)wxss 页面样式文件 这四个文件的加载顺序: 第一步: 加载页面j ...

  9. 关于js css html加载顺序整理

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

随机推荐

  1. MVC传递Model

    @using System.Configuration;@using System.Text.RegularExpressions;@model Model.NewInfo  // 指定Module的 ...

  2. 【爬虫】python之BeautifulSoup用法

    1.爬虫 网络爬虫是捜索引擎抓取系统的重要组成部分.爬虫的主要目的是将互联网上的网页下载到本地形成一个或联网内容的镜像备份.通过分析和过滤HTML 代码,实现对图片.文字等资源的获取. 2.pytho ...

  3. Bugzilla说明

    简介 Bugzilla是Mozilla公司向我们提供的一个开源的免费缺陷跟踪工具.作为一个产品缺陷的记录及跟踪工具,它能够为你建立一个完善的Bug跟踪体系,包括报告Bug.查询Bug记录并产生报表.处 ...

  4. HTML5实现下载文件且指定下载文件名

    <a href="/files/adlafjlxjewfasd89asd8f.pdf" download="预算表.pdf">下载</a> ...

  5. 《android 导入第三方源码jar包遇到的坑》

    最近想做个app,里面需要有一个二维码扫描的功能,然后谷歌之后发现Zxing这个用的人好多,就看看怎么用: 然后就在github上拉下他们的源码,导入eclipse,然后编译之后导出为jar文件[用的 ...

  6. uniq-删除重复

    uniq常用于管道中,用来删除已使用sort排序完成的重复记录. uniq有3个好用的选项: -c 可在每个输出行之前加上该行重复的次数: -d 仅显示重复的行 -u 仅显示未重复的行

  7. kafka 命令行操作

    1.创建主题(topic) bin/kafka-topics.sh --create --zookeeper m6:2181 --replication-factor 1 --partitions 1 ...

  8. lua module环境探秘

    module 作用 module (name [, ···]) Creates a module. If there is a table in package.loaded[name], this ...

  9. 定时往oracle插入数据

    1创建存储过程 create or replace procedure job_proc isbegininsert into yy (yid) values (sysdate);end; 2创建jo ...

  10. zjuoj 3601 Unrequited Love

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3601 Unrequited Love Time Limit: 16 Sec ...