浏览器js加载和执行顺序

http://www.jb51.net/article/77920.htm

探析浏览器执行JavaScript脚本加载与代码执行顺序

附上源代码:动态脚本技术和ajax没有测试

<!DOCTYPE html>
<html>
<head>
<title>js async</title>

<script type="text/javascript">
var s3=document.createElement(‘script‘);
s3.src=‘3.js‘;
var s4=document.createElement(‘script‘);
s4.src=‘4.js‘;
var head=document.getElementsByTagName(‘head‘)[0];

//文档流
document.write("<script type=‘text/javascript‘ src=‘1.js‘><\/script>");
document.write("<script type=‘text/javascript‘ src=‘2.js‘><\/script>");

//内部脚本
document.write("<script type=‘text/javascript‘>console.log(‘in3‘)<\/script>");
console.log(‘in1‘);
document.write("<script type=‘text/javascript‘>console.log(‘in4‘)<\/script>");

//文档流
head.append(s3);
head.append(s4);
</script>
<script type="text/javascript">
document.addEventListener(‘DOMContentLoaded‘,function(){
console.log(‘hahaha‘);
console.log(document.readyState);
})
console.log(‘in2‘);
</script>

</head>
<body>
<h1>js是顺序执行解析</h1>

<p>in1 in2 in3 in4一定在hahaha,interactive之前</p>
<p>out1 out2 out3 out4异步加载,位置不确定,尽管看起来和文档流有关系</p>
<p>in3 in4的写法要注意文档流的输出和位置,确定为1342</p>

</body>
</html>

时间: 2024-11-09 00:54:47

浏览器js加载和执行顺序的相关文章

js 加载与运行顺序

今天在查资料的时候,看到了一篇不错的文章,这里我转载下.一是为了以后自己能够回过头来找的时候好找,二是看看能否帮助园子里的小伙伴解决些问题.好了,不多说了,下面开始吧! JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜. 那么JavaScript

对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

最近在研究HTML页面中JavaScript的执行顺序问题.在JavaScript中,定义一个方法或者函数有很多方式,最常见的有2中,function语句式与函数直接量方式. 对于function语句式,解释器会优先解释.即加载了这个js文件后,会扫描一下所有的js代码,然后把该优先执行的东西先执行了,然后再从上到下按顺序执行.所以,定义的代码可以在执行的代码后边.就跟C#中的方法定义一样.解释器已经记住了这个方法,知道在内存中的哪里,用的时候直接去取就行了. C#语言是,对象中的属性与方法具有

&lt;script&gt;标签的加载解析执行

转自原文 <script>标签的加载解析执行 看了很多网上的文章,都是大同小异.总结一下.内部原理还没有搞清楚,有机会再学习. 一.<script>标签的加载解析执行顺序 html页面中的<script>标签中的内容(直接写入或者引用外部文件都一样)是以顺序加载执行的,每个<script>标记内容可以当成一个独立的块,同步的情况下一个块加载解析然后执行完后才加载下一块.当然这时也会阻塞其他页面元素的加载.所以网上说的变量调用: <script type

(转)JS加载顺序

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

浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及其他的细节问题.而除了defer和async特性,动态脚本和Ajax脚本注入也是两种常用的创建无阻塞脚本的方法.总的来看,这两种方法都能达到脚本加载不影响页面解析和渲染的作用,但是在不同的浏览器中,这两种技术所创建的脚本的执行时机还是有一定差异,今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方

浏览器中Javascript的加载和执行

在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏览器下载JS脚本的过程,执行时浏览器JS引擎解释执行的过程. 接下来先分析JS脚本加载的过程,加载方式可分为同步加载和异步加载. 同步加载即浏览器加载JS过程中停止对HTML元素的解析,保证JS执行的安全一致性,但如果JS中包含大量计算时,会导致阻塞页面的渲染.常见的JS加载是通过<script>

【转】js JavaScript 的性能优化:加载和执行

JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详

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

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

JS 动态加载脚本 执行回调[transfer]

JS 动态加载脚本 执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数. 我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行. 经过对网络上资源的搜索,我发现