javascript 什么时候加载？jsp页面中 HTML先加载还是javascript内容先加载
大家好，关于javascript 什么时候加载很多朋友都还不太明白，今天小编就来为大家分享关于jsp页面中 HTML先加载还是javascript内容先加载的知识，希望对各位有所帮助！
jsp页面中 HTML先加载还是javascript内容先加载
其实浏览器加载显示html的顺序是按下面的顺序进行的：
1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
如果你的网页比较大，希望部分内容先显示出来，粘住浏览者，那么你可以按照上面的规则合理的布局你的网页，达到预期的目的。
JavaScript在浏览器中如何加载
今天将和大家分享有关JavaScript中加载的过程，有一定的参考价值，希望对大家有所帮助
JavaScript加载是从他开始那一刻一直到浏览器按照事情顺序完成所有的事为止，大概步骤可以分为创建 document对象==>文档解析完成==>文档加载完并执行完，接下来在文章中将和大家详细介绍。
加载过程
（1）解析 web页面也就是解析 HTML元素和他们的文本内容，将对像和文本添加到文档中，document处于加载中
文档解析
（2）通过link引入外部 css，创建线程，进行异步加载。
（3）通过 script引入外部 js，并且没有设置 async、defer，浏览器同步加载，并阻塞等
（4）等待js加载后为其设置有async、defer，浏览器创建线程异步加载，其中 async在脚本加载完成后立即执行（注意：异步加载应禁止使用 document.write()）
（5）遇到 img等带有 src的属性，应该先正常解析 dom结构，然后浏览器异步加载 src，并继续解析文档，如果看到标签就直接生产 dom树，不需要等着 img加载完 scr。
（6）文档解析完成后，所有设置有 defer的脚本会按照顺序执行。（注意与 async的不同，但同样禁止使用 document.write()）;
（7）document对象触发 DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
（8）当所有 async的脚本加载完成并执行后、img等加载完成后（页面所有的都执行加载完之后），document.readyState='complete'，window对象触发 load事件。
（9）从此，以异步响应方式处理用户输入、网络事件等
注意
我们在写程序的时候最好将script标签写在下面，虽然写在上面不仅可以操作div，又可以在dom解析完就立刻处理，这样使效率更高，但是最好还是写在最下面
<div style="width:100px;height:100px;background: pink;">
<script>
var div=document.getElementsByTagName("div")[0]
div.onclick=function(){
this.style.background="hotpink";
}
</script>
如何加快JavaScript的加载与执行
JS有个很无语的阻塞特性，就是当浏览器在执行JS代码时，不能同时做其他任何事情，无论其代码是内嵌的还是外部的。
浏览器在碰到一个引入外部JS文件的<script>标签时会停下所有工作来下载并解析执行它，在这个过程中，页面渲染和用户交互完全被阻塞了，为了避免页面加载时的停顿甚至空白页的出现，JS脚本应尽量放置在页面底部，这点很重要：
<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" type="text/<a rel="external nofollow" rel="external nofollow" href="http://www.php1.cn/category/72.html">css</a>" rel="external nofollow" rel="external nofollow" href="http://www.php1.cn/">
</head>
<body>
<p>页面的内容。。</p>
<!--推荐的位置，页面底部：-->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>为了改善上面的阻塞情况，应尽可能的减少页面中<script>标签的出现次数，这同时也是考虑到HTTP请求会带来额外的性能开销，也就是说应减少页面中外链脚本的数量。
你可以手动合并你的多个JS文件，也可采用类似Yahoo! combo handler这样的实时在线服务来实现，例如下面的这个<script>标签实际上便载入了3个JS文件：
<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" type="text/<a rel="external nofollow" rel="external nofollow" href="http://www.php1.cn/category/72.html">css</a>" rel="external nofollow" rel="external nofollow" href="http://www.php1.cn/">
</head>
<body>
<p>页面的内容。。</p>
<!--推荐的位置，页面底部：-->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>
</body>
</html>为了阻塞状况，这里提供了几个实现并行下载JS脚本的方案。
1.延迟的脚本
HTML4为<script>标签定义了一个defer属性，它能使这段代码延迟执行，然而该属性只有IE4+和Firefox 3.5+支持。声明了defer属性的<script>会在DOM加载完成，window.onload事件触发前被解析执行：
<script type="text/javascript" src="file1.js" defer></script>2.动态脚本元素
这是最通用的解决方案，通过DOM动态地创建<script>元素并插入到文档中，文件在该元素被添加到页面时开始下载，这样无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。
不过要注意使用这种方式加载的代码会立刻执行，这样需清楚的了解各文件的作用以及合理的执行顺序，此时跟踪并确保脚本下载完成并准备就绪是很有必要的，非IE浏览器会在<script>元素接收完成时触发一个load事件，而IE下则会触发一个readystatechange事件并通过readyState属性加以判断便可。以下是兼容地动态加载一个JS脚本的函数：
function load_script(url, callback){
var script= document.createElement('script');
script.type='text/javascript';
if(script.readyState){//IE
script.onreadystatechange= function(){
if(script.readyState=='loaded'|| script.readyState=='complete'){
script.onreadystatechange= null;
callback();
}
}
} else{//others
script.onload= function(){
callback();
}
}
script.src= url;
document.getElementsByTagName('head')[0].appendChild(script);
}你可以将这个函数保存至一个load_script.js文件，然后用该函数来加载其他的脚本，当要加载多个脚本时，为了确保正确的加载顺序，可以将load_script()的执行串联起来，最后如前面说到的放至页面的底部，这便是比较完美的解决方案了：
<script type="text/javascript" src="load_script.js"></script>
<script type="text/javascript">
load_script('file1.js', function(){
load_script('file2.js', function(){
load_script('file3.js', function(){
//全部载入后的操作...
});
});
});
</script>3. XMLHttpRequest脚本注入
即通过AJAX方式加载，不过这种方式无法实现跨域加载，不适用于大型网站。
我们上面做的这些工作当然也已经被那些牛人们完成了，并写成了一些优秀的JS类库以便我们使用，它们均能很好地解决JS脚本的阻塞问题，实现并行下载，例如： YUI3、LazyLoad、LABjs等。
如果你还想了解更多这方面的信息，记得收藏关注本站。