Downloaded 28 times
![这样看起来就舒服多了Load([“a.js”, “b.js”, “c.js”, “d.js”] , function(){ //do something });](https://image.slidesharecdn.com/css-101224085641-phpapp02/85/Css-20-320.jpg)
![这样就更好了Load(“d.js”, function(){ //do something})“d.js” 依赖于[“a.js”, “b.js”, “c.js”]](https://image.slidesharecdn.com/css-101224085641-phpapp02/85/Css-21-320.jpg)
![n.onload = n.onreadystatechange = function () { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { _loaded[this.getAttribute('src')] = true; if (cb) {cb(this.getAttribute('src'), context); } //防止ie6的内存泄漏问题n.onload = n.onreadystatechange = null; }};](https://image.slidesharecdn.com/css-101224085641-phpapp02/85/Css-23-320.jpg)
![Do.add('common', {path: 'http://img3.douban.com/js/site/packed_common0.js', type: 'js'});Do.add('common-eventhandler', {path: 'http://img3.douban.com/js/site/packed_common_eventhandler0.js', type: 'js', requires: ['common']});Do('common', 'common-eventhandler');](https://image.slidesharecdn.com/css-101224085641-phpapp02/85/Css-25-320.jpg)
模块化和组件化Css
- 1.
- 2.
- 3.
- 4.
- 5.
- 6. Why lazyloadStart soonerStopwaiting
- 7.
- 8.
- 9. Total_Speed = Time_to_Download+ Time_to_parse + Time_to_execute（evaluation）
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. 监听js是否加载并准备就绪Firefox,Opera,Chrome,Safari 3+script.onloadiescript.readystatechangescript.readyState === “loaded” script.readyState === “complete”
- 18.
- 19. 不过…文件一多…loadScript(“a.js”, function(){loadScript(“b.js”, function(){loadScript(“c.js”,function(){loadScript(“d.js”, function(){ alert(“哎呀我擦,终于加载好了”); } } }}
- 20. 这样看起来就舒服多了Load([“a.js”, “b.js”, “c.js”,“d.js”] , function(){ //do something });
- 21. 这样就更好了Load(“d.js”, function(){ //do something})“d.js”依赖于[“a.js”, “b.js”, “c.js”]
- 22.
- 23. n.onload = n.onreadystatechange= function () { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { _loaded[this.getAttribute('src')] = true; if (cb) {cb(this.getAttribute('src'), context); } //防止ie6的内存泄漏问题n.onload = n.onreadystatechange = null; }};
- 24. 加载单个文件的处理。接受五个参数：url, type（文件类型）, charset（编码）,cb（要对应执行的方法）, context（执行上下文环境）
- 25. Do.add('common', {path: 'http://img3.douban.com/js/site/packed_common0.js',type: 'js'});Do.add('common-eventhandler', {path: 'http://img3.douban.com/js/site/packed_common_eventhandler0.js', type: 'js', requires: ['common']});Do('common', 'common-eventhandler');
- 26. 问题依然存在：下载a.js -> 执行a.js回调-> 下载b.js -> 执行b.js的回调-> 下载c.js -> 执行c.js的回调-> 下载d.js -> 执行d.js的回调不能做到并行下载….
- 27.
- 28. 那么在chrome/safari里，可以插入一个<script type=“text/cache” src=“#”>来实现，type=“text/cache”的脚本下载好后会缓存并触发onload，但不会执行。之后再插入scripttype=“text/javascript”，因为这个时候脚本都已经下载好，所以插入的顺序就是执行的顺序了
- 30.
- 32. 最后，统一的解决方案同域文件用xmlhttprequest请求过来这时，脚本是以字符串的形式传递过来的var s =document.createElement('script'); s.text = xhrObj.responseText;head.appendChild(s);
- 33.
- 34. 跨域的脚本Firefox/opera里可以用动态 Script DOMelement ，完美地实现并行下载和顺序执行对于 Safari/Chrome/IE ，无法保证顺序执行，通过插入一个 <script type=“text/cache” src=“#”> 来实现。
- 35.
- 36. 关于defer<script src=" "defer></script>加上 defer 等于在页面完全在入后再执行脚本，相当于 window.onload,但应用上比 window.onload更灵活告诉浏览器这段脚本不需要立即执行，从而做到异步加载，不阻塞其他资源下载在window.onload处理之前执行defer的脚本
- 37.
- 38.
- 39. <head><script defer> alert(3);</script><script> alert(1);</script></head><body><script defer> alert(4);</script><script> alert(2);</script><script>window.onload = function(){ alert(5); }</script></body>http://stevesouders.com/cuzillion/?ex=10017&title=IE+Ensure+Order+Excution
- 40. Html5 asyncThis Booleanattribute is set to indicate that the browser should, if possible, execute the script asynchronously. If the script cannot be executed asynchronously, or the browser doesn’t support this attribute, the script is executed synchronously (and loading the content blocks until the script finishes running).加了这个属性就意味这该脚本的执行不会影响页面的加载
- 41.
- 42. 回到根源Reduce(减少文件大小)Defer(延迟)Go Async(异步)Be Lazy(懒加载)BiteSize(真的需要 JS 吗)
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58. <iframe class="k2-display-none" src="?noscript=true"></iframe>我们可以这样发一个请求Y.io("?noscript=true",cfg);o.responseText就是含有当前页面noscript标签的html字符串
- 59.
- 60.
- 61.
- 62.
- 63. 自定义事件Y. publish(evt_type, opts)在Y.EventTarget._yuievt.events里存储Y. fire( evt_type )触发绑定的回调事件队列
- 64. 再具体一点添加自定义事件Y.pulish("lazyloadReady:" + i,{ type : "lazyloadReady:" + i, preventable : false});
- 65. 触发事件ev = "lazyloadReady:"+ (i + 1);Y.fire(ev);
- 66. 绑定事件Y.on("lazyloadReady:1" , function(){ alert("第一个模块加载完成");});暂时使用了页面上noscript标签的序号作为事件名…还在考虑更好的方法
- 67.
- 68. 看看kissy怎么做的dataLazyload.addCallback(el, fn) 表示当el 即将出现时，触发 fn具体实现我觉得应该是类似的，有兴趣的可以看看源代码的实现
- 69.
- 70.