HTML中Javascript脚本的加载和执行 |
您所在的位置:网站首页 › js代码报错会影响后面代码执行吗知乎文章 › HTML中Javascript脚本的加载和执行 |
抛出问题:为什么我们建议把script标签放在之前而不是head里面呢?为什么有时候我们访问DOM却访问不到呢?javascript代码是怎样的执行顺序?有没有什么操作是可以影响它的执行顺序?这一切的答案都可以从本文中获取,也就是要说的脚本的执行顺序问题。您且往下看。 理论支持:要解决上面的问题,我们需要明白在html中javascript的加载和执行顺序问题,先了解几个知识点。 在html中嵌入javascript代码,两种形式:直接在页面嵌入JavaScript代码和包含外部的javascript文件(通过src属性)脚本执行顺序从上到下,从左到右带有src属性的script标签里面,不应该在包含代码,否则会被忽略在解释器对元素内部的所有代码求值完毕以前,页面中的其余内容都不会被浏览器加载显示 上面这句话通俗的说:就是当一个script标签被执行, 在它之前的HTML元素可以访问,之后的就不成。所以也就是为什么通常建议将script放在body结束标签之前,dom之后。 例子: 这里打印出获取节点的个数为0,也就是获取不到。 回答问题:所以由于javascript加载执行的特质。所以如果我们将标签放在head里面,如果javascript文件过大,就会一直解析执行,导致后面DOM没加载,页面出现空白。而且如果我们有访问DOM的操作还会出现获取不到的情况。那有什么操作可以影响javascript的执行顺序呢? defer和async共同点: 都对javascript的执行顺序有影响是对外部文件有效不同点: defer是告诉浏览器,立即下载,延迟执行。延迟到什么时候呢,延迟到整个页面都解析完毕之后再执行。也就是遇到标签后再执行。最好只包含一个延迟脚本。async是不让页面等待脚本下载和执行,从而异步加载页面其他内容,建议异步脚本不要在加载期间修改DOM一般defer更加适用于现实场景。 蓝色:代表js脚本网络加载时间 红色:代表js脚本执行时间 绿色:代表html解析。 很清楚的知道,如果我们存在的操作dom元素,那么一定确保在文档解析完成后再执行脚本,不然会获取不到。 这里比较的是脚本的正常执行和加入defer属性或者说async属性。 window.onload以及query的DOM加载函数经常我们会看到window.onload,这个怎么个加载顺序呢? load事件的触发就是页面完全加载完毕,通defer貌似一样呢,那谁先执行? 由此可以看到先执行defer属性,然后是onload 那么还有我们经常使用jquery框架的$(fucntion(){}) 完整写法就是 $(document).ready(function(){}); 意思是dom加载完成后执行。首先$(function(){})不会被覆盖,window.onload会被覆盖,这个理解函数就知道为什么。 结果: 因此可以看到,$(function(){})先执行,并且不会被覆盖。就相当于原生js的DOMContentLoaded事件,在DOM加载完毕后,页面全部内容加载前(如图片等)执行,而window.onload是页面所有资源(图片、文件啥的)加载完成后才执行。defer都会在这两个之前。 执行顺序: defer > $(function () {}) > window.onload DOM文档加载DOM文档加载步骤: 解析HTML结构 加载外部的脚本和样式文件 解析并执行脚本代码 执行$(function(){})内对应代码 加载图片等二进制资源 页面加载完毕,执行window.onloadscript在html4.01加入了6个属性:http://www.w3school.com.cn/tags/tag_script.asp 参考资料http://www.cnblogs.com/neusc/archive/2016/08/12/5764162.html https://www.cnblogs.com/lizonghui/archive/2012/09/13/2683706.html http://blog.csdn.net/zp1996323/article/details/50281397
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |