高性能javascript 笔记(一)

最新推荐文章于 2018-09-25 23:44:07 发布

wtcsy

最新推荐文章于 2018-09-25 23:44:07 发布

阅读量701

点赞数

分类专栏： javascript 随笔。。。。。。

本文链接：https://blog.csdn.net/wtcsy/article/details/8611484

版权

javascript 随笔。。。。。。专栏收录该内容

26 篇文章 0 订阅

订阅专栏

高性能javascript 笔记（一）

加载和执行

阻塞脚本

代码如下

      <html>
            <head>
                  <title>Script Example</title>
            </head>
            <body>
                  <p>
                  <script type="text/javascript">
                        document.write("The date is " + (new Date()).toDateString());
                  </script>
                  </p>
            </body>
      </html>

正如上面HTML 页面中那样，无法预知JavaScript 是否在<p>标签中添加内容。因此，浏览器停下来，运行此JavaScript 代码，然后再继续解析、翻译页面。同样的事情发生在使用src 属性加载JavaScript 的过程中。浏览器必须首先下载外部文件的代码，这要占用一些时间，然后解析并运行此代码。此过程中，页面解析和用户交互是被完全阻塞的。

所以<script>标签应该是放在页面的下面,因为放上面要等待js下载完并且执行完了,才会去渲染界面
Internet Explorer 8, Firefox 3.5, Safari 4, 和Chrome 2 允许并行下载JavaScript 文件。这个好消息表明，当一个<script>标签正在下载外部资源时，不必阻塞其他<script>标签。不幸的是，JavaScript 的下载仍然要阻塞其他资源的下载过程，例如图片。
上面的话是从书上抄的,在chorme下去,发现js 图片资源是可以并行在下的.chrome v5啊

动态脚本元素

这个以前有看,但是没有深入了解过,所以做些笔记

动态创建的script标签是在下载的时候是不会阻塞其他资源下载和渲染的,这是他的好处.坏处就是不好控制什么时候完成了加载

一般创建一个script标签,

非ie下用script.onload来捕获是否完成了标签的加载

ie下用 script. onreadystatechange 监听 script.readyState 为loaded或者为 complete的时候表示标签加载完成(这个2动作可能有时候去触发一个，有时候会都触发,所以当触发了其中的一个的时候,吧这个事件从scipt上去掉,避免第2次触发)

一个例子

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="http://common.cnblogs.com/css/reset.css" />
<style type="text/css">
*{margin:0;padding:0;}
</style>
<title></title>
</head>
<script type="text/javascript">
	if(!window.console){
		window.console = {
			"log" : function(txt){alert(txt)}
		}
	}
	function createJsCss(url,callback){		
		if(!/[a-z0-9]\.js$/i.test(url)){
			return false;
		}
		
		if(!callback || typeof callback != "function"){
			callback = function(){};
		}
		
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = url;
		if(script.readyState){
			script.onreadystatechange = function(){
				if(script.readyState == "loaded" || script.readyState == "complete"){
					script.onreadystatechange = null;
					callback();
					script = null;
				}
			}
		}else{
			script.onload = function(){
				callback();
			}
		}
		document.getElementsByTagName("head")[0].appendChild(script);
	}
	createJsCss("http://common.cnblogs.com/script/jquery.js",function(){console.log("load!!!")});
</script>
<body>

<h1>创建js标签  因为可以不阻塞</h1>
	<img src="http://img02.taobaocdn.com/bao/uploaded/i2/T13ZDeXfNsXXXOjLs1_041123.jpg"><br>
    <img src="http://img04.taobaocdn.com/bao/uploaded/i4/13444019606750826/T1antaXqteXXXXXXXX_!!0-item_pic.jpg"><br>
</body>

</html>

这个是js的,外部资源还有css，不过link标签比较悲剧，FF/Webkit都不支持onload,onreadystatechange，在link标签下用node的标签的node.sheet.cssRules来看它样式的长度表示它加载完了(这个不能跨域引用)

一个例子

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<script type="text/javascript">
	if(!window.console){
		window.console = {
			"log" : function(txt){alert(txt)}
		}
	}
	function createJsCss(url,callback){
		var isurl = /[a-z0-9]\.(js|css)$/i.exec(url);
		
		if(isurl == null){
			return false;
		}
		
		if(!callback || typeof callback != "function"){
			callback = function(){};
		}

		var iscss = isurl[1] =="css",
			sniff = 1 + /(?:Gecko|AppleWebKit)\/(\S*)/.test(navigator.userAgent), // 0 - IE, 1 - O, 2 - GK/WK
			doc = document,
			head = doc.head || doc.getElementsByTagName("head")[0],
			node,
			createNode = function(name, attrs){
				var node = doc.createElement(name), attr;
				for (attr in attrs) {
					if (attrs.hasOwnProperty(attr)) {
						node.setAttribute(attr, attrs[attr]);
					}
				}
				return node;			
			}			

		if(iscss){
			node = createNode("link",{
				type : "text/css",
				rel  : "stylesheet",
				href : url
			});
		}else{
			node = createNode("script",{
				type : "text/javascript",
				url  : url
			});
		}		
		
		node.setAttribute('charset', 'utf-8');
		this.xx = node;
		if(iscss){
			if(sniff == 2){				
				!function (){
					var my = arguments.callee;
					if(node.sheet && node.sheet.cssRules){
						callback();
					}else{
						setTimeout(my,200);
					}
				}();
			}else{
				node.onload = function(){
					callback();
				}
			}
		}else{
			if(node.readyState){
				script.onreadystatechange = function(){
					//if(script.readyState == "loaded" || script.readyState == "complete"){
					if(/loaded|complete/.test(script.readyState)){					
						script.onreadystatechange = null;
						callback();
						script = null;
					}
				}
			}else{
				script.onload = function(){
					callback();
				}
			}
		}
		
		head.appendChild(node);
	}
	//createJsCss("http://common.cnblogs.com/script/jquery.js",function(){console.log("load!!!")});
	createJsCss("reset.css",function(){console.log("load!!!")});	
</script>
<body>

<!--
	<img src="http://img02.taobaocdn.com/bao/uploaded/i2/T13ZDeXfNsXXXOjLs1_041123.jpg"><br>
    <img src="http://img04.taobaocdn.com/bao/uploaded/i4/13444019606750826/T1antaXqteXXXXXXXX_!!0-item_pic.jpg"><br>
-->
</body>

</html>

数据访问

数据的存储位置会在很大的程度上影响读取速度,javascript里面也一样,js只有四中存储方案,直接量,变量,数组,对象成员。读取速度

什么是直接量了如下

var a = "asdf";
a.split(""); //这里就是变量
"asdf".split("");//这里就是直接量了

直接量,变量读写消耗很少,数组,对象消耗较多

还有一个就是作用域了,当前的作用域下的变量肯定比其他作用域下的变量要快,(高性能javascript 里面的作用域讲的非常好了,推荐看),而且标示符所在的位置越深,它的读写速度越慢,所以拿一个全局变量引用更深层次的变量,是个好方法

闭包变量(暂且这么叫),它是会一直占着内存的,而且GC不会回收,好处就是可以提高访问速度

对象的属性查找比如a.b,它是会查找所有的a下的属性,所以这个也不能滥用啊,像这种嵌套的也拿变量保存起来用吧,一般2次以前的嵌套对象就可以拿一个变量来保存了(其实我写代码中,一直遵循这个原则,特别是在遍历当中,把嵌套的变量提出来很有必要)

一个例子

var comm =  {
	options : {
		hey : "hey,I miss you",
		arr : ["rain now"]
	}
}


alert(comm.options.hey)
alert(comm.options.arr.join(""))

// 如果多次使用 comm.options  肯定拿个变量保存比较好
var options = comm.options;
alert(options.hey)
alert(options.arr.join(""))

遍历中更为重要

var comm = {
	a:{
		hey : "hey,I miss you"
	}
}

var arr = [1,2,3,4,5,6,7,8,9]
for(var i=0,l=arr.length;i<l;i++){
	console.log(comm.a.hey)
}
// 遍历中取变量的值的时候  一定要把变量提出来啊
var arr = [1,2,3,4,5,6,7,8,9],
	hey = comm.a.hey
for(var i=0,l=arr.length;i<l;i++){
	console.log(hey)
}