1.起因:
每次遇到<script> 标签时,页面必须停下来等待代码下载并执行完,然后再继续处理其他部分。
2.减少JavaScript对性能的影响
1.将所有的JavaScript文件放在</body>前,这能确保脚本执行前页面已经完成了渲染。
2.合并脚本。页面中的<script>标签越少,加载也就越快,响应也就更迅速。无论外链脚本还是内嵌脚本。
3.有多种无阻塞下载JavaScript方法:
1.使用<script>的defer属性,async属性(IE)
2.使用动态创建的<script>元素来下载并执行代码
function loadScript(url, callback){ var script = document.createElement('script'); script.type = "text/javascript"; if(script.readyState){ //IE9以下 script.onreadystatechange = function(){ if(script.readyState=='complete'||script.readyState=='loaded'){ callback(); } } }else{ script.onload = function () { //firefox chrome safair opera callback(); } } script.src = url; document.head.appendChild(script); }
3.使用XHR对象下载JavaScript代码并注入页面中