JavaScript基础及前端优化

一.JavaScript基础

1.闭包

简单来说，一个函数内部调用了函数外部的变量就是闭包。

简单闭包：

var i = 1;
function fn (){
	alert(i);
}

复杂闭包：

var cache = (function(){
	var obj = {};//避免暴露非必要变量
	
	return {
		get: function(key){
			return obj[key];
		},
		set: function(key, value){
			obj[key] = value;
		}
	};
})();

闭包的优点是有利于保护私有变量，加强了封装性;不增加额外的全局变量。但它强耦合，常驻内存。

2.作用域

表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。Javascript的作用域只有两种：全局作用域和本地作用域，本地作用域是按照函数来区分的。

<script>
var i = 1;
function fn(){
	alert(i);// undefined

	var i = 2;
	alert(i);// 2
}
fn();
</script>

<script>
var i = 0;
while(i < 3) {
	i ++;
	setTimeout(function(){
		alert(i);
	}, 1);
}

// 弹出3次“3”
</script>

3.作用域链

当代码在一个环境中执行时，会创建变量对象的一个作用域链来保证对执行环境有权访问的变量和函数的有序访问。

<script>
	!function() {
		var global = {
			name: 'global'
		};
		
		function globalFn() {
			var inner = {
				name : 'globalFn inner'
			};
			!function() {
				var foo = 'foo';
				
				console.log(foo);
				console.log(inner.name);
				console.log(global.name);
			}();
		}	
		
		globalFn();
	}();
</script>

运行结果：

foo
globalFn inner
global

4.类的定义

方式一：

function Foo() {
    this.a = 1;
    this.start = function(){
        // ...
    };
    this.end = function(){
        // ...
    };
}

方式二：

function Foo() {
    this.a = 1;
}
Foo.prototype.start = function(){
    // ...
};
Foo.prototype.end = function(){
    // ...
};

方式三：

function Foo() {
    this.a = 1;
}
Foo.prototype = {
    start: function(){
        // ...
    },
    end: function(){
        // ...
    }
};

方式四：

Function.prototype.method = function(name, fn){
    this.prototype[name] = fn;
};
function Foo() {
    this.a = 1;
}
Foo.method('start', function(){
    // ...
});
Foo.method('end', function(){
    // ...
});

方式五：

// 链式调用
Function.prototype.method = function(name, fn){
    this.prototype[name] = fn;
    return this;
};
function Foo() {
    this.a = 1;
}
Foo.method('start', function(){
    // ...
}).method('end', function(){
    // ...
});

二.前端优化

1.css优化

CSS文件写在头部进行引用

避免在文档内内联样式

避免滥用web字体

避免CSS表达式

用<link>代替@import

避免使用（IE）过滤器

2.javaScipt优化

把脚本放到底部

避免在文档内内联脚本

最小化DOM访问

var i = $(input);
i.attr();
i.val();

最小化全局对象访问

var a = window.a;
a.xx
a.xxx

3.image优化

优化图片

a.把gif转成png

b.运行pngcrush或其它工具压缩png

c.运行jpegtran或其它工具压缩jpeg

优化CSS雪碧图

a.缩小图片间的间距

b.把颜色近似的图片合并到一张雪碧图

不要在html中缩放图片

favicon.ico小且缓存

4.请求优化

Combined Files-合并文件

CSS Sprites-雪碧图，将多张图片合并成一张图片

Inline Images-內连图片

压缩资源文件

5.服务器优化

Gzip压缩资源文件

a.Gzip通常可以减少70%的响应大小

b.可压缩的有html、js、css、json等文本文件

添加Expires或Cache-Control

a.对静态组件：Expires

b.对动态组件：Cache-Control

配置Etags

尽量使用GET Ajax请求

如下所示百度主页的网络请求信息：

Etag 是URL的Entity Tag，用于标示URL对象是否改变，区分不同语言和Session等等。具体内部含义是使服务器控制的，就像Cookie那样。

HTTP协议规格说明定义ETag为“被请求变量的实体值” 。另一种说法是，ETag是一个可以与Web资源关联的记号（token）。典型的Web资源可以一个Web页，但也可能是JSON或XML文档。服务器单独负责判断记号是什么及其含义，并在HTTP响应头中将其传送到客户端。

常用cache-directive值

对cache-directive值的浏览器响应

JavaScript基础及前端优化

猜你喜欢