前端开发面试题

头像
寒青
    阅读 24 分钟
    73

    前端开发面试题

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

    HTML

    • Doctype作用？标准模式与兼容模式各有什么区别？
    1、<!DOCTYPE>声明位于HTML文档中的第一行，处于<html>标签之前，告知浏览器的解析器用什么文档标准解析。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
    2、标准模式的排版和JS运行模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
    • HTML5为什么只需要写<!DOCTYPE HTML>？
    HTML5不基于SGML(标准通用标记语言)，因此不需要对DTD(文档类型定义)进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）
    HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
    • 行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
    首先：CSS规范规定，每个元素都有display属性，确定钙元素的类型，每个元素都有默认的display值，如div的display默认值为block，都是块级元素；span默认display属性值为inline，是行内元素。
    1、行内元素：a、b、span、img、input、select、strong（强调的语气）
    2、块级元素：div、ul、ol、li、dl、dt、dd、h1、h2、h3、h4、p
    3、常见的空元素：br、hr、img、input、link、meta
    不常用的空元素：area、base、col、command、embed、keygen、param、source、track、wbr
    • 页面导入样式时，使用link和@import有什么区别？
    1、link属于XHTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS。
    2、页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
    3、import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。
    4、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、Geolocation

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

    支持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一样被存储下来。之后当网络处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。

    如何使用：
    1、页面头部加入一个manifest的属性
    2、在cache.manifest文件的编写离线存储的资源
    3、在离线状态下，操作window.applicationCache进行需求实现

    • 浏览器是如何对HTML5的离线存储资源进行管理和加载的？
    在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，浏览器会根据manifest文件的内容下载相应的资源并且进行离线存储。
    如果已经访问过app，并且资源已经离线存储，浏览器会使用离线的资源加载页面，然后浏览器会对比新的manifest文件，如果文件没有发生改变，就不做任何操作，否则就会重新下载文件中的资源并进行离线存储。
    离线的情况下，浏览器直接使用离线存储的资源。
    • 请描述一下cookie，sessionStorage，localStorage的区别？
    cookie是网站为了标识用户身份而存储在用户本地终端上的数据（通常经过加密）
    cookie数据始终在同源的http请求中携带（即使不需要），就会在浏览器和服务器间来回传递
    sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

    存储大小：
    cookie数据大小不能超过4k
    sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

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

    • 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的值检测页面当前是否可见，以及打开页面的时间等
    在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放
    • 如何在页面上实现一个圆形的可点击区域？
    1、map+area或者SVG
    2、border-radius
    3、纯JS实现，需要求一个点在不在圆上简单算法、获取鼠标坐标等
    • 实现不使用border画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
    <div style="height: 1px;overflow: hidden;background: red;"></div>

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

    CSS

    • 介绍一下标准CSS的盒子模型？低版本IE的盒子模型有什么不同？
    1、有两种，IE盒子模型、W3C盒子模型
    2、盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）
    3、区别：IE的content部分把border和padding计算进去
    • CSS选择符有哪些？哪些属性可以继承？
    1、ID选择器
    2、类选择器
    3、标签选择器
    4、相邻选择器（h1+p）
    5、子选择器（ul>li）
    6、后代选择器（li a）
    7、通配符选择器（*）
    8、属性选择器（a[rel="external"]）
    9、伪类选择器（a:hover,li:nth-child）

    可继承的样式：font-size、font-family、color、ul、li、dl、dd、dt
    不可继承的样式：border、padding、margin、width、height

    • CSS优先级如何计算？
    优先级就近原则，同权重情况下样式定义最近者为准
    载入样式以最后载入的定位为准

    优先级为：
    同权重：内联样式表（标签内部）>嵌入样式表（当前文件）>外部样式表（外部文件）
    !important > id > class > tag
    !important比内联优先级高

    • 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和IE7、IE6分离开来，这样IE8已经独立识别。
    div {
    background-color: red; /*所有识别*/
    background-color: #00deff \9; /*IE6、7、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的元素，然后再判断：
    1、若此元素为inline元素，则containing block为能够包含这个元素生成的第一个和最后一个inline box的padding box（除margin，border外的区域）的最小矩形；
    2、否则由这个祖先元素的padding box构成
    如果都找不到，则为initial containing block

    补充：
    1、static/relative，它的父元素的内容框（即去掉padding的部分）
    2、absolute：向上找最近的定位为absolute、relative的元素
    3、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。
    • 请解释一下为什么需要清除浮动？清除浮动的方法？
    清除浮动是为了清除使用浮动元素产生的影响。
    浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

    1、父级div定义height；
    2、父级div也一起浮动；
    3、常规的使用一个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;
}
    解析原理：
    1、displa:block;使生成的元素以块级元素显示，占满剩余空间；
    2、height:0避免生成内容破坏原有布局的高度；
    3、visibility:hidden;使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互；
    4、通过content:"."生成内容作为最后一个元素，
    5、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的文字？
    1、使用图片：如果是内容固定不变的情况下，使用将小于12px文字内容切出做图片，这样既兼容又美观。
    2、使用12px字体大小样式设置，如果不考虑Chrome可以不用考虑兼容同时在设置小于12px对象设置-webkit-text-adjust:none，做到最大兼容考虑。
    4、使用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的基本规范
    1、不在同一行声明多个变量
    2、使用===/!==来比较true/false或者数值
    3、使用对象字面量替代new Array
    4、不使用全局函数
    5、switch语句必须带有default分支
    6、函数应该有返回值
    7、for循环必须使用大括号
    8、if语句必须使用大括号
    9、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如何实现继承？
    1、构造
    2、原型
    3、实例
    4、拷贝

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

    function Parent() {
    this.name = name;
}
function Child() {
    this.age = age;
}
Child.prototype = new Parent();//继承Parent，通过原型
    • JS创建对象的方式？
    JS创建对象，就是使用内置对象或各种自定义对象，还可以使用JSON；
    1、对象字面量var person={firstname:"Mark",lastname:"Yun"}
    2、用function模拟无参数的构造函数
    function Person() {}
var person = new Person();//定义一个function，如果使用new实例化，该function可以看作一个class
person.name = "Mark";
person.age = "25";
person.word = function () {
    return person.name + 'hello'
};
    3、用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方法
    4、用工厂方式来创建（内置对象）
    var mcDog = new Object();
mcDog.name = "旺财";
mcDog.age = 3;
mcDog.work = function () {
    return mcDog.name + ',汪汪汪......';
};
mcDog.work();
    5、用原型方式来创建
    function Dog() {}
Dog.prototype.name = "旺财";
Dog.prototype.eat = function () {
    return this.name = "是个吃货"
};
    6、用混合方式来创建
    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与火狐的事件机制有什么区别？如何组织冒泡？
    1、在网页中的某个操作，例如点击一个按钮就会产生一个事件，可以被JS侦测到的行为。
    2、事件处理机制：IE是事件冒泡、Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件；
    3、ev.stopPropation();（旧IE的方法ev.cancelBubble=true;）
    • 什么是闭包（closure），为什么要使用它？
    闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见方式是一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量；
    利用闭包可以突破作用域链，将函数内部的变量和方法传递到外部。

    闭包的特性：
    1、函数内再嵌套函数；
    2、内部函数可以引用外层的参数和变量；
    3、参数和变量不会被垃圾回收机制回收

    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操作符？
    1、创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型；
    2、属性和方法被加入到this引用的对象中；
    3、新创建的对象由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
    异步：向服务器发送请求时，不必等待结果，而是可以同时做其他的事情，等到有了结果会自己根据设定进行后续操作；
    与此同时，页面不会发生整体刷新，提供了用户体验。

    1、创建XMLHTTPRequest对象，也就是创建一个异步调用对象；
    2、创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息；
    3、设置响应HTTP请求状态变化的函数；
    4、发送HTTP请求
    5、获取异步调用返回的数据
    6、使用JS和DOM实现局部刷新

    • Ajax解决浏览器缓存问题？
    1、在ajax发送请求前添加
    AjaxObj.setRequestHeader("IF-Modified-Since","0");
    2、在ajax发送请求前添加
    AjaxObj.setRequestHeader("Cache-Control", "no-cache");
    3、在URL后面添加一个随机数："fresh=" + Math.random();

    4、在URL后面添加时间戳："nowtime=" + new Date().getTime();

    5、如果使用jQuery，则$.ajaxSetup({cache: false});。这样页面的所有ajax都会执行这条语句，不需要保存缓存记录。

    • 同步和异步的区别？
    同步：不同进程为协同完成某项工作，在先后次序上调整（通过阻塞，唤醒等方式）。

    同步：浏览器访问服务器请求，页面刷新，重新发送请求，等待请求完成，页面刷新显示新内容，如此反复。
    异步：浏览器访问服务器请求，操作页面，浏览器后端进行请求。等待请求完成，页面不刷新显示新内容。

    • 如何解决跨域问题？
    jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面
    • AMD、CMD规范的却别？
    AMD异步模块定义，所有的模块将被异步加载，模块加载不影响后面语句运行。
    所有依赖某些模块的语句都放置在回调函数中。

    区别：
    1、对于依赖的模块，AMD是提前执行，CMD是延迟执行。
    2、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操作——添加、移除、移动、赋值、创建和查找节点？
    1、创建新节点
    createDocumentFragment();//创建一个DOM片段
createElement();//创建一个具体的元素
createTextNode();//创建一个文本节点
    2、添加、移除、替换、插入
    appendChild();//添加
removeChild();//移除
replaceChild();//替换
insertBefore();//在已有的子节点前插入一个新的子节点
    3、查找
    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热更新实现原理？
    1、webpack编译期，为需要热更新的entry注入热更新代码（EventSource通信）
    2、页面首次打开后，服务端与客户端通过EventSource建立通信渠道，把下一次的hash返回前端
    3、客户端获取到hash，这个hash将作为下一次请求服务端hot-update.js和hot-update.json的hash
    4、修改页面代码，webpack监听到文件修改后，开始编译，编译完成后发送build消息给客户端
    5、客户端获取到hash，成功后客户端构造hot-update.js的script链接，然互殴插入主文档
    6、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。

    对传统的网站来说，重构通常是：
    1、表格table布局改为div+css
    2、使网站前端兼容于现代浏览器
    3、对于移动平台的优化
    4、针对SEO进行优化

    深层次的网站重构应该考虑：
    1、减少代码间的耦合
    2、让代码保持弹性
    3、严格按照规范编写代码
    4、设计可扩展的API
    5、代替旧有的框架、语言
    6、增强用户体验
    7、对速度的优化

    1、压缩JS、CSS、image等前端资源（通常是由服务器来解决）
    2、程序的性能优化（数据读写）
    3、采用CDN来加速资源加载
    4、对于JS DOM的优化
    5、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是一个相对新的开源项目，所以不太稳定，总是一直在变，而且缺少足够多的第三方库支持。

    • 你使用过哪些前端性能优化的方法？
    1、减少HTTP请求次数：CSS Sprites、JS、CSS源码压缩、控制图片大小；网页Gzip，CDN托管，data缓存，图片服务器
    2、前端模板：JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
    3、用innerHTML代替DOM操作，减少DOM操作次数，优化JS性能
    4、当需要设置的样式很多时，设置className而不是直接操作style
    5、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
    6、避免使用CSS表达式，又称动态属性
    7、图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳
    8、避免在页面的主题布局中使用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绑定等

    1、浏览器会开启一个线程来处理这个请求，对URL分析判断如果是HTTP协议就按照Web方式来处理；
    2、调用浏览器内核中的对应方法，比如webview 中的loadUrl方法；
    3、通过DNS解析获取网址的IP地址，设置UA等信息发出第二个GET请求；
    4、记性HTTP协议会话，客户端发送报头（请求报头）；
    5、进入到web服务器上的Web Server，如Accept、Tomcat、Node.js等服务器；
    6、进入部署好的后端应用，如PHP、Java、JavaScript、python等，找到对应的请求处理；
    7、处理结束反馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304；
    8、浏览器开始下载HTML文档（响应报头，状态码200），同时是使用缓存；
    9、文档树建立，根据标记请求所需要指定MIME类型的文件（比如css、js），同时设置了cookie；
    10、页面开始渲染DOM，JS根据DOM API操作DOM，执行事件绑定等，页面显示完成。

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

    前端面试htmlcssjavascript
    寒青
    10.4k 声望3.8k 粉丝
    « 上一篇
    JS思维导图
    下一篇 »
    高性能JavaScript（文档）

    引用和评论

    推荐阅读
    头像
    我的技能树

    寒青阅读 147

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.5k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.7k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.8k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.9k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.8k

    0 条评论
    得票最新