模板wordpress演示站怎么做,网络营销的特点及形式,ftp搭建工具,wordpress 支付 小程序一两个月前在淘宝内网里看到一个优化Javascript代码的竞赛#xff0c;发现有不少的人对Javascript的执行和装载的基础并不懂#xff0c;所以#xff0c;从那天起我就想写一篇文章#xff0c;但一直耽搁了。 首先#xff0c;我想说一下Javascript的装载和执行。通常来说发现有不少的人对Javascript的执行和装载的基础并不懂所以从那天起我就想写一篇文章但一直耽搁了。 首先我想说一下Javascript的装载和执行。通常来说浏览器对于Javascript的运行有两大特性1载入后马上执行2执行时会阻塞页面后续的内容包括页面的渲染、其它资源的下载。于是如果有多个js文件被引入那么对于浏览器来说这些js文件被被串行地载入并依次执行。 因为javascript可能会来操作HTML文档的DOM树所以浏览器一般都不会像并行下载css文件并行下载js文件因为这是js文件的特殊性造成的。所以如果你的javascript想操作后面的DOM元素基本上来说浏览器都会报错说对象找不到。因为Javascript执行时后面的HTML被阻塞住了DOM树时还没有后面的DOM结点。所以程序也就报错了。 传统的方式 所以当你写在代码中写下如下的代码 script typetext/javascript srchttp://coolshell.cn/asyncjs/alert.js/script 基本上来说head里的 script标签会阻塞后续资源的载入以及整个页面的生成。我专门做了一个示例你可以看看示例一。 注意我的alert.js中只有一句话alert(“hello world”) 这更容易让你看到javascript是怎么阻塞后面的东西的。 所以你知道为什么有很多网站把javascript放在网页的最后面了要么就是动用了window.onload或是docmuemt ready之类的事件。 另外因为绝大多数的Javascript代码并不需要等页面所以我们异步载入的功能。那么我们怎么异步载入呢 document.write方式 于是你可能以为document.write()这种方式能够解决不阻塞的方式。你当然会觉得document.write了的script标签后就可以执行后面的东西去了这没错。对于在同一个script标签里的Javascript的代码来说是这样的但是对于整个页面来说这个还是会阻塞。 下面是一段测试代码 script typetext/javascript languagejavascriptfunction loadjs(script_filename) {document.write( script languagejavascript typetext/javascript);document.write( src script_filename );document.write(/script);alert(loadjs() exit...);}var script http://coolshell.cn/asyncjs/alert.js;loadjs(script);alert(loadjs() finished!);
/scriptscript typetext/javascript languagejavascriptalert(another block);
/script 你觉得alert的顺序是什么你可以在不同的浏览器里试一试。这里的想关的测试页面示例二。 script的defer和async属性 IE自从IE6就支持defer标签如 script defer typetext/javascript src./alert.js /script 对于IE来说这个标签会让IE并行下载js文件并且把其执行hold到了整个DOM装载完毕DOMContentLoaded多个defer的script在执行时也会按照其出现的顺序来运行。最重要的是script被加上defer后其不会阻塞后续DOM的的渲染。但是因为这个defer只是IE专用所以一般用得比较少。 而我们标准的的HTML5也加入了一个异步载入javascript的属性async无论你对它赋什么样的值只要它出现它就开始异步加载js文件。但是async的异步加载会有一个比较严重的问题那就是它忠实地践行着“载入后马上执行”这条军规所以虽然它并不阻塞页面的渲染但是你也无法控制他执行的次序和时机。你可以看看这个示例去感受一下。 支持async标签的浏览器是Firefox3.6Chrome8.0Safari5.0IE10Opera还不支持,所以这个方法也不是太好。因为并不是所有的浏览器你都能行。 动态创建DOM方式 这种方式可能是用得最多的了。 function loadjs(script_filename) {var script document.createElement(script);script.setAttribute(type, text/javascript);script.setAttribute(src, script_filename);script.setAttribute(id, coolshell_script_id);script_id document.getElementById(coolshell_script_id);if(script_id){document.getElementsByTagName(head)[0].removeChild(script_id);}document.getElementsByTagName(head)[0].appendChild(script);
}var script http://coolshell.cn/asyncjs/alert.js;
loadjs(script); 这个方式几乎成了标准的异步载入js文件的方式这个方式的演示请参看示例三。这方式还被玩出了JSONP的东东也就是我可以为script的src指定某个后台的脚本如PHP而这个PHP返回一个javascript函数其参数是一个json的字符串返回来调用我们的预先定义好的javascript的函数。 按需异步载入js 上面那个DOM方式的例子解决了异步载入Javascript的问题但是没有解决我们想让他按我们指定的时机运行的问题。所以我们只需要把上面那个DOM方式绑到某个事件上来就可以了。 比如 绑在window.load事件上——示例四 你一定要比较一下示例四和示例三在执行上有什么不同我在这两个示例中都专门用了个代码高亮的javascript看看那个代码高亮的的脚本的执行和我的alert.js的执行的情况你就知道不同了 window.onload loadjs(http://coolshell.cn/asyncjs/alert.js) 绑在特定的事件上——示例五 p stylecursor: pointer onclickLoadJS()Click to load alert.js /p 这个示例很简单了。当你点击某个DOM元素才会真正载入我们的alert.js。 更多 但是绑定在某个特定事件上这个事似乎又过了一点因为只有在点击的时候才会去真正的下载js这又会太慢了了。好了到这里要抛出我们的终极问题——我们想要异步地把js文件下载到用户的本地但是不执行仅当在我们想要执行的时候去执行。 要是我们有下面这样的方式就好了 var script document.createElement(script);
script.noexecute true;
script.src alert.js;
document.body.appendChild(script);//后面我们可以这么干
script.execute(); 可惜的是这只是一个美丽的梦想今天我们的Javascript还比较原始这个“JS梦”还没有实现呢。 所以我们的程序员只能使用hack的方式来搞。 有的程序员使用了非标准的script的type来cache javascript。如 script typecache/script src./alert.js/script 因为”cache/script”这个东西根本就不能被浏览器解析所以浏览器也就不能把alert.js当javascript去执行但是他又要去下载js文件所以就可以搞定了。可惜的是webkit严格符从了HTML的标准——对于这种不认识的东西直接删除什么也不干。于是我们的梦又破了。 所以我们需要再hack一下就像N多年前玩preload图片那样我们可以动用object标签也可以动用iframe标签于是我们有下面这样的代码 function cachejs(script_filename){var cache document.createElement(object);cache.data script_filename;cache.id coolshell_script_cache_id;cache.width 0;cache.height 0;document.body.appendChild(cache);
} 然后我们在的最后调用一下这个函数。请参看一下相关的示例示例六 在Chrome下按 CtrlShitI切换到network页你就可以看到下载了alert.js但是没有执行然后我们再用示例五的方式因为浏览器端有缓存了不会再从服务器上下载alert.js了。所以就能保证执行速度了。 关于这种preload这种东西你应该不会陌生了。你还可以使用Ajax的方式如 var xhr new XMLHttpRequest();
xhr.open(GET, new.js);
xhr.send(); 到这里我就不再多说了也不给示例了大家可以自己试试去。 最后再提两个js一个是ControlJS一个叫HeadJS专门用来做异步load javascript文件的。 好了这是所有的内容了希望大家看过后能对Javascript的载入和执行以及相关的技术有个了解。同时也希望各前端高手不吝赐教转载于:https://www.cnblogs.com/fengyuqing/p/javascript_load_execute.html
