Blog
Blog copied to clipboard
CruxF
前端开发面试题大合集
前言
本文收集了一些前端面试题（为了方便阅读，建议先安装gayhub），主要是为了今后的求职，同时也借助这些面试题更进一步系统的学习、透彻的学习，形成自己的知识链。这并不是投机取巧，临时抱佛脚哈，自己也明白如果这么做肯定对未来的发展不利，不说这么多废话，下面正式开始。
前端开发所需掌握知识点概要（HTML&CSS)：
- 对Web标准的理解（结构、表现、行为）
- 浏览器内核
- 渲染原理
- 依赖管理
- 兼容性
- CSS语法，层次关系，常用属性，布局，选择器，权重，盒模型，Hack，CSS预处理器
- Flexbox布局
- CSS Modules
- Document flow
- BFC概念以及应用
- HTML5（离线 & 存储、Histoy,多媒体、WebGL\SVG\Canvas）；
HTML
1、Doctype作用？标准模式与兼容模式各有什么区别?
（1）<!DOCTYPE>声明位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
（2）标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
2、HTML5 为什么只需要写 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
3、行内元素有哪些？块级元素有哪些？ 空(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>
（4）鲜为人知的空元素：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
4、页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
5、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
（1）新特性：绘画 canvas；用于媒介回放的 video 和 audio 元素；语意化更好的内容元素，比如 article、footer、header、nav、section；表单控件，calendar、date、time、email、url、search；新的技术webworker, websocket, Geolocation；本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除；
（2）移除的元素：纯表现的元素：basefont，big，center，font, s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；
（3）兼容问题：IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim
6、简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
7、HTML5的离线储存怎么使用，工作原理能不能解释一下？
（1）在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
（2）原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
（3）使用：离线存储使用案例
8、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
（1）存储位置：cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
（2）存储大小：cookie数据大小不能超过4k。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
（3）存储时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage 数据在当前浏览器窗口关闭后自动删除；cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
9、iframe有那些缺点？
（1）iframe会阻塞主页面的Onload事件；
（2）搜索引擎的检索程序无法解读这种页面，不利于SEO；
（3）iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
【拓展】
如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。
10、Label的作用是什么？是怎么用的？
（1）作用：label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。 （2）用法：
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
11、HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或某个 input 设置为 autocomplete=off。
12、如何实现浏览器内多个标签页之间的通信?
（1）WebSocket、SharedWorker；
（2）也可以调用localstorge、cookies等本地存储方式；
13、webSocket如何兼容低浏览器？
（1）Adobe Flash Socket ；
（2）ActiveX HTMLFile (IE) ；
（3）基于 multipart 编码发送 XHR；
（4）基于长轮询的 XHR。
14、页面可见性（Page Visibility API） 可以有哪些用途？
（1）通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
（2）在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；
15、title与h1的区别、b与strong的区别、i与em的区别？
（1）title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
（2）strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<b>是展示强调内容；
（3）i内容展示为斜体，em表示强调的文本。
16、sessionStorage 、localStorage 和 cookie 之间的区别
（1）共同点：都是保存在浏览器端，且同源的。
（2）区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
（3）而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
（4）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
（5）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
17、HTML 5标签是否一定需要闭合？标签大小写是否敏感？
不一定；不敏感，但是推荐要用小写标签
18、HTML 中的DOM树
HTML DOM定义访问和操作HTML文档的标准方法。DOM将HTML文档表达为树结构。
W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C DOM 标准被分为 3 个不同的部分：
（1）核心DOM，针对任何结构化文档的标准模型；
（2）XML DOM，针对XML文档的标准模型；
（3）HTML DOM，针对HTML文档的标准模型，它是标准对象模型，是标准编程接口；
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点、每个HTML元素是元素节点、HTML元素内的文本是文本节点、每个HTML属性是属性节点、注释是注释节点。
19、XHTML和HTML有什么区别？
（1）HTML是一种基本的web网页设计语言，XHTML是一个基于XML的置标语言；
（2）XHTML元素必须被正确的嵌套；
（3）XHTML元素必须被关闭；
（4）XHTML元素必须使用小写字母；
（5）XHTML文档必须拥有根元素。
20、canvas和svg图形的区别是什么？
21、如果我不放入<! DOCTYPE html> ，HTML5还会工作么？
不会，浏览器将不能识别他是HTML文档，同时HTML5的标签将不能正常工作
CSS
1、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？如何设置这两种模型？
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： 这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异。
（4）标准盒模型box-sizing：content-box；IE盒模型box-sizing：border-box
2、CSS选择符有哪些？哪些属性可以继承？
（1）id选择器（ # myid）
（2）类选择器（.myclassname）
（3）标签选择器（div, h1, p）
（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 ;
3、CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
（1）同权重：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
（2）不同权重：!important > id > class > tag，其中important 比 内联优先级高
4、CSS3新增伪类有那些？
（1）p:first-of-type 选择属于其父元素的首个 <p> 元素的每个<p>元素。
（2）p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p>元素。
（3）p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
（4）p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。
（5）p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
（6）:checked 单选框或复选框被选中。
（7）:disabled 控制表单控件的禁用状态。
5、如何居中div？
（1）水平居中：给div设置一个宽度，然后添加margin:0 auto属性
div {
width: 200px;
margin: 0 auto;
}
（2）让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* 方便看效果 */
background-color: pink;
}
（3）水平垂直居中一
div {
/* 相对定位或绝对定位均可 */
position: relative;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
/* 外边距为自身宽高的一半 */
margin: -150px 0 0 -250px;
/* 方便看效果 */
background-color: pink;
}
（4）水平垂直居中二
div {
/* 相对定位或绝对定位均可 */
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 方便看效果 */
background-color: pink;
}
（5）水平垂直居中三
.container {
display: flex;
height: 500px;
width: 500px;
border: 1px solid #ccc;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
}
.container div {
width: 100px;
height: 100px;
/* 方便看效果 */
background-color: pink;
}
6、display有哪些值？说明他们的作用。
（1）block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
（2）none 缺省值。象行内元素类型一样显示。
（3）inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
（4）inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
（5）list-item 象块类型元素一样显示，并添加样式列表标记。
（6）table 此元素会作为块级表格来显示。
（7）inherit 规定应该从父元素继承 display 属性的值。
7、position的值relative和absolute定位原点是？
（1）absolute：生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
（2）fixed（老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
（3）relative：生成相对定位的元素，相对于其正常位置进行定位。
（4）static：默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
（5）inherit：规定从父元素继承 position 属性的值。
8、CSS3有哪些新特性？
（1）新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
（2）圆角 （border-radius:8px）
（3）多列布局 （multi-column layout）
（4）阴影和反射 （Shadow\Reflect）
（5）文字特效 （text-shadow、）
（6）文字渲染 （Text-decoration）
（7）线性渐变 （gradient）
（8）旋转 （transform）
（9）缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
9、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
（1）一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
（2）较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
（3）采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
（4）它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
（5）常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
（6）在布局上有了比以前更加灵活的空间。
使用指南
10、用纯CSS创建一个三角形的原理是什么？
把上、左、右三条边框隐藏掉（颜色设为 transparent）
div {
height: 0;
width: 0;
display: block;
border: transparent solid 20px;
border-left: #005AA0 solid 20px;
}
11、一个满屏 品 字布局 如何设计?
简单的方式：上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline使其不换行即可
12、css多列等高如何实现？
利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
#wrap {
overflow: hidden;
width: 670px;
margin: 10px auto;
padding-bottom: 10px;
position: relative;
}
.box {
float: left;
display: inline;
margin-top: 10px;
width: 190px;
background: #c8c8c8;
margin-left: 10px;
padding: 10px;
padding-bottom: 820px;
margin-bottom: -800px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<h1>CSS实现三列DIV等高布局</h1>
<p>
这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道。 下面介绍的技术是一个简捷的小技巧，它一定可以帮助你解决这个头痛的问题。
</p>
</div>
<div class="box">
<h1>三列DIV等高</h1>
<p></p>
</div>
<div class="box">
<h1>CSS实现</h1>
<p></p>
</div>
</div>
</body>
</html>
13、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
ul {
list-style: none;
/*解决空格问题*/
font-size: 0;
}
li {
display: inline-block;
height: 70px;
width: 150px;
line-height: 70px;
text-align: center;
border: #005AA0 solid 2px;
/*解决空格问题*/
font-size: 16px;
}
</style>
</head>
<body>
<ul>
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
</ul>
</body>
</html>
14、为什么要初始化CSS样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
15、子class选择器设置蓝色，父id选择器设置红色，最终会显示哪个？
一定是子元素设置的选择器最优先，要不然页面就乱套了。所以答案是蓝色。
16、请解释一下为什么需要清除浮动？清除浮动的方式
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box {
width: 510px;
border: #0000FF solid 1px;
}
.box:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.left {
float: left;
width: 250px;
height: 100px;
background-color: green;
}
.right {
float: left;
width: 250px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
解析原理：
（1） display:block 使生成的元素以块级元素显示,占满剩余空间
（2）height:0 避免生成内容破坏原有布局的高度
（3） visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互
（4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"."有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的
（5）zoom：1 触发IE hasLayout。
17、什么是外边距合并？
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
18、CSS优化、提高性能的方法有哪些？
（1）关键选择器（key selector），选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
（2）如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签，过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；
（3）提取项目的通用公有样式，增强可复用性，按模块编写组件；
（4）增强项目的协同开发性、可维护性和可扩展性;
（5）使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；
19、浏览器是怎样解析CSS选择器的？
样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
20、设置元素浮动后，该元素的display值是多少？
自动变成了 display:block
21、让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing: antialiased;
22、什么是CSS 预处理器 / 后处理器？
（1）预处理器：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
（2）后处理器：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
23、em和rem的区别在哪里？
（1）em是相对长度单位，相对于当前对象内文本的字体尺寸；
（2）em是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
24、假设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应
（1）利用浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.float .left {
float: left;
width: 300px;
background: red;
}
.layout.float .right {
float: right;
width: 300px;
background: blue;
}
.layout.float .center {
background: yellow;
}
</style>
</head>
<body>
<section class="layout float">
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
<p>
这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
</p>
</div>
</article>
</section>
</body>
</html>
（2）利用绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.absolute .left-center-right>div {
position: absolute;
}
.layout.absolute .left {
left: 0;
width: 300px;
background: red;
}
.layout.absolute .center {
left: 310px;
right: 310px;
background: yellow;
}
.layout.absolute .right {
right: 0;
width: 300px;
background: blue;
}
</style>
</head>
<body>
<section class="layout absolute">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
<p>
这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
</p>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
（3）利用flexbox布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: red;
}
.layout.flexbox .center {
flex: 1;
background: green;
}
.layout.flexbox .right {
width: 300px;
background: yellow;
}
</style>
</head>
<body>
<section class="layout flexbox">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flexbox解决方案</h1>
<p>
这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
</p>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
（4）表格布局法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Layout</title>
<style>
html * {
margin: 0;
padding: 0;
}
.layout article div {
min-height: 100px;
}
.layout.table .left-center-right {
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right>div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: black;
}
.layout.table .center {
background: green;
}
.layout.table .right {
width: 300px;
background: burlywood;
}
</style>
</head>
<body>
<section class="layout table">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>表格布局解决方案</h1>
<p>
这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
</p>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
25、什么是BFC？它的渲染规则是什么？如何创建BFC？它的使用场景有哪些？
（1）概念： BFC是Block Formatting Context （块级格式化上下文）的缩写，它是W3C CSS 2.1 规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 （2）渲染规则：
- 内部的box会在垂直方向，一个接一个的放置；
- box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠；
- 每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此；
- BFC的区域不会与float box重叠；
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
- 计算BFC的高度时，浮动元素也参与计算。 （3）创建BFC：
- float属性不为none；
- position属性值为absolute或fixed；
- display属性值为inline-block，table-cell,table-caption,flex,inline-flex；
- overflow属性值不为visible。 （4）使用场景：
- 解决垂直方向边距重叠；
- 解决和浮动元素的重叠；
- 清除浮动
26、CSS中的文档流
普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。其中涉及到了块状元素和内联元素。脱离文档流的几个属性：绝对定位(absolute)、固定定位(fixed)、浮动(float)。
27、CSS中的伪类
（1）概念：伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
（2）拓展：伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。
28、CSS中的伪元素
（1）概念：伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：document接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
（2）拓展：伪元素的由两个冒号::开头，然后是伪元素的名称。使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。
（3）分类：::first-letter；::first-line；::before；::after；::selection；（对用户所选取的部分样式改变）
29、伪元素和伪类的区别
（1）CSS伪类：用于向某些选择器添加特殊的效果。 （2）CSS伪元素：用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 （3）总结：
- 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
- 伪元素本质上是创建了一个有内容的虚拟容器；
- CSS3中伪类和伪元素的语法不同；
- 可以同时使用多个伪类，而只能同时使用一个伪元素。
30、CSS隐藏元素的几种方法
（1）Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
（2）Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
（3）Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
（4）Position:不会影响布局，能让元素保持可以操作;
31、float和display:inline-block;的区别
（1）文档流（Document flow）:
浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。
（2）水平位置（Horizontal position）：
很明显你不能通过给父元素设置text- align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了 display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。
（3）垂直对齐（Vertical alignment）：
inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
（4）空白（Whitespace）：
inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。
32、关于空白节点的解决方案
（1）删除html中的空白：
不要让元素之间换行，这可能比较蛋疼，但也是一种方法，特别是你元素不多的时候。
（2）使用负边距：
你可以用负边距来补齐空白。但你需要调整font-size，因为空白的宽度与这个属性有关系。
（3）给父元素设置font-size:0：
不管空白多大，由于空白跟font-size的关系，设置这个属性即可把空白的宽度设置为0.在实际使用的时候，你还需要给子元素重新设置font-size。
33、如何解决图片与文字的不对齐
（1）vertical-align：最有效的一种方式；
（2）margin： 需要不断调试图片的高度，精确度难以保证；
（3）position：同样是需要不断调试图片的高度，精确度难以保证。
34、如何实现点击radio的文字描述控制radio的状态
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<label for="man">男</label>
<input type="radio" id="man" name="sex" checked="checked" />
<label for="women">
女
<input type="radio" id="women" name="sex" />
</label>
</body>
</html>
35、position有哪些常用定位属性？定位原点是基于哪个位置？
（1）relative ：相对定位，没有脱离文档流，依然占有文档空间，它是根据自身原本在文档流中的位置进行偏移；
（2）absolute：绝对定位，脱离文档流，根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以position非static方式定位的，如果无父级是position非static定位时是以html作为原点定位。
（3）fixed：固定定位，脱离文档流，根据浏览器窗口进行定位。
36、介绍一下box-sizing属性
（1）box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
（2）content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
（3）border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
37、解释下浮动和它的工作原理？清除浮动的技巧
（1）原理：浮动元素脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框停留。 （2）使用空标签清除浮动：这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。 （3）使用overflow：给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 （4）使用after伪对象清除浮动：该方法只适用于非IE浏览器。
#parent:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
38、浮动元素引起的问题
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
39、img的白边是因为什么
原因在于，img标签默认情况下display:inline-block;img在div中的白边就是因为inline-block；造成的，所以此时将img的display设置为block；白边就消失了
40、px、pt和em、rem的区别是什么？
（1）px(pixel)指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的px元素显示会不一样，比如同样是14px大小的字，在1366*768显示屏下会显示的小，在1024*768尺寸的显示器下会相对大点。
（2）pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度。
（3）em是相对长度单位，相对于当前对象内文本的字体尺寸，即em的计算是基于父级元素font-size的。
<body style="font-size:14px">
<p style="font-size:2em">我这里的字体显示大小是28px(14px*2)</p>
<div style="font-size:18px">
<p style="font-size:2em">我这里显示字体大小是36px(18px*2),而不是上面计算的28px</p>
</div>
</body>
（4）rem是css3新增的一个相对单位，与em的区别在于，它是相对于html根元素的。
<body style="font-size:14px">
<p style="font-size:2rem">我这里的字体显示大小是28px(14px*2)</p>
<div style="font-size:18px">
<p style="font-size:2rem">我这里显示字体大小是28px(14px*2),因为我是根据html根元素的font-size大小进行计算的</p>
</div>
</body>
41、谈谈nth-of-type() 选择器
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，n 可以是数字、关键词或公式。其中，Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
p:nth-of-type(2) {
background: #ff0000;
}
p:nth-of-type(odd) {
background: #ff0000;
}
p:nth-of-type(even) {
background: #0000ff;
}
p:nth-of-type(3n+0) {
background: #ff0000;
}
JavaScript
1、JavaScript对数组的操作方法有哪些？
（1）join()方法：接收一个参数,即用作分隔符的字符串,然后返回包含所有数组项的字符串 （2）push()方法：接收任意数量的参数，把它们逐个添加到数组末尾,并返回修改后数组的长度 （3）pop()方法：从数组末尾移除最后一项,减少数组的length值,然后返回移除的项 （4）shift()方法：移除数组中第一个项并返回改项,同时将数组长度减1 （5）unshift()方法：在数组前端添加任意个项并返回新数组的长度 （6）sort()方法：对数组中的数据进行排序 （7）concat()方法：可以基于当前数组中的所有项创建一个新数组 （8）slice()方法：基于当前数组中的一或多个项创建一个新数组 （9）indexOf()方法：从数组的开头(位置0)开始向后查找 （10）lastIndexOf()：从数组的末尾开始向前查找 （11）splice()方法：恐怕要算是最强大的数组方法了,它有很多种用法，splice()的主要用途是向数组的中部插入项,但使用这种方法的方式则有如下3种：
- 删除：可以删除任意数量的项,只需指定2个参数（要删除的第一项的位置和要删除的项数），例如：splice(0,2)会删除数组中的前两项
- 插入：可以向指定位置插入任意数量的项,只需要提供3个参数（起始位置,0(要删除的项数)和要插入的项），例如：splice(2,0,"red","green")会从当前数组的位置2开始插入字符串"red"和"green"
- 替换：可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需要提供3个参数（起始位置,要删除的项数和要插入的任意数量的项），例如：splice(2,1,"red","green")会删除当前数组位置2的项,然后再从位置2开始插入字符串"red"和"green"；
原文地址
数组面试题 （1）计算给定数组arr中所有元素的总和
function sum(arr) {
var result = 0;
for (var i = 0; i < arr.length; i++) {
result += arr[i];
}
return result;
}
var arr = [4,5,6,1];
console.log(sum(arr));
（2）合并数组 arr1 和数组 arr2，不要直接修改数组 arr，结果返回新的数组
function concat(arr1, arr2) {
var arr3 = arr1.concat(arr2);
return arr3;
}
var Arr1 = [4, 5, 2];
var Arr2 = [7, 8, 3];
console.log(concat(Arr1, Arr2));
（3）删除数组 arr 第一个元素，不要直接修改数组 arr，结果返回新的数组
function curtail(arr) {
var arr2 = arr.slice(0);
arr2.shift();
return arr2;
}
var Arr = [1, 2, 34, 5];
console.log(curtail(Arr));
（4）在数组 arr 开头添加元素 item，不要直接修改数组 arr，结果返回新的数组
function prepend(arr, item) {
var arr2 = arr.slice(0);
arr2.unshift(item);
return arr2;
}
（5）移除数组 arr 中的所有值与 item 相等的元素，直接在给定的 arr 数组上进行操作，并将结果返回
function removeWithoutCopy(arr, item) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == item) {
arr.splice(i, 1);
i--;
}
}
return arr;
}
var Arr = [3, 4, 5, 6, 6, 6, 1];
console.log(removeWithoutCopy(Arr, 6));
（6）找出元素 item 在给定数组 arr 中的位置
function indexOf(arr, item) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == item) {
return i;
}
}
return -1;
}
2、JavaScript如何设置获取盒模型对应的宽和高？
（1）dom.style.width/height（只能获取到内联样式的宽和高，输出值带单位）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="box" style="height: 200px;"></div>
<script>
var getHeight = document.getElementById("box");
console.log(getHeight.style.height);
</script>
</body>
</html>
（2）dom.currentStyle.width/height（只有IE浏览器支持，输出值带单位）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#box {
height: 200px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var getHeight = document.getElementById("box");
document.write(getHeight.currentStyle.height);
</script>
</body>
</html>
（3）window.getComputedStyle(dom).width/height（兼容性好，输出值带单位）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#box {
height: 200px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var getHeight = document.getElementById("box");
document.write(window.getComputedStyle(getHeight).height);
</script>
</body>
</html>
（4）dom.getBoundingClientRect().width/height（兼容性好，输出值不带单位）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#box {
height: 200px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var getHeight = document.getElementById("box");
document.write(getHeight.getBoundingClientRect().height);
</script>
</body>
</html>
3、DOM事件的级别
（1）DOM0：element.onclick = function(){}
（2）DOM2：element.addEventListener('click',function(){},false)
【拓展】
所谓的0级dom与２级dom事件就是不同版本间的差异，具体的说就是，对于不同的ｄｏｍ级别，如何定义事件处理，以及使用时有什么不同。 比如在dom0级事件处理中，后定义的事件会覆盖前面的，但是dom2级事件处理中，对一个按钮点击的时间处理就没有被覆盖掉。
（3）DOM3：element.addEventListener('keyup',function(){},false)
（4）建议结合红宝书第6页
4、DOM事件模型
（1）冒泡型事件处理模型（Bubbling）：冒泡型事件处理模型在事件发生时，首先在最精确的元素上触发，然后向上传播，直到根节点，反映到DOM树上就是事件从叶子节点传播到根节点。 （2）捕获型事件处理模型（Captrue）：相反地，捕获型在事件发生时首先在最顶级的元素上触发，传播到最低级的元素上，在DOM树上的表现就是由根节点传播到叶子节点。 【捕获事件的具体流程】 window==>document==>html==>body==>父级元素==>目标元素 （3）标准的事件处理模型分为三个阶段：
- 父元素中所有的捕捉型事件（如果有）自上而下地执行
- 目标元素的冒泡型事件（如果有）
- 父元素中所有的冒泡型事件（如果有）自下而上地执行
（4）建议结合红宝书第345页
5、Event对象的常见应用
（1）event.preventDefault()：阻止事件的默认行为
（2）event.stopPropagation()：阻止事件的进一步传播，也就是阻止冒泡
（3）event.stopImmediatePropagation()：阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡。
（4）event.currentTarget：返回绑定事件的元素
（5）event.target：返回触发事件的元素
6、JavaScript自定义事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Event</title>
<style>
html * {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="ev">
<span>目标元素</span>
</div>
<script>
var event = new Event('test');
ev.addEventListener('test', function () {
console.log('test dispatch');
})
ev.dispatchEvent(event);
</script>
</body>
</html>
7、JavaScript类的声明
// 1、类的声明
function Animal() {
this.name = "name";
}
// 2、ES6中类的声明
class Animal2 {
constructor() {
this.name = name;
}
}
// 3、实例化类
console.log(new Animal(), new Animal2());
8、JavaScript类之间的继承
（1）借助构造函数实现不完全继承，无法继承方法：
function Parent1() {
this.name = 'parent1';
}
function Child1() {
Parent1.call(this);
this.type = 'child1';
}
console.log(new Child1());
（2）借助原型链实现继承，所有的属性和方法都得去原型链上去找，因而找到的属性方法都是同一个，所以直接利用原型链继承是不现实的。
function Parent2() {
this.name = 'parent2';
this.play = [1, 2, 3];
}
function Child2() {
this.type = 'child2';
}
Child2.prototype = new Parent2();
console.log(new Child2());
var s1 = new Child2();
var s2 = new Child2();
console.log(s1.play, s2.play);
s1.play.push(4);
（3）组合方式实现继承
function Parent3() {
this.name = 'parent3';
this.play = [1, 2, 3];
}
function Child3() {
Parent3.call(this);
this.type = 'child3';
}
Child3.prototype = new Parent3();
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4);
console.log(s3.play, s4.play);
（4）组合继承的优化1
function Parent4() {
this.name = 'parent4';
this.play = [1, 2, 3];
}
function Child4() {
Parent4.call(this);
this.type = 'child4';
}
Child4.prototype = Parent4.prototype;
var s5 = new Child4();
var s6 = new Child4();
console.log(s5.play, s6.play);
console.log(s5 instanceof Child4, s5 instanceof Parent4);
console.log(s5.constructor);
（5）组合继承的优化2（俗称寄生式继承）
function Parent5() {
this.name = 'parent5';
this.play = [1, 2, 3];
}
function Child5() {
Parent5.call(this);
this.type = 'child5';
}
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5;
var s7 = new Child5();
console.log(s7 instanceof Child5, s7 instanceof Parent5);
console.log(s7.constructor);
9、创建对象有几种方法？
（1）字面量：
var k1 = {
name: 'k1'
};
var k2 = new Object({
name: 'k2'
});
（2）通过构造函数
var m = function (name) {
this.name = name;
};
var k3 = new m('k3');
（3）通过Object.create
var p = {
name: 'ppp'
};
var k4 = Object.create(p);
11、什么是原型和原型链？有什么特点？
（1）每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象不存在这个属性，那么就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
（2）特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。
（3）更多原型知识1
12、JavaScript的运行机制
（1）JavaScript是单线程，一个时间段内，JavaScript只能干一件事情。任务队列分为同步任务和异步任务。
（2）异步任务类型：setTimeout和setInterval、DOM事件、ES6中的Promise
13、JavaScript异步加载的方式
（1）动态脚本加载；
（2）defer
（3）async
14、JavaScript的typeof返回哪些数据类型？
Ｏbject number function boolean underfind、String;
【拓展】
比较混淆的是：介绍JavaScript的基本数据类型
答案为：Undefined、Null、Boolean、Number、String、Symbol(创建后独一无二且不可变的数据类型
15、JavaScript中的事件委托是什么？
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
16、为什么要使用JavaScript的事件委托？
为了减少代码的DOM操作，提高程序性能。更多详情
17、JavaScript中的闭包
（1）有权访问另一个函数作用域内变量的函数都是闭包。
（2）闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会徒增内存消耗！另外使用闭包也要注意变量的值是否符合你的要求，因为他就像一个静态私有变量一样。
（3）更多
18、window.onload和DOMContentLoaded的区别是？
window.addEventListener('load',function(){
//页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded',function(){
//DOM渲染完即可执行，此时图片、视频还可能没有加载完
})
19、用JavaScript创建10个标签，点击的时候弹出来对应的序号
var i;
for (i = 0; i < 10; i++) {
(function (i) {
var a = document.createElement('a');
a.innerHTML = i + '<br>';
a.addEventListener('click', function (e) {
e.preventDefault();
alert(i);
});
document.body.appendChild(a);
})(i)
}
20、实现数组的随机排序
Array.prototype.shuffle = function () {
var input = this;
for (var i = input.length - 1; i >= 0; i--) {
var randomIndex = Math.floor(Math.random() * (i + 1));
var itemAtIndex = input[randomIndex];
input[randomIndex] = input[i];
input[i] = itemAtIndex;
}
return input;
}
var tempArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
tempArray.shuffle();
console.log(tempArray);
21、JavaScript中有哪些内置函数，与内置对象的区别是什么？
（1）内置函数：是浏览器内核自带的，不用任何函数库引入就可以直接使用的函数，如常规函数（alert等）、数组函数（reverse等）、日期函数（getDate等）、数学函数（floor等）、字符串函数（length等）；
（2）内置对象：是浏览器本身自带的，内置对象中往往包含了内置函数。内置对象有Object、Array、Boolean、Number、String、Function、Date、RegExp等。
22、JavaScript变量按照存储方式区分为哪些类型，并描述其特点
//值类型
//变量的交换，按值访问，操作的是他们实际保存的值。
//等于在一个新的地方按照新的标准开了一个空间（栈内存），
//这样a的值对b的值没有任何影响
var a = 100;
var b = a;
b = 200;
console.log("a:" + a + ",b:" + b);
//引用类型
//变量的交换，当查询时，我们需要先从栈中读取内存地址，
//然后再顺藤摸瓜地找到保存在堆内存中的值；
//发现当复制的是对象，那么obj1和obj2两个对象被串联起来了，
//obj1变量里的属性被改变时候，obj2的属性也被修改。
var obj1 = {
x: 100
};
var obj2 = obj1;
obj2.x = 200;
console.log("obj1:" + obj1.x + ",obj2:" + obj2.x);
23、如何理解JSON？
其实JSON只不过是一个JavaScript对象而已。stringify()是把对象变成字符串；parse()是把字符串变成对象。
24、JavaScript中&&和||
（1）只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值； （2）只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。 （3）且在js逻辑运算中，0、”“、null、false、undefined、NaN都会判为false，其他都为true。
（4）只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
（5）只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值。
25、描述new一个对象的过程
（1）创建空对象：var obj = {};
（2）设置新对象的constructor属性为构造函数的名称，设置新对象的__proto__属性指向构造函数的prototype对象：obj.proto = ClassA.prototype;
（3）使用新对象调用函数，函数中的this被指向新实例对象：ClassA.call(obj); //{}.构造函数();
（4）将初始化完毕的新对象地址，保存到等号左边的变量中
【注意】
若构造函数中返回this或返回值是基本类型（number、string、boolean、null、undefined）的值，则返回新实例对象；若返回值是引用类型的值，则实际返回值为这个引用类型。
26、什么是构造函数？
（1）构造函数就是初始化一个实例对象，对象的prototype属性是继承一个实例对象。 （2）注意事项：
- 默认函数首字母大写；
- 构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们，当调用构造函数时，new会自动创建this对象，且类型就是构造函数类型；
- 也可以在构造函数中显示调用return.如果返回的值是一个对象，它会代替新创建的对象实例返回。如果返回的值是一个原始类型，它会被忽略，新创建的实例会被返回；
- 因为构造函数也是函数，所以可以直接被调用，但是它的返回值为undefine，此时构造函数里面的this对象等于全局this对象。this.name其实就是创建一个全局的变量name。在严格模式下，当你补通过new 调用Person构造函数会出现错误；
27、函数声明和函数表达式的区别
//成功
fn()
function fn() {
console.log("函数声明，全局");
}
//报错
fn1()
var fun1 = function () {
console.log("函数表达式，局部")
}
28、说一下对变量提升的理解
（1）顾名思义，就是把下面的东西提到上面。在JS中，就是把定义在后面的东东（变量或函数）提升到前面中定义。
var v = 'Hello World';
(function () {
alert(v); //undefined
var v = 'I love you';
})()
（2）根据上面变量提升原件以及js的作用域（块级作用域）的分析，得知 上面代码真正变成如下：
var v = 'Hello World';
(function () {
var v;
alert(v);
v = 'I love you';
})()
（3）在我们写js code 的时候，我们有2中写法，一种是函数表达式，另外一种是函数声明方式。我们需要重点注意的是，只有函数声明形式才能被提升。
//成功
function myTest() {
foo();
function foo() {
alert("我来自 foo");
}
}
myTest();
//失败
function myTest() {
foo();
var foo = function foo() {
alert("我来自 foo");
}
}
myTest();
29、说一下this几种不同的使用场景
（1）作为构造函数执行，如果函数创建的目的是使用new来调用，并产生一个对象，那么此函数被称为构造器函数；
var Niu = function (string) {
this.name = string;
};
（2）作为对象属性执行，对象成员方法中的this是对象本身，此时跟其他语言是一致的，但是也有差异，JavaScript中的this到对象的绑定发生在函数调用的时候；
var myObj = {
value: 0,
increment: function (inc) {
this.value += typeof inc === 'number' ? inc : 1;
}
};
myObj.increment(); //1
myObj.increment(2); //3
（3）作为普通函数执行，以普通方式定义的函数中的this：会被自动绑定到全局对象；
var value = 232;
function toStr() {
console.log(this.value);
}
（4）对象方法中闭包函数的this
//在以普通方式定义的函数中的this会被自动绑定到全局对象上，
//大家应该可以看出闭包函数定义也与普通方式无异，因此他也会被绑定到全局对象上。
value = 10;
var closureThis = {
value: 0,
acc: function () {
var helper = function () {
this.value += 2;
console.log("this.value : %d", this.value);
}
helper();
}
};
closureThis.acc(); //12
closureThis.acc(); //14
var closureThat = {
value: 0,
acc: function () {
that = this;
var helper = function () {
that.value += 2;
console.log("that.value : %d", that.value);
}
helper();
}
};
closureThat.acc(); // 2
closureThat.acc(); // 4
（5）apply函数的参数this，apply方法允许我们选择一个this值作为第一个参数传递，第二个参数是一个数组，表明可以传递多个参数。
30、如何理解JavaScript作用域？
函数的执行依赖于变量作用域，这个作用域是在函数定义时决定的，而不是函数调用时决定的。
function foo() {
var x = 1;
return function () {
alert(x);
}
};
var bar = foo();
bar(); // 1
var x = 2;
bar(); // 1
31、什么是自由变量？
自由变量就是当前作用域没有定义的变量，即“自由变量”
var a = 100;
function F1() {
var b = 200;
function F2() {
var c = 300;
//a是自由变量
console.log(a);
//b是自由变量
console.log(b);
console.log(c);
}
F2();
}
F1();
32、this的特点
this要在执行时才能确认值，定义时无法确认。
33、同步和异步的区别是什么？分别举一个同步和异步的例子
同步会阻塞代码执行，而异步不会；alert是同步，setTimeout是异步。
33、一个关于setTimeout的笔试题
//输出结果13542
console.log(1);
setTimeout(function () {
console.log(2);
}, 100);
console.log(3);
setTimeout(function () {
console.log(4);
}, 99);
console.log(5)
34、何时需要异步？
在可能发生等待的情况、等待过程中不能像alert一样阻塞程序运行、因此所有的等待的情况都需要异步
35、JavaScript中的异步和单线程
（1）其实，单线程和异步确实不能同时成为一个语言的特性。js选择了成为单线程的语言，所以它本身不可能是异步的，但js的宿主环境（比如浏览器，Node）是多线程的，宿主环境通过某种方式（事件驱动，下文会讲）使得js具备了异步的属性。
（2）js是单线程语言，浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，甚至导致页面的假死。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的。
36、使用JavaScript获取当天的日期
function formatDate(dt) {
if (!dt) {
dt = new Date();
}
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var date = dt.getDate();
if (month < 10) {
month = "0" + month;
}
if (date < 10) {
date = "0" + date;
}
return year + "-" + month + "-" + date;
}
var dt = new Date();
var formatDate = formatDate(dt);
console.log(formatDate);
37、获取随机数，要求是长度一致的字符串
var random = (Math.random() * 10 + "0000000000").slice(0, 10);
console.log(random);
38、写一个能遍历对象和数组的通用forEach函数
function forEach(obj, fn) {
if (obj instanceof Array) {
//准确判断是不是数组
obj.forEach(function (item, index) {
fn(index, item);
})
} else {
//不是数组就是对象
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
fn(key, obj[key]);
}
}
}
}
//检测数组
var arr = [1, 2, 3];
//这里顺序换了，为了和对象的遍历格式一致
forEach(arr, function (index, item) {
console.log(index, item);
});
//检测对象
var obj = {
x: 100,
y: 200
};
forEach(obj, function (key, value) {
console.log(key, value);
})
39、DOM操作的常用API有哪些？
获取DOM节点，以及节点的property和Attribute；获取父节点和子节点；新增节点和删除节点
40、DOM节点的attr和property有何区别？
property只是一个JavaScript对象的属性的修改；Attribute是对html标签属性的修改
41、DOM的本质
浏览器把拿到的HTML代码，结构化一个浏览器能识别并且js可以操作的一个模型而已。
42、手动编写一个ajax，不依赖第三方库
var xmlHttp = new XMLHttpRequest() || new ActiveXObject("Msxml2.XMLHTTP");
xmlHttp.open("提交方式", "提交地址", true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
infoDiv.innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send();
更多ajax知识，请点击这里
43、什么是跨域？
（1）浏览器有同源策略，不允许ajax访问其他域接口。跨域条件（协议、域名、端口）有一个不同就算是跨域。
（2）可以跨域的三个标签（<img src=xxx>、<link href=xxx>、<script src=xxx>）。三个标签的应用场景（<img>用于打点统计，统计网站可能是其他域、
44、跨域的几种实现方式
（1）通过jsonp跨域：在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。
（2）通过修改document.domain来跨子域：
（3）使用window.name来进行跨域：
（4）使用HTML5中新引进的window.postMessage方法来跨域传送数据：
（5）更详细的内容
45、JavaScript实现字符串反转
（1）第一种方法
var str = "abcdef";
console.log(str.split("").reverse().join(""));
（2）第二种方法
var str = "abcdef";
var i = str.length - 1;
for (var x = i; x >= 0; x--) {
document.write(str.charAt(x));
}
（3）第三种方法
function reverse(str) {
if (str.length == 0) return null;
var i = str.length;
var dstr = "";
while (--i >= 0) {
dstr += str.charAt(i);
}
return dstr;
}
var str = "abcdef";
str = reverse(str);
document.write(str);
46、ajax中的get和post两种请求方式的异同
（1） get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到；post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 （2）对于get方式，服务器端用Request.QueryString获取变量的值；对于post方式，服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。 （3）get传送的数据量较小，不能大于2KB；post传送的数据量较大，一般被默认为不受限制，但理论上，因服务器的不同而异。 （4）get安全性非常低，post安全性较高。 （5）
