雅虎给出了优化网站加载速度的34条法则（包括Yslow规则22条）

Minimize HTTP Requests 减少HTTP请求

图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用CSS sprites将小图拼合后利用background来定位。

Use a Content Delivery Network 利用CDN技术

使用cdn技术，尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定

Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存

浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了，否则用户端不会主动刷新

Gzip Components Gzip压缩

Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%

Put Stylesheets at the Top 把CSS放顶部

让浏览者能尽早的看到网站的完整样式

阅读更多

第一种模式：工厂方式

1
2
3
4
5
6
7
8
9
10
11
12
13

var say=function(){
	return "XiaoMing";
};
function Parent(){
	var  Child = new Object();
	Child.name="小明";
	Child.age="30";
	Child.say=say;
	return Child;
};
var x = Parent();
alert(x.name);
alert(x.say());

说明：
1.在函数中定义对象,并定义对象的各种属性，虽然属性可以为方法，但是建议将属性为方法的属性定义到函数之外，这样可以避免重复创建该方法
2.引用该对象的时候，这里使用的是var x = Parent()而不是var x = new Parent()。因为后者会可能出现很多问题（前者也成为工厂经典方式,后者称之为混合工厂方式），不推荐使用new的方式使用该对象
3.在函数的最后返回该对象
4.不推荐使用这种方式创建对象，但应该了解

阅读更多

浮动是CSS布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为CSS布局的难点之一
浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘。当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果
清除浮动有好一些方法，但兼容各种浏览器的方法却不多，下面我就介绍几个比较有效的兼容的方法:
我们以下面的HTML代码为例来说明这几种方法的用法：

1
2
3
4

<div id="box">
	<div id="sidebar"></div>
	<div id="main"></div>
</div>

对父级设置CSS高度

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
对应CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#box{
	width:500px;
	margin:10px auto;
	background:#ccc;
	height:500px;/*解决代码*/
}
#sidebar{
	width:190px;
	height:500px;
	float:left;
	background:#f00;
}
#main{
	width:300px;
	height:500px;
	float:right;
	background:#00f;
}

阅读更多

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是IE盒子模型和标准W3C盒子模型，他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：

阅读更多

做项目的时候发现了一个setTimeout问题，比如以下代码:

1
2
3
4
5

for(var i=0;i<10;i++){
    setTimeout(function(){
        console.log(i)
    },1000*i)
}

本意我是想让这个for循环每隔1秒延时后打印一次i的值，结果是每隔一秒打印了10，打印了10个10，对此我表示不求甚解

阅读更多

display属性

每个元素都有默认的display属性，一般是block或者inline
block表示块级元素，而inline表示行内元素
block元素（如div、table、p、form等）会新开始一行并尽可能撑满容器。而inline元素（如span、a等）即行内元素不会打破包裹它的容器的布局
另一个常用的display值为none，display:none通常是被JavaScript用来在不删除元素的情况下隐藏该元素。
其他的display值还有list-item和table等,你可以随时随地人工改变一个元素的display值。
常见的是:设置li元素为display:inline制作水平菜单。

marigin:auto

如何使一个元素居中，并且不用担心小屏幕会显示出滚动条：(max-width 支持IE7+)

1
2
3
4

#main{
	max-width:600px;
	margin:0 auto;
}

盒模型

盒模型的宽度高度我们知道要通过计算（真正的宽度=width+2padding+2border）我们使用box-sizing来改进它，当设置一个元素为box-sizing:border-box时，此元素的内边距和边框不会增加该元素的宽度。支持IE8+，如果要在所有浏览器中使用该属性，则可以利用下面的代码：

1
2
3
4
5

*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

阅读更多

几种方法的简单介绍

display:none
最常用的隐藏元素的方法

1
2
3

.hidden{
    display:none
}

将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘
visibility:hidden
此方法也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排

1
2
3

.hidden{
    visibility:hidden
}

visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景
opacity:0
opacity属性表示元素的透明度，而将元素的透明度设置为0后，在我们眼中，元素也就是隐藏起来的，这也算是一种隐藏元素的方法

1
2
3

.transparent {
    opacity:0;
}

这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中

阅读更多

每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，也就是说将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。

私有变量、函数

在具体说prototype之前说几个相关的知识点，可以更好的理解prototype的设计意图。JavaScript的函数作用域，在函数内定义的变量和函数如果不对外提供接口，那么外部将无法访问到，也就是变为私有变量和私有函数

1
2
3
4
5

function Obj(){
	var a=0; //私有变量
	var fn=function(){ //私有函数
	}
}

这样在函数对象Obj外部无法访问变量a和函数fn，它们就变成私有的，只能在Obj内部使用，即使是函数Obj的实例仍然无法访问这些变量和函数

1
2
3

var o=new Obj();
console.log(o.a); //undefined
console.log(o.fn); //undefined

阅读更多

JSON

JSON是一种轻量级的数据格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是javascript原生数据格式，这意味着在javascript中处理JSON数据时效率非常高
基本格式：

1

var data={"data1":"Hello,","data2":"world!"}

调用方法：

1

console.log(data.data1 + data.data2)

将json数据存入数组

1

var data=[{"name":"LiLei","age":19,"sex":"male"},{"name":"HanMei","age":18,"sex":"famale"}]

阅读更多

DOCTYPE

DOCTYPE声明位于文档中最前面的位置，处于html标签之前，此标签告知浏览器文档应使用哪种HTML或者XHTML规范解析页面
DTD声明以<!DOCTYPE>开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在IE下开启怪异模式渲染网页
公共DTD，名称格式为注册//组织//类型 标签//语言

注册指组织是否由国际标准化组织ISO注册，+表示是，-表示不是
组织即组织名称，如：W3C
类型一般是DTD
标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号
最后语言是DTD 语言的ISO 639语言标识符，如：EN表示英文，ZH表示中文

XHTML 1.0可声明三种DTD类型。分别表示严格版本、过渡版本、以及基于框架的HTML文档

• HTML 4.01 strict

  1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• HTML 4.01 Transitional

  1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• HTML 4.01 Frameset

  1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

• HTML5推出更加简洁的书写，它向前向后兼容，推荐使用

  1	<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

阅读更多