1.原型链继承
子类的原型属性可以继承父类实例,访问父类实例的属性和方法
function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
};
function SubType() {
this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSubValue()); //true
2.事件流
利用冒泡的原理,指定一个事件处理程序,可以管理一类型的所有事件,绑定到父元素
移除事件绑定
在冒泡型事件流中click事件传播顺序为
<div>—》<body>—》<html>—》document
在捕获型事件流中click事件传播顺序为
document—》<html>—》<body>—》<div>
DOM标准采用捕获+冒泡
DOM标准规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
事件捕获阶段:实际目标<div>
在捕获阶段不会接收事件。也就是在捕获阶段,事件从document到<html>
再到<body>
就停止了
处于目标阶段:事件在<div>
上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
冒泡阶段:事件又传播回文档。
3.内核
浏览器 | 说明 | 内核 |
---|---|---|
IE | Trident | IE内核 |
Gecko | Mozilla、Firefox | Gecko |
Chrome、Safari | Webkit | |
Opera | Presto | |
Konqueror | KHTML |
4.模块
说明 | 形式 | 缺点 |
---|---|---|
放在一起 | func m1(){},fund m2(){} | 全局变量多,污染全局变量 |
对象 | var a={m1:func(){},m2:func(){}} | 暴露城院,易被改写 |
立即执行函数 | (function) | 外部无法读取内部变量 |
CommonJS | module_export出口对象、requires加载对象 | 同步 |
ADM\CMD | 异步 |
5.SEO
HTML
- 封闭标签
<></>
- 去除多余的空格
<a>
标签添加title属性<img>
标签添加alt和title属性- 使用语义化的标签
- 行内元素里面不能写块级元素
- meta标签的合理使用
- 注释
CSS
- 合理使用行内样式
- 若css样式很多,则进行外部引用
- 尽量减少使用*
- 注意缩写
border、margin、padding
- 利用css的继承,减少代码量
- 合理使用class
- 合并图片
- 合理注释
JS:
(解释性脚本语言,相对安全,基于对象,事件驱动,若类型,跨平台)
1. 外部引用
2. 合并js
3. 习惯减少重绘,减少作用域
优点:
1. 减少http传输,
2. 方便处理HTML
3. 支持分布式运算
缺点:
各个浏览器的支持性不同,web安全性
web性能优化
- 减少HTTP请求(合并css、js、使用css sprites合并背景图片)
- 设置浏览器缓存,根据响应的header(每次重载、无提示、LastExag 304、强制设置缓存)
- 使用压缩组件,GZIP
- image和js的预载入,在登录页面载入
- 将脚本语言放在底部,css样式放在顶部
- 使用外部js、css
- 切分组件到多个域
- 减少css、flash、image
DOM优化
- 批量增加,最小化现场更新
- 使用innerHTML
- 使用事件代理
- HTML Collection
6.数据类型
类型 | typeof操作符 | instanceof |
---|---|---|
undefined | undefined | 无 |
null | object | 无 |
boolean | boolean | 无 |
number | number | 无 |
string | string | 无 |
object | object | true |
object、array、function、string |
7.call(),apply(),bind()
在特定的作用域中调用函数(在{父函数}中调用{(apply和call前面的)函数})
apply()——逐个列举,参数数组;扩展作用域`func1.apply(o)//把func1绑定到o`
call()——可以是Array实例,可以是arguments;扩展作用域`func2.call(o)//把func2绑定到o`
bind()——funcend = func.bind(o);o绑定到funcend,funcend的this为o
8.JSON和XML
json——轻量级、独立,自我描述,易读,宽带小
XML——标记语言,类HTML,纯文本,格式标准严格优势,与其他系统远程交互,文件庞大,结构复杂,
9.数据结构
逻辑结构
集合——
线性——一维数组、队列、栈
非线性——数、图、多维数组
存储结构
顺序、链式、索引、散列
10.浏览器加载渲染网页过程解析
web浏览器与web服务器之间通过HTTP协议进行通信的过程(域名解析 -> 建立连接 -> 发起请求 -> 等待响应 -> 接收数据)
- 从浏览器地址栏的请求链接开始(在地址栏输入网址)
- 浏览器通过DNS解析查到域名映射的IP地址,成功后浏览器端向此IP地址取得链接
- 链接成功后,浏览器将请求头信息通过HTTP协议向IP所在的服务器发起请求
- 服务器接收到请求后等待处理,向浏览器端发回响应
- 浏览器从服务器端接收text/html类型的代码,浏览器开始显示此html(获得内嵌资源地址,浏览器发起请求获得这些资源)
层 | 过程 | 备注 |
---|---|---|
应用 | 1.DNS解析(把http://anfang.com:8080/test/index.html变成ip(如果不包含端口号,则会使用该协议的默认端口号); | (本地的机器上在配置网络时都会填写DNS)把url发给配置的DNS服务器,如果能够找到相应的url则返回其ip,否则该DNS将继续将该解析请求发送给上级DNS,整个DNS可以看做是一个树状结构,该请求将一直发送到根直到得到结果。 |
应用 | 2.建立一个socket连接(socket是通过ip和端口建立); | 拥有了目标ip和端口号,打开socket连接 |
应用 | 3.向web服务器发送请求(GET或POST); | GET 路径/文件名 HTTP/1.0(GET /test/index.html HTTP/1.0,) |
应用 | 4.应答 web服务器收到这个请求,进行处理 | 从它的文档空间中搜索子目录test的文件index.html,如果找到,Web服务器把该文件内容传送给相应的Web浏览器 |
应用 | 5.关闭连接 | Web浏览器与Web服务器必须断开,保证其它Web浏览器能够与Web服务器建立连接 |
数据包在网络中漫游的经历
各层之间是严格单向依赖的,下层是服务提供者,上层是请求服务的用户
网络分层 | 作用 |
---|---|
应用 | 根据当前的需求和动作,结合应用层的协议,有我们确定发送的数据内容,把这些数据放到一个缓冲区内,然后形成了应用层的报文data |
传输 | 数据通过传输层发送(如tcp协议),数据会被送到传输层处理,在这里报文打上了传输头的包头(包含端口号,以及tcp的各种制信息,这些信息是直接得到的,因为接口中需要指定端口)。这样就组成了tcp的数据传送单位segment。[tcp是一种端到端的协议,利用这些信息(tcp首部中的序号确认序号),发送的一方不断的进行发送等待确认,发送一个数据段后,会开启一个计数器,只有当收到确认后才会发送下一个,如果超过计数时间仍未收到确认则进行重发,在接受端如果收到错误数据,则将其丢弃,这将导致发送端超时重发。通过tcp协议,控制了数据包的发送序列的产生,不断的调整发送序列,实现流控和数据完整 |
网络 | 待发送的数据段送到网络层,在网络层被打包,这样封装上了网络层的包头,包头内部含有源及目的的ip地址,该层数据发送单位被称为packet。根据目的ip地址,就需要查找下一跳路由的地址。查找到下一跳ip地址后,还需要知道它的mac地址,这个地址要作为链路层数据装进链路层头部 |
链路 | 将mac地址及链路层控制信息加到数据包里,形成Frame,Frame在链路层协议下,完成了相邻的节点间的数据传输,完成连接建立,控制传输速度,数据完整 |
物理 | 物理线路则只负责该数据以bit为单位从主机传输到下一个目的地,下一个目的地接受到数据后,从物理层得到数据然后经过逐层的解包 到 链路层 到 网络层,然后开始上述的处理,在经网络层 链路层 物理层将数据封装好继续传往下一个地址 |
11.跨域
JSONP(只支持GET请求)
<script>
标签是不受同源策略的限制的,它可以载入任意地方的 JavaScript 文件,而并不要求同源。
理念:和服务端约定好一个函数名,当我请求文件的时候,服务端返回一段 JavaScript。这段 JavaScript 调用了我们约定好的函数,并且将数据当做参数传入。JSON 的数据格式和 JavaScript 语言里对象的格式正好相同,所以在我们约定的函数里面可以直接使用这个对象。
代码
//index.html
<script>
function getWeather(data) {
console.log(data);
}
</script>
<script src="http://x.y.com/xx.js">
//http://x.y.com/xx.js 文件内容
getWeather({
"城市": "北京",
"天气": "大雾"
});
function handleResponse(response){
alert("you're at IP address"+response.ip+", which is in "+response.city+", "+response.region_name);
}
var script=document.createElement("script");
script.src="http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
图像&图像Ping
1.<img>//标签
2.动态创建图像Ping
var img = new Image();
img.onload = img.onerror = function(){
alert("Done!");
}
img.src = "http://www.example.com/test?name=Anan";
Comet(服务器推送)[近乎实时]
1.长轮询
//页面发送一个请求到服务器,服务器保持打开,直到有数据可发送,发送完毕后关闭连接;随机又发送到服务器
//使用XHR和setTimeout()实现
2.HTTP流
//浏览器向服务器发送一个请求,服务器保持连接打开,周期性的向浏览器发送数据
<?php
$i=0
while(true){
echo "Number is $i";
flush();
//等待几秒
$i++;
}
>
XDR (CORS跨域资源共享)
实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
1.简单请求(simple request)
1) 请求方法是以下三种方法——HEAD、GET、POST
2) HTTP的头信息不超出——Accept、Accept-Language、Content-Language、Last-Event-ID、
3) Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
处理手段:
Tables | Are |
---|---|
在头信息之中,增加一个Origin字段(本次请求来自哪个源(协议 + 域名 + 端口)) | 在许可范围:服务器返回的响应,会多出几个头信息字段Access-Control-Allow-Origin: http://api.bob.com; Access-Control-Allow-Credentials: true; Access-Control-Expose-Headers: FooBar ;不在许可范围:这个回应的头信息没有包含Access-Control-Allow-Origin字段,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。 |
Access-Control-Allow-Origin(必须) | 值为Origin字段的值,或者*——表示接受任意域名的请求。不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。 |
Access-Control-Allow-Credentials(可选) | 表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可 |
Access-Control-Expose-Headers(可选) | CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面的例子指定,getResponseHeader(‘FooBar’)可以返回FooBar字段的值。 |
withCredentials | CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials字段。Access-Control-Allow-Credentials: true另一方面,开发者必须在AJAX请求中打开withCredentials属性。var xhr = new XMLHttpRequest();xhr.withCredentials = true; |
[HTML5] postMessage
window 对象增加了一个非常有用的方法
windowObj.postMessage(message, targetOrigin);
//windowObj: 接受消息的 Window 对象。
//message: 在最新的浏览器中可以是对象。
//targetOrigin: 目标的源,* 表示任意。
var windowObj = window; // 可以是其他的 Window 对象的引用
var data = null;
addEventListener('message', function(e){
if(e.origin == 'http://anfang.github.io/anan') {
data = e.data;
e.source.postMessage('Got it!', '*');
}
});
//message 事件就是用来接收 postMessage 发送过来的请求的。函数参数的属性有以下几个:
//origin: 发送消息的 window 的源。
//data: 数据。
//source: 发送消息的 Window 对象。
document.domain
使用条件:
有其他页面 window 对象的引用。
二级域名相同。
协议相同。
端口相同。
注:1——x.one.example.com 和 y.one.example.com 可以将 document.domain 设置为 one.example.com,也可以设置为 example.com。
2——document.domain 只能设置为当前域名的一个后缀,并且包括二级域名或以上(.edu.cn 这种整个算顶级域名)。
window.name
随意打开一个页面,输入以下代码:
window.name = "My window's name"; location.href = "http://www.qq.com/";
再检测 window.name :window.name; // My window's name
12.Ajax(中间层,异步)[XMLHttpRequest对象XHR]
优点:无刷新更新data,异步前后平衡,与界面分离
缺点:无back,history,存在安全性问题,对搜索引擎支持较弱,破坏程序,违背URL和资源定位,移动端的支持性
function createXHR(){
if(type of XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(type of ActiveXObject != "undefined"){
if(type of arguments.callee.activeXString != "String"){
var versions = ["MSXML2.XMLHttp","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.6"],i,len;
for(i=0,len= versions.length;i<len;i++){
try{
new ActiveObject(versions[i]);
arguments.callee.activeXSting = versions[i];
break;
}catch(ex){
//跳过
}
}
}
return new ActiveObject(arguments.callee.activeXSting);
}else {
throw new Error("No XHR object avaliable.")
}
}
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyStatus == 4){
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful: "+xhr.status);
}
}
}
xhr.open("get","aaa.txt",false);//同步或异步请求
xhr.send(null);
13.HTTP状态码
状态码 | 意思 | 备注 |
---|---|---|
100 | Continue | 客户端应当继续发送请求,服务器必须在请求完成后向客户端发送一个最终响应 |
101 | Switching Protocols | 服务器已经理解了客户端的请求,并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求 |
102 | Processing | 代表处理将被继续执行 |
200 | OK | 请求已成功,请求所希望的响应头或数据体将随此响应返回 |
201 | Created | 请求已经被实现,而且有一个新的资源已经依据请求的需要而建立,且其 URI 已经随Location 头信息返回 |
202 | Accepted | 服务器已接受请求,但尚未处理,在异步操作的场合下,目的是允许服务器接受其他过程的请求 |
203 | Non-Authoritative Information | 服务器已成功处理了请求,但返回的实体头部元信息不是在原始服务器上有效的确定集合,而是来自本地或者第三方的拷贝。当前的信息可能是原始版本的子集或者超集 |
204 | No Content | 服务器成功处理了请求,但不需要返回任何实体内容,并且希望返回更新了的元信息,以消息头后的第一个空行结尾 |
205 | Reset Content | 返回此状态码的响应要求请求者重置文档视图,接受用户输入后,立即重置表单 |
206 | Partial Content | 服务器已经成功处理了部分 GET 请求该请求必须包含 Range 头信息。响应必须包含如下的头部域:Content-Range 用以指示本次响应中返回的内容的范围;如果是 Content-Type 为 multipart/byteranges 的多段下载,则每一 multipart 段中都应包含 Content-Range 域用以指示本段的内容范围。假如响应中包含 Content-Length,那么它的数值必须匹配它返回的内容范围的真实字节数。 |
207 | Multi-Status | 由WebDAV(RFC 2518)扩展的状态码,代表之后的消息体将是一个XML消息 |
300 | Multiple Choices | 被请求的资源有一系列可供选择的回馈信息,每个都有自己特定的地址和浏览器驱动的商议信息 |
301 | Moved Permanently | 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。注意:对于某些使用 HTTP/1.0 协议的浏览器,当它们发送的 POST 请求得到了一个301响应的话,接下来的重定向请求将会变成 GET 方式。 |
302 | Move temporarily | 请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下,这个响应才是可缓存的。很多现存的浏览器将302响应视作为303响应,并且使用 GET 方式访问在 Location 中规定的 URI,而无视原先请求的方法。状态码303和307被添加了进来,用以明确服务器期待客户端进行何种反应。 |
303 | See Other | 对应当前请求的响应可以在另一个 URI 上被找到,而且客户端应当采用 GET 的方式访问那个资源。注意:许多 HTTP/1.1 版以前的浏览器不能正确理解303状态 |
304 | Not Modified | 如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304响应禁止包含消息体,因此始终以消息头后的第一个空行结尾。 |
305 | Use Proxy | 被请求的资源必须通过指定的代理才能被访问,只有原始服务器才能建立305响应 |
306 | Switch Proxy | 在最新版的规范中,306状态码已经不再被使用。 |
307 | Temporary Redirect | 请求的资源临时从不同的URI 响应请求。 |
400 | Bad Request | 语义有误,当前请求无法被服务器理解。请求参数有误。 |
401 | Unauthorized | 前请求需要用户验证 |
402 | Payment Required | 该状态码是为了将来可能的需求而预留的 |
403 | Forbidden | 服务器已经理解请求,但是拒绝执行它 |
404 | Not Found | 请求失败,请求所希望得到的资源未被在服务器上发现。 |
405 | Method Not Allowed | 请求行中指定的请求方法不能被用于请求相应的资源 |
406 | Not Acceptable | 请求的资源的内容特性无法满足请求头中的条件,因而无法生成响应实体 |
407 | Proxy Authentication Required | 与401响应类似,只不过客户端必须在代理服务器上进行身份验证 |
408 | Request Timeout | 请求超时。客户端没有在服务器预备等待的时间内完成一个请求的发送 |
409 | Conflict | 由于和被请求的资源的当前状态之间存在冲突,请求无法完成 |
410 | Gone | 被请求的资源在服务器上已经不再可用,而且没有任何已知的转发地址 |
411 | Length Required | 服务器拒绝在没有定义 Content-Length 头的情况下接受请求 |
412 | Precondition Failed | 服务器在验证在请求的头字段中给出先决条件时,没能满足其中的一个或多个 |
413 | Request Entity Too Large | 服务器拒绝处理当前请求,因为该请求提交的实体数据大小超过了服务器愿意或者能够处理的范围 |
414 | Request-URI Too Long | 请求的URI 长度超过了服务器能够解释的长度,因此服务器拒绝对该请求提供服务 |
415 | Unsupported Media Type | 对于当前请求的方法和所请求的资源,请求中提交的实体并不是服务器中所支持的格式,因此请求被拒绝 |
416 | Requested Range Not Satisfiable | 如果请求中包含了 Range 请求头,并且 Range 中指定的任何数据范围都与当前资源的可用范围不重合,同时请求中又没有定义 If-Range 请求头,那么服务器就应当返回416状态码 |
417 | Expectation Failed | 在请求头 Expect 中指定的预期内容无法被服务器满足,或者这个服务器是一个代理服务器,它有明显的证据证明在当前路由的下一个节点上,Expect 的内容无法被满足 |
421 | There are too many connections from your internet address | 从当前客户端所在的IP地址到服务器的连接数超过了服务器许可的最大范围 |
422 | Unprocessable Entity | 请求格式正确,但是由于含有语义错误,无法响应 |
423 | Locked | 当前资源被锁定 |
424 | Failed Dependency | 由于之前的某个请求发生的错误,导致当前请求失败 |
425 | Unordered Collection | 在WebDav Advanced Collections 草案中定义 |
426 | Upgrade Required | 客户端应当切换到TLS/1.0。(RFC 2817) |
449 | Retry With | 由微软扩展,代表请求应当在执行完适当的操作后进行重试 |
451 | Unavailable For Legal Reasons | 该请求因法律原因不可用 |
500 | Internal Server Error | 服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理 |
501 | Not Implemented | 服务器不支持当前请求所需要的某个功能 |
502 | Bad Gateway | 作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。 |
503 | Service Unavailable | 由于临时的服务器维护或者过载,服务器当前无法处理请求 |
504 | Gateway Timeout | 作为网关或者代理工作的服务器尝试执行请求时,未能及时从上游服务器 |
505 | HTTP Version Not Supported | 服务器不支持,或者拒绝支持在请求中使用的 HTTP 版本 |
506 | Variant Also Negotiates | 代表服务器存在内部配置错误:被请求的协商变元资源被配置为在透明内容协商中使用自己 |
507 | Insufficient Storage | 服务器无法存储完成请求所必须的内容。这个状况被认为是临时的 |
509 | Bandwidth Limit Exceeded | 服务器达到带宽限制。这不是一个官方的状态码 |
510 | Not Extended | 获取资源所需要的策略并没有没满足。(RFC 2774) |
600 | Unparseable Response Headers | 源站没有返回响应头部,只返回实体内容 |