浅析我对JS延迟异步脚本的思考_javascript技巧

来源:脚本之家  责任编辑:小易  

(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();这是2113谷歌的官方异步5261加载方法,你直接将其中的4102链接换成百度的1653即可用,只有在正确2113地添加了百度统计代码后,才能获取尽可能5261准确的流量数据,添加4102过程中需1653要注意以下几点:百度统计默认只提供了一段访问分析代码。将其安装在</body>标签前即可。百度推广和网盟用户也可以选择开通并安装页头分析代码(可选)以获得推广页面打开时长。页头分析代码的开通请参见高级功能:页头分析http://yingxiao.baidu.com/support/tongji/detail_5599.html1.若您选择同时安装两段代码,需要注意:     两段代码的安装顺序不要颠倒:页头访问分析代码安装在页面顶部,访问分析代码安装在页面底部。两段代码的安装位置要正确:为不影响页面加载速度,请将页头访问分析代码安装在标签</head>标记前,访问分析代码安装在标签</body>标签前。两段代码均不要重复安装:重复安装相同代码会导致数据重复统计,请删除多余的安装代码。2.      不要对代码有任何编辑操作:随意编辑代码会导致代码无法成功执行,且可能影响到网站页面的显示。3在所有推广目标URL页面添加代码: 为准确跟踪百度推广点击,必须在所有参与百度推广的目标URL页面均安装上两段代码。另外,请注意以下几种情况:对于框架式网站,建议按以下方式安装:1.Frame式框架:在框架集页面(最外层页面)的</head>标记前安装页头访问分析代码和访问分析代码;在子框架页面的</head>标记前安装页头访问分析代码,</body>标记前安装访问分析代码。注意:如需要尽量准确地跟踪百度推广点击,请务必在框架集页面安装百度统计代码。2.IFframe式框架:在框架集页面和子框架页面的</head>标记前安装页头访问分析代码,</body>标记前安装访问分析代码。使用模板的网站,建议:将百度统计代码封装在模板中,在合适的位置调用此模板便可获取流量数据。网站中的纯FLASH页面:百度统计暂时无法跟踪纯FLASH页面。更多问题,请到推广客户端帮助频道查询:http://yingxiao.baidu.com/tongji/detail_2543.html了解更多百度推广信息,请查看:http://e.baidu.com/或拨打售前咨询电话:400-800-8888www.zgxue.com防采集请勿采集本网。

关于对延迟脚本的思考

你每个网页都能引用你写的这个JS脚本,就可以了, 当然,如果你说的是在没有引用你这个脚本的情况下执行的话,这是不可能的!

asyncdefer属性的脚本,相信大家都听说过,但是他的真正执行细节是什么样子的?很少有文章认真研究它,可能不太有人注重细节,但其实真正有技术含量的工作和项目,对于性能要求极高,那么细节就很重要了.需要不断的实验自我尝试

要在页面载入的时候调用啊,你要写onload啊

最近几个月,我一直在研究一些技术,例如linux,操作系统,算法等,预计要持续学习到今年年底。红宝书第四版出来后,我也是花了很多时间去看。对于延迟脚本,自己也是做了一个实验,写下了这篇总结

我把你的代码分别在IE7、IE9、Chrome、FireFox进行了测试,为了保证浏览器兼容性,我把你的js代码修改了一下: window.onload = function(){ document.getElementById("btn").onclick=function(e){ setTimeout(function(){ document.getElementB

什么是延迟脚本?

普通的jquery啊,哪里不支持了

script标签,带async和defer属性等,通过document.createElement('script')创建并且没有指定script.async=false的脚本默认为异步延迟脚本(必须为非内联脚本),如下所示:

用Chrome的ScriptInspector插件 或直接 ctrl+shift+i 呼出开发人员工具(IE 里F12) 加上去即可。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body><script src="./async1.js" async></script><script src="./async2.js" async></script><script src="./defer1.js" defer></script><script src="./defer2.js" defer></script><script src="./common1.js"></script><script src="./common2.js"></script><script src="./common3.js"></script></html>

以上7个脚本文件,其中common开头为非异步延迟脚本,其余的都指定了延迟脚本的模式,分为async和defer两种

通过document.createElement创建的标签插入默认为async模式

开始实验

我一共写了2个async和2个defer标签,其它的都是普通标签.其中async1.js里面有4000行代码,其它都是一个console.log而已

第一次实验结果:

再次刷新页面(注意我已经禁用了浏览器缓存),结果为:

再次刷新,发现async执行时机和顺序不确定,但是能确定defer肯定在async之后执行。

原因在于:async是告诉浏览器,可以不必等到它下载解析完后再加载页面,也不用等它执行完后再执行其他脚本,俗称异步执行脚本

看下载执行时机和打印结果的对比

打印结果:

对应的下载执行时机

从上面看,下载时机async和普通模式都是同样并行下载,只有defer是最后才下载(http1.1有并发数量限制,可是这里并不是并发限制,当我删除common的引用后,我发现defer永远都是最后下载的)

asyncdefer两种模式,区别在于: async是告诉浏览器,它不会操作dom,可以不必等到它下载解析完后再加载页面,也不用等它执行完后再执行其他脚本,俗称异步执行脚本, 多个async无法保证他们的执行顺序,例如async1和async2无法按顺序执行 defer是在解析到结束到</html>标签后才会执行,俗称推迟执行脚本,多个defer可以按顺序执行,例如defer1和defer2可以按顺序执行(实际上也不保证顺序执行) 解析到script标签后,async是直接下载 解析到script标签后,defer是最后下载

相同点: 多个async或者defer标签实际上都不能保证顺序执行 都不会阻塞解析其他script标签内容的解析和页面渲染 他们都会在浏览器load事件前执行,但是不保证是在DomContentLoad事件前还是后执行

影响多个异步脚本的执行顺序因素 脚本文件大小 网络传输因素

特殊情况

当所有的脚本文件都很小很小的时候,结果会在很大概率稳定在

使用的注意点 异步推迟脚本的执行顺序并不稳定,所有尽量只有一个 使用异步推迟脚本时,应该考虑什么场景才使用,而不是滥用它

写在最后

到此这篇关于浅析我对JS延迟异步脚本的思考的文章就介绍到这了,更多相关JS 延迟异步脚本内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网! 您可能感兴趣的文章:JS同步、异步、延迟加载的方法浅谈原生JS中的延迟脚本和异步脚本

script的位置2113一般没有什么影响5261,但是有的4102时候网速比较慢,整1653个网页没有加载玩内得时候,先加载了body标签容里面的 <script> 那么就会先执行。但是有些对象没有加载近来,就会出现错误,说对象不存在。 通常可以 <script defer= "defer " type= "text/javascript " language= "javascript "> </script> 加上defer可以 延迟脚本运行,等网页加载完了再运行脚本,js 延时 完全 api:var timer1 = setTimeout("foo",1000); 2113//设定foo函数将在52611000毫秒后执行一次.........//do somethingclearTimeout(timer1); //如果程4102序执行到这1653里,以setTimeout开始计内数时1000毫秒未到,  容              //clearTimeout后,foo将得不到执行                //如果1000毫秒已过,foo已被触发执行,就没什么意义了vartimer2 = setInterval("foo",1000); //设定从现在计时起,每1000毫秒执行1次foo.........//do somethingclearInterval(timer2); //以后foo将不再触发执行了function foo(){  .......//do something  setTimeout("foo",1000);}本回答被提问者采纳,js 延时du 完全 api:var timer1 = setTimeout("foo",1000); //设定foo函数将在1000毫秒后执行一zhi次dao.........//do somethingclearTimeout(timer1); //如果程序执行到这里版,以setTimeout开始计数时1000毫秒未到,  权              //clearTimeout后,foo将得不到执行                //如果1000毫秒已过,foo已被触发执行,就没什么意义了vartimer2 = setInterval("foo",1000); //设定从现在计时起,每1000毫秒执行1次foo.........//do somethingclearInterval(timer2); //以后foo将不再触发执行了function foo(){  .......//do something  setTimeout("foo",1000);},<SCRIPT>window.setTimeout(function(){alert('欢迎您来到本站!');}, 10 * 1000)</SCRIPT>,一般js头,都有数名语句。看数名语句修改内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript省市级联下拉菜单实例
  • bootstrap table实现双击可编辑、添加、删除行功能
  • js实现以最简单的方式将数组元素添加到对象中的方法
  • js date()日期函数浏览器兼容问题解决方法
  • 微信jsapi ticket接口签名详解
  • js实现无刷新删除内容
  • javascript+html5的canvas实现lab单车动画效果
  • js给onclick赋值传参数的两种方法
  • js模态窗口返回值兼容问题的完美解决方法
  • 文本框input聚焦失焦样式实现代码
  • js脚本延时问题
  • 求官方给出百度统计的延时加载方法。打开网页时,...
  • 如何让一段一般的JS脚本执行在一段异步代码
  • javascript脚本如何异步加载,有什么作用
  • 如何让浏览器中的每个网页都执行我写的一个js脚本?
  • 加载JS脚本实现自动点击 我用的是油猴的
  • javascript 延时5s执行input:file的click()方法不管用
  • 一段safari浏览器不支持的js,JavaScript脚本,求...
  • 如何在正在浏览的网页中增加自己写的javascript脚本?
  • 怎样使所有的JS脚本在整个页面加载后再执行?怎样...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjs同步、异步、延迟加载的方法浅谈原生js中的延迟脚本和异步脚本javascript省市级联下拉菜单实例bootstrap table实现双击可编辑、添加、删除行功能js实现以最简单的方式将数组元素添加到对象中的方法js date()日期函数浏览器兼容问题解决方法微信jsapi ticket接口签名详解js实现无刷新删除内容javascript+html5的canvas实现lab单车动画效果js给onclick赋值传参数的两种方法js模态窗口返回值兼容问题的完美解决方法文本框input聚焦失焦样式实现代码js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js删除数组里的某个元素方法js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js关闭当前页面(窗口)的几种方式js表格组件神器bootstrap table详解(基础解析浏览器端的ajax缓存机制javascript等号运算符使用详解p5.js 毕达哥拉斯树的实现代码无缝滚动改进版支持上下左右滚动(封装成使用js完成节点的增删改复制等的操作插件:检测javascript的内存泄漏js实现可自定义大小,可双击关闭的弹出层js获取日期:昨天今天和明天、后天javascript中合并数组的n种方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved