‘壹’ Web前端岗位面试题有哪些
前端面试题汇总，多余的就不说先做会这些东西吧
HTML
Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
HTML5 为什么只需要写 <!DOCTYPE HTML>？
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
页面导入样式时，使用link和@import有什么区别？
介绍一下你对浏览器内核的理解？
常见的浏览器内核有哪些？
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
简述一下你对HTML语义化的理解？
HTML5的离线储存怎么使用，工作原理能不能解释一下？
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
iframe有那些缺点？
Label的作用是什么？是怎么用的？（加 for 或 包裹）
HTML5的form如何关闭自动完成功能？
如何实现浏览器内多个标签页之间的通信? (阿里)
webSocket如何兼容低浏览器？(阿里)
页面可见性（Page Visibility）API 可以有哪些用途？
如何在页面上实现一个圆形的可点击区域？
实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
网页验证码是干嘛的，是为了解决什么安全问题？
tite与h1的区别、b与strong的区别、i与em的区别？
css
介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
CSS选择符有哪些？哪些属性可以继承？
CSS优先级算法如何计算？
CSS3新增伪类有那些？
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
display有哪些值？说明他们的作用。
position的值relative和absolute定位原点是？
CSS3有哪些新特性？
请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
用纯CSS创建一个三角形的原理是什么？
一个满屏 品 字布局 如何设计?
常见兼容性问题？
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
为什么要初始化CSS样式。
absolute的containing block计算方式跟正常流有什么不同？
CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
对BFC规范(块级格式化上下文：block formatting context)的理解？
CSS权重优先级是如何计算的？
请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
移动端的布局用过媒体查询吗？
使用 CSS 预处理器吗？喜欢那个？
CSS优化、提高性能的方法有哪些？
浏览器是怎样解析CSS选择器的？
在网页中的应该使用奇数还是偶数的字体？为什么呢？
margin和padding分别适合什么场景使用？
抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
元素竖向的百分比设定是相对于容器的高度吗？
全屏滚动的原理是什么？用到了CSS的那些属性？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
如何修改chrome记住密码后自动填充表单的黄色背景 ？
你对line-height是如何理解的？
设置元素浮动后，该元素的display值是多少？（自动变成display:block）
怎么让Chrome支持小于12px 的文字？
让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）
font-style属性可以让它赋值为“oblique” oblique是什么意思？
position:fixed;在android下无效怎么处理？
如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
display:inline-block 什么时候会显示间隙？(携程)
overflow: scroll时不能平滑滚动的问题怎么处理？
有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
style标签写在body后与body前有什么区别？
JavaScript
介绍JavaScript的基本数据类型。
说说写JavaScript的基本规范？
JavaScript原型，原型链 ? 有什么特点？
JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？
Javascript如何实现继承？
Javascript创建对象的几种方式？
Javascript作用链域?
谈谈This对象的理解。
eval是做什么的？
什么是window对象? 什么是document对象?
null，undefined的区别？
写一个通用的事件侦听器函数(机试题)。
[“1”, “2”, “3”].map(parseInt) 答案是多少？
关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
什么是闭包（closure），为什么要用它？
javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？
如何判断一个对象是否属于某个类？
new操作符具体干了什么呢?
用原生JavaScript的实现过什么功能吗？
Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
对JSON的了解？
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗？
js延迟加载的方式有哪些？
Ajax 是什么? 如何创建一个Ajax？
同步和异步的区别?
如何解决跨域问题?
页面编码和被请求的资源编码如果不一致如何处理？
模块化开发怎么做？
AMD（Moles/Asynchronous-Definition）、CMD（Common Mole Definition）规范区别？
requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）
让你自己设计实现一个requireJS，你会怎么做？
谈一谈你对ECMAScript6的了解？
ECMAScript6 怎么写class么，为什么会出现class这种东西?
异步加载的方式有哪些？
documen.write和 innerHTML的区别?
DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
.call() 和 .apply() 的含义和区别？
数组和对象有哪些原生方法，列举一下？
JS 怎么实现一个类。怎么实例化这个类
JavaScript中的作用域与变量声明提升？
如何编写高性能的Javascript？
那些操作会造成内存泄漏？
JQuery的源码看过吗？能不能简单概况一下它的实现原理？
jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
jquery中如何将数组转化为json字符串，然后再转化回来？
jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
jquery.extend 与 jquery.fn.extend的区别？
jQuery 的队列是如何实现的？队列可以用在哪些地方？
谈一下Jquery中的bind(),live(),delegate(),on()的区别？
JQuery一个对象可以同时绑定多个事件，这是如何实现的？
是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）
针对 jQuery性能的优化方法？
Jquery与jQuery UI有啥区别？
JQuery的源码看过吗？能不能简单说一下它的实现原理？
jquery 中如何将数组转化为json字符串，然后再转化回来？
jQuery和Zepto的区别？各自的使用场景？
针对 jQuery 的优化方法？
Zepto的点透问题如何解决？
jQueryUI如何自定义组件?
需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
如何判断当前脚本运行在浏览器还是node环境中？（阿里）
移动端最小触控区域是多大？
jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？
移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
解释JavaScript中的作用域与变量声明提升？
那些操作会造成内存泄漏？
JQuery一个对象可以同时绑定多个事件，这是如何实现的？
Node.js的适用场景？
(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
解释一下 Backbone 的 MVC 实现方式？
什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
简述一下 Handlebars 的基本用法？
简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？
用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
检测浏览器版本版本有哪些方式？
我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
其他问题
原来公司工作流程是怎么样的，如何与其他人协作的？如何夸部门合作的？
你遇到过比较难的技术问题是？你是如何解决的？
设计模式 知道什么是singleton, factory, strategy, decrator么?
常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
页面重构怎么操作？
列举IE与其他浏览器不一样的特性？
99%的网站都需要被重构是那本书上写的？
什么叫优雅降级和渐进增强？
是否了解公钥加密和私钥加密。
WEB应用从服务器主动推送Data到客户端有那些方式？
对Node的优点和缺点提出了自己的看法？
你有用过哪些前端性能优化的方法？
http状态码有那些？分别代表是什么意思？
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
部分地区用户反应网站很卡，请问有哪些可能性的原因，以及解决方法？
从打开app到刷新出内容，整个过程中都发生了什么，如果感觉慢，怎么定位问题，怎么解决?
除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？
你用的得心应手用的熟练地编辑器&开发环境是什么样子？
对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
你怎么看待Web App 、hybrid App、Native App？
你移动端前端开发的理解？（和 Web 前端开发的主要区别是什么？）
你对加班的看法？
平时如何管理你的项目？
说说最近最流行的一些东西吧？常去哪些网站？
如何设计突发大规模并发架构？
说说最近最流行的一些东西吧？常去哪些网站？
是否了解开源的工具 bower、npm、yeoman、grunt、gulp，一个 npm 的包里的 package.json 具备的必要的字段都有哪些？（名称、版本号，依赖）
每个模块的代码结构都应该比较简单，且每个模块之间的关系也应该非常清晰，随着功能和迭代次数越来越多，你会如何去保持这个状态的？
Git知道branch, diff, merge么?
如何设计突发大规模并发架构？
当团队人手不足，把功能代码写完已经需要加班的情况下，你会做前端代码的测试吗？
说说最近最流行的一些东西吧？平时常去哪些网站？
知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?
移动端（Android IOS）怎么做好用户体验?
简单描述一下你做过的移动APP项目研发流程？
你在现在的团队处于什么样的角色，起到了什么明显的作用？
你认为怎样才是全端工程师（Full Stack developer）？
介绍一个你最得意的作品吧？
你有自己的技术博客吗，用了哪些技术？
对前端安全有什么看法？
是否了解Web注入攻击，说下原理，最常见的两种攻击（XSS 和 CSRF）了解到什么程度？
项目中遇到国哪些印象深刻的技术难题，具体是什么问题，怎么解决？。
最近在学什么东西？
你的优点是什么？缺点是什么？
如何管理前端团队?
最近在学什么？能谈谈你未来3，5年给自己的规划吗？
‘贰’ 前端面试题整理（一）
进程是CPU资源分配的最小单位，线程是CPU调度的最小单位
其中GUI渲染线程和JS引擎是无法同时工作的
默认情况下, TCP 连接会启用延迟传送算法 (Nagle 算法), 在数据发送之前缓存他们. 如果短时间有多个数据发送, 会缓冲到一起作一次发送 (缓冲大小见 socket.bufferSize), 这样可以减少 IO 消耗提高性能.
如果是传输文件的话, 那么根本不用处理粘包的问题, 来一个包拼一个包就好了. 但是如果是多条消息, 或者是别的用途的数据那么就需要处理粘包.
可以参见网上流传比较广的一个例子, 连续调用两次 send 分别发送两段数据 data1 和 data2, 在接收端有以下几种常见的情况:
A. 先接收到 data1, 然后接收到 data2 .
B. 先接收到 data1 的部分数据, 然后接收到 data1 余下的部分以及 data2 的全部.
C. 先接收到了 data1 的全部数据和 data2 的部分数据, 然后接收到了 data2 的余下的数据.
D. 一次性接收到了 data1 和 data2 的全部数据.
其中的 BCD 就是我们常见的粘包的情况. 而对于处理粘包的问题, 常见的解决方案有:
多次发送之前间隔一个等待时间
关闭 Nagle 算法
进行封包/拆包
通过滑动窗口协议（连续ARQ协议）实现，保证了分组无差错、有序接收、流量控制。接收方返回的ACK中会包含自己的接收窗口的大小，并且利用大小来控制发送方的数据发送。
当发送者收到了一个窗口为0的应答，发送者便停止发送，等待接收者的下一个应答。如果这个窗口不为0的应答在传输过程中丢失，发送者一直等待，接收者以为发送者收到该应答，等待接收新数据，这样双方就相互等待，从而产生死锁
TCP使用了持续计时器。每当发送者收到一个0窗口的应答后就启动该计时器。计时器到时便主动发送报文询问接收者的窗口大小。若接收者仍然返回0窗口，则重置该计时器继续等待；若窗口不为0，则标识应答报文丢失了，此时重置发送窗口开始发送，这样就避免了死锁的产生
拥塞控制是作用于网络的，防止网络负载过大，常用的方法：1.慢启动、拥塞避免 2.快重传、快恢复。流量控制是作用于接收者的，控制发送者的发送速度使接收者来得及接收，防止分组丢失
发送方维持一个叫做拥塞窗口CWnd的状态变量，控制着传输速度，TCP开始发送报文时CWnd=1。一个传输轮次所经历的时间就是往返时间RTT，每经过一个RTT并且按时收到确认，就将拥塞窗口CWnd加倍。还有一个叫慢启动门限ssthresh的状态变量，当CWnd<ssthresh时，使用慢启动，当CWnd>=ssthresh改用拥塞避免算法
每经过一个往返时间RTT就把发送方的拥塞窗口cwnd加1而不是加倍。无论在慢启动阶段还是拥塞避免阶段，只要发送方没有按时收到确认，就把慢启动门限设置为出现拥塞时的拥塞窗口cwnd的一半（但不小于2）。然后把拥塞窗口cwnd重置为1，执行慢启动算法
接收方收到一个失序的报文段后就立刻发出重复确认而不是等到自己发送数据时捎带确认。只要发送方一连收到三个重复确认就立即重传对方尚未收到的报文段，而不是等待重传计时器到期
当发送方连续收到三个重复确认时，把慢启动门限ssthresh减半，但是并不执行慢开始算法，而是将拥塞窗口cwnd设置为ssthresh减半后的值，直接执行拥塞避免算法。快重传配合快恢复的TCP Reno版本是目前使用最广的版本。
帧：HTTP/2 数据通信的最小单位消息：指 HTTP/2 中逻辑上的 HTTP 消息。例如请求和响应等，消息由一个或多个帧组成。
流：存在于连接中的一个虚拟通道。流可以承载双向消息，每个流都有一个唯一的整数ID
HTTP/1.x会在请求和响应中中重复地携带不常改变的、冗长的头部数据，给网络带来额外的负担。
服务端可以在发送页面HTML时主动推送其它资源，而不用等到浏览器解析到相应位置，发起请求再响应。例如服务端可以主动把JS和CSS文件推送给客户端，而不需要客户端解析HTML时再发送这些请求。
服务端可以主动推送，客户端也有权利选择是否接收。如果服务端推送的资源已经被浏览器缓存过，浏览器可以通过发送RST_STREAM帧来拒收。主动推送也遵守同源策略，服务器不会随便推送第三方资源给客户端。
HTTP 1.x 中，如果想并发多个请求，必须使用多个 TCP 链接，且浏览器为了控制资源，还会对单个域名有 6-8个的TCP链接请求限制。
HTTP2中：
同域名下所有通信都在单个连接上完成。
单个连接可以承载任意数量的双向数据流。
数据流以消息的形式发送，而消息又由一个或多个帧组成，多个帧之间可以乱序发送，因为根据帧首部的流标识可以重新组装
前端面试与进阶指南
从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
‘叁’ 你遇到的前端面试题都有什么
大家好，我是王我。
随着春节的结束，各个行业也普遍开始了上班的节奏， 不过本人17号才上班。为什么？因为长得帅的都上班比较晚。 当然，每到新年结束，又迎来了一批招聘者与面试者，我来说说作为一年工作经验应该知道的面试题。
HTML篇
1.doctype是什么？有哪些类型？
2.input有哪些新类型？简要说明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
4.bootstrap响应式的原理是什么？
5.多移动终端页面适配是如何实现的？
CSS篇
1.如何实现两列布局，左边自适应，右边固定宽度？
2.用CSS画一个三角形
3.CSS实现字体大写
4.display有哪些常用的属性值？分别是什么意思？
5.position为absolute，relative，fixed的定点位置
6.用三种方法清除浮动
7.请介绍一下margin塌陷问题
js篇
1.什么是事件冒泡和捕获？如何阻止事件冒泡？(分别用原生和jquery实现)
2.js创建对象，至少使用三种方法
3.简述一下事件穿透以及解决办法
4.用三种方式判断变量类型是否是数组
5.如何实现对象的拷贝？
6.什么是闭包？闭包的优缺点。
7.简述一下ajax请求的过程。
8.简述一下new一个人构造函数的人过程。
9.为什么会有跨域？是怎么解决跨域问题的？简述一下原理。
10.js原始数据类型有哪些？
11.学一个函数，判断一个变量是否是字符串
12.typeof有哪些结果？
13.剪头函数和普通函数有什么区别？
14.请用三种方法实现数组去重
15.href和src有什么区别？
jquery篇
1.attr()和prop()有什么区别？
2.on和bind有什么区别？js动态添加的dom元素是通过on还是bind？
3.touch和click有什么区别？
4.window.onload和jquery的ready有什么区别？
vue篇
1.简述一下vue的生命周期及其特点
2.vue双向绑定的原理是什么？
3.vue的特点有哪些？和jquery有什么区别？
4.父子组件之间传递数据的方法
5.子组件如何共享数据？
6.一般有什么工具进行数据交互？
7.webpack的原理是什么？
8.简述一下$nextTick的用法
浏览器篇
1.cookie、sessionStorage、localStorage的区别是什么？
2.有用过浏览器缓存吗？简述一下基本的缓存机制
网络篇
1.http和https之间的区别
2.从服务器的安全考虑，是使用get请求还是post请求？
3.URL请求的过程有哪些？
项目经验篇
1.项目中遇到的最大挑战以及解决办法
2.常见的网页优化有哪些？
作为一个面试一年以内工作经验的前端程序员来说，以上的问题能够倒答如流月薪6k应该不成问题啦。这些面试题也是我在很多面试中感觉经常被问到的题目。
希望大家年后找工作能够顺顺利利， 千万不要跟我一样哦，只有帅气就一无所有了。
大家好，我是王我，中国最帅的前端程序员。
前几次都是各种培训公司，各种忽悠就不提了，说说后面4次面试的经历。
第一次是面一个小公司，不过他们好像没有厉害的前端，来面我的是个后端，一来没有问我关于js的知识，直接问我以前做过什么，有没有经验，我本人不会吹牛，简历也没怎么包装，就是自己把自学的知识和做的几个小demo弄在上面，也用github挂在页面上了，不过他根本不点开看，也不问，问我会不会vue，我当时对框架还不了解，他就说他们需要能直接上手开始写的，所以我第一个就直接挂了。
第二次面试是一个国企，这个问了很多问题，都很基础，js数据类型，数组操作，事件，大概就是高程的前面几章看看就差不多都能答到，然后因为他们主要用jq，所以问了很多jq的操作，关于节点的，动画的，我看锋利的jq大概看了3遍，也练过多次，所以我答的很熟。然后问了些布局方面的，bootstrap我了解过，又看过css3，所以这方面也没啥问题，最后在现场做了个题目，主要就是布局然后通过ajax呈现数据。后面听介绍我面试的说面试官比较满意，说我jq很熟，一面就过了。可惜后面电话面试不知怎么回事可能表现的不够自信，虽然没问技术，但是我没啥自信，把没项目经验什么的也不知怎么就一五一十交代了，估计因为这个挂掉了。
第三次没问问题，直接就是一套题开做，我在那做了一个多小时。题目就是按照要求一步一步做一个页面出来，我也搞忘了我当时卡在哪个地方了，坐在那得时候就是做不出来，没有设计图，要根据他的描述自己找个设计图然后做，我第一次遇到这个有点懵，虽然当时没做出来，不过回来我自己花了几个小时把它做了。所以这个也是凉了。
第四个问的比较多，数据类型，数组操作，跨域，ajax，闭包，原型链，继承，深拷贝，浅拷贝，模块amd cmd，基本都是问的js。然后问了html5的新特性 css3 的新特性，遇到过什么浏览器的兼容性问题，怎么解决的，以后想往什么方面发展。这个时候我已经会点vue了，照着做了个小demo，不过后来知道公司用的angularjs，面试官也没看我做的，问也没问。。以前听网上说要带上自己的项目去面试感觉没起多大效果。
最后总结下如果面的比较初级的岗位，应该主要问js，原型链，继承，闭包，深浅拷贝，ajax，跨域，然后js的基础知识，对了还有apply和call也问了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一点的，暂时还没面过，等以后面过在来回答
1. cookie session 的用途和区别，以及有效期
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
2. vue的数据绑定原理，mvvm与mvc的区别
MVVM：
m:model数据模型层 v:view视图层 vm:ViewModel
vue中采用的是mvvm模式，这是从mvc衍生过来的
MVVM让视图与viewmodel直接的关系特别的紧密，就是为了解决mvc反馈不及时的问题
图片说明一下：
说到MVVM就要说一下双向绑定和数据劫持的原理，
MVC：
m:model数据模型层 v:view视图层 c:controller控制器
原理： c层需要控制model层的数据在view层进行显示
MVC两种方式，图片说明：
总结：
mvvm与mvc最大的区别：
MVVM实现了view与model的自动同步，也就是model属性改变的时候， 我们不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。
不懂得可以复制链接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的区别 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性
sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的
有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性
传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性
但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值
所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可
【数据为尊 ----数据映射到浏览器 如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面 ----映射关系统称】
缓存路由组件
使用的是vue的一个组件，参考vue的官方文档
使用这个东西可以保证我们在切换组件的时候，原来显示的组件不被销毁
-----【保障组件的数据不会被切换路由而销毁数据】
Home是对应的组件对象的名字，不是路由的名字
6.多维数组拍平
数组拍平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组
一红六种方法吧……
了解的请看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解决方案
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
这样就可以说同源策略----协议---端口---域名
原生的src和href可以解决跨域
代理可以解决
请求头也可以携带浏览器提示的也可以解决
一般都是后端解决跨域问题
【别的需要了解看下方链接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容问题§ 如果你使用cli创建项目（即项目根目录是package.json），不管用什么ide，即便是用HBuilderX，切记cli项目的编译器是在项目下的，HBuilderX不管怎么升级都不会影响编译器版本。你需要手动npm update来升级编译器。以及如果你想要安装less、scss等预编译器，也需要自己npm安装在项目下，而不是在HBuilderX的插件管理里安装。
§ 如果你使用离线打包，请注意HBuilderX升级后，真机运行基座和云打包对应引擎跟随HBuilderX升级，而你的sdk需要手动升级。sdk的版本升级一般滞后HBuilderX正式版升级一两天。
§ 如果你使用自定义基座，之前制作的自定义基座是不会跟随HBuilderX升级的，升级HBuilderX后你应该重新制作新版自定义基座。
§ 如果你使用wgt升级，新版HBuilderX编译的wgt，运行到之前的runtime上，一定要先测试好，看有没有兼容性问题。如果有问题，就不要wgt升级，整包升级。
§ 考虑到向下兼容，uni-app编译器在升级为新的自定义组件模式后，同时保留了对老编译模式的向下兼容。
在HBuilderX alpha版中，App端一定会使用新编译器，不理会manifest配置。
在HBuilderX 正式版中，新创建的项目会使用新编译器，老项目不会强制使用，而是开发者自己在manifest里配置开启。
§ 如果你使用其他ide开发uni-app，会经常因为拼错单词而运行失败，因为经过webpack编译一道，很多错误反应的不够直观，排错时间很长，不如从开始就依赖有良好提示的HBuilderX，避免敲错单词。
§ 云打包的引擎版本说明
HBuilderX Alpha，只有1套云打包机，不管你的HBuilderX alpha版本多少，对应的打包机一定是最新的alpha版的客户端引擎。
HBuilderX正式版，有2套打包机，一个是最新正式版，一个是次新正式版。
中间的紧急更新版本没有独立打包机。
举个例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1这几个正式版。
那么当前可用的打包机有1.9.1和1.8.2这2台。（即每个大版本的最后一个版本）
除了这2个HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版对应的打包机。（即只保留2个大版本的云打包机）
【详情请看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML书写规范
H5新增标签
HTML渲染过程
二、CSS
css盒子模型概念
css弹性布局概念
三、JavaScript
事件模型
DOM2级事件模型
闭包
原型链
四、移动Web开发
常见的布局方案
移动端前端常见的触摸相关事件touch、tap、swipe等整理
移动端前端手势事件
移动端页面渲染优化
GPU渲染
GPU核心渲染过程
五、调试
常用的调试工具
Chrome控制台调试js使用
移动端测试
六、HTTP网络知识
常见的HTTP状态码
不同请求类型的区别
WEB缓存方案
——————————
牛客网（www.nowcoder.com）
- 专业IT笔试面试备考平台
- 最全C++JAVA前端等互联网技术求职题库
- 全面提升IT编程能力
- 程序员交友圣地
分享了一些Web前端的面试题，限时一小时，你看看自己能够答出多少道！
放心，这些面试题都是一些非常基础的知识，只要你在平时认真听课、学习了，那么这些面试题肯定不会难道你。
建议：虽然没有人监督你，但还是希望你不要去寻找答案，脱离网络，拿起纸笔，你试一下自己究竟能够答出个什么水平！有没有真本领？答案尽在这些面试题里！那么，你准备好了吗？OK！计时开始！
一、HTML常见题目01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？
02、HTML5为什么只需要写？
03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？
04、页面导入样式时，使用link和@import有什么区别？
05、介绍一下你对浏览器内核的理解？
06、常见的浏览器内核有哪些？
07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？
08、如何区分HTML和HTML5？
09、简述一下你对HTML语义化的理解？
10、HTML5的离线储存怎么使用，工作原理能不能解释一下？
二、CSS类的题目01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
02、CSS选择符有哪些？哪些属性可以继承？
03、CSS优先级算法如何计算？
04、CSS3新增伪类有那些？
05、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？
06、display有哪些值？说明他们的作用。
07、position的值relative和absolute定位原点是？
08、CSS3有哪些新特性？
09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
三、Java类的题目
01、介绍Java的基本数据类型。
02、说说写Java的基本规范？
03、Java原型，原型链？有什么特点？
04、Java有几种类型的值？(堆：原始数据类型和栈：引用数据类型)，你能画一下他们的内存图吗？
05、Java如何实现继承？
06、Java创建对象的几种方式？
07、Java作用链域？
08、谈谈This对象的理解。
09、eval是做什么的？
10、什么是window对象？什么是document对象？
OK，一小时到了，这个时间可不算短了，那么这些面试题你答出了几道呢？你写的答案正确了吗？现在你可以去翻看答案了。
如果你答出了绝大多数的或者是全部的题，并且答案也正确了，那么恭喜你……
你这时心里是不是有点小窃喜，认为自己有能力拿高薪了？虽然我也很想这么告诉你，但事实上这只能表明你的基础扎实，毕竟这只是一些非常基础的面试题。骚年~继续努力吧！
如果你只答出了小部分或者答出了大部分题但答案不正确，那么我只想说：“骚年，你的水平还差的远呢。”连这么基础的题你都打不出来，还想拿高薪？回去再练一段时间吧！
扎实的基础是你拿高薪的重要武器，如果你连基础都不扎实，那么想要攻克“高薪”这个厚实的堡垒，那只是痴人说梦罢了。
1.前端框架类问题，问你会不会用vue react啊
2.语言类，问你一些JavaScript语言的问题
3.项目经验，让你讲讲做过的项目，遇到的问题和解决之道
‘肆’ 高级前端面试题目大全(三)
解析： 第 41题
比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现
解析： 第 42 题
解析： 第 43 题
1、客户端使用https的url访问web服务器,要求与服务器建立ssl连接
2、web服务器收到客户端请求后, 会将网站的证书(包含公钥)传送一份给客户端
3、客户端收到网站证书后会检查证书的颁发机构以及过期时间, 如果没有问题就随机产生一个秘钥
4、客户端利用公钥将会话秘钥加密, 并传送给服务端, 服务端利用自己的私钥解密出会话秘钥
5、之后服务器与客户端使用秘钥加密传输
解析： 第 44 题
解析： 第 45 题
1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1
2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1
3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印
4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined
解析： 第 46 题
解析： 第 47 题
1、Function.prototype.apply和Function.prototype.call 的作用是一样的，区别在于传入参数的不同；
2、第一个参数都是，指定函数体内this的指向；
3、第二个参数开始不同，apply是传入带下标的集合，数组或者类数组，apply把它传给函数作为参数，call从第二个开始传入的参数是不固定的，都会传给函数作为参数。
4、call比apply的性能要好，平常可以多用call, call传入参数的格式正是内部所需要的格式
解析： 第 48 题
解析： 第 49 题
解析： 第 50 题
为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？
解析： 第 51 题
解析： 第 52 题
解析： 第 53 题
解析： 第 54 题
如下：{1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]。
解析： 第 55 题
解析： 第 56 题
解析： 第 57 题
解析： 第 58 题
解析： 第 59 题
解析： 第 60 题
解析： 第 61 题
解析： 第 62 题
解析： 第 63 题
解析： 第 64 题
解析： 第 65 题
解析： 第 66 题
随机生成一个长度为 10 的整数类型的数组，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20] ，将其排列成一个新数组，要求新数组形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]] 。
解析： 第 67 题
解析： 第 68 题
解析： 第 69 题
解析： 第 70 题
解析： 第 71 题
[图片上传失败...(image-2eeb30-1575446538468)]
<figcaption></figcaption>
解析： 第 72 题
解析： 第 73 题
解析： 第 74 题
解析： 第 75 题
解析： 第 76 题
示例 1：
示例 2：
解析： 第 77 题
解析： 第 78 题
解析： 第 79 题
解析： 第 80 题
解析： 第 81 题
解析： 第 82 题
解析： 第 83 题
习题： https://blog.csdn.net/qq_37024887/article/details/106784068
解析： 第 84 题
解析： 第 85 题
给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。
你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。
示例：
解析： 第 86 题
解析： 第 87 题
以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下：
解析： 第 88 题
解析： 第 89 题
[图片上传失败...(image-aea64e-1575446538470)]
解析： 第 90 题
解析： 第 91 题
[图片上传失败...(image-21d53f-1575446538470)]
解析： 第 92 题
示例 1：
中位数是 2.0
示例 2：
中位数是(2 + 3) / 2 = 2.5
解析： 第 93 题
解析： 第 94 题
解析： 第 95 题
解析： 第 96 题
解析： 第 97 题
解析： 第 98 题
解析： 第 99 题
解析：[第 100 题]( https://github.com/Advanced-Frontend/Daily-
‘伍’ 前端经典面试题(60道前端面试题包含JS、CSS、React、浏览器等)
防抖
节流
误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。
实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:
补充补充一个get和post在缓存方面的区别：
可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Mole、
vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中（建议先了解一下diff算法过程）。在交叉对比中，当新节点跟旧节点 头尾交叉对比 没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。vue部分源码如下：
创建map函数
遍历寻找
在React中， 如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state 。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。
**原因：**在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是， 有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state 。
虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。
具体实现步骤如下：
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。
结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能：displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少
联系：它们都能让元素不可见
常用的一般为三种 .clearfix , clear:both , overflow:hidden ;
比较好是 .clearfix ,伪元素万金油版本,后两者有局限性.
clear:both :若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷
overflow:hidden :这种若是用在同个容器内,可以形成 BFC 避免浮动造成的元素塌陷
概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
缺点：
block 元素特点：
1.处于常规流中时，如果 width 没有设置，会自动填充满父容器 2.可以应用 margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略 vertical-align
inline 元素特点
1.水平方向上根据 direction 依次布局
2.不会在元素前后进行换行
3.受 white-space 控制
4. margin/padding 在竖直方向上无效，水平方向上有效
5. width/height 属性对非替换行内元素无效，宽度由元素内容决定
6.非替换行内元素的行框高由 line-height 确定，替换行内元素的行框高由 height , margin , padding , border 决定 7.浮动或绝对定位时会转换为 block 8. vertical-align 属性生效
GIF :
JPEG ：
PNG ：
七种数据类型
(ES6之前)其中5种为基本类型: string , number , boolean , null , undefined ,
ES6出来的 Symbol 也是原始数据类型 ，表示独一无二的值
Object 为引用类型(范围挺大),也包括数组、函数,
输出结果是：
工厂模式
简单的工厂模式可以理解为解决多个相似的问题;
单例模式
只能被实例化(构造函数给实例添加属性与方法)一次
沙箱模式
将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值
1.字面量
2.Object构造函数创建
3.使用工厂模式创建对象
4.使用构造函数创建对象
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。
addEventListener ： addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
IE只支持事件冒泡 。
获取一个对象的原型，在chrome中可以通过__proto__的形式，或者在ES6中可以通过Object.getPrototypeOf的形式。
那么Function.proto是什么么？也就是说Function由什么对象继承而来，我们来做如下判别。
我们发现Function的原型也是Function。
我们用图可以来明确这个关系：
这里来举个栗子，以 Object 为例，我们常用的 Object 便是一个构造函数，因此我们可以通过它构建实例。
则此时， 实例为instance , 构造函数为Object ，我们知道，构造函数拥有一个 prototype 的属性指向原型，因此原型为:
这里我们可以来看出三者的关系:
在 JS 中，继承通常指的便是 原型链继承 ，也就是通过指定原型，并可以通过原型链继承原型上的属性或者方法。
在函数式编程中，函数是一等公民。那么函数柯里化是怎样的呢？
函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。
函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。
在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数 预置通用参数 ，供多次重复调用。
call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。
除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。
bind 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 bind 实现柯里化。
如何实现一个 bind 函数
对于实现以下几个函数，可以从几个方面思考
如何实现一个call函数
如何实现一个apply函数
箭头函数其实是没有 this 的，这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this 。在这个例子中，因为调用 a 符合前面代码中的第一个情况，所以 this 是 window 。并且 this 一旦绑定了上下文，就不会被任何代码改变。
关于 let 的是否存在变量提升，我们何以用下面的例子来验证：
let 变量如果不存在变量提升， console.log(name) 就会输出 ConardLi ，结果却抛出了 ReferenceError ，那么这很好的说明了， let 也存在变量提升，但是它存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。
变量的赋值可以分为三个阶段：
关于 let 、 var 和 function ：
依次输出：undefined -> 10 -> 20
答案: D
colorChange 方法是静态的。静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级。由于 freddie 是一个子级对象，函数不会传递，所以在 freddie 实例上不存在 freddie 方法：抛出 TypeError 。
1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined
undefined {n:2}
首先，a和b同时引用了{n:2}对象，接着执行到a.x = a = {n：2}语句，尽管赋值是从右到左的没错，但是.的优先级比=要高，所以这里首先执行a.x，相当于为a（或者b）所指向的{n:1}对象新增了一个属性x，即此时对象将变为{n:1;x:undefined}。之后按正常情况，从右到左进行赋值，此时执行a ={n:2}的时候，a的引用改变，指向了新对象{n：2},而b依然指向的是旧对象。之后执行a.x = {n：2}的时候，并不会重新解析一遍a，而是沿用最初解析a.x时候的a，也即旧对象，故此时旧对象的x的值为{n：2}，旧对象为 {n:1;x:{n：2}}，它被b引用着。后面输出a.x的时候，又要解析a了，此时的a是指向新对象的a，而这个新对象是没有x属性的，故访问时输出undefined；而访问b.x的时候，将输出旧对象的x的值，即{n:2}。
在比较相等性，原始类型通过它们的值进行比较，而对象通过它们的引用进行比较。 JavaScript 检查对象是否具有对内存中相同位置的引用。
我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置，所以它们的引用是不同的。
这就是为什么 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。
所有对象键（不包括 Symbols ）都会被存储为字符串，即使你没有给定字符串类型的键。这就是为什么 obj.hasOwnProperty（Ƈ'） 也返回 true 。
上面的说法不适用于 Set 。在我们的 Set 中没有 “1” ： set.has（Ƈ'） 返回 false 。它有数字类型 1 ， set.has（1） 返回 true 。
这题考察的是对象的键名的转换。
catch 块接收参数 x 。当我们传递参数时，这与变量的 x 不同。这个变量 x 是属于 catch 作用域的。
之后，我们将这个块级作用域的变量设置为 1 ，并设置变量 y 的值。现在，我们打印块级作用域的变量 x ，它等于 1 。
在 catch 块之外， x 仍然是 undefined ，而 y 是 2 。当我们想在 catch 块之外的 console.log(x) 时，它返回 undefined ，而 y 返回 2 。
‘陆’ Web前端企业面试题
答：
一、display和visibility的相同与不同点
1、相同点：display和visibility都有讲元素隐藏的意思
2、不同点：display是元素隐藏，隐藏的元素不占文档流
而visibility隐藏的元素仍然占文档流
二、display和visibility的属性值
1、display
2、visibility
答：
在开发过程中经常需要循环遍历数组或者对象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他们的异同点
for循环
其实除了这三种方法以外还有一种最原始的遍历，自Javascript诞生起就一直用的 就是for循环，它用来遍历数组
for循环中可以使用return、break等来中断循环
结果：
forEach
对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。
输出结果：
for…in
循环遍历的值都是数据结构的键值
总结一句: for in也可以循环数组但是特别适合遍历对象
结果：
for…of
它是ES6中新增加的语法，用来循环获取一对键值对中的值
循环一个数组
循环一个普通对象（报错）
答：
px：像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的 。--即分辨率不同的机型当前对应的距离可能发生变化。(1Inches=xPx)。
所以相对于同一机型来说是一个绝对的长度单位。
em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸 。
以其父级元素为基准来变化长度。所以其算法不是一个固定的值。
rem：是CSS3新增的一个相对单位（root em，根em） 。
那么其好用在用可以直接设置HTML的font-size，然后在其子类都是以这个大小为基准变化的值。
在移动设备上，我们常常设置
此方式的目的是为了将当前屏幕(PC)分辨率的px转化成手机端的px，让px在手机上能够兼容此方式。
因此，此时看见的12px与PC端的12px无异。但是，如果不写着个meta的话，那么，浏览器会一直以PC的视图来决定手机端的px的大小，让视图看起来变小了很多。
那么，响应式页面则经常配合媒体查询media 来设置不同分辨率下手机的各种不同的配置机构，然后根据父级来变化所有的相对长度。
基础篇
1.shift
// 删除原数组的第一项，并返回删除元素的值，如果数组为空则返回undefined
2.unshift
// 将参数添加到原数组开头，并返回数组的长度
//注：此方法在ie6.0下
// 测试的返回值始终为undefined，在firefox下测试的返回值为7，所以此方法不可靠
// 一般需要用返回值时可用splice代替
3.pop
// 删除原数组的最后一项，并返回删除元素的值；如果数组为空则返回undefined
4.push
// 将参数添加到原数组末尾，并返回数组的长度
5.concat
// 返回一个新数组，是将参数添加到原数组中构成的
6.splice
7.reverse
8.sort(orderfunction)
9.slice(start,end)
10.join(separator)
11.indexOf
12.lastIndexOf
13. Array.isArray()
14. Array.toString()
进阶篇
1.forEach
是最为常用的情景，它至于遍历，可以在获取当前数据项的前提下，对数据进行修改。它没有返回值。理解起来也是最容易的。
2.map
map的本意就是映射，也就是将一个值从一种形式映射到另一种形式，比如将key映射到value。它的每一次遍历都会有一个返回值。这些返回值组合成最终的结果数组。事实就是如此
forEach和map对比
相同点
1）都是循环遍历数组中的每一项；
2）forEach()和map()匿名函数的参数相同，参数分别是item（当前每一项）、index（索引值）、arr（原数组）；
3）this都是指向调用方法的数组；
4) 只能遍历数组；
不相同点
1）map()创建了新数组，不改变原数组；forEach()可以改变原数组。
2）遇到空缺的时候map()虽然会跳过，但保留空缺；forEach()遍历时跳过空缺，不保留空缺。
3）map()按照原始数组元素顺序依次处理元素；forEach()遍历数组的每个元素，将元素传给回调函数。
3.filter
它致力于从已有的数组中筛选出符合一定条件的数据项，最后的返回值是所有符合条件的数据项构成的数组。它不会修改原来的数组。记住，它的立足点就是筛选。也仅仅是筛选。还有一点需要注意：每一次遍历都会有一个返回值，它的类型是布尔类型。返回值只有是true，当前遍历项才会被筛选中。不要试图在filter中去修改原始数组。
理解: 就是在一堆数据里面去筛选你需要的数据 或者 剔除你不需要的数据
4.find()
返回通过测试的数组的第一个元素的值,
理解:假如你去一个一群人的地方去找人 你说我找xxb 他要是在那里就找到 不在那里就是undefined
在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。
语法
array.find(function(value, index, arr),thisValue)
value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值
返回值：返回符合测试条件的第一个数组元素的值，如果没有符合条件的则返回undefined。
扩展: findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。自己try吧
5.every
理解: 这个就像 上课了 老师说 昨天布置的作业 只要有一个人没有写完 今天就不讲课 然后挨个检查 当检查到有一个没有写完的时候 就不检查了 返回 不讲课了(false)
6.some
理解: 相当于在一个数组里面找你想要的那个数 找到了 就返回true 找不到就返回false
7.rece
它这个方法是接收一个函数作为累加器,将数组中的值(从左向右)开始合并,最总为一个值 然后返回出来,callback
他可以传四个参数:
1,previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue)
2,currentValue:数组中当前被处理的元素
3,index:不啰嗦,自己顾名思义去吧
4,array:返回调用rece的数组
彩蛋: 这里附上前几天某某人比较喜欢的切割字符串的方法
substring() 和 substr()
相同点： 如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。
不同点： 第二个参数
substr(startIndex, lenth) // 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；
substring(startIndex, endIndex) // 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串,‘含头不含尾'）。
1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。
首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
这话的意思我觉得重点在于说挂架阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。
所以，一般creadted钩子函数主要是用来初始化数据。
2：mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下：
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。下面看实例
下面是结果
nihao
取到了值，这说明这时候vue模板已经渲染完毕。因此，Dom操作一般是在mounted钩子函数中进行的
computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。
总结：
通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
methods:{}中的方法都需要主动去触发，比如点击click之类的
而created(){}、mounted(){}、里面的代码都是自动去执行的，即vue生命周期到了哪一步就直接去执行对应钩子函数里面的代码了，无需手动去执行
created中主要放初始化获取数据之类，mounted()中挂载到具体的DOM节点
computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。
mounted 是生命周期钩子，vue的生命周期中一个实例的mounted只会运行一次。mounted在vue的渲染模板挂载到$el元素上才会调用，很显然你export的时候el都么有自然不会运行mounted钩子函数了。
所有的方法都应该在methods里定义，然后在created或者mounted里 使用this调用方法，用这种方式实现初始化
6、Vue中组件之间的传参方式有哪些方式？
Vue 组件传参的八种方式总结
Vue 组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的
一、props 传参
子组件定义 props 有三种方式:
// 第一种数组方式
// 第二种对象方式
// 第三种对象嵌套对象方式
第三种对象默认支持 4 种属性，并且都是非必填的。可以随意使用
父组件传参的俩种方式
第一种静态属性传参
注意：
1、在不定义 props 类型的情况下 props 接受到的均为 String。
2、当 props 属性指定为 Boolean 时，并且只有属性 key 没有值 value 时接受到的是 true
第二种动态属性传参
注意：
1、需要区分非简写形式传入的值是对象，则会对应 props 中多个值
2、会保留传入值的类型
3、如果是表达式则获取到的是表达式的计算结果
二、attrs 和listeners
$attrs
$attrs 会获取到 props 中未定义的属性（class 和 style 属性除外）,支持响应式。常用的场景有俩种：
组件嵌套组件时可以使用 $attrs 来支持过多的属性支持。比如 elementUI 的 table 组件。支持的属性十几个，而平常封装的时候用的最多的也就一俩个。
属性默认是添加在父组件上的，有时候想把多余的属性添加在子组件上（可以结合 inheritAttrs: false 属性，让父属性不接受多余的属性）
$listeners 定义的事件都在子组件的根元素上，有时候想加到其他元素上。就可以使用 $listerners。它包含了父组件中的事件监听器(除了带有 .native 修饰符的监听器)
三、$emit 通知
这里有一道考题: for 循环的时候如何拿到子组件的传值和 for 中循环的值
答案有俩种，一是 $event, 二是 闭包。只是需要注意 $event 只能获取到第一个值
四、v-model
这个其实是一种通过 emit，on 的组合方式。优点再于同步值方便,写法优雅。下面三种写法其实是一个意思
五、插槽
六、$refs, $root, $parent, $children
$root 获取根组件
$parent 获取父组件
$children 获取子组件(所有的子组件，不保证顺序)
$refs 组件获取组件实例，元素获取元素
七、project / inject
注意：注入的值是非响应的
八、Vuex
这个相当于单独维护的一组数据，就不过多的说了。
watch，computed和methods的关系
1.watch和computed都是以Vue的依赖追踪机制为基础的 ，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数
watch和computed各自处理的数据关系场景不同
1. watch 擅长处理的场景： 一个数据影响多个数据
2. computed 擅长处理的场景： 一个数据受多个数据影响
watch用法 监听下记haiZeiTuan_Name的值，会改变其他所有的值
结果：this.suoLong会变为 '橡胶海贼团索隆',以此类推
computed用法 监听下记firstName，secName，thirdName的值，会改变luFei_Name的值
methods和computed的区别例子
注意两次点击computed返回的时间是相同的！！
1.两次点击methods返回的时间是不同的
2.注意两次点击computed返回的时间是相同的
【注意】为什么两次点击computed返回的时间是相同的呢？new Date()不是依赖型数据 （不是放在data等对象下的实例数据） ，所以computed只提供了缓存的值，而没有重新计算
只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件 ,computed才会重新计算。
参考：http://www.cnblogs.com/penghuwan/p/7194133.html
答：https://codecat.blog.csdn.net/article/details/100031285
1、Promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的
2、async await
async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。
两者的主要用法、语法就不赘述了，感兴趣的同学可以自行查阅 es6中文文档
两者的区别
1、Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。
2、async await与Promise一样，是非阻塞的。
3、async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。
简单来看，这两者除了语法糖不一样外，他们解决的问题、达到的效果是大同小异的，我们可以在不同的应用场景，根据自己的喜好来选择使用。
‘柒’ WEB前端面试题
第二章 面试题基础篇
2.1 HTML面试题
面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
面试题：页面导入样式时，使用link和@import有什么区别？
面试题：title与h1的区别、b与strong的区别、i与em的区别？
面试题：img标签的title和alt有什么区别？
面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？
2.2 CSS面试题
面试题：css背景纹路
面试题：介绍一下CSS的盒子模型
面试题：CSS选择符有哪些？哪些属性可以继承？
面试题：CSS优先级算法如何计算？
面试题：用CSS画一个三角形
面试题：一个盒子不给宽度和高度如何水平垂直居中？
面试题：display有哪些值？说明他们的作用。
面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？
面试题：清除浮动有哪些方式？
面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？
面试题：写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。
面试题：什么是CSS reset？
面试题：css sprite是什么,有什么优缺点
面试题：display: none;与visibility: hidden;的区别
面试题：position有哪些值?有什么作用? 【特别多公司问】
面试题：line-height和height有什么区别？
面试题：opacity 和 rgba区别
2.3 JavaScript基础面试题
面试题：延迟加载JS有哪些方式？
面试题：JS数据类型有哪些？
面试题：null和undefined的区别
面试题：JS数据类型考题
面试题：==和===有什么不同
面试题：JS微任务和宏任务
面试题：JS作用域考题
面试题：JS对象考题
面试题：JS作用域+this指向+原型 考题
面试题：JS判断变量是不是数组，你能写出哪些方法？
面试题：slice是干嘛的、splice是否会改变原数组
面试题：JS数组去重
面试题：找出多维数组最大值
面试题：给字符串新增方法实现功能
面试题：找出字符串出现最多次数的字符以及次数
2.4 真正移动端 —— H5/C3面试题
面试题：什么是语义化标签
面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
面试题：如何关闭iOS键盘首字母自动大写
面试题：怎么让Chrome支持小于12px 的文字？
面试题：rem和em有什么样区别
面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
面试题：webkit表单输入框placeholder的颜色值能改变吗？
面试题：禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
面试题：禁止ios和android用户选中文字
面试题：自适应 [淘宝无线适配]
面试题：响应式
第三章 面试题进阶篇
3.1 JavaScript进阶面试题
面试题：new操作符具体做了什么
面试题：闭包 【必须会】
面试题：原型链 【必须会】
面试题： JS继承有哪些方式
面试题：说一下call、apply、bind区别
面试题：sort背后原理是什么？
面试题：深拷贝和浅拷贝
面试题：localstorage、sessionstorage、cookie的区别
3.2 ES6面试题
面试题：var、let、const区别
面试题：作用域考题
面试题：将下列对象进行合并
面试题：箭头函数和普通函数有什么区别？
面试题：Promise有几种状态
面试题：find和filter的区别 【大厂】
面试题：some和every的区别 【大厂】
3.3 webpack面试题
面试题：webpack插件
3.4 Git面试题
面试题：git常用命令
面试题：解决冲突
面试题：GitFlow
第四章 面试题框架篇
4.1 区分初中高级的 —— Vue面试题
面试题：Vue2.x 生命周期有哪些？
1.系统自带八个
2.当一旦进入到某个组件会执行哪些生命周期
3.$el和$data在哪个阶段有
4.如果使用keep-alive会多俩个生命周期
5.如果加入keep-alive第一次进入组件会执行哪些生命周期
6.如果加入keep-alive第二次或者第N进入该组件会执行哪些生命周期
面试题：谈谈你对keep-alive的了解
面试题：v-if和v-show区别
面试题：v-if和v-for优先级 2.x
面试题：ref是什么？
面试题：nextTick是什么？
面试题：Vue中如何做样式穿透
面试题：scoped原理
面试题：Vuex是单向数据流还是双向数据流？
面试题：讲一下MVVM
面试题：双向绑定原理
面试题：什么是虚拟DOM
面试题：key是干什么？
面试题：diff算法
面试题：Vue组件传值
面试题：props和data优先级谁高？
面试题：computed、methods、watch有什么区别？
面试题：Vuex
面试题：Vue路由
面试题：Vue项目打包后出现空白页
4.2 微信小程序面试题
面试题：如何自定义头部？
面试题：如何自定义底部？
4.3 uni-app面试题
面试题：生命周期
面试题：条件编译
第五章 面试题性能优化篇