前端开发面试题

站点地址：全栈开发
原文连接：前端开发面试题

HTML

Doctype做用？标准模式与兼容模式各有什么区别？

一、 <!DOCTYPE>声明位于HTML文档中的第一行，处于 <html>标签以前，告知浏览器的解析器用什么文档标准解析。DOCTYPE不存在或格式不正确会致使文档以兼容模式呈现。
二、标准模式的排版和JS运行模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点没法工做。

HTML5为何只须要写<!DOCTYPE HTML>？

HTML5不基于SGML(标准通用标记语言)，所以不须要对DTD(文档类型定义)进行引用，可是须要 doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）
HTML4.01基于SGML，因此须要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

首先：CSS规范规定，每一个元素都有 display属性，肯定钙元素的类型，每一个元素都有默认的 display值，如 div的 display默认值为 block，都是块级元素； span默认 display属性值为 inline，是行内元素。
一、行内元素： a、 b、 span、 img、 input、 select、 strong（强调的语气）
二、块级元素： div、 ul、 ol、 li、 dl、 dt、 dd、 h1、 h2、 h3、 h4、 p
三、常见的空元素： br、 hr、 img、 input、 link、 meta
不经常使用的空元素： area、 base、 col、 command、 embed、 keygen、 param、 source、 track、 wbr

页面导入样式时，使用link和@import有什么区别？

一、 link属于 XHTML标签，除了加载 CSS外，还能用于定义 RSS，定义 rel链接属性等做用；而 @import是 CSS提供的，只能用于加载 CSS。
二、页面被加载时， link会同时被加载，而 @import引用的 CSS会等到页面被加载完再加载。
三、 import是 CSS2.1提出的，只在 IE5以上才能被识别，而 link是 XHTML标签，无兼容问题。
四、 link支持使用 JS控制 DOM改变样式，而 @import不支持。

介绍一下你对浏览器内核的理解？

主要分红两部分：渲染引擎（ layout或 engine）和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理信息（加入CSS等），以及计算网页的显示方式，而后输出到显示器或打印机。浏览器的内核的不一样对网页的语法解释会有不一样，因此渲染的效果也不相同。全部网页浏览器、电子邮件客户端以及其余须要编辑、显示网络内容的应用程序都须要内核。
JS引擎：解析和执行JS来实现网页的动态效果。
最开始渲染引擎和JS引擎并无区分额很明确，后来JS引擎愈来愈独立，内核就倾向于只是指渲染引擎。

常见的浏览器内核有哪些？

Trident内核：IE，MaxThon，TT，The World，360，搜狗浏览器等[MSHTML]
Gecko内核：Netscape6及以上版本，FF，MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上[Opera内核原为： Presto，现为： Blink]
Webkit内核：Safari，Chrome等[Chrome：Blink（Webkit的分支）]

HTML5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

HTML5如今已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增长。
绘画 canvas
用于媒介回放的 video和 audio元素
本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除
语义化更好的内容元素，好比article、footer、header、nav、section
表单控件：calendar、date、time、email、url、search
新技术：webworker、websocket、Geolocationcss

移除的元素：
纯表现的元素：basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素：frame、frameset、noframeshtml

支持HTML5新标签：
IE8/IE7/IE6支持经过document.createElement方法产生的标签，能够利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还须要添加默认的样式。
也能够直接使用成熟的框架，如html5shim：前端

<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>    
<![endif]>

区分HTML5,：DOCTYPE声明，新增的结构元素，功能元素等

简述一下你对HTML语义化的理解？

语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
没有CSS样式也能正常阅读文档
搜索引擎的爬虫依赖HTML标记来肯定上下文和各个关键字的权重，有利于SEO

HTML5的离线存储怎么使用，工做原理解释一下？

在用户没有联网时，能够正常访问站点或应用；在联网的状况下，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的 .appchache文件的缓存机制（不是存储技术），经过这个文件上的解析清单离线存储资源，这些资源就会像 cookie同样被存储下来。以后当网络处于离线状态时，浏览器会经过被离线存储的数据进行页面展现。
如何使用：
一、页面头部加入一个manifest的属性
二、在cache.manifest文件的编写离线存储的资源
三、在离线状态下，操做window.applicationCache进行需求实现html5

浏览器是如何对HTML5的离线存储资源进行管理和加载的？

在线的状况下，浏览器发现 html头部有 manifest属性，它会请求 manifest文件，若是是第一次访问 app，浏览器会根据 manifest文件的内容下载相应的资源而且进行离线存储。
若是已经访问过 app，而且资源已经离线存储，浏览器会使用离线的资源加载页面，而后浏览器会对比新的 manifest文件，若是文件没有发生改变，就不作任何操做，不然就会从新下载文件中的资源并进行离线存储。
离线的状况下，浏览器直接使用离线存储的资源。

请描述一下cookie，sessionStorage，localStorage的区别？

cookie是网站为了标识用户身份而存储在用户本地终端上的数据（一般通过加密）
cookie数据始终在同源的 http请求中携带（即便不须要），就会在浏览器和服务器间来回传递
sessionStorage和 localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大node

有效时间：
localStorage存储持久数据，浏览器关闭后数据不丢失，除非主动删除数据
sessionStorage数据在当前浏览器窗口关闭后自动删除
cookie设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭python

iframe有哪些缺点？

iframe会阻塞主页面的 onload事件
搜索引擎的检索程序没法解读这种页面，不利于SEO
iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载
使用 iframe以前须要考虑两个缺点。若是须要使用 iframe，最好是经过JS
动态给 iframe添加 src属性值，能够绕开以上两个问题。

label的做用是什么？怎么用？

label标签订义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>
<input type="text" name="Name" id="Name">

HTML5的form如何关闭自动完成功能？

给不想要提示的 form或某个 input设置为 autocomplete=off

如何实现浏览器内多个标签页之间的通讯？（阿里）

WebSocket， SharedWorkder
也能够调用 localStorage、 cookies等本地存储方式
localStorage另外一个浏览上下文中被添加、修改或删除时，它都会触发一个事件，经过监听事件，控制它的值来进行页面信息通讯

WebSocket如何兼容低浏览器？（阿里）

Adobe Flash Socket
ActiveX HTMLFile（IE）
基于 multipart编码发送 XHR
基于长轮询的 XHR

页面可见性能够有哪些用途？

经过 visibilityState的值检测页面当前是否可见，以及打开页面的时间等
在页面被切换到其余后台进程的时候，自动暂停音乐或视频的播放

如何在页面上实现一个圆形的可点击区域？

一、 map+area或者 SVG
二、 border-radius
三、纯JS实现，须要求一个点在不在圆上简单算法、获取鼠标坐标等

实现不使用border画出1px高的线，在不一样浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height: 1px;overflow: hidden;background: red;"></div>

<div style="height: 1px;overflow: hidden;background: red;"></div>jquery

CSS

介绍一下标准CSS的盒子模型？低版本IE的盒子模型有什么不一样？

一、有两种，IE盒子模型、W3C盒子模型
二、盒模型：内容（ content）、填充（ padding）、边界（ margin）、边框（ border）
三、区别：IE的 content部分把 border和 padding计算进去

CSS选择符有哪些？哪些属性能够继承？

一、ID选择器
二、类选择器
三、标签选择器
四、相邻选择器（ h1+p）
五、子选择器（ ul>li）
六、后代选择器（ li a）
七、通配符选择器（ *）
八、属性选择器（ a[rel="external"]）
九、伪类选择器（ a:hover,li:nth-child）
可继承的样式：font-size、font-family、color、ul、li、dl、dd、dt
不可继承的样式：border、padding、margin、width、heightwebpack

CSS优先级如何计算？

优先级就近原则，同权重状况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为：
同权重：内联样式表（标签内部）>嵌入样式表（当前文件）>外部样式表（外部文件）
!important > id > class > tag
!important比内联优先级高git

CSS3新增伪类有哪些？

p:first-of-type 选择属于其父元素的首个 <p>元素
p:last-of-type 选择属于其父元素的最后 <p>元素
p:only-of-type 选择属于其父元素惟一的 <p>元素
p:nth-child(2) 选择属于其父元素的第二个子元素的每一个 <p>元素
::after在元素以前添加内容，也能够用来作清除浮动
::before在元素以后添加内容
::enabled ::disabled控制表单控件的禁用状态
:checked单选框或复选框被选中

水平居中：给div设置一个宽度，而后添加margin: 0 auto属性

div {
  width: 200px;
  margin: 0 auto;
}

让绝对定位的div居中

div {
  position: absolute;
  width: 200px;
  height: 200px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
}

水平垂直居中一

肯定容器的宽高
设置层的外边距

div {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px;
  background: #ccc;
}

水平垂直居中二

未知容器的宽高，利用 transform属性

div {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #bbb;
}

水平垂直居中三

利用 flex布局
实际使用时应考虑兼容性

body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    background: green;
}

span {
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

display有哪些值？说明它们的做用？

block块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none缺省值。像行内元素类型同样显示。
inline行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block默认宽高为内容宽度，能够设置宽高，同行显示。
list-item像块类型元素同样显示，并添加样式列表标记。
table此元素会做为块级表格显示。
inherit规定应该从父元素继承 display属性的值。

position的值relative和absolute定位原点？

absolute生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位
fixed（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位
relative生成相对定位的元素，相对于其正常位置进行定位
static默认值。没有定位，元素出如今正常的流中（忽略 top、 right、 bottom、 left声明）
inherit规定从父元素继承 position属性的值

CSS3有哪些新特性？

新增各类CSS选择器（ :not(.input)）：全部 class不是 input的节点
圆角 border-radius:8px;
多列布局 multi-column layout
阴影个反射 shadow\reflect
文字特效 text-shadow
文字渲染 text-decoration
线性渐变 gradient
旋转 transform
缩放、定位、倾斜、动画、多背景
例如： transform:\scale(0.85,0.90)\translate(0,-30px)\skew(-9deg,0)\animation

请解释一下CSS3的flexbox（弹性盒布局模型），以及适用场景？

一个用于页面布局的全新CSS3功能， flexbox能够把列表放在同一个方向（从上到下，从左到右），并让列表能延伸到占用可用的空间。
较为复杂的布局还能够经过嵌套一个伸缩容器（ flex container）来实现。
采用 flex布局的元素，称为 flex容器（ flex container），简称 容器
它的全部子元素自动称为容器成员，称为 flex项目（ flex item），简称 项目
常规布局是基于块和内联流方向，而 flex布局是基于 flex-flow流，能够很方便地用来作居中，能对不一样屏幕大小自适应。

用纯CSS建立一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: transparent transparent red transparent;
}

如何设计一个满屏品字布局？

简单方式：
上面的 div宽 100%
下面的两个 div分别宽 50%
而后用 float或者 inline使其不换行便可

body {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 300px;
    background: green;
}

.left {
    width: 50%;
    height: 300px;
    background: aqua;
    float: left;
}

.right {
    width: 50%;
    height: 300px;
    background: blue;
    float: right;
}

如何实现CSS多列等高？

利用 padding-bottom|margin-bottom正负值相抵；
设置父容器超出隐藏 overflow:hidden;，这样子父容器的高度仍是它里面的列没有设定 padding-bottom时的高度；
当它里面的任何一列高度增长，则父容器的高度被撑开到里面最高那一列的高度
其余比这列低的会用它们的 padding-bottom补偿这部分的高度差

body {
    padding: 0;
    margin: 0;
}

.container {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.left {
    float: left;
    width: 30%;
    height: 100px;
    background: aqua;
    padding-bottom: 200px;
    margin-bottom: -200px;
}

.right {
    float: right;
    width: 70%;
    height: 200px;
    background: #6cc;
    padding-bottom: 200px;
    margin-bottom: -200px;
}

常常遇到的浏览器的兼容性有哪些？缘由，解决方法是什么？经常使用hack技巧？

png24位的图片在IE6浏览器上出现背景，解决方案是作成 png8
浏览器默认的 margin和 padding不一样。解决方案是加一个全局 {margin:0;padding:0;}来统一
IE6双边距 bug块属性标签 float后，又有横行的 margin状况下，在IE6显示 margin比设置的大
浮动IE产生的双倍距离

#box {
    float: left;
    width: 10px;
    margin: 0 0 0 100px;
}

这种状况下IE会产生 20px的距离，解决方案是在 float的标签样式控制中加入 _display:inline;将其转化为行内属性。（ _这个符号只有IE6会识别）
渐进识别的方式，从整体中逐渐排除局部。
首先，巧妙地使用 \9这一标记，将IE浏览器从全部状况中分离出来。
接着，再次使用 +将IE8和IE七、IE6分离开来，这样IE8已经独立识别。

div {
    background-color: red; /*全部识别*/
    background-color: #00deff \9; /*IE六、七、9识别*/
    _background-color: #1e0bd1; /*IE6识别*/
}

IE下可使用获取常规属性的方法来获取自定义属性，也可使用 getAttribute()获取自定义属性；
firefox下只能使用 getAttribute()获取自定义属性
解决方法：统一经过 getAttribute()获取自定义属性
IE下event对象有x、y属性，可是没有pageX、pageY属性；
Firefox下event对象有pageX、pageY属性，可是没有x、y属性
解决方法：（条件注释）缺点是在IE浏览器下可能会增长额外的HTTP请求数程序员

chrome中文界面下默认会将小于12px的文本强制按照12px显示
可经过加入CSS属性-webkit-text-size-adjust:none;解决

超连接访问事后hover样式不出现，被点击访问过的超连接样式再也不具备hover和avtive。
解决方法：改变CSS属性的排列顺序。

L-V-H-A：a:link{} a:visited{} a:hover{} a:active{}

li与li之间有看不见的空白间隔是什么缘由引发的？有什么解决办法？

行框的排列会受到中间空白（回车/空格）等的影响，由于空格也属于字符，这些空白也会被应用样式，占据空间，因此会有间隔，把字符大小设为 0，就没有空格。

为什吗要初始化CSS样式？

浏览器有兼容问题，不一样浏览器对有些标签的默认值不一样，没有CSS初始化会出现浏览器之间的页面显示差别。
初始化样式会对SEO有必定的影响，尽可能在影响最小的状况下进行初始化。

absolute的containing block（容器块）计算方式跟正常流有什么不一样？

不管属于哪一种，都要先找到其祖先元素中最近的 position值不为 static的元素，而后再判断：
一、若此元素为 inline元素，则 containing block为可以包含这个元素生成的第一个和最后一个 inline box的 padding box（除 margin， border外的区域）的最小矩形；
二、不然由这个祖先元素的 padding box构成
若是都找不到，则为 initial containing block
补充：
一、static/relative，它的父元素的内容框（即去掉padding的部分）
二、absolute：向上找最近的定位为absolute、relative的元素
三、fixed：它的containing block一概为根元素（html/body），根元素也是initial containing block

CSS里的visibility属性有个collapse属性值得做用？在不一样浏览器下有什么区别？

对于普通元素 visibility:collapse;会将元素彻底隐藏，不占据页面布局空间，与 display:none;表现相同。若是目标元素为 table， visibility:collapse;将 table隐藏，可是会占据页面布局空间。仅在Firefox下起做用，IE会显示元素，Chrome会将元素隐藏，可是占据空间。

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎样？

若是元素的 display为 none，那么元素不被渲染， position， float不起做用；
若是元素拥有 position:absolute;或 position":fixed;属性，那么元素将为绝对定位， float不起做用。
若是元素 float属性不是 none，元素会脱离文档流，根据 float属性值来显示。有浮动、绝对定位， inline-block属性的元素， margin不会和垂直方向上的其余元素 margin折叠。

对BFC规范（块级格式化上下文）的理解？

它是一个独立容器，决定了元素如何对其内容进行定位，以及与其余元素的关系和相互做用。
一个页面是由多个Box组成，元素的类型和 display属性，决定了这个Box的类型
不一样类型的Box会参与不一样的 Formatting Context（决定如何渲染文档的容器），所以Box内的元素会以不一样的方式渲染，也就是说BFC内部的元素和外部的元素不会相互影响。

CSS定义的权重

权重的规则：标签的权重为 1， class的权重为 10， id的权重为 100。

请解释一下为何须要清除浮动？清除浮动的方法？

清除浮动是为了清除使用浮动元素产生的影响。
浮动的元素，高度会塌陷，而高度的塌陷使咱们页面后面的布局不能正常显示。
一、父级div定义height；
二、父级div也一块儿浮动；
三、常规的使用一个class；

.clearfix:before, .clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

SASS编译的时候，浮动元素的父级 div定义伪类 :after

div:after, div:before {
    content: '';
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

解析原理：
一、 displa:block;使生成的元素以块级元素显示，占满剩余空间；
二、 height:0避免生成内容破坏原有布局的高度；
三、 visibility:hidden;使生成的内容不可见，并容许可能被生成内容盖住的内容能够进行点击和交互；
四、经过 content:"."生成内容做为最后一个元素，
五、 zoom:1;触发IE hasLayout

经过分析发现，除了clear:both用来闭合浮动，其余代码都是为了隐藏content生成的内容，这也是其余版本的闭合浮动为何有font-size:0，line-height:0

什么是外边距合并？

外边距合并指的是，当两个垂直外边距相遇时，它们将造成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度重的较大者

zoom:1的清除浮动原理？

清除浮动，触发 hasLayout；
zoom属性时IE浏览器的专有属性，它能够设置或检索对象的缩放比例。解决IE存在的 bug
好比外边距的重叠，浮动清除，触发IE的 hasLayout属性等
当设置了zoom的值后，所设置的元素就会扩大或缩小，高度宽度就会从新计算，一旦改变zoom值时也会发生从新渲染，运用这个原理解决IE中子元素浮动时父元素不随着自动扩大的问题。

目前非IE浏览器不支持这个属性，能够经过CSS3中的动画属性scale进行缩放。

浏览器如何解析CSS选择器？

从关键选择器开始匹配，而后左移查找规则选择器祖先元素。
只要选择器的子树一直在工做，样式系统就会持续左移，直到和规则匹配，或由于不匹配而放弃规则。

margin和padding分别适用什么场景？

margin用来隔开元素与元素的间距；
padding用来隔开元素与内容的间隔；
margin用于布局分开元素使元素与元素互不相干；
padding用于元素与内容之间的间隔，让内容与元素之间有一段距离

::before和:after中双冒号和单冒号有什么区别？解释一下这两个伪类的做用？

单冒号（ :）用于CSS3伪类，双冒号（ ::）用于CSS3伪元素。（伪元素由双冒号和伪元素组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。

如何修改Chrome记住密码后自动填充表单的黄色背景？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
```
background-color: rgb(250, 250, 189);
background-image: none;
color: rgb(0, 0, 0);
```
}
设置元素浮动后，该元素的display值是多少？

自动变成 display:block

如何让Chrome支持小于12px的文字？

一、使用图片：若是是内容固定不变的状况下，使用将小于 12px文字内容切出作图片，这样既兼容又美观。
二、使用 12px字体大小样式设置，若是不考虑Chrome能够不用考虑兼容同时在设置小于 12px对象设置 -webkit-text-adjust:none，作到最大兼容考虑。
四、使用 12px以上字体，从新考虑权重下兼容性。

如何用CSS让页面的字体变得清晰，变细？

-webkit-font-smoothing:antialiased;

position:fixed;在Android下无效如何处理？

fixed的元素是相对整个页面固定位置，在屏幕上滑动只是在移动这个所谓的 viewport
并非IOS不支持 fixed，只是 fixed的元素不是相对手机屏幕固定的。

手动写动画，最小时间间隔是多少？

多数显示器默认频率是 60Hz，即1秒刷新 60次，因此理论上最小间隔为 1/60*1000ms=16.7ms

display:inline-block何时会显示间隙？

移除空格、使用 margin负值、使用 font-size:0、 letter-spacing、 word-spacing

什么是cookie隔离？（请求资源的时候不要让它携带cookie）

若是静态文件都放在主域名下，静态文件请求的时都带有 cookie的数据提交给 server，很是浪费流量。
由于cookie有域的限制，所以不能跨域提交请求，因此使用非主要域名的时候，请求头中就不会带有cookie数据。
这样能够下降请求头的大小，下降请求时间，从而达到下降总体请求延时的目的。
同时这种方式不会将cookie传入Web Server，也减小了Web Server对cookie的处理分析环节。
提升了webserver的HTTP请求的解析速度。

JavaScript

介绍JS的基本数据类型

undefined、 null、 Boolean、 number、 string
ES6新增： symbol（建立惟一且不可变数据类型）

介绍JS有哪些内置对象？

Object是JS中全部对象的父对象
数据封装类对象： Object、 Array、 Boolean、 Number和 String
其余对象： Function、 arguments、 Math、 Date、 RegExp、 Error

写JS的基本规范

一、不在同一行声明多个变量
二、使用 ===/!==来比较 true/false或者数值
三、使用对象字面量替代 new Array
四、不使用全局函数
五、 switch语句必须带有 default分支
六、函数应该有返回值
七、 for循环必须使用大括号
八、 if语句必须使用大括号
九、 for-in循环中的变量，应该使用 var关键字明确限定做用域，从而避免做用域污染

JS原型，原型链？有什么特色？

每一个对象都会在其内部初始化一个属性，就是 prototype（原型），当访问一个对象的属性时，若是这个对象内部不存在这个属性，就会去 prototype里找这个属性，这个 prototype又会有本身的 prototype，如此反复，就是原型链的概念。
关系：instance.constructor.prototype=instance.__proto__

特色：
JS对象经过引用来传递，建立的每一个新对象实体中并无一份属于本身的原型副本。当修改原型时，与之相关的对象也会继承这一改变。

当须要一个属性时，JS引擎会先看当前对象中是否有这个属性，若是没有，就会查找它的prototype对象是否有这个属性，如此递推，一直检索到Object内建对象。

function Func() {}
Func.prototype.name = "Sean";
Func.prototype.getInfo = function () {
    return this.name;
};
var person = new Func();//var person=Object.create(oldObject)
console.log(person.getInfo());//Sean
console.log(Func.prototype);//Object {name: "Sean"}

JS有几种类型的值？画一下内存图？

栈：原始数据类型（ undefined， null、 Boolean、 number、 string）
堆：引用数据类型（对象、数组和函数）
两种类型的区别：存储位置不一样
原始数据类型直接存储在栈中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，因此放入栈中存储；
引用数据类型存储在堆中的对象，占据空间大、大小不固定。若是存储在栈中，将会影响程序运行的性能；
引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解析器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中得到实体。

如何将字符串转化为数字，例如12.3b？

parseFloat('12.3b');

如何将浮点数点左边的数每三位添加一个逗号，如12000000.11转化为12,000,000.11？

function commafy(num) {
    return num && num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function ($1, $2) {
        return $2 + ',';
    })
}

如何实现数组的随机排序？

//方法一：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function randSort(arr) {
    for (var i = 0, len = arr.length; i < len; i++) {
        var rand = parseInt(Math.random() * len);
        var temp = arr[rand];
        arr[rand] = arr[i];
        arr[i] = temp;
    }
    return arr;
}

//方法二：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function randSort(arr) {
    var mixedArray = [];
    while (arr.length > 0) {
        var randomIndex = parseInt(Math.random() * arr.length);
        mixedArray.push(arr[randomIndex]);
        arr.splice(randomIndex, 1);
    }
    return mixedArray;
}

//方法三：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.sort(function () {
    return Math.random() - 0.5;
});

JS如何实现继承？

一、构造
二、原型
三、实例
四、拷贝
原型prototype机制或apply和call方法去实现比较简单，建议使用构造函数与原型混合方式。

function Parent() {
    this.name = name;
}
function Child() {
    this.age = age;
}
Child.prototype = new Parent();//继承Parent，经过原型

JS建立对象的方式？

JS建立对象，就是使用内置对象或各类自定义对象，还可使用 JSON；
一、对象字面量 var person={firstname:"Mark",lastname:"Yun"}
二、用 function模拟无参数的构造函数

function Person() {}
var person = new Person();//定义一个function，若是使用new实例化，该function能够看做一个class
person.name = "Mark";
person.age = "25";
person.word = function () {
    return person.name + 'hello'
};

三、用 function模拟参数构造函数来实现（用 this关键字定义构造的上下文属性）

function Pet(name, age, hobby) {
    this.name = name;//this做用域，当前对象
    this.age = age;
    this.hobby = hobby;
    this.eat = function () {
        return "我是" + this.name + "，我喜欢" + this.hobby + "，是个程序员。";
    }
}
var maidou = new Pet("麦兜", 25, "coding");//实例化、建立对象
maidou.eat();//调用eat方法

四、用工厂方式来建立（内置对象）

var mcDog = new Object();
mcDog.name = "旺财";
mcDog.age = 3;
mcDog.work = function () {
    return mcDog.name + ',汪汪汪......';
};
mcDog.work();

五、用原型方式来建立

function Dog() {}
Dog.prototype.name = "旺财";
Dog.prototype.eat = function () {
    return this.name = "是个吃货"
};

六、用混合方式来建立

function Car(name, price) {
    this.name = name;
    this.price = price;
}

Car.prototype.sell = function () {
    return "我是" + this.name + "，我如今卖" + this.price + "万元。";
};
var camry = new Car("凯美瑞", 27);

JS做用域链？

全局函数没法查看局部函数的内部细节，但局部函数能够查看其上层的函数细节，直至全局细节。
当须要从局部函数查找某一属性或方法时，若是当前做用域没有找到，就会上溯到上层做用域查找，直至全局函数，这种组织形式就是做用域链。

谈谈对this对象的理解？

this老是指向函数的直接调用者；
若是有 new关键字， this指向 new出来的对象；
在事件中， this指向触发这个事件的对象，特殊的是IE中的 attachEvent中的 this老是指向全局对象 window。

eval的做用？

它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用 eval，不安全，很是耗性能（ 2次，一次解析成JS语句，一次执行）
由 JSON字符串转换成 JSON对象的时候能够用 eval， var obj=eval('('+str+')');

什么是window对象？什么是document对象？

window对象是指浏览器打开的窗口
document对象时Document对象（HTML文档对象）的一个只读引用， window对象的一个属性。

null、undefined的区别？

null表示一个对象的值为空；
undefined表示一个变量声明了，可是没有初始化（赋值）；
undefined不是一个有效的JSON，而null是；
undefined的类型（typeof）是undefined
null的类型typeof是object

JS将未赋值的变量默认设为undefined；
JS历来不会将变量设为null。它是用来标明某个用var声明的变量时没有值。

typeof undefined;//undefined
undefined：是一个表示无的原始值或说表示缺乏值，就是此处应该有一个值，可是尚未定义。

typeof null;//null
null：是一个对象（空对象，没有任何属性和方法）
做为函数的参数，表示该函数的参数不是对象；

注意：
在验证null时，必定要使用===，由于==没法区分null和undefined

null == undefined;//true
null === undefined;//false

写一个通用的事件侦听器函数

<p data-height="565" data-theme-id="0" data-slug-hash="bKjVvM" data-default-tab="js" data-user="whjin" data-embed-version="2" data-pen-title="通用的事件侦听器函数" class="codepen">See the Pen 通用的事件侦听器函数 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

['1', '2', '3'].map(parseInt);答案是多少？

['1', '2', '3'].map(parseInt);//[ 1, NaN, NaN ]；
parseInt()函数能解析一个字符串，并返回一个整数，须要两个参数（ val、 radix）；
其中 radix表示要解析的数字的基数。（该值介于 2~36之间，而且字符串中的数字不能大于 radix才能正确返回数字结果值）；
此处 map穿了 3个（ element,index,array），重写 parseInt函数测试是否符合上面的规则。

function parseInt(str, radix) {
    return str + '-' + radix;
}
var a = ['1', '2', '3'];
console.log(a.map(parseInt));//[ '1-0', '2-1', '3-2' ]不能大于radix

由于二进制里面没有数字 3，致使出现超范围的 radix赋值和不合法的进制解析，才会返回 NaN。

什么是事件？IE与火狐的事件机制有什么区别？如何组织冒泡？

一、在网页中的某个操做，例如点击一个按钮就会产生一个事件，能够被JS侦测到的行为。
二、事件处理机制：IE是事件冒泡、Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件；
三、 ev.stopPropation();（旧IE的方法 ev.cancelBubble=true;）

什么是闭包（closure），为何要使用它？

闭包是指有权访问另外一个函数做用域中变量的函数，建立闭包的最多见方式是一个函数内建立另外一个函数，经过另外一个函数访问这个函数的局部变量；
利用闭包能够突破做用域链，将函数内部的变量和方法传递到外部。
闭包的特性：
一、函数内再嵌套函数；
二、内部函数能够引用外层的参数和变量；
三、参数和变量不会被垃圾回收机制回收

li节点的onclick事件都能正确的弹出当前被点击的li索引

var nodes = document.getElementsByTagName('li');
for (var i = 0, len = nodes.length; i < len; i++) {
    nodes[i].onclick = (function (i) {
        return function () {
            console.log(i);
        }
    })(i)
}

执行 sayNum()后， sayNum()闭包内部变量依旧存在，而闭包内部的函数的变量不会存在；
使得JS的垃圾回收机制GC不会收回 sayNum()所占用的资源，由于 sayNum()的内部函数的执行须要依赖 sayNum()中的变量。这是对闭包做用的很是直白的描述。

function sayNum() {
    var num = 666;
    var sayLog = function () {
        console.log(num);
    };
    num++;
    return sayLog;
}
var sayLog = sayNum();
sayLog();//667

JS代码中的use strict;有什么做用？使用它区别是什么？

use strict是一种ES6添加的（严格）运行模式，这种模式使得JS在更严格的条件下运行；
使JS编码更佳规范化的模式，消除JS语法的一些不合理、不严谨的地方，减小一些怪异行为。
默认支持的槽糕特性都会被禁用，好比不能使用with，也不能再意外的状况下给全局变量赋值；
全局变量的显示声明，函数必须声明在顶层，不容许再非函数代码块内声明函数，arguments.callee也不容许使用；
消除代码运行的一些不安全之处，保证代码运行的安全，限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同。

提升编译器效率，增长运行速度；

如何判断一个对象是否属于某个类？

使用 instanceof

if (a instanceof Person) {
    console.log("yes");
}

解释一下new操做符？

一、建立一个空对象，而且 this变量引用该对象，同时还继承了该函数的原型；
二、属性和方法被加入到 this引用的对象中；
三、新建立的对象由 this所引用，而且最后隐式的返回 this。

var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

JS中的hasOwnProperty函数，执行对象查找时不会去查找原型，详细解释一下？

JS中 hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具备指定名称的属性。
此方法没法检查该对象的原型链中是否具备该属性；
该属性必须是对象自己的一个成员。
使用方法：
Object.hasOwnProperty(proName)
其中参数object是必选项。一个对象的实例。
proName是必选项。一个属性名称的字符串值。

若是object具备指定名称的属性，JS中hasOwnproperty函数方法返回true，反之则返回false。

说一下你对JSON的了解？

JSON是一种轻量级的数据交换格式。
它是基于JS的一个子集。数据格式简单，易于读写，占用带宽小
JSON字符串转换成JSON对象：

var obj = eval('(' + str + ')');
var obj = str.parseJSON();
var obj = JSON.parse(str);

JSON对象转换成 JSON字符串：

var last = obj.toJSONString();
var last = JSON.stringify(obj);

JS有哪些延迟加载的方式？

defer和 async、动态建立DOM方式（用得最多）、按需异步加载JS

Ajax是什么？如何建立一个Ajax？

异步传输+JS+XML
异步：向服务器发送请求时，没必要等待结果，而是能够同时作其余的事情，等到有告终果会本身根据设定进行后续操做；
与此同时，页面不会发生总体刷新，提供了用户体验。
一、建立XMLHTTPRequest对象，也就是建立一个异步调用对象；
二、建立一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息；
三、设置响应HTTP请求状态变化的函数；
四、发送HTTP请求
五、获取异步调用返回的数据
六、使用JS和DOM实现局部刷新

Ajax解决浏览器缓存问题？

一、在 ajax发送请求前添加

AjaxObj.setRequestHeader("IF-Modified-Since","0");

二、在 ajax发送请求前添加

AjaxObj.setRequestHeader("Cache-Control", "no-cache");

三、在URL后面添加一个随机数： "fresh=" + Math.random();
四、在URL后面添加时间戳："nowtime=" + new Date().getTime();

五、若是使用jQuery，则$.ajaxSetup({cache: false});。这样页面的全部ajax都会执行这条语句，不须要保存缓存记录。

同步和异步的区别？

同步：不一样进程为协同完成某项工做，在前后次序上调整（经过阻塞，唤醒等方式）。
同步：浏览器访问服务器请求，页面刷新，从新发送请求，等待请求完成，页面刷新显示新内容，如此反复。
异步：浏览器访问服务器请求，操做页面，浏览器后端进行请求。等待请求完成，页面不刷新显示新内容。

如何解决跨域问题？

jsonp、 iframe、 window.name、 window.postMessage、服务器上设置代理页面

AMD、CMD规范的却别？

AMD异步模块定义，全部的模块将被异步加载，模块加载不影响后面语句运行。
全部依赖某些模块的语句都放置在回调函数中。
区别：
一、对于依赖的模块，AMD是提早执行，CMD是延迟执行。
二、CMD推崇依赖就近，AMD推崇依赖前置

//AMD
define(['./a', './b'], function (a, b) {//依赖必须一开始就写好
    a.doSomething();
    b.doSomething();
});

//CMD
define(function (require, exports, module) {
    var a = require('./a');
    a.doSomething();
    var b = require('./b');//依赖能够就近写
    b.doSomething();
});

document.write和innerHTML的区别？

document.write只能重回整个页面
innerHTML能够重绘页面的一部分

DOM操做——添加、移除、移动、赋值、建立和查找节点？

一、建立新节点

createDocumentFragment();//建立一个DOM片断
createElement();//建立一个具体的元素
createTextNode();//建立一个文本节点

二、添加、移除、替换、插入

appendChild();//添加
removeChild();//移除
replaceChild();//替换
insertBefore();//在已有的子节点前插入一个新的子节点

三、查找

getElementsByTagName();//经过标签名
getElementsByName();//经过元素的Name属性的值（IE容错能力较强，会获得一个数组，其中包括id等于name值）
getElementById();//经过元素id，惟一性

jquery.extend和jquery.fn.extend的区别？

jquery.extend为 jquery类添加类方法，能够理解为添加静态方法
jquery.fn.extend:
源码 jquery.fn=jquery.prototype，对 jquery.fn的扩展，就是为 jquery类添加成员函数
使用：
jquery.extend扩展，须要经过 jquery类调用，而 jquery.fn.extend扩展，全部 jquery实例均可以直接调用。

针对jQuery的优化方法？

基于 class的选择器的性能相对于 id选择器开销很大，由于须要遍历全部DOM元素。
频繁操做的DOM，先缓存起来再操做。用jQuery的链式调用更好。好比var str=$("a").attr("href");

for (var i = size, len = arr.length; i < len; i++) {}

如何判断当前脚本运行在浏览器仍是Node环境中？（阿里）

this === window ? 'browser' : 'node';
经过判断 global对象是否为 window，若是不为 window，当前脚本没有运行在浏览器中。

哪些操做会形成内存泄漏？

垃圾回收器定义扫描对象，并计算引用了每一个对象的其余对象的数量。若是一个对象的引用数量为 0（没有其余对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存便可回收。
setTimeout的第一个参数使用字符串而非函数，会引起内存泄漏。
闭包、控制台日志、循环（两个对象彼此引用，且彼此保留时，就会产生一个循环）

用JS实现千位分隔符？

function commafy(num) {
    return num && num
        .toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
            return $1 + ',';
        })
}

使用JS实现获取文件扩展名？

function getFileExtension(filename) {
    return filename.splice((filename.ladtIndexOf(".") - 1 >>> 0) + 2);
}

String.lastIndexOf()方法返回指定值，在调用该方法的字符串中最后出现的位置，若是没找到则返回 -1。
对于 filename和 .hiddenfile， lastIndexOf的返回值分别为 0和 -1。
String.prototype.splice()从计算的索引提取文件的扩展名。若是索引比文件名的长度大，结果为 ""。

webpack热更新实现原理？

一、 webpack编译期，为须要热更新的 entry注入热更新代码（ EventSource通讯）
二、页面首次打开后，服务端与客户端经过 EventSource创建通讯渠道，把下一次的 hash返回前端
三、客户端获取到 hash，这个 hash将做为下一次请求服务端 hot-update.js和 hot-update.json的 hash
四、修改页面代码， webpack监听到文件修改后，开始编译，编译完成后发送 build消息给客户端
五、客户端获取到 hash，成功后客户端构造 hot-update.js的 script连接，然互殴插入主文档
六、 hot-update.js插入成功后，执行 hotAPI的 createRecord和 reload方法，获取到组件的 render方法，从新 render组件，从而实现UI无刷新更新。

ES6

Object.is()与原来的比较操做符===、==的区别？

==判断，会在比较时进行类型转换
===判断（严格判断），比较时不进行隐式类型转换，类型不一样就会返回 false
Object.is()在===判断的基础上特别处理了NaN、-0和+0，保证-0和+0再也不相同，但Object.is(NaN,NaN)会返回true

如何进行页面重构？

网站重构：在不改变UI的状况下对网站进行优化，在扩展的同时保持一致的UI。
对传统的网站来讲，重构一般是：
一、表格table布局改成div+css
二、使网站前端兼容于现代浏览器
三、对于移动平台的优化
四、针对SEO进行优化

深层次的网站重构应该考虑：
一、减小代码间的耦合
二、让代码保持弹性
三、严格按照规范编写代码
四、设计可扩展的API
五、代替旧有的框架、语言
六、加强用户体验
七、对速度的优化

一、压缩JS、CSS、image等前端资源（一般是由服务器来解决）
二、程序的性能优化（数据读写）
三、采用CDN来加速资源加载
四、对于JS DOM的优化
五、HTTP服务器的文件缓存

列举IE与其余浏览器不一样的特性？

事件：触发事件的元素被认为是目标（ target）。在IE中，目标包含在 event对象的 SRCElement属性；
获取字符代码：若是按键表明一个字符（shift、Ctrl、Alt除外），IE的keyCode会返回字符代码unicode，DOM中按键的代码和字符是分离的，要获取字符代码，须要使用charCode属性；

阻止某个事件的默认行为：IE中阻止某个事件的默认行为，必须将returnValue属性设置为false，火狐浏览器中须要调用preventDefault()方法。

中止事件冒泡，IE中阻止事件进一步冒泡，须要设置cancelBubble为true，火狐中须要调用stopPropagation()。

解析一下优雅降级和渐进加强？

优雅降级：Web站点在全部新式浏览器中都能正常工做，若是用户使用的是旧式浏览器，则代码会针对旧版本的IE进行降级处理，使之在旧式浏览器上以某种形式降级体验而不至于彻底不能使用。
例如： border-shadow
渐进加强：从被全部浏览器支持的基本能工开始，逐步地添加那些只有新版本浏览器才支持的功能，向页面增长不影响基础浏览器的额外样式和功能。当浏览器支持时，它们会自定地呈现出来并发挥做用。
例如：默认使用flash上传，但若是浏览器支持HTML5的文件上传功能，则使用HTML5实现更好的体验。

Web应用从服务器主动推送Data到客户端有哪些方式？

HTML5提供的 WebSocket
不可见的 iframe
WebSocket经过 flash
XHR长时间链接
XHR Multipart Streaming
<script>标签的长时间链接（可跨域）

谈一下Node的优势和缺点？

优势：
由于Node是基于事件驱动和无阻塞的，因此很是适合处理并发请求；
所以构建在Node上的代理服务器相比其余技术实现（如Ruby）的服务器表现要好不少。
此外，与Node代理服务器交互的客户端代码是由JS语言编写，所以客户端和服务器端都用同一种语言编写。
缺点：
Node是一个相对新的开源项目，因此不太稳定，老是一直在变，并且缺乏足够多的第三方库支持。

你使用过哪些前端性能优化的方法？

一、减小HTTP请求次数： CSS Sprites、 JS、 CSS源码压缩、控制图片大小；网页 Gzip，CDN托管， data缓存，图片服务器
二、前端模板：JS+数据，减小因为HTML标签致使的带宽浪费，前端用变量保存AJAX请求结果，每次操做本地变量，不用请求，减小请求次数
三、用 innerHTML代替DOM操做，减小DOM操做次数，优化JS性能
四、当须要设置的样式不少时，设置 className而不是直接操做 style
五、少用全局变量、缓存DOM节点查找的结果。减小IO读取操做。
六、避免使用 CSS表达式，又称动态属性
七、图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳
八、避免在页面的主题布局中使用 table， table要等其中的内容彻底下载以后才会显示出来，显示比 div+css布局慢。
对普通的网站有一个统一的思路，就是尽可能向前端优化、减小数据库操做、减小磁盘IO读写。
向前端优化指的是，在不影响功能和体验的状况下，
能在浏览器执行的不在服务器端执行，
能在缓存服务器上直接返回的不要到应用服务器执行，
程序能直接取得的结果不要到外部取得，
本机内能取得的数据不要到远程取得，
内存能取到的不要到磁盘上取，
缓存中有得不要去数据库查询。

减小数据库操做，指的是减小更新次数、缓存结果减小查询次数、将数据库执行的操做尽量的让程序完成（例如join查询），
减小磁盘IO指尽可能不适用文件系统做为缓存、减小读写文件次数等。

HTTP状态码有哪些？分别表明什么？

简单版：
100- continue：继续，通常在发送 post请求时，已发送 http header以后服务器端将返回此信息表示确认，以后发送具体参数信息。
200- OK：正常返回信息
201- created：请求成功而且服务器建立了新的资源
202- Accepted：服务器已接受请求，但还没有处理
301-Moved Permanently：请求的网页已经永久移动到新的位置
302-Found：临时性重定向
303-See Other：临时性重定向，且老是使用GET请求新的URI
304-Not Modified：自从上次请求后，请求的网页未修改过
400-Bad Request：服务器没法理解请求的格式，客户端不该当尝试再次使用相同的内容发起请求

401-Unauthorized：请求未受权
403-Forbidden：禁止访问
404-Not Found：找不到如何与URI相匹配的资源

500-Internal Server Error：最多见的服务器端错误
503-Server Unavailable：服务器端暂时没法处理请求（多是过载或维护）

完整版：
1**（信息类）：表示接收到请求而且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTML协议版本

2**（响应成功）：表示动做被成功接收、理解和接受
200——代表该请求被成功地完成，所请求的资源发送回客户端
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不肯定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

3**（重定向类）：为了完成指定的动做，必须接受进一步处理
300——请求的资源可在多处获得
301——本网页被永久性转移到另外一个URL
302——请求的网页被转移到一个新的地址，但客户访问仍继续经过原始URL地址，重定向，新的URL会在response中的Location中返回，浏览器将会使用新的URL发出新的request。
303——建议客户访问其余URL或访问方式
304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，表明上次的文档已经被缓存，还能够继续使用。
305——请求的资源必须从服务器指定的地址获得
306——前一版本HTTP中使用的代码，现行版本中再也不使用
307——申明请求的资源临时性删除

4**（客户端错误类）：请求包含错误语法或不能正确执行
400——客户端请求有语法错误，不能被服务器所理解

401——请求未经受权，这个状态码必须和WWW-Authenticate报头域一块儿使用
HTTP 401.1——未受权：登陆失败
HTTP 401.2——未受权：服务器配置问题致使登陆失败
HTTP 401.3——ACL 禁止访问资源
HTTP 401.4——未受权：受权被筛选器拒绝
HTTP 401.5——未受权：ISAPI或CGI受权失败

402——保留有效ChargeTo头响应

403——禁止访问，服务器收到请求，可是拒绝提供服务
HTTP 403.1——禁止访问：禁止可执行访问
HTTP 403.2——禁止访问：禁止读访问
HTTP 403.3——禁止访问：禁止写访问
HTTP 403.4——禁止访问：要求SSL
HTTP 403.5——禁止访问：要求SSL 128
HTTP 403.6——禁止访问：IP地址被拒绝
HTTP 403.7——禁止访问：要求客户证书
HTTP 403.8——禁止访问：禁止站点访问
HTTP 403.9——禁止访问：链接的用户过多
HTTP 403.10——禁止访问：配置无效
HTTP 403.11——禁止访问：密码更改
HTTP 403.12——禁止访问：映射器拒绝访问
HTTP 403.13——禁止访问：客户证书已被吊销
HTTP 403.15——禁止访问：客户访问许可过多
HTTP 403.16——禁止访问：客户证书不可信或者无效
HTTP 403.17——禁止访问：客户证书已经到期或者还没有生效

404——一个404错误代表可链接服务器，但服务器没法取得所请求的网页，请求资源不存在。
405——用户在Request-Line字段定义的方法不予许
406——根据用户发送的Accept头，请求资源不可访问
407——相似401，用户必须首先在代理服务器上获得受权
408——客户端没有在用户指定的时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上再也不有此资源，且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器容许的大小
414——请求的资源URL长于服务器容许的长度
415——请求的资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有Range指示值，请求也不包含If-Rane请求头字段
417——服务器不知足请求Expect头字段指定的指望值，若是是代理服务器，多是下一级服务器不能知足请求。

5**（服务端错误类）：服务器不能正确执行一个正确的请求
HTTP 500——服务器遇到错误，没法完成请求
HTTP 500.100——内部服务器错误——ASP错误
HTTP 500.11——服务器关闭
HTTP 500.12——应用程序从新启动
HTTP 500.13——服务器太忙
HTTP 500.14——应用程序无效
HTTP 500.15——不容许请求global.asa

Error 501——未实现

HTTP 502——网关错误
HTTP 503——因为超载或停机维护，服务器目前没法使用，一段时间后可能恢复正常

一个页面从输入URL到页面加载显示完成，这个过程发生了什么？（流程越详细越好）

从URL规范、HTTP协议、DNS、CDN、数据库查询到浏览器解析、CSS规则构建、 layout、 paint、 onload/domready、JS执行、JS API绑定等
一、浏览器会开启一个线程来处理这个请求，对URL分析判断若是是HTTP协议就按照Web方式来处理；
二、调用浏览器内核中的对应方法，好比webview 中的loadUrl方法；
三、经过DNS解析获取网址的IP地址，设置UA等信息发出第二个GET请求；
四、记性HTTP协议会话，客户端发送报头（请求报头）；
五、进入到web服务器上的Web Server，如Accept、Tomcat、Node.js等服务器；
六、进入部署好的后端应用，如PHP、Java、JavaScript、python等，找到对应的请求处理；
七、处理结束反馈报头，此处若是浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304；
八、浏览器开始下载HTML文档（响应报头，状态码200），同时是使用缓存；
九、文档树创建，根据标记请求所须要指定MIME类型的文件（好比css、js），同时设置了cookie；
十、页面开始渲染DOM，JS根据DOM API操做DOM，执行事件绑定等，页面显示完成。

浏览器把请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；服务器交给后台处理完成后返回数据，浏览器接收文件；浏览器对加载到的资源进行语法解析，创建相应的内部数据结构；载入解析好的资源文件，渲染页面显示内容。