html css js加载顺序

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

PS:原文转自:http://www.cnblogs.com/yingsong/p/6170780.html

时间: 2024-09-29 22:27:34

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

css/js 加载顺序

Firefox and Opera are the only browsers capable of loading  scripts in parallel while preserving execution order. In all other browsers, scripts must be loaded sequentially. //只有Firefox和opera支持并行加载脚本,并保持执行顺序.其他游览器必须按顺序进行加载. All browsers respect CSS s

(转)JS加载顺序

原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)--第一篇 Javascript加载执行问题探索 楼主做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享. 做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller. 一: 原始情况 首先大家看看如下的代码: 1 <%@ Page Language="C#&qu

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

注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; } 查找一些教材中(w3schools等),只说css的顺序是"元素上的style" > "文件头上的st

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

背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常有各种交集,需要通信.需要互相调用,这时监听者模式便是必不可少的一种设计模式了,在前端表现事件操作.backbone和jquery都有提供了很好的事件处理方式. 但是,真正开发需求的时候我们常常会遇到文件加载顺序跟事件监听与更新不一致的需求,比如说:在一个视频网站里面,有一个视频处理的JS模块和用户

thinksns系统的js加载顺序整理

thinksns系统的js加载顺序整理 1.jQuery.js 2.jquery.form.js 3.common.js 4.core.js   //thinksns的核心js对象 5.module.js   //thinksns独有的HTML标签关联模型 6.module.common.js ................................................希望资深的前端大牛能给讲解一下内部的工作原理

关于js css html加载顺序整理

1.js放在head中会立即执行,会阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 2.js的执行依赖前面的样式.即只有前面的样式全部下载完成后才会执行js,但是此时外链css和外链js是并行下载的. 3.js放在body的最后面,可以避免资源阻塞,同时使静态的html页面迅速显示. 4.外链的js如果含有defer="true"属性,将会并行加载js,到页面全部加载完成后才会执行,会按顺序执行. 5.外链的js如果含有asyn

js加载顺序

一两个月前在淘宝内网里看到一个优化Javascript代码的竞赛,发现有不少的人对Javascript的执行和装载的基础并不懂,所以,从那天起我就想写一篇文章,但一直耽搁了.自上篇<浏览器渲染原理简介>,正好也可以承前启后. 首先,我想说一下Javascript的装载和执行.通常来说,浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞页面后续的内容(包括页面的渲染.其它资源的下载).于是,如果有多个js文件被引入,那么对于浏览器来说,这些js文件被被串行地载入

html、css、js文件加载顺序及执行情况

今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然未弄明白,就在这时我找到了让我恍然大悟的一段话,如下: HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件. 3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件. 4. 浏览器继续载入html中&

【转】html、css、js文件加载顺序及执行情况

原链接:http://www.cnblogs.com/Walker-lyl/p/5262075.html 今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然未弄明白,就在这时我找到了让我恍然大悟的一段话,如下: HTML页面加载和解析流程  1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件.  2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部