HTML模块

1.标签语义化的作用？

见标签知意，让代码结构清晰，方便阅读，有利于其他设备解析，例如：屏幕阅读器、盲人阅读器，以语义化标签渲染网页更利于搜索引擎的优化（SEO），网络不佳时（无样式），网页也更具可读性，更加遵循W3规范。常见的语义化标签如下mian、aside、footer、code、article、section等标签。

2.浏览器内核有哪些？

浏览器内核负责对网页语法进行解析，就是内部的渲染引擎，决定网页的显示效果。

1）IE浏览器：微软出品的Trident内核 -ms-；

2）Chrome：谷歌出品的Webkit内核>>Blink内核 -webkit-；

3）Firefox：Mozilla出品的Gecko内核 -moz-；

4）欧朋浏览器：欧朋出品的Presto内核 -o-；

5）Safari：苹果出品的Webkit -webkit-；

3.<image>标签上title与alt属性的区别？

alt标签是图片无法正常显示时对图片的描述；title为设置该属性的元素提供建议性的信息，鼠标悬停在元素上时会提示信息。

4.HTML和XHTML的区别？

XHTML是可以拓展的超文本标签语言，更严格更纯洁的HTML语言，具有以下的特点：

1）XHTML标签必须被正确的嵌套；

2）XHTML必须被关闭；

3）标签名必须小写；

4）XHTML必须拥有根元素；

5.iframe的优缺点？

1）优点：

解决加载缓慢的第三方内容如图标和广告等的加载问题；
iframe无刷新文件上传；
iframe跨域通信；

2）缺点：

iframe会阻塞主页面的Onload事件；
无法被搜索引擎捕获到导致不利于SEO；
增加服务器的http请求；
内存开销大；

6.Doctype的作用？文档类型？

一般声明于html文件的第一行，作用是告诉浏览器以哪一个文档类型进行解析文本，如果不存在则以包容模式解析具体的文档类型：

1）Standards （标准）模式用于呈现遵循最新标准的网页；

2）Quirks（包容兼容）模式用于呈现为传统浏览器而设计的网页；

3）HTML 4.01 规定了三种文档类型；

4）XHTML 1.0 规定了三种 XML 文档类型；

7.HTML5为什么只写 <!DOCTYPE HTML>？

HTML5不基于SGML（标准通用标记语言），则不需要DTD 文档类型定义引用，但是需要DOCTYPE来规范浏览器行为。HTML4.01基于SGML，需要引用DTD，<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">如下定义HTML文档。

8.导入样式使用link和@import的区别？

1）相同点：外部引用CSS文件方式

2）不同点：

性质不同，link是xhtml标签，无兼容性问题，可以加载CSS文件外的同时还可以进行RSS其他事物，而@import属于CSS范畴，在CSS2.1时提出，低版本不支持，只能加载CSS文件；
加载时间不同，link引用CSS随页面载入时同时加载，@import需要在页面加载完毕后被需要时才会加载；
写法不同，link是写在head标签中，而@import在html中只能写在style标签中；
样式权重不同，link引用的样式权重高于@import；

9.无样式内容闪烁（FOUC）Flash of Unstyle Content

@import需要在页面加载完毕后被需要时才会加载，因此页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式，解决方法是使用在head中使用link标签加载CSS样式表，文档按顺序载入，body渲染完成后link早已加载完成，所以不会出现FOUT问题。

10.浏览器内核的理解？

内核主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎，渲染引擎负责页面内容（HTML、XML、图像等）到网页中，浏览器的内核不同渲染的效果也不同；JS引擎则是解析和执行javascript进而实现网页的动态效果，越来独立化。

11.HTML5文件离线储存及工作原理是什么？

<html manifest='cache.manifest'>开启离线缓存，当浏览器发现HTML头部有manifest属性，则请求manifest文件，首次访问浏览器就会根据manifest文件的内容下载相应的资源并进行离线存储。如果资源没有发生改变，则浏览器直接读取manifest中离线缓存的文件进行渲染，具体文件内容如下：

CACHE MANIFEST
CACHE:
/logo.gif
NETWORK:FALLBACK:
offline.html

12.页面可见性（Page Visibility）API用途？

通过监听visibility state的属性值进行检测页面是否可见以及打开网页时的一些日志，根据监听document的visibilitychange事件检测用户是否切屏，锁屏，退出等状态，切换页面则视频停止播放的场景。

13.页面上实现圆形的可点击区域？

map+area或者svg
border-radius绑定js事件
js判断一个点不在圆上的算法

14.SRC和href有什么区别？

href标识超文本引用，link和a等元素应用，href当前元素和引用资源之间建立联系；src表示引用资源替换当前元素用在img、script、iframe，无跨越问题，<script src=“js.js”></script>当浏览器解析时会暂停其他资源的下载和处理，这是为什么引用js文件时要放在body的最底部。

15.form输入框的autocomplete？

浏览器会自动记录同名（name）input框中的值，并在用户输入时会造成数据的泄露不安全，通过设置autocomplete为off来取消此功能，IE浏览器需要在internet选项菜单中里的自动完成里面设置。

16.cookies和sessionStorage以及localStorage的区别？

1）相同点：均是保存在客户端且是同源（访问不需要跨域）

2）不同：

性质不同，cookies是为了标识用户身份而存储用户本地终端上的数据，自动在同源http请求头中携带，cookies在浏览器和服务器间来回传递信息，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存；
存储大小的限制不同，cookie仅可以保存4Kb且数量不超过20条，sessionstorage和localstorage保存的数据可达到5M；
生命周期不同，cookie可以设置生命周期且在过期前均有效，sessionstorage仅在浏览器窗口关闭或者页面之前有效，localstorage永久有效，除非手动删除；
作用域不同，cookie在所有的同源标签页（不同页面但域名端口相同）都是共享，不同页面的sessionStorage不共享，localStorage同源标签页中共享；

17.不使用Border属性页面做出1px高的线段(思维题)

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

18.实现爱心形状

三个相同大小的div，把两个变成圆，另外一个不变，重叠一下就可以出来了！

19.label的作用？

label 标签来定义表单控件间的关系，for属性值与一个控件a的id一致时，点击label标签，控件a会获得焦点，将控件包裹在label标签中就省去for和id的对应关系。

20.网页验证码是用于解决什么安全问题？

区分用户是计算机还是程序;
防止恶意破解密码和刷票行为；

21.Meta标签作用以及的ViewPort视口的理解？

<meta></meta>元素可提供有关页面的元信息仅存在与head标签内，设置视口<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">的宽度等于设备的屏幕的宽度，浏览器的默认视口“layout视口”，“visual”是指屏幕的真实宽度，“ideal”理想化的文档宽度（layout=visual），meta标签中视口的作用是让视口的宽度等于真实的设备宽度，同时不允许用户缩放，缩放是相对于理想状态下，让1css的代表更多的物理像素。场景化分析，如果不添加meta的视口标签，那么在iPhone6中你设置一个375px的div，整一个文档宽度也是980px，所以会出现左右的滚动条，设置视口标签那么默认是文档的宽度等于屏幕的宽度的，所以375px恰好撑满屏幕。

CSS模块

1.BFC规则

块级元素格式化上下文，英文Block Formatting Contexts，一个独立的渲染区域与外界元素不会相互影响，它规定了其内部的块级元素如何进行布局。

1）触发BFC规则形成独立渲染区域的条件：

float属性存在且不为none；
display: inline-block | table-cell | table-caption | flex | inline-flex;
overflow存在且不为visible；

2）BFC的规约：

两个相邻且触发BFC规则的元素在垂直方向上margin不会重叠；
元素排布默认是按垂直方向排布；
BFC规则的高度值浮动元素也会参与计算，这也是父元素设置overflow：hidden；可以清除浮动的缘由；
两个BFC规则区域不会发生重叠；

总结：bfc规则是一个隔离的独立容器，子元素与外面的元素互不影响，当BFC区域的位置变化不会影响其子元素的内部布局，bfc区域的高度是包含浮动元素的高度，进而不会影响外部的布局；如果是普通的块级元素在垂直方向上是会发生margin重叠的现象，且margin的实际值取决于两个元素之间的最大值。

2.LFC规则

元素默认占满屏幕宽度，直到屏幕宽度不够时发生折行显示，无法设置宽高，元素的高度取决于内容的大小和padding值，为元素设置display: inline;时就会形成LFC规则。

3.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?

1）行级元素：

当屏幕还有空间时默认占满屏幕而不会发生折行；
无法设置宽高；
仅水平方向上的margin和padding有效；

常见的行级元素标签：input、img、a、span、textarea、label、code、select，可通过display: flex | block转换成为块级标签。

2）块级元素：

垂直排布；
可以设置宽高；

常见的块级元素标签：address、caption、div、dd、form、h、br、ul、table，可通过display: inline;转变成为行级标签。

4.如何设置元素在一行？

设置float、inline-block以及父元素设置为flex弹性布局，浮动float需要注意清除浮动。

5.清除浮动的几种方式？

1）在需要清除浮动的区域增加一个新的元素（div）；

2）对需要清除元素设置clear：both，这样它的左右就不会存在浮动元素；

3）利用伪类:after和:before来在元素内部插入两个元素块，注意一定要设置content：""；

6.box-sizing盒模型的理解？

标准情况下即box-sizing：content-box，盒子的实际宽高 = width/height+ padding + border + margin；而在怪异盒模型即box-sizing：border-box，盒子的实际宽高 = width/height + margin，设置的padding和border不再单独参与盒子宽高的计算中，而是width/height = padding + border + 内容部分，超出时盒子会被撑开。

7.CSS中的hack？

由于不同厂商的不同版本对CSS的支持解析不一样，则会导致不同浏览器所呈现出的效果不同，针对不同的浏览器版本写特定的CSS样式，这个过程就叫CSS hask，其中CSS hack的分类有：

属性前缀法，在CSS样式属性名前添加一些特定浏览器能识别的前缀：

/* 通过javascript检测IE10后给html标签加上class=”ie10“的类名 */
.ie10 #hack{color:red; /* Only works in IE10 */
}
*background-color: blue;

选择器前缀法，在选择器前加上特定浏览器能识别的符号：

-ms-high-contrast: none

IE条件注释法，这个方式IE浏览器专有的hack方式：

<!--[if IE]>只在IE浏览器显示
<![endif]-->

8.简述几个CSS Hack？

1）图片间隙，div中插入图片，图片下方存在3px的间隙：

将div和img标签写在第一行；
div设置vertical-align:middle；
img标签转化为块级元素，display：block；

2）默认高度，IE6以下版本中部分块级元素拥有默认高度：

为元素添加：font-size：0；
为算法声明：overflow：hidden；

9.transform？animation？区别?animation-duration

transform可以定义元素很多静态样式实现变形倾斜（skew）、旋转（rotate）、缩放（scale）、位移（translate）以及透视（perspective）等功能，通过组合实现很多炫酷的静态效果；animation动画属于关键帧动画的范畴，用来代替纯粹的js操作dom实现动画，可以通过keyframe显示控制时间帧的属性值；animation-duration：规定完成整一个动画所花费的时间，以秒或毫秒计。

10.nth-of-type | nth-child的区别?

<style>/* ul下的第二个li标签 */ul li:nth-of-type(2) {color: red;}/* ul的li标签且是第二个孩子所以匹配不到元素 */ul li:nth-child(2) {color: gold;}</style><ul><p>p元素</p><span>span元素</span><li>li元素</li><li>li元素</li><li>li元素</li>
</ul>

11.分辨:before 和 ::before 区别?

单冒号用于CSS3中的伪类，双冒号用于CSS3的伪元素，伪元素的本质创建了一个有内容的虚拟容器，不存在与dom树中，伪类本质上是弥补CSS选择器的不足。CSS2和CSS3都存在的作用一直，此题中的:before和::before的是一致的效果。

/* 伪元素 */
ul::after {content: "我爱你";
}
/* 伪类 */
a:hover {color: gold;
}

12.如何让元素水平垂直居中？

1）不存在宽高：

绝对定位和translate；

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

为其父元素设置为flex水平垂直轴居中；

display: flex;
align-items: center;
justify-content: center;

绝对定位和margin实现；

position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;

2）存在宽高：

为其父元素设置Line-height=宽度配合text-align: center（仅限行级元素）；

text-align: center;
line-height: 等于宽度;

绝对定位配合margin-left左右偏移

position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;

13.如何在IE8中兼容placeholder？

Js判断浏览器是否支持placeholder属性，根据样式选择器遍历获取到特定的input框，填充输入框并将字体设置成灰色，起到视觉上支持的效果，当用户点击获得焦点时清空提示信息，blur事件判断用户内容是否为空，如空则填回提示信息。

14.常见的兼容性问题？

png24位的图片在iE6浏览器上出现背景，通过转换成为PNG8解决；
不同浏览器默认的margin和padding不同，开局全域设置*{margin:0;padding:0;}统一效果；
超链接a标签访问后就不具有hover和active的效果，避免方式是改变CSS属性的排列顺序：L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}（重点）；
上下margin重合问题，ie和火狐下相邻的div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却发生重合；
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示，CSS 属性 -webkit-text-size-adjust: none; 进行解决；

15.前端优化的方式？

减少HTTP请求次数；
减少DNS查找次数；
避免跳转；
模块采用预加载；
减少DOM元素数量；
iframe的数量最小；
<link>代替@import；
避免使用滤镜；
JS脚本置于页面底部

16.jquery版本?1.11兼容?

jquery2.x系列和 jquery 1.x拥有同样的API，但是不支持IE8及以下的版本，推荐使用jquery1.11，因为它能兼容IE6、IE7、IE8、IE9等浏览器。

17.media媒体查询属性？max-width？min-width？

media 属性用于为不同的屏幕媒介类型规定不同的样式，max-width：375px，屏幕大于375px时样式不生效，min-width：1024px，屏幕大于1024px时样式才生效。

18.Meta标签中的name值？

name 属性主要用于描述网页信息，与之对应的content的内容主要是便于搜索引擎机器人查找信息和分类信息，主要分为以下几个参数：

keyword，描述网站的关键字说明；
description，描述网站内容；
robots，机器人导向，告诉需要索引的页面；

19.手机页面切图的几种方式？

利用js和flex设定比例，给根元素设定像素，使用rem作为单位，实现rem布局。

20.px/em/rem有什么区别？为什么通常给font-size 设置为62.5%？

em的值不固定，em会继承父元素的字体大小；
rem是相对与根元素（html）元素的字体大小，1rem默认是16px，响应式布局中将px转化成为rem；
px则是css像素单位；
body{font-size=62.5% }，此时1rem就是10px，所以1.2rem=12px，利于换算关系；

21.sass和scss的区别？sass怎么编译？

文件拓展名不同，sass文件使用的是*.sass，scss文件的拓展名是*.scss;
书写语法不同，Sass 是以严格的缩进式语法规则来书写且不带大括号{}和分号，要通过软件进行编译转换成为css样式；而scss语法跟css相似且通过可以嵌套写法，通过”&“可以表示选择上级元素；

22.禁止事件冒泡？

事件冒泡现象点击点击子元素，父元素的click事件同样会触发，使用event.stopPropagation()阻止冒泡。

23.阻止默认事件？

如果存在href属性的a标签被点击后，默认会跳转页面，form表单中类型为submint的input框被点击后默认提交表单，通过event.preventDefault()进行阻止事件的默认行为。

24.a标签的伪类设置顺序？

排列顺序：L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}（重点）。

25.a标签禁止跳转？

e.preventDefault();和href="javascript:void(0);都可以实现。

26.手机端图片长时间点击会选中图片要如何处理？

// 绑定onselect方法
onselect=function() {return false
}

27.a标签中点击后会出现虚框如何解决？

a,a:hover,a:active,a:visited,a:link,a:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline:none;background: none;text-decoration: none;border:none;-webkit-appearance: none;
}

28.常见的几种视频编码格式？视频格式有几种？

视频格式：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式；
视频编码格式：H.264、MPEG-4、MPEG-2、WMA-HD以及VC-1；

29.CSS制作三角形？

使用border可以实现，边框的执行赋值顺序是上、右、下、左的顺时针，设置一个宽高为0的区域，设置宽度大一些，就会出现正方形，在通过设置颜色，就能出现拼盘效果，再给对应的边的颜色设置为透明即可。

<style>.d1 {width: 0;height: 0;border-width: 100px;border-color: red orange blue blueviolet;border-color: transparent transparent blue transparent;border-style: solid;}</style>
<body><div class="d1"></div>
</body>

30.HTML页面的渲染过程？

浏览器解析html源码标签，创建dom树，并行加载CSS和image以及js文件，每一个HTML标签都是文档树中的一个节点，节点中的文字也是一个文本节点，构成了由documentElement节点（html）为根的dom树；
浏览器解析CSS代码，计算最终的样式数据，构建CSSOM树，非法的语法它会直接忽略掉，解析CSS的时候会按照顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < !important；
由dom树和CSSOM树组成渲染树，并渲染绘制渲染树到屏幕上；
若渲染树中的节点被移除、位置改变、元素的显示隐藏等属性改变都会重新执行上面的步骤，这个过程是叫回流，而重绘不同，重绘是渲染树上的某一个属性需要更新且仅影响外观、风格，不影响布局的，例如修改background-color就属于重绘只是重新绘制到屏幕中上，回流必定造成重绘；

31.CORS跨域资源共享？

CORS是一个W3C的一个标准，跨域资源共享，它允许浏览器想服务器发送XMLRequest请求，克服AJAX只能进行同源使用的限制。cors请求是需要浏览器和服务器同时支持，浏览器自动完成且不需要用户参与，代码与ajax写法极为相似，但是请求头附带一些信息或者多出一次附带的请求。所以实现CORS通信的关键是服务器的接口，服务器实现了CORS接口就可以进行跨域通信，参考学习地址：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html，十分的重要！

32.同源策略？规避方式？

同协议、同域名、同端口简称为同源策略，同源策略是为了互联网的安全，例如网站A是无法访问到网站B所存入的cookie信息，因为它不符合同源策略的标准。但是有些技术可以进行规避：

cookie只有同源的网站可以访问，但是如果仅是二级域名（n.huasenjio）不同，可以通过设置相同的document.domain共享到cookie信息；
iframe标签，如果两个网页不同源是无法拿到对方的DOM，典型的例子是iframe的窗口和window.open的窗口，但是无法与父窗口通信；
window.name，浏览器有window.name属性，无论是否同源，只要在同一个窗口中打开的网页，后一个页面就可以读取，所以可以通过window.name存入信息；
window.postMessage，HTML5为了解决跨文档通信而开辟的API，通过window.postMessage方法可以实现不同网页之间的通信，父子网页通过监听message事件进行监听对方的消息；
AJAX请求只可以发送同源请求的网址，否则就会报跨域的错误，可以通过JSONP（仅支持GET）、WebSocket、CORS进行客户端规避这个限制，另外还可以架设服务器代理（浏览器请求同源服务器再转发到外部服务器），因为服务器之间的通信是没有跨域限制；

33.如何中断ajax的请求？

时间超时则会自动停止ajax请求；
调用XML对象的abort方法进行手动停止；

34.事件代理的理解？

事件委托是指将事件绑定到目标元素的父元素上，利用事件的冒泡机制触事件；这样做的好处有节省内存的开销以及对新增加的元素节点同样生效。

35.事件中target和currentTarget的理解？

target被点击触发事件的元素；
currentTarget捕获到到并执行的元素；

36.同步代码？宏任务和微任务的理解？

执行顺序是同步代码>微任务>宏任务，程序执行，限制执行同步代码，遇到微任务（resolve()）就放到微任务队列中，优先执行微任务，遇到宏任务就放到函数调用栈中的指向的任务成为宏任务，按顺序弹出执行；一次CPN轮询下，先执行同步代码，将微任务队列中的任务全部执行完成，再按顺序执行函数调用栈中的宏任务。

37.继承的几种方式？

构造函数继承；
Class继承；

38.怎么理解闭包？

39.数组去重复？

40.get和post请求的区别？

传参数的方式不同，get的传递方式是通过URL明文传递，而post请求的参数不可见，存在与http的请求体中；
传递的大小不同，get请求参数是拼接在url后面，传递的长度受限制，而post请求传递的长度没有限制；
编码方式不同，get仅支持URL编码，仅支持ASCLL字符编码，post可以进行多种编码方式；
健壮性不同，get请求回退不会重新发送，post请求回退后重新提交表单；

41.常见的http响应状态码？

浏览器打开网页时，浏览器会向服务器发送请求后会收到服务器返回的一个响应报文，报文中的存在有HTTP状态码的头信息。浏览器通过状态码进行一系列操作，以下就是状态码的分类：

1）1**类型的状态码，代表服务器收到请求，并要求继续执行操作：

100继续操作；
101切换协议；

2）2**类型的状态码，发送成功，操作成功并被处理：

200请求成功；
201请求成功但是创建了新的资源；
202已经接受请求但处理未完成；
204无内容（请求处理成功但为返回内容）；

3）3**类型的状态码，重定向，需要进一步操作来完成请求：

301请求资源已经被永久移动到新的URL上但返回值中带有新的url浏览器会自动跳转；
304请求资源未修改并直接读取本地缓存的资源；

4）4**类型的状态码，客户端错误，请求包含错误或无法完成请求：

400客户端请求语法错误导致服务端无法解析；
401请求要求用户的身份认证；
403请求被接收但被拒绝访问；
404服务端无法找到客户端访问的资源；
405请求的接口禁用此方法；

5）5**类型的状态码，服务器错误，请求过程中服务器发生错误：

500服务器内部错误且无法完成请求；
501服务器不支持功能请求；
503服务器超载或者系统维护；

42.如何理解使用transform？

transform可以定义元素很多静态样式实现变形倾斜（skew）、旋转（rotate）、缩放（scale）、位移（translate）以及透视（perspective）等功能，几个主要参数：

translate3d(x,y,z) 位移；
scale3d(x,y,z) 缩放；
rotateX(180deg) 旋转；
skewX(30deg) 倾斜；
perspective(500px) 3D转换元素提供透视；
transition 整个动画执行的时间；

43.如何理解使用transition？

默认情况下CSS属性的变化是瞬间完成的可以控制transform让变化过程平滑，但是不是所有的css属性都支持动画特效，一般来说具有中间值的属性是可以存在动画。简单写法：transition: 2s;动画过程是2s，其他省略的属性全部是默认值，有以下控制值：

transition-property，默认值为all即所有的属性均参与动画，可以自定义动画的属性；
transition-duration: 3s，定义动画过程的时间，可以设定两个时间，根据顺序分给需要设定设定动画的属性值；
transition-timing-function：ease，ease是指动画先快后慢，设置动画的过渡效果；
transition-timing-function：steps(n,start)，设置步进的速度，将整一个动画分为n个时间点，动画不会延迟；
transition-delay：1s，动画延迟一秒执行；

44.如何理解使用关键帧？

transition过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化，对每一帧进行处理，也可以把帧动画理解为多个帧之间的过渡动画。也不是所有的css属性都具有动画，具有以下属性：

animation-name：动画1，动画2，可以定义多个动画；
animation-duration：动画时间，可以设定多个值并分给上面的动画；
animation-iteration-count：infinite，默认动画仅执行一次，设置infinite后循环执行；
animation-direction：normal，动画的方向，默认是从0%到100%运行动画，设置alternate则会先从0%到100%，然后从100%到0%，添加reverse则相反效果；
animation-delay：1s，动画延迟时间；
animation-timing-function: ease-in，动画的指向速率；
animation-play-state：paused动画的暂停播放；
animation-fill-mode：forwards，动画执行完成之后的状态，设置forwards则会停留在最后一帧；

div {animation-name: 动画名, scale;animation-duration: 3s;
}@keyframes 动画名 {from {// 第一帧的状态特效}25% {// 整个动画的1/4节点上的特效状态}50% {// 整个动画的2/4节点上的特效状态}to {// 最后一帧的状态特效}
}

JavaScript模块

1.理解掌握闭包？

一个函数对其周围状态（变量）的引用并保存周围变量，乃至函数执行完成后仍然可以访问的现象称之为闭包，闭包让外部访问函数内部的变量成为可能（私有属性），因为被引用的数据常驻内存，可能会造成内存泄露（一块内存长期被变量占据而不进行释放），闭包可以让你在一个内层函数中访问到其外层函数的作用域的状态并保存，在js中每当创建一个函数，闭包环境就在函数创建时产生，闭包环境相互独立，如果闭包环境引用外部函数作用域的一个变量a，即使当外部函数作用域的变量被销毁释放内存，但变量a不会被删除。

// 第一题
function funA(){var a = 10;  // funA的活动对象之中;return function(){   //匿名函数的活动对象;alert(a);}
}
var b = funA();
b();  //10// 第二题function outerFn(){var i = 0; function innerFn(){i++;console.log(i);}return innerFn;
}
var inner = outerFn();
inner();
inner();
inner();
var inner2 = outerFn();
inner2();
inner2();
inner2(); //1 2 3 1 2 3// 第三题
var i = 0;
function outerFn(){function innnerFn(){i++;console.log(i);}return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();
inner2();
inner1();
inner2();     //1 2 3 4// 第四题
function fn(){var a = 3;return function(){return  ++a;                                     }
}
alert(fn()());  //4
alert(fn()());  //4// 第五题
function outerFn(){
var i = 0;function innnerFn(){i++;console.log(i);}return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();
inner2();
inner1();
inner2();    //1 1 2 2// 第六题
(function() { var m = 0; function getM() { return m; } function seta(val) { m = val; } window.g = getM; window.f = seta;
})();
f(100);
console.info(g());   //100  闭包找到的是同一地址中父级函数中对应变量最终的值//第七题
function a() { var i = 0; function b() { alert(++i); } return b;
}
var c = a();
c();      //1
c();      //2// 第八题
function f() { var count = 0; return  function() { count++; console.info(count); }
}
var t1 = f();
t1();     //1
t1();     //2
t1();     //3// 第九题
var add = function(x) { var sum = 1; var tmp = function(x) { sum = sum + x; return tmp;    } tmp.toString = function() { return sum; }return tmp;
}
alert(add(1)(2)(3));     //6// 第十题
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){(function(i){lis[i].onclick = function(){console.log(i);};})(i);       //事件处理函数中闭包的写法
} // 第十一题
function m1(){var x = 1;return function(){console.log(++x);}
}m1()();   //2
m1()();   //2
m1()();   //2var m2 = m1();
m2();   //2
m2();   //3
m2();   //4// 第十二
var  fn=(function(){var  i=10;function  fn(){console.log(++i);}return   fn;
})()
fn();   //11
fn();   //12// 第十三
function love1(){var num = 223;var me1 = function() {console.log(num);}num++;return me1;
}
var loveme1 = love1();
loveme1();   //输出224

2.怎么理解未声明和未定义？

未声明的变量是程序中不存在且未声明的变量，访问未声明的变量会进行报错；未定义的变量是在程序中声明但尚未给出任何值的变量，访问不会报错并得出undefined值。

3.全局变量？

声明变量时省略关键字就会造成变量污染

4.定时器？定时器的缺点？

延时一段时间并执行任务，因为它是宏任务，需要等待微任务执行完成后才可以执行。

5.相等符号中”“和”=“的不同？

===称为严格等式运算符，两个操作数比较前不会进行类型转换，如果数据类型不同就直接定为不同；
==包容等式运算符，两个操作数比较前如果发现数据类型不一样，则转换成数据相同的数据类型再比较，不同则不同；

6.隐式转换？

逻辑运算符"=="进行两个是比较是否相等时，不同的数据类型会造成隐式转换后再比较，属于js中比较难的部分，具体情况如下：

数组和布尔值比较，[] == true;//false，空数组转为""再转为0，逻辑值true直接转为1；
数组符串比较，[1,2,3] == '1,2,3' // true，[1,2,3]转换成字符串"1,2,3"最后跟字符串比较；
字符串和数字进行比较，'1' == 1 // true，字符串转为数字后与数字1比较；
字符串和布尔值进行比较，'1' == true; // true，字符串转为数字1，布尔值转为数字1，比较相等；
布尔值和数字比较，true == 1;/ true，布尔值转为数字1再比较；

有趣的事情是[] == false和![] == false的结果都是true，第一个[]数组转为""再转成0，false直接转为0，比较相等；第二个同理，!符号优先级高所以先执行，所以式子就变成(![]) == false，估计就能理解了！另外有几个比较的特殊undefined == null // true、NaN == XXX //NaN和任意类型都不等（包括自己）。

7.逻辑值为假？逻辑值为真？

js中空字符串（""）、NaN、undefined、null、flase，0，逻辑值为假，但是空数组（[]）、空对象（{}）逻辑值为真。

8.数据类型？

基础数据类型：undefined、null、String、Number、Boolean、Symbol；
复杂数据类型：数组、对象；

9.new操作符具体干了什么呢?

1.创建了一个新的空对象{}；

var obj = new Object()

2.设置新对象obj的__proto__ = 构造函数.prototype；

obj.__proto__ = 构造函数.prototype

3.构造函数中的this指向新对象a；

Var res = 构造器.call(obj)，因为函数存在闭包所以每一个作用域都是相互独立，就有了对象的概念。

4.属性访问器中的setter中进行判断，如果是对象（引用类型则返回），否则返回空对象{}；

10.理解节流和防抖？

前端开发中我们经常需要绑定一些持续触发的函数，例如：跳转屏幕宽度resize，监听页面滚动scroll，拖拽mousemove。这些过程中绑定的函数频繁的触发，所以节流和防抖就很好的解决办法。

防抖debounce，指触发事件触发后的n秒内又被触发，则会重新计算时间，例如设置300毫秒的防抖时间，事件触发后的300毫秒内该事件又被触发，则重新计算时间，又将等待300毫秒。如果三百毫秒内没有触发，则直接执行事件的处理程序；

// 体验代码
<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script>let num = 1;let content = document.getElementById('content');function count() {content.innerHTML = num++;};content.onmousemove = count;
</script>function debounce(func, wait = 200) {let timeout; // 定义定时器return function () {let context = this; // 获取当前函数的指向者let args = arguments; // 获取到传递的参数对象if (timeout) clearTimeout(timeout); // 如果等待时间内又触发了事件，则将之间的定时器去掉，重新进行定时。timeout = setTimeout(() => {func.apply(context, args) // 将回调函数绑定给函数执行者并传入参数}, wait);}
}

节流throttle，连续触发事件，但是在n秒内只是执行一次处理程序，体现效果每200毫秒会执行事件的处理程序；

function throttle(func, wait = 200) {let timeout; // 定义定时器对象return function () {let context = this; // 获得函数执行对象let args = arguments; // 获得参数// 定时器为空时开启 不为空则还有定时任务 不执行处理函数if (!timeout) {// 开启定时任务timeout = setTimeout(() => {timeout = null; // 等待定时成功后将time赋值为空值func.apply(context, args);}, wait);}};
}

vue模块

1.对于MVVM的理解？

MVVM是model-View-ViewModel的缩写，其中model代表数据模型可以其中定义数据操作业务逻辑；View代表视图层，界面UI组件负责展示数据；ViewModel监听数据模型的改变和控制视图行为、处理用于交互。MVVM架构中，数据模型和视图分离，数据模型仅与ViewModel进行双向交互，View数据变化会同步传入ViewModel中，进而改变数据模型的值，同理数据模型的改变也会间接反映到View视图层上。ViewModel通过双向绑定把view视图和Model数据模型连接，同步操作自动完成，复杂的数据状态完全由MvvM统一管理。

2.Vue生命周期？

实例从创建到销毁的过程就叫生命周期，从开始创建，初始化数据，编译解析模板，挂载DOM并渲染，循环监听更新渲染，销毁实例等一系列过程。

beforeCreate创建前，数据观测和初始化事件未开始；
create创建后完成数据观测属性和方法的运算，初始化事件，$属性没有被挂载渲染出来；
beforeMount挂载前，实例挂载el对象前被调用，render函数手册被调用，完成模板编译，data里面数据和模板生成fragment片段，但是还没有被挂载到html文档上去，尚不能操作进程DOM节点获取操作；
mounted挂载后，替换原来el并挂载到实例上去，以及可以获取到DOM节点，可进行ajax交互，节点进行实践监听等操作；
beforeUpdate更新前，数据更新前调用，发生在虚拟DOM重新渲染和打好补丁之前，不会触发附加的重渲染过程；
updated更新后，数据更新导致虚拟DOM重新渲染，数据以及更新完毕；
beforeDestroy销毁前，vue实例销毁前调用，此时仍然可以访问使用；
destroyed销毁后，vue实例销毁后调用，事件监听以及组件实例都被销毁；

3.Vue实现数据双向绑定的原理？

vue实现数据双向绑定的主要是采用数据劫持结合发布者订阅者者模式的方式，通过definedProperty()定义属性特征以及属性访问器getter/setter进行数据拦截，当数据发生变动时进入getter访问器，通过notify()通知订阅者，触发回调update方法更新数据视图。vue的双向绑定将MVVM作为绑定数据的入口，整合Observer，Compile和Watcher三者，开局Observe监听自己数据变化生成发布者，通过Compile解析模板指令，生成属性订阅者。

4.组件之间参数传递？

父组件向子组件传值，父组件使用子组件时设置属性，子组件内部通过props方法接收数据；
子组件向父组件传值，子组件内部使用$emit方法发生事件，父组件在子组件上监听并绑定该方法，取得数据；
非父子关系时，创建一个事件中心，通过事件总线的方式通信；
VUE实现父子组件之间的数据交互；

5.Vue的实现？hash模式和history模式？

hash模式在浏览器中URL后面带"#“号，”#"包括后面的字符称之为hash，可以使用window.location.hash读取，当路由跳转时，URL发生改变，但不会发送HTTP网络请求，页面不会重载，但需要注意的是页面上的锚点会影响到hash模式；history模式是采用HTML5新增的两个方法pushState()和replaceState（），可以对浏览器历史记录栈进行修改，以及popState事件触发状态的变更，history在真实的项目中常常需要后端服务器的配合，例如nginx的反向代理。

6.Vue与Angular和React的区别？

相同点，vue和angular都支持内置指令和自定义指令，支持过滤器数据双向绑定。vue和安react的中心思想相似，react采用特殊的JSX语法，vue组件化开发中也推崇.vue文件的使用，vue文件的使用理解更为直接。一切皆为组件，声明周期过程都提供合理的钩子函数；
不同点，angular增加特性，学习成本高，vue提供的api相对简单直观，依赖对脏数据的检测，所以当Watcher订阅者越多越慢，vue采用的依赖追中的观察，并且使用异步队列更新，所有的数据都是独立触发。React采用虚拟dom对渲染结果做脏数据检测，而vue在模板中提供指令，过滤器更加方便快捷的操作虚拟dom；

7.Vue路由的钩子函数？

首页可以控制导航跳转，beforeEach，afterEach导航守卫，可以对页面title进行修改，页面访问权限的控制，例如登录后才可以访问某些页面等效果实现，beforeEach和afterEach都是存在三个主要参数，to、from、next（）以下就是详细的介绍：

to代表route即将进入的页面；
from代表正要离开的页面；
next函数需要调用该钩子函数，否则会对路由对象进行拦截导致报错；

8.Vuex是什么？怎么使用？工作场景？

应用状态数据的存放仓库，具有State、Getter、Setter、Mutation、Actions、Module属性，其中mutation提交数据存储的同步任务，Action是处理异步逻辑的任务，新建store目录，index.js文件中使用Vue.use使用store对象，最后配置export导出，mian.js文件中引入Store，注入Store就可以在任意组件中通过this.$store.state引用到仓库内的数据。

state仓库，Vuex使用单一状态树，每一个应用最好仅包含一个store实例，不建议直接修改state的值，最好是通过commit方法调用mutation任务进行修改，方便后期数据的追踪；
mutation，定义方法动态修改state中的数据，不建议包含逻辑业务处理，处理一些同步任务；
Action，定义方法执行异步任务一些复杂的逻辑代码，view层通过store.dispath分发Action任务；
getter，类似vue实例中的计算属性特点，用来过滤规范改造数据；
项目特别复杂的时候，每一个模块拥有自己的state，mutation，Action，getter，代码逻辑更加清晰；

9.Vue-cli如何新增自定义指令？

// 注册全局自指令 `v-focus`
Vue.directive('focus', {// 绑定的dom节点inserted: function (el) {// 聚焦元素el.focus()}
})// 局部新增指令`huasen`
var app = new Vue({el: '#app',// 注册多个指令directives: {huasen: {inserted(el) {el.style.width = '200px';el.style.height = '200px';}}}
})// 使用指令
<div v-focus></div>
<div v-huasen></div>

10.自定义过滤器？

// 局部声明
const app = new Vue({el: "#app",data: {msg: ""},filters: {capitalize: function(value) {return "huasen"+value;}}
})
// 全局
Vue.filter("huasenjio",function(value){})// 使用
<div>{{msg|capitalize}}</div>

11.keep-alive的理解？

keep-alive是Vue内置的一个组件，包含的组件保留状态，避免被重新渲染，keep-alive加入两个属性，include（包含）和exclude（排除）且exclude优先级大于include，可以通过正则表示式或者字符串定义。

<keep-alive include="XXX" exclude="XXX">组件
</keep-alive>

12.简要作答题

css只在当前组件起作用，因为style标签中写入scoped进行限制则不会穿透，如果是渲染markdown语法则使用常规选择符将不会生效；
v-if是按照条件是否渲染，v-show按照条件隐藏显示，还存在与文档流中，类似于控制css中的display设置为none；
$router是路由实例对象，包含路由的跳转方法，钩子函数，而$route是活跃路由信息对象，指向正在展示的活跃路由的信息，包含pah，params等信息；
vue的两个核心是数据驱动和组件系统；
事件修饰符，prevent阻止事件默认行为，stop阻止点击事件冒泡行为，self事件仅在触发元素上发生，capture事件捕获，once触发一次，native绑定原生click；
v-on可以绑定多个方法；
vue中遍历时key的作用为每一个节点做唯一标识，v-for更新已渲染过的元素列表时，出于优化性能采用"就地复用策略"，当当数据项的顺序被改变，Vue不会移动DOM元素来匹配数据项的顺序，而是简单复用每一个元素，key的作用就是更新dom，从而不要复用，避免获得脏数据结果；
vue的计算属性调用时仅写计算属性名，获取数据并按一定规则输出，计算属性和method不同。不管依赖的数据是否变化，method都是从新计算，计算属性则是从缓存中读取，优化性能；
vue具有简单的API实现数据绑定以及响应，核心是一个响应的数据绑定系统，MVVM架构，组件化开发，轻量等优点，但是vue不支持低版本的浏览器，目前仅支持到IE9，不利于SEO的优化，首屏加载时间较长；
路由通过path/:id属性后面添加冒号和便利的形式，使用时通过params.id获取；

13.$nextTick的使用？

当你修改DOM元素的值后直接获取DOM节点的更新数据可能会造成获取不到，使用$nextTick回调函数可以让渲染完成后才会进行操作。

14.SPA应用和多页面应用？

单页面应用（SPA）程序仅有一个入口，首屏加载时间相对较长，一旦加载完成后用户体验很好，减少服务器的压力，但是不利于SEO，多页面应用程序有多个入口，页面跳转是整页进行刷新。

15.v-if和v-for为什么不建议同时使用？

v-for具有更高的优先级，意味者遍历的时候每个元素都进行if判断，造成内存的浪费。

16.assets和static的区别？

相同点，两者都是存放静态资源文件；
不同点，assets资源文件存放的资源文件项目打包时会对静态资源文件进行处理，修改名字改变类型等操作，而static则是直接拷贝到打包文件夹中，没有经过压缩处理。template需要的样式文件都可以放在asset中，压缩代码体积，第三方静态文件库可以放static中；

17.delete和Vue.delete删除数组的区别？

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变，Vue.delete 直接删除了数组。

18.SPA首屏加载慢如何解决？

懒加载方式引入文件，打包构建时采用tree shaking操作，分割第三方库使用CDN方式引入。

19.Vue-router和location.href区别？

使用window对象的location.href=’/url’来跳转简单方便，但是页面会造成刷新，Vue-router采用的是HTML5的history.pushState(’/url’)方法进行跳转，不会造成页面刷新。

20.Vue中的slot插槽?

插槽常用于组件封装中，组件具有一定布局，但内容元素相似，可以使用插槽预留位置，使用插入对应的DOM，vue内部会自动进行替换。

21.Vue2中注册router-link上点击事件无效？

router-link会阻止click事件，使用使用@click.native直接监听原生事件。

22.Vue中数组方法修改元素数据会响应更新？

push()；pop()；shift()；unshift()；splice()； sort()；reverse()；

WebPack模块

1.gulp/grunt 与 webpack的区别是什么?

Grunt和Gulp属于一类的都是构建工具，Webpack 是目前最热门的前端资源模块化管理和打包工具，gulp基于任务和流，而webpack是基于入口文件，根据关系依赖引入文件，根据依赖图进行打包。

2.常见的Loader？

file-loader文件统一输出到指定文件夹，HTML中通过相对路径引用文件；
url-loader文件很小的情况下以 base64 的方式把文件内容注入到代码中；
babel-loader把 ES6 转换成 ES5；
css-loader加载 CSS；
style-loader把 CSS 代码注入到 JavaScript 中；
eslint-loader通过 ESLint 检查 JavaScript 代码；

3.Loader和Plugin不同？

loader意思作为加载解析文件作用，实现的功能比较小，默认webpack仅可以打包json和js语法，通过安装loader可以加载识别更多文件。plugin是插件，更为灵活实现的功能更广泛；
loader使用前需要安装，不需要引入可直接在module.rules中配置。plugin则需要安装，引入模块，使用时需要new 实例对象；

4.webpack的构建流程？

初始化参数，从配置文件和 Shell 语句中读取与合并配置参数；
开始编译，通过配置参数初始化 Compiler 对象，加载配置的插件，执行对象的 run 方法开始执行编译；
确定入口，根据配置中的 entry 找出入口文件；
编译模块，入口文件出发，调用所有配置的 Loader 对模块进行翻译；
完成模块编译，使用 Loader 翻译完所有模块后得到模块之间的依赖关系图；
输出资源，根据入口和模块之间的依赖关系，引入模块组合成为Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，此处可以修改输出文件；
输出完成，确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统；

8.webpack的HMR热更新？

可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块

9.webpack来优化前端性能？

开发环境优化，DevServer开发工具优化，实现HMR热替换，采用多线程编译；
生产环境优化，代码分隔配合CDN引入资源，使用ES6语法引入，实现Tree shaking效果，通过压缩代码缩小体积，通过source-map进行源文件和资源文件的映射方式，内联方式可以提高性能；

一本正经前端的面试清单相关推荐

【GitChat】精选——双 11 大前端工程师读书清单
GitChat 是一款基于微信平台的 IT 阅读/写作互动产品.我们的目的是通过这款产品改变 IT 知识的学习方式,让专业读者获得自主选择权,让知识分享者获得收益. 关于GitChat 你想知道的都在 ...
Web前端培训面试攻略
学会web前端技术之后,接下来就是要找到一份合适的工作,今天小编要跟大家分享的文章是关于web前端面试攻略,做好这些可以给面试环节加分,找到合适的工作几率会更高,希望本篇文章能够对大家有所帮助. ...
Web前端经典面试试题（二）
上次由于时间有限只分享了一部分的前端面试题,所以本篇继续分享前端经典面试试题一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的,而队列的操作却是在两端进行的. 队列先进先出,栈先进后出. 栈 ...
vue 高阶面试题_高级Web前端工程师面试之Vue问题汇总解析
又是一年毕业季,很多学习前端的同学面对激烈的求职竞争倍感压力,想要了解企业招聘会提问哪些问题.今天千锋郑州Web前端培训小编就给大家分享一下高级Web前端工程师面试中有关Vue的问题及解析. 1.Vu ...
记一次网易前端实习面试
记一次网易前端实习面试很幸运地能收到网易的面试通知,就毫不犹豫翘了课去面试了hhhh~三点的面试,因为从来没去过那个中关村西北旺区,吃完饭早早就去了,想象中那里应该是繁华的地方hhhh,到了发现都在 ...
（一）导学（前端框架面试-聚焦Vue/React/Webpack）
导学全面高效学习前提前端常见面试流程知识点介绍 Vue框架部分 React框架部分工具部分项目设计讲解方式注意事项全面全面的知识体系大量的面试真题完整的技术面试流程高效直 ...
前端工作面试问题（下）
续 "前端工作面试问题(上)" JS相关问题: 解释下事件代理. 在传统的事件处理中,你按照需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能 ...
6轮字节前端校招面试经验分享
大家好,我是若川.最近金三银四,今天分享一篇字节前端校招面试经验的轻松好文,相信看完会有所收获.也欢迎点击下方卡片关注或者星标我的公众号若川视野因为我错过了2020年的秋招(ps: 那时候连数据结构 ...
三年前端，面试思考（二）
为什么还有(二) 没有想到上一篇 <三年前端,面试思考> 有这么多前端同学看到. 在评论区也有很多鼓励和质疑的声音,而且群里面交流的同学两天就达到了700人. 群里有同学问了很多问题,同时 ...

一本正经前端的面试清单