第八期Web标准化交流会.pptVIP

无阻塞加载JavaScript JavaScript加载时会阻碍其他资源的下载 IE8可并行下载JS 目的：JS与其他资源一起并行下载 XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag worker 多域名解决最大连接数限制 大量资源引起下载阻塞 根据浏览不同最大连接数不同 避免空地址元素 What？ img src= / var img = new Image();img.src = ; 危害 增加页面的请求数 增加服务器压力 编码心得 缓存原生对象，避免全局查找 (function() { var documen= window.document; function $(id) { return document.getElementById(id); } })(); 整合必威体育精装版web技术，提高代码性能 toString VS + ‘ parseInt VS + regExp VS indexOf append VS innerHTML eval with Object.method VS method in Object 广告时间 Web前端工程师 美工设计 CSS JavaScript QQ群Joe END 谢谢大家 Lady first * Web标准化交流会 网站性能优化 导 读 无阻塞加载Javascript 利用域名别名增加并行下载数量 避免空路径元素 编码心得 无阻塞加载JavaScript 常用的几种方法： 无阻塞加载JavaScript XHR Eval Ajax callback eval 应用：Prototype.js Ruby on rails 无阻塞加载JavaScript XHR Injection Ajax callback var xhrObj = getXHRObject(); //上个例子中定义的对象 xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { var scriptElem = document.createElement(script); document.getElementsByTagName(head)[0] .appendChild(scriptElem); scriptElem.text = xhrObj.responseText; } }; xhrObj.open(GET, A.js, true); //必须同域 xhrObj.send(); script标签 无阻塞加载JavaScript Script in Iframe 嵌入iframe 获取HTML !--parent-- iframe src=A.html width=0 height=0 frameborder=0 id=frame1 /iframe 与父页面交互 //iframe // access the main page from within the iframe using parent function createNewDiv() { var newDiv = parent.document.createElement(div); parent.document.body.appendChild(newDiv); } //parent document.getElementById(frame1).contentWindow.createNewDiv 无阻塞加载JavaScript Script DOM Element script标签 设置src var scriptElem = document.createElement(script); scriptElem.src = /A.js; var head = document.getElementsByTagName(head)[0]; head.appendChild(scriptElem); 可跨域 应用：JSONP 无阻塞加载JavaScript Script Defer script defer src=A.js/script IE Only 限制条件 脚本中不包含document.write 脚本不依赖网页内容 无阻塞加载JavaScript document.w