高性能javascript编程 读书笔记

界面绘制的时候,每次遇到<script>标签,页面必须停下来等待代码下载(如果是外部的)并执行,然后再继续处理页面其他部分:下面几个方法可以减少javascript对渲染页面的等待时间。

(1)将所有<script>标签放置在页面的底部,紧靠body关闭标签</body>的上方。此法可以保证页面在脚本运行之前完成解析

(2)将脚本成组打包。页面的<script>标签越少,页面的加载速度就越快,响应也更加迅速。不论外部脚本文件还是内联代码都是如此.

(3)有几种方法可以使用非阻塞方式下载JavaScript:
1.为<script>标签添加defer属性(只适用于Internet Explorer和Firefox 3.5以上版本)

比如:<script type="text/javascript" src="xx.js" defer></script>
2.动态创建<script>元素,用它下载并执行代码

var script = document.createElement ("script");
script.type = "text/javascript";
script.src = "80iter.js";
document.getElementsByTagName("head")[0].AppendChild(script);
3.用XHR对象下载代码,并注入到页面中

var xhr = new XMLHttpRequest();
xhr.open("get", "80iter.js", true);
xhr.onreadystatechange = function(){
 if (xhr.readyState == 4){
 if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
 var script = document.createElement ("script");
 script.type = "text/javascript";
 script.text = xhr.responseText;
 document.body.appendChild(script);
 }
 }
};
xhr.send(null);
注意: 这个方法不能跨域


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值