面试题目

来源：互联网发布：网络玄幻小说典藏版编辑：程序博客网时间：2024/05/29 15:31

1.原型链继承

子类的原型属性可以继承父类实例，访问父类实例的属性和方法

function SuperType() {    this.property = true;}SuperType.prototype.getSuperValue = function() {    return this.property;};function SubType() {    this.subproperty = false;}//继承了SuperTypeSubType.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.动态创建图像Pingvar 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 源站没有返回响应头部，只返回实体内容

阅读全文

0 0