会重读，而是展示强调内容。
i内容展示为斜体，em表示强调的文本；
Physical Style Elements -- 自然样式标签
b, i, u, s, pre
Semantic Style Elements -- 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。
## CSS
- 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;
- 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 ;
- CSS优先级算法如何计算？
* 优先级就近原则，同权重情况下样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag
important 比 内联优先级高
- CSS3新增伪类有那些？
举例：
p:first-of-type 选择属于其父元素的首个 元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
- 如何居中div？
* 水平居中：给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
* 让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
* 水平垂直居中一
确定容器的宽高 宽500 高 300 的层
设置层的外边距
div {
position: relative; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
background-color: pink; /* 方便看效果 */
}
* 水平垂直居中二
未知容器的宽高，利用 `transform` 属性
div {
position: absolute; /* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /* 方便看效果 */
}
* 水平垂直居中三
利用 flex 布局
实际使用时应考虑兼容性
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}
- display有哪些值？说明他们的作用。
block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 缺省值。象行内元素类型一样显示。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承 display 属性的值。
- position的值relative和absolute定位原点是？
absolute
生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其正常位置进行定位。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
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(0px,-30px)\ skew(-9deg,0deg)\Animation:
- 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右）,并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
在布局上有了比以前更加灵活的空间。
具体：http://www.w3cplus.com/css3/flexbox-basics.html
- 用纯CSS创建一个三角形的原理是什么？
把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
- 一个满屏 品 字布局 如何设计?
简单的方式：
上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可
- css多列等高如何实现？
利用padding-bottom|margin-bottom正负值相抵；
设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，
当它里面的任 一列高度增加了，则父容器的高度被撑到里面最高那列的高度，
其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
- 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用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 10px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。
(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:red;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
- li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，
所以会有间隔，把字符大小设为0，就没有空格了。
- 为什么要初始化CSS样式。
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）
淘宝的样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button,
input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
- 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下起作用,IE7及以下会显示元素,Chrome会将元素隐藏,但是占据空间.
- position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
如果元素的display为none,那么元素不被渲染,position,float不起作用,如果元素拥有position:absolute;或者position:fixed;
属性那么元素将为绝对定位,float不起作用.如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.有浮动,绝对
定位,inline-block属性的元素,margin不会和垂直方向上的其他元素margin折叠.
- 对BFC规范(块级格式化上下文：block formatting context)的理解？
（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,
也就是说BFC内部的元素和外部的元素不会互相影响。
- css定义的权重
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
- 请解释一下为什么需要清除浮动？清除浮动的方式
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
1、父级div定义height；
2、父级div 也一起浮动；
3、常规的使用一个class；
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
4、SASS编译的时候，浮动元素的父级div定义伪类:after
&:after,&:before{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
解析原理：
1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，
例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是
不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，
这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。
- 什么是外边距合并？
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
[w3school介绍网址：](http://www.w3school.com.cn/css/css_margin_collapsing.asp)
- zoom:1的清除浮动原理?
清除浮动，触发hasLayout；
Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。
譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。
来龙去脉大概如下：
当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里
一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，
zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。
目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？
可以通过css3里面的动画属性scale进行缩放。
- 移动端的布局用过媒体查询吗？
假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，
而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法
当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。
当媒体查询返回假， 标签上带有媒体查询的样式表 仍将被下载 （只不过不会被应用）。
包含了一个媒体类型和至少一个使用 宽度、高度和颜色等媒体属性来限制样式表范围的表达式。
CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。
- 使用 CSS 预处理器吗？喜欢那个？
SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS)
- CSS优化、提高性能的方法有哪些？
关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了);
提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；
- 浏览器是怎样解析CSS选择器的？
样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。
只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
- 在网页中的应该使用奇数还是偶数的字体？为什么呢？
* 偶数字号相对更容易和 web 设计的其他部分构成比例关系。
* Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
* 使用偶数是一种习惯的延续，并且12px和14px字体能形成更好的层次与对比。使用奇数号字体不好的地方是，文本段落无法对齐。
- margin和padding分别适合什么场景使用？
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干；
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段
- 抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
先通读视觉稿，把所有类似的、可复用的部分划分出来，抽出结构和样式做成模块。达到一段 HTML 代码、一段 CSS 样式，粘贴到任意位置都正常。
- 元素竖向的百分比设定是相对于容器的高度吗？
对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的是父容器的宽度，而不是高度。
- 全屏滚动的原理是什么？用到了CSS的那些属性？
主要呈现方式有两种，一种是整体的元素一直排列下去，假设有五个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行Y轴定位，也可以通过margin-top实现，第二种就是所有的子元素和页面一样，都显示在当前页面。
- 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
* 面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整.
* 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：
- 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
- display:inline-block 什么时候会显示间隙？(携程)
有空格的时候会有间隙（两个display:inline-block的默认的空格或者换行符），解决方法 移除空格、
使用margin负值、使用font-size:0、letter-spacing、word-spacing
- overflow: scroll时不能平滑滚动的问题怎么处理？
（1）-webkit-overflow-scrolling: touch;，是因为这行代码启用了硬件加速特性，所以滑动很流畅。
（2） [isroll 方案](http://www.jianshu.com/p/1f4693d0ad2d)
overflow: auto 当页面出现滚动条时，会造成[跳动问题](http://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/)
* （1）高度尺寸不确定的时候，使用：overflow-y：scroll;
* （2）高度尺寸确定的，要么没有滚动条，要么直接出现，不会出现跳动。
* （3）
```javascript
.wrap-outer {
margin-left: calc(100vw - 100%);
}
或.wrap-outer {
padding-left: calc(100vw - 100%);
}
```
首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实现类似效果，不过本着宽度分离原则，不推荐）；
然后，calc是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在background-position上)；
最后，100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，
主体内容就可以永远居中浏览器啦，从而没有任何跳动！
- 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
*（1）height：calc（100%-100px）
* （2）absolute positioning：外层position：relative；百分百自适应元素
position: absolute; top: 100px; bottom: 0; left: 0
* flex 父元素display:flex; flex-direction: column; 下面的子元素的设置flex: 1;
- png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
* 1, png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式，
优点是：压缩比高，色彩好。 大多数地方都可以用。
* 2, jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的 不错。
在www上，被用来储存和传输照片的格式。
* 3, gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果时候
webp格式
是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%，缺点是压缩的时间更久了
。兼容性不好，目前谷歌和opera支持。
- 什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，
所以不如隔离开。
静态资源放 CDN ，用 cookie free domain因为cookie有域的限制，因此不能跨域提交请求，故使用非
主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到
降低整体请求延时的目的。
同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，
提高了webserver的http请求的解析速度。
- style标签写在body后与body前有什么区别？
* 1, 写在head标签中利于浏览器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。
CSS，解析CSS会产生CSS规则树。Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
* 2, 写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览
器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）
- 基础知识——浏览器的渲染过程：(CSSOM视图模块(CSS Object Model View)
* 1, Create/Update DOM And request css/image/js：浏览器请求到HTML代码后，在生成DOM的最开始阶段（应该是 Bytes → characters 后），并行发起css、图片、js的请求，无论他们是否在HEAD里。注意：发起 js 文件的下载 request 并不需要 DOM 处理到那个 script 节点，比如：简单的正则匹配就能做到这一点，虽然实际上并不一定是通过正则：）。这是很多人在理解渲染机制的时候存在的误区。
* 2, Create/Update Render CSSOM：CSS文件下载完成，开始构建CSSOM
* 3, Create/Update Render Tree：所有CSS文件下载完成，CSSOM构建结束后，和 DOM 一起生成 Render Tree。
* 4, Layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。
* 5, Painting：Layout后，浏览器已经知道了哪些节点要显示（which nodes are visible）、每个节点的CSS属性是什么（their computed styles）、每个节点在屏幕中的位置是哪里（geometry）。就进入了最后一步：Painting，按照算出来的规则，通过显卡，把内容画到屏幕上。
补充：
* 1, Repaint（重绘）：屏幕的一部分要重画。
* 2, Reflow（回流）：元件的几何尺寸变化了。要重新验证并计算Render Tree
* 3, 联想——
```
执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在
使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源
因为say667()的内部函数的执行需要依赖say667()中的变量
这是对闭包作用的非常直白的描述
```javascript
function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() {
alert(num);
}
num++;
return sayAlert;
}
```
var sayAlert = say667();
sayAlert()//执行结果应该弹出的667
- javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？
use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,
使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;
全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的
行为和非严格模式的也不相同;
提高编译器效率，增加运行速度；
为未来新版本的Javascript标准化做铺垫。
- 如何判断一个对象是否属于某个类？
使用instanceof （待完善）
if(a instanceof Person){
alert('yes');
}
- new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
- 用原生JavaScript的实现过什么功能吗？
* 双向数据绑定 利用Object.defineProperty 设置getter,setter来实现数据双向绑定 或者Object.observe(已废弃) &&DOM.onchange;
```javascript
Object.defineProperty(user,'name',{
get: function(){return nameValue},
set: function(newValue){nameValue = newValue},
configurable: true
});
Object.observe(user, function(changes){
changes.forEach(functon(change){
console.log(change.name);
console.log(change.type);
});
});
```
- Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty
javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法
检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。
使用方法：
object.hasOwnProperty(proName)
其中参数object是必选项。一个对象的实例。
proName是必选项。一个属性名称的字符串值。
如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。
- JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
如：{"age":"12", "name":"back"}
JSON字符串转换为JSON对象:
var obj =eval('('+ str +')'); //加上括号是为了构造一个表达式上下文，() 会把语句转换成表达式，
括号里的代码都会被转换为表达式求值并且返回，对象字面量必须作为表达式而存在。
[链接：](http://www.cnblogs.com/zichi/p/5202825.html) 合法的 label语句是不能带引号
var obj = JSON.parse(str);
JSON对象转换为JSON字符串：
var last=JSON.stringify(obj);
- `[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})` 能解释一下这段代码的意思吗？
这段代码是给取到页面所有元素加上1px实线随机颜色边框
- js延迟加载的方式有哪些？
defer和async、动态创建DOM方式（用得最多）、按需异步载入js
*
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载并行进行（异步）。加载完成立即执行，
并阻止页面解析html,并且不能保证按顺序执行。
*
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js
的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。按照加载顺序执行脚本的
注意：DOM树构建完成。//DOMContentLoaded ，页面加载完毕。//load
- Ajax 是什么? 如何创建一个Ajax？
ajax的全称：Asynchronous Javascript And XML。
异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，
等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
- Ajax 解决浏览器缓存问题？
1、在ajax发送请求前加上 xhr.setRequestHeader("If-Modified-Since","0")。
2、在ajax发送请求前加上 xhr.setRequestHeader("Cache-Control","no-cache")。
3、在URL后面加上一个随机数： "fresh=" + Math.random();。
4、在URL后面加上时间搓："nowtime=" + new Date().getTime();。
5、如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax
都会执行这条语句就是不需要保存缓存记录。
- 同步和异步的区别?
同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).
同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.
同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
来源网络：
* 1, 老张把水壶放到火上，立等水开。（同步阻塞）老张觉得自己有点傻
* 2, 老张把水壶放到火上，去客厅看电视，时不时去厨房看看水开没有。（同步非阻塞）老张还是觉得自己有点傻，
于是变高端了，买了把会响笛的那种水壶。水开之后，能大声发出嘀~~~~的噪音。
* 3, 老张把响水壶放到火上，立等水开。（异步阻塞）老张觉得这样傻等意义不大
* 4, 老张把响水壶放到火上，去客厅看电视，水壶响之前不再去看它了，响了再去拿壶。（异步非阻塞）
- 如何解决跨域问题?
需要html5支持
* 1, window.postMessage('数据',域名); 子域监听Message方法
* 2, 利用 cors 通过设置请求头或者在服务器设置 来解决跨域
其他
* 3, 利用window.name 跨域
* 4, jsonp
* 6, document.domain 只要把子页面的document.domain都指向主域就可以了，比如document.domain='foo.com';
//设置好后父页面和子页面就可以像同一个域下两个页面之间访问了。父页面通过ifr.contentWindow就可以访
问子页面的window，子页面通过parent.window或parent访问父页面的window，接下来可以进一步获取dom和js 。
* 7, ie6/7 window.navigator 子域和父域共享同一个对象，通过增加对象属性或方法进行调用
* 8, 服务器代理
- 页面编码和被请求的资源编码如果不一致如何处理？
[web编码总结](http://yanhaijing.com/web/2014/12/20/web-charset/)
* 指定编码方式
* h5废弃了charset这个属性，
改为在文件内部写@charset utf-8
- 模块化开发怎么做？
[ 立即执行函数](http://benalman.com/news/2010/11/immediately-invoked-function-expression/),不暴露私有成员
```javascript
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
```
（待完善）
无模块时代问题
* 1，全局变量灾难
* 2，函数命名冲突
* 3，依赖关系不好处理
解决方案
* 1,用自执行函数
* 2,类似java命名空间方式进行管理
* 3,jquery风格匿名自执行函数
模块化面临问题
* 1. 如何安全的包装一个模块的代码？（不污染模块外的任何代码）
* 2. 如何唯一标识一个模块？
* 3. 如何优雅的把模块的API暴漏出去？（不能增加全局变量）
* 4. 如何方便的使用所依赖的模块？
Modules/1.x规范 （Commonjs）
* 1. 模块的标识应遵循的规则（书写规范）
* 2. 定义全局函数require，通过传入模块标识来引入其他模块，执行的结果即为别的模块暴漏出来的API
* 3. 如果被require函数引入的模块中也包含依赖，那么依次加载这些依赖
* 4. 如果引入模块失败，那么require函数应该报一个异常
* 5. 模块通过变量exports来向往暴漏API，exports只能是一个对象，暴漏的API须作为此对象的属性。
前端问题
* 1, 变量暴露在全局
* 2, 资源加载方式不同，浏览器需http请求获得，服务端直接从内存读取
解决方法
* 1, 升级Modules/1.0规范
* 2，重新制定浏览器端规范AMD（Asynchronous Module Definition）(requireJS)
* 3, 中间派 Modules/Wrappings规范 （seajs）
- AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？
> AMD 规范在这里：https://github.com/amdjs/amdjs-api/wiki/AMD
> CMD 规范在这里：https://github.com/seajs/seajs/issues/242
Asynchronous Module Definition，异步模块定义，所有的模块将被异步加载，模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。
factory 的参数差异，直接导致 AMD 中的模块是立刻执行的，而 Wrappings 中的模块可以等到第一次 require 时才执行。
区别：
1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：
```javascript
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
// AMD 默认推荐
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
// ...
})
```
> [SeaJS 和 RequireJS 的异同](https://lifesinger.wordpress.com/2011/05/17/the-difference-between-seajs-and-requirejs/)
- requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何
缓存的？）
> [参考：](http://annn.me/how-to-realize-cmd-loader/)
- JS模块加载器的轮子怎么造，也就是如何实现一个模块加载器？
> [如何实现一个 CMD 模块加载器](http://annn.me/how-to-realize-cmd-loader/)
- 谈一谈你对ECMAScript6的了解？
- ECMAScript6 怎么写class么，为什么会出现class这种东西?
```javascript
class Ponit{
constructor(x, y){
this.x = x;
this.y = y;
}
toString(){
return '(' + this.x +','+ this.y + ')';
}
}
```
JS原型继承方法写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。ES6提供了更接近传统语言的写法，引入了Class(类)；作为对象的模板。通过class关键字，可以定义类。class其实只是一个语法糖，它的绝大部分功能ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
- 异步加载JS的方式有哪些？
(1) defer，只支持IE
(2) async：
(3) 创建script，插入到DOM中，加载完毕后callBack
- documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
- DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
（1）创建新节点
createDocumentFragment() //创建一个DOM片段 oFragment.appendChild()
//DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的孩子所代替。
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
- .call() 和 .apply() 的区别？
apply：应用某一对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对 象的方法。
call：调用一个对象的一个方法，以另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象 调用B对象的方法。
* apply：最多只能有两个参数——新this对象和一个数组argArray。
* call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。
例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);
注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
- 数组和对象有哪些原生方法，列举一下？
Array :
* 1, sort
* 2, slice
* 3, forEach() 返回undefinded currentValue index array
* 4, map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
* 5, concat join push pop shift unshift toString splice
Object:
* 1, toString
* 2, ValueOf
* 3, defineProperty
* 4, assign: Object.assign(target, ...sources) Object.assign() 方法用于将所有可枚举的属性的值从
一个或多个源对象复制到目标对象。它将返回目标对象。
* 5,
create: Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。
Object.create(proto, [ propertiesObject ])
proto:一个对象，应该是新创建的对象的原型。
propertiesObject:可选。该参数对象是一组属性与值
o2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });
- JS 怎么实现一个类。怎么实例化这个类
可以通过构造函数模式，原型模式，混合模式等实现一个类，用 new 来实例化
```JavaScript
function Human(name){
this.name = name;
}
var wangxiaoer = new Human('王小二');
```
对象可以通过 new Object(), Object.create() 方法， 或者使用字面 标记 (初始化 标记)初始化。 对象初始化，
由花括号{}包含的一个由0个或者多个对象属性名和关联值组成的列表构成。
- JavaScript中的作用域与变量声明提升？
作用域：只会对某个范围产生作用，而不会对外产生影响的封闭空间。在这样的一些空间里，外部不能访问内部变量，但内部可以访问外部变量。
js 存在声明提升:
所有声明明都会被提升到作用域的最顶上 包括ES5的var、function，和ES6的function *、let、const、class
但ES6 let const 等声明命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。暂时性死区
函数声明的优先级优于变量申明，且函数声明会连带定义一起被提升
函数提升有两种，1 函数声明 整个函数提升 2函数表达式 只有变量提升，还是undefinded
- 如何编写高性能的Javascript？
> [参考文章](http://www.alloyteam.com/2012/11/performance-writing-efficient-javascript/)
* 1, 垃圾回收方面：
* 手动消除引用（设置为null 比 delete 略好）
* 解绑无用的事件监听器
* 避免大量不被重用的数据被存储 [缓存文章](http://imweb.io/topic/55c6f9bac222e3af6ce235b9)
* 2, 函数方面：
* 减少闭包 定时器 等
* 使用时间代理委托 DocumentFragment
* 不要使函数体积过大，确保函数职责单一，即确保变量使用相同类型，如不要add(1,2),add('a','b');
* 3, 使用数组技巧：
* 一般情况下不要删除数组元素
* 使用数组字面量 var a = [];
* 存储单一类型
* 稀疏数组访问速度远远慢于满数组
* 4, 避免内存泄漏:
* 单页面应用的内存管理，特别移动端单页应用，基本不刷新页面， 遵循的标准规则来管理JavaScript中的内存，当元素被移除时，清理监听器
* 减少回流与重绘
* 5, 使用HTTP的缓存去减少资源的加载。
- 那些操作会造成内存泄漏？
>[参考资料](https://jinlong.github.io/2016/05/01/4-Types-of-Memory-Leaks-in-JavaScript-and-How-to-Get-Rid-Of-Them/)
内存泄漏可以定义为：应用程序不再需要占用内存的时候，由于某些原因，内存没有被操作系统或可用内存池回收。
垃圾回收机制：标记清除法，引用计数法
* 1, 闭包 （去除，造成内存泄露是浏览器的bug，不关闭包的事情，跟闭包和内存泄露有关系的地方是，使用闭包的同时比较容易形成循环引用，如果闭包的作用域链中保存着一些DOM节点，这时候就有可能造成内存泄露。[链接](https://www.zhihu.com/question/31078912)
* 2, 定时器 setInterval用完要clearInterval ，不然回调函数等内存无法回收。
* 3, 全局变量,因为挂在window上面，window是不会被清空（在 JavaScript 文件头部加上 'use strict'，可以避免此类错误发生。启用严格模式解析 JavaScript ，避免意外的全局变量，如函数里面用this，然后全局执行的变量。）
* 4, 监听器 老版本的 IE 是无法检测 DOM 节点与 JavaScript 代码之间的循环引用，会导致内存泄漏。如今，现代的浏览器（包括 IE 和 Microsoft Edge）使用了更先进的垃圾回收算法，已经可以正确检测和处理循环引用了。换言之，回收节点内存时，不必非要调用 removeEventListener 了。
* 5, 脱离Dom的引用。有时，保存dom的数据结构很有用把dom存成json或数组很有意义，但是，当你决定删除元素时，这些引用也需要同时删除。
此外还需考虑DOM树内或子节点的引用问题，加入你的js代码保存了一个td的引用，但你决定删除整个表格的时候，整个表格还是会存在内存中的，因为td 是表格的子节点，子元素与父元素是引用关系，导致表格无法释放。
- 闭包应用
> [参考资料](https://mp.weixin.qq.com/s?__biz=MzU5NzEwMDQyNA==&mid=2247483769&idx=1&sn=9278d4dc8f4c4c268eeb918b7e126220&chksm=fe59d39ec92e5a888fa8d3fd38d0dd8ba05ab71489266c2adb6aafe0ec7221f0ee0179baf0d7&mpshare=1&scene=22&srcid=0724byORwgBQcYhrSLOuBqhD#rd)
* 1, 函数柯里化
```javascript
var doSomething = function(do,something){
console.log(do+','+something);
}
function Curry(fn){
var stored_args = Array.prototype.slice.call(arguments,1);
return function (){
var new_args = Array.prototype.slice.call(arguments),
args = stored_args.concat(new_args);
return fn.call(null,args);
};
}
var newDoSomething = Curry(doSomething,'hello');
newDoSomething('Howard');
newDoSomething('Harden');
* 2, 单例模式
```javascript
var getSingleInstance = (function(){
function China () {
this.name = "China";
}
var instance = new China();
return function () {
return instance;
}
}());
```
- 快速排序算法
快速排序的核心就是选定一个哨兵，然后把它作为标准，对数据进行操作，把小的放前面，把大的放后面。然后执行
这个过程若干次，就得到了最终的结果。算法过程中也实现了分治法的思想，即把复杂的模块分成几个简单的模块，分而治之。
资料:(按顺序阅读比较容易理解)
> [参考资 料1](https://dsb123dsb.github.io/2016/12/27/js%E5%AE%9E%E7%8E%B0%E5%BF%AB%E9%80%9F%E6%8E%92%E5%BA%8F%EF%BC%88in-place%EF%BC%89%E7%AE%80%E8%BF%B0/)
> [参考资料2](http://www.jianshu.com/p/fc342a9ffb58)
someOther
> [算法可视化网站：](http://zh.visualgo.net/zh/sorting)
- JQuery的源码看过吗？能不能简单概况一下它的实现原理？
JQuery、JQuery对象、DOM对象三者之间的关系是： JQuery是个工厂方法，用来构造JQuery对象； JQuery对象是个类数组对象，里面存储了DOM对象；
实现原理
* 1, 通过闭包函数避免污染全局变量
* 2, jQuery.extend可以扩展jQuery，而jQuery.fn.extend可以扩展jQuery对象。
- jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
```javascript
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
},
jQuery.fn = jQuery.prototype = { //fn即对应prototype
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
...
return this;
}
...
}
jQuery.fn.init.prototype = jQuery.fn;
```
JQuer.fn.init方法返回this为JQ原型对象实例（如果没有选择器参数为空就是JQ原型对象,可以看
[jq源码](http://code.jquery.com/jquery-1.9.1.js),ctrl+f搜索jQuery.fn看其具体实现，
你就会秒懂了），是一个类数组对象。
因为Jq实现了$()来实例化jq对象，通过jq原型上init构造方法去实例化并返回一个对象，这样就可以不用new的方式去创建JQ对象，
而且JQuery构造函数就相当于一个工厂函数。并且，为什么构造函数为什么要 new jQuery.fn.init(),这是因为如果直接利用
init函数return出来的对象，会直接暴露了jQuery.prototype原型对象出去 [参考](https://github.com/wy-ei/notebook/issues/6)，
这样就可能让jQuery.prototype的受到破坏或被方法被覆盖了。这样我们就需要用new 关键字新建一个对象，改变this的
指向对象，从而避开jQuer.fn的直接暴露。
> new 关键字的作用是创建一个对象，当一个函数使用 new 来调用的时候其实际上进行了下面的几个步骤：
* 1, 创建一个空对象 obj
* 2, 将这个 obj 的 proto 即：obj.proto 指向该函数的原型
* 3, 执行该函数，并将函数中的 this 映射为 该空对象 obj。
* 4, 最后如果该函数有返回值，而且返回值是对象，那么就返回这个对象。如果没有返回值，或者返回值不是对象，
那么 new 的结果就是上面步骤构造出来的对象 obj。
> 明白了 new 关键字的作用，也就明白了 new jQuery.prototype.init(selector,context); 的结果是 init.prototype 对象。（注意任何函数都有其原型对象）
但是这也会带来一个问题,new jQuery.fn.init()所返回的新对象并没有继承jQuery.fn，因为jQuery.fn.init.prototype
继承的是Object.prototype，并不包含jQuery.fn。这里的解决方法就是将 init.prototype 直接指向 jQuery.prototype
。这下构造出来的对象就可以访问到 jQuery.prototype 中的内容了：在jq源码中就有这么一句
```javascript
jQuery.fn.init.prototype = jQuery.fn;
```
参考资料:
* 1 [Link1](http://elcarim5efil.github.io/blog/2015/07/28/jQuery_analysis_8.html)
* 2 [Link2](http://www.cnblogs.com/aaronjs/p/3278578.html) （解释不是很清楚）
* 3 [link3](https://github.com/wy-ei/notebook/issues/7 )(第二配合第三来看)
- jquery中如何将数组转化为json字符串，然后再转化回来？
```javascript
// JSON RegExp
rvalidchars = /^[\],:{}\s]*$/,
rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
rvalidescape = /\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,
rvalidtokens = /"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,
parseJSON: function( data ) {
if ( window.JSON && window.JSON.parse ) {
return window.JSON.parse( data );
}
if ( data === null ) {
return data;
}
if ( typeof data === "string" ) {
// Make sure leading/trailing whitespace is removed (IE can't handle it)
data = jQuery.trim( data );
if ( data ) {
// Make sure the incoming data is actual JSON
// Logic borrowed from http://json.org/json2.js
if ( rvalidchars.test( data.replace( rvalidescape, "@" )
.replace( rvalidtokens, "]" )
.replace( rvalidbraces, "")) ) {
return ( new Function( "return " + data ) )();
}
}
}
jQuery.error( "Invalid JSON: " + data );
},
```
jq会检查浏览器是否支持window.JSON.parse，支持的话就调用，不支持的话就正则匹配是否满足某些条件，然后把整个data返回。
这里注意new Function()的使用，为什么不使用eval()呢？
其实两个有一些作用域上的区别，eval函数可以访问到使用时局部环境变量。而new Function()只能在全局上起作用，而且new Function运行略优于eval，
但是两个都是存在风险的，都可能运行json字符串里面违法的代码，应尽可能避免使用，因为ES5的严格模式这两种都是不允许的
>[链接](https://stackoverflow.com/questions/2449220/jquery-uses-new-functionreturn-data-instead-of-evaldata-to-parse)
数组编程字符串可用Array.toString(),或者谁用Array.join(",") join() 方法用于把数组中的所有元素放入一个字符串。
- jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
我们在 jQuery 中可以通过添加一个参数来实现递归extend。调用$.extend(true, {}, obj)
实现原理就是遇到基本值就直接复制，遇到对象就递归调用extend进行深度拷贝。
```JavaScript
深复制：
function deepCopy(source){
var arr = {};
for(key in source){
arr[key] = typeof key === 'Object' ? copy(source[key]):source[key];
}
return arr;
}
浅复制：
function shallowCopy(source) {
var arr = {};
for(var temp in source ){
if(source.hasOwnproperty[temp]){
arr[temp] = source[temp];
}
}
return arr;
}
```
> [深入剖析 JavaScript 的深复制](http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/)
- 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 ready与load谁先执行?
ready先执行，load后执行。
> DOM文档加载的步骤：
* 1, 解析HTML结构。
* 2, 加载外部脚本和样式表文件。
* 3, 解析并执行脚本代码。
* 4, 构造HTML DOM模型。//ready
* 5, 加载图片等外部文件。
* 6, 页面加载完毕。//load
- jQuery 的队列是如何实现的？队列可以用在哪些地方？
所以队列的本质是利用Array的push和shift来完成先进先出(First In First Out)
队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行插入操作（入队）。队列的特点是先进先出（FIFO-first in first out），即最 先插入的元素最先被删除。您可以使用push，pop，unshift，shift来处理队列。您可以通过调用.queue()将功能添加到队列中，并使用.dequeue()删除(通过调用)函数。
队列可以用在动画中,ajax等。
- 谈一下Jquery中的bind(),live(),delegate(),on()的区别？
> [参考资料](http://www.cnblogs.com/moonreplace/archive/2012/10/09/2717136.html)
* 1, bind()
* 优点：直接绑定到元素上 .click() . hover() 都是利用bind()方法，这个方法可以很快就绑定上事件，而且很快执行回调，
因为是对当个元素（$()选取元素操作）而且对浏 览器的兼容性做了处理
* 缺点：1当元素很多的时候，会有性能问题，2，而且不能对动态增加元素进行自绑定事件,3，当页面加载完才能进行绑定
* 2, live()
* 优点：利用事件委托，将事件绑定到到document,利用事件冒泡，jQuery查找选择器，再查找对应回调函数处理，绑定事件减少消耗
* 缺点：1执行比较慢，从1.7已经不推荐了
* 3, delegate()
* 优点：是Live升级版，由你决定绑定元素
* 缺点：同live，不过因为由我们控制绑定元素，所以比live 好一些。
* 4, on() 以上三种都是通过on来实现的，可用on()代替。
- JQuery一个对象可以同时绑定多个事件，这是如何实现的？
- 是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
所谓自定义事件，就是有别于有别于带有浏览器特定行为的事件(类似click, mouseover, submit, keydown等事件)，
事件名称可以随意定义，可以通过特定的方法（jq trigger triggerHandler ）进行添加，触发以及删除。
callbacks.fire() 函数用于传入指定的参数调用所有的回调。
此方法返回一个回调对象到它绑定的回调列表。
用于触发$.Callbacks 回调队列函数。
jQuery的自定义事件是通过on和one绑定的，然后再通过trigger来触发这个事件
- jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）
> jQuery.find = Sizzle;
- Jquery与jQuery UI 有啥区别？
* jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
* jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等
- jQuery和Zepto的区别？各自的使用场景？
> jQuery是用在PC端上的框架，比较大，兼容性也比较好。而Zepto最初是为移动端开发的库，是jQuery的轻量级替代品，因为它的API和jQuery相似，而文件更小。并且多了一些移动端的触摸交互事件。
- 针对 jQuery 的优化方法？
>[参考资料](http://xujianbin.pw/project/2017/05/09/optimization2-JQueryPerformance/)
* 基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。
* 频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
比如：var str=$("a").attr("href");
* for (var i = size; i < arr.length; i++) {}
for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}
- Zepto的点透问题如何解决？
> [参考资料1](https://zhuanlan.zhihu.com/p/25280160)
> [参考资料2](https://github.com/mattt/MsgPackSerialization/wiki/%E7%A7%BB%E5%8A%A8%E7%AB%AFclick%E5%BB%B6%E8%BF%9F%E5%8F%8Azepto%E7%9A%84%E7%A9%BF%E9%80%8F%E7%8E%B0%E8%B1%A1)
> 问题现象:
在项目中,遇到的问题是有一个弹出层, 弹出层有一个按钮点击之后表示操作完成并且隐藏遮罩与弹出框,但是点击按钮之后
弹出层下面的元素却触发了 click 事件,导致 bug 的出现.
> 解决方法：
* 1, 在遮罩之后加一个透明的 div 在 350ms 后消失
* 2, 遮罩使用动画在 350ms 后消失
* 3, 使用 CSS3 pointer-events:none 在 tap 事件触发的时候, 将下层元素添加一个属性 poniter-events 为 none, 然后下层
元素就不会响应 click 事件了,然后设置一个定时器在, tap事件响应后的400ms 后将 pointer-events 设置为 auto 恢复正常.
* 4, 使用 fastclick
* 5, 直接将上层元素的tap事件换成click事件（会出现300ms的延迟触发事件）
[链接：](https://zhangxiang958.github.io/2017/03/04/Zepto%20%E7%82%B9%E5%87%BB%E7%A9%BF%E9%80%8F%E9%97%AE%E9%A2%98%E6%B7%B1%E7%A9%B6%E4%B8%8E%E8%A7%A3%E5%86%B3/)
- zepto为何不使用e.preventDefault()来解决穿透问题？
因为zepto的tap事件统一是在document的touchend时触发的，若在这里使用e.preventDefault()，那页面上所有元素在touchend后触发的事件都不会被执行了。
// 另外一种说法：贺师俊老师说的：就是当初手机浏览器的实现太挫了——为了兼容而模拟鼠标事件，但模拟的鼠标事件在网页的userland代码里是无法被preventDefault从dom的角度来说比较合理的应该是当我已经监听touchxxx事件（或退一步说，如果对touchxxx事件preventDefault之后）就不再出现模拟鼠标事件——但是当时webkit的c++程水平有点差，不知道应该这样做，所以就产生了很难消除的额外的click。
- jQueryUI如何自定义组件?
- 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
- 如何判断当前脚本运行在浏览器还是node环境中？（阿里）
this === window ? 'browser' : 'node';
通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中
- 移动端最小触控区域是多大？
ISO和ANSI标准都推荐0.75" x 0.75"（约19 x 19毫米）的尺寸，来自莱特州立大学心理系的一项研究也表明0.75" x 0.75"的按钮对于用户来说是满意率最高的。
[参考资料](http://iconmoon.com/blog2/Touchscreen-Button-Dimensions-and-Spacing/)
- jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
jquery stop(): 如：$("#div").stop(stopAll,goToEnd).animate({width:"100px"},100);
- 把 Script 标签 放在页面的最底部的body封闭之前和封闭之后有什么区别？浏览器会如何解析它们？
按照HTML5标准中的HTML语法规则，如果在后再出现