1，闭包：
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
闭包有三个特性:
1：函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
内存泄漏解决方法：
让内部函数变成垃圾对象，赋值为null，及时释放，让浏览器回收闭包。
2，原型链：
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实列都包含一个指向原型对象的指针，假如让一个原型对象等于另一个类型的实列，那么此时原型链对象将包含一个指向另一个原型的指针，相应的，另一个原型中也包含一个指向另一个构造函数的指针，假如另一个原型又是另一个类型的实列，那么上述关系依然成立，如此层层递进，就构成了实列与原型的链条俗称原型链
继承的方式：原型链继承，构造函数继承，组合继承，原型式继承，寄生式继承，寄生组合式继承
3，作用域链 ：
在一个函数内部声明另一个函数时，就会出现函数嵌套的效果。当函数嵌套时，内层函数只能在外层函数作用域内执行，在内层函数执行的过程中，若需要引入某个变量，首先会在当前作用域中寻找，若未找到，则继续向上一层级的作用域中寻找，直到全局作用域。我们称这种链式的查询关系为作用域链。
4，变量类型 ：
整型，浮点型，字符型，字符串常量，布尔型，强制类型转换，符号常量和const常量，运算符
5，JS执行顺序：
- 先同步后异步。
- 异步中任务的执行顺序，先微任务microtask队列，在宏任务macrotask队列。
- 调用Promise中的resilve,reject属于微任务队列，setTimeout属于宏任务队列。
注以上队列，先进先出，
微任务包括：process，nextTick，promise，MutationObserver。
宏任务包括：script，setTimeout，setInterval，setImmediate，I/O，Ul rendering。
6，computed计算属性和watch区别以及各自的使用
1、功能：computed是计算属性；watch是监听一个值的变化执行对应的回调
2、是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调
3、是否调用return：computed必须有；watch可以没有
4、使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框
5、是否支持异步：computed函数不能有异步；watch可以
7，你如何理解diff算法
diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。简单的说：diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。
diff算法的本质是找出两个对象之间的差异，目的是尽可能做到节点复用
8，虚拟DOM
1.什么是虚拟DOM
用一个简单的对象去代替复杂的DOM对象，存储了对应DOM的一些重要参数，在改变DOM之前，会先比较相应虚拟DOM的数据，如果需要改变，才会将改变应用到真实DOM上
2.虚拟DOM的作用是什么
兼容性好。因为Vnode本质是JS对象，所以不管Node还是浏览器环境，都可以操作；
减少了对DOM的操作。页面中的数据和状态变化，都通过Vnode对比，只需要在比对完之后更新DOM，不需要频繁操作，提高了页面性能；
3.虚拟DOM和真是DOM的区别
虚拟DOM不会进行回流和重绘；
真实DOM在频繁操作时引发的回流重绘导致性能很低；
虚拟DOM频繁修改，然后一次性对比差异并修改真实DOM，最后进行依次回流重绘，减少了真实DOM中多次回流重绘引起的性能损耗；
虚拟DOM有效降低大面积的重绘与排版，因为是和真实DOM对比，更新差异部分，所以只渲染局部；
9请你谈谈Cookie的弊端
cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。
每个特定的域名下最多生成20个cooki，否则会被截掉
IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。
10，浏览器本地存储
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的,
11，web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据 而生
12，cookie 和session 的区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
13:，display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，
就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
14，CSS中 link 和@import 的区别是？
1，link属于HTML标签，而@import是CSS提供的;
2，页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3，import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
4，link方式的样式的权重高于@import的权重.
15，position:absolute和float属性的异同
A：共同点：
对内联元素设置`float`和`absolute`属性，可以让元素脱离文档流，并且可以设置其宽高。
B：不同点：
float仍会占据位置，position会覆盖文档流中的其他元素。
16，CSS 选择符有哪些？
id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
通配符选择器（ * ）
伪类选择器（a: hover, li:nth-child）
17，async 和 await
异步解决阻塞
带来了回到地狱的问题
三个方案：promiss,Generator函数，async，await三个异步解决了回调地狱的问题。
Promiss,Generator怎么解决的？
Generator函数是ES6提供的一种异步编程解决方案，这个方法比较抽象，有效控制异步流程。
18，position的值， relative和absolute分别是相对于谁进行定位的？
absolute 生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
19，CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是:selection.
媒体查询，多栏布局
border-image
20，说说你对语义化的理解？
1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
21，Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
1、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
2、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
3、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
22，你知道多少种Doctype文档类型？
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
23，HTML与XHTML——二者有什么区别
1.所有的标记都必须要有一个相应的结束标记
2.所有标签的元素和属性的名字都必须使用小写
3.所有的XML标记都必须合理嵌套
4.所有的属性必须用引号""括起来
6.给所有属性赋一个值
7.不要在注释内容中使“--”
24，常见兼容性问题？
png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
#box{ float:left; width:10px; margin:0 0 0 100px;}
25，html5有哪些新特性、如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer ,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，date、time、url、search
新的技术webworker, websocket, Geolocation
支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何区分：DOCTYPE声明\新增的结构元素\功能元素
26，线程与进程的区别
一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，
27，你如何对网站的文件和资源进行优化
期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用 CDN 托管
缓存的使用（多个域名来提供缓存）
其他
28，请说出三种减少页面加载时间的方法。
1.优化图片
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS（压缩合并css，如margin-top,margin-left...)
4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
29，你都使用哪些工具来测试代码的性能？
Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo
30，null和undefined的区别？
null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。
当声明的变量还未被初始化时，变量的默认值为undefined。
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。
31，Vue和react的区别
Vue的核心思想是尽可能的降低前端开发的门槛，是一个灵活易用的渐进式双向绑定的MVVM框架。
React的核心思想是声明式渲染和组件化、单向数据流，React既不属于MVC也不属于MVVM架构。
32，单行文本溢 和 多行文本溢出
单行
.text {
white-space: nowrap;
text-overflow: ellipsis; [ɪˈlɪpsɪs]
overflow: hidden;
多行
.text {
display: -webkit-box;
-webkit-box-orient: vertical; /* 表示盒子对象的子元素的排列方式 */
-webkit-line-clamp: 3; /* 限制文本的行数，表示文本第多少行省略 */
text-overflow: ellipsis;/* 打点展示 */
overflow: hidden;/*超出部分进行隐藏*/
}
}
33， this的指向主要有下⾯⼏种：
1，this出现在全局函数中,永远指向window
2、this出现在严格模式中永远不会指向window
3、当某个函数为对象的⼀个属性时，在这个函数内部this指向这个对象
4、this出现在构造函数中，指向构造函数新创建的对象
5、当⼀个元素被绑定事件处理函数时，this指向被点击的这个元素
6、this出现在箭头函数中时，this和⽗级作⽤域的this指向相同
34，发布订阅模式
发布—订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。
35，new操作符具体干了什么呢
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
36，js延迟加载的方式有哪些
defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js
37，如何解决跨域问题?
jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上设置代理页面
jsonp的原理是动态插入script标签
38，documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
39，call() 和 .apply() 的区别和作用？
call：调用一个对象的一个方法，用另一个对象替换当前对象。
apply：调用一个对象的一个方法，用另一个对象替换当前对象。
不同点：入参不同。apply只能两个，新的obj和一个数组array。call可以多个，
40, 理解和使用Promise.all和Promise.race
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
使用场景：发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。
Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
41，操作系统中堆和栈的区别
栈：由编译器自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈，栈使用的是一级缓存， 他们通常都是被调用时处于存储空间中，调用完毕立即释放
堆：一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表。堆则是存放在二级缓存中，生命周期由虚拟机的垃圾回收算法来决定。所以调用这些对象的速度要相对来得低一些
堆（数据结构）：堆可以被看成是一棵树，如：堆排序
栈（数据结构）：一种后进先出的数据结构
42，keep-alive的使用及详解
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。
include属性：字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude属性： 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
43，ES6中有哪些新特性
1）let const的引入
let声明变量和const声明常量，两个都有块级作用域
ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
2）箭头函数
ES6中的函数定义不再使用关键字fun ction()，而是利用了()=>来进行定义
3）模板字符串
模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串
4）解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
5）for of循环
for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串
6）import、export导入导出
ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用
44，Promise回顾
首先来回顾一下Promise是什么。
Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
Promise的实例有三个状态:
Pending（进行中）
Resolved（已完成）
Rejected（已拒绝）
特点：
将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。流程更加清晰，代码更加优雅。
Promise对象提供统一的接口，使得控制异步操作更加容易。
缺点：
无法取消Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
Vue的优点
轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
说说你对SPA单页面的理解，它的优缺点分别是什么？
是什么
一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转
而页面的变化是利用路由机制实现 HTML 内容的变换，避免页面的重新加载。
优点
用户体验好，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
减少了不必要的跳转和重复渲染，这样相对减轻了服务器的压力
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理
缺点
初次加载耗时多
不能使用浏览器的前进后退功能
那删除的操作根本就不是选中哪个元素删除哪个元素，而是我们删除几个都是从最后往前删，前面的子组件一直被复用，父组件传过去的值会根据传过去的值变化而变化，但是data里的数据没有触发他们变化，还是会保持之前的数据，就和更新以后的数据不符。
Vue双向绑定原理
实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
v-mode实现原理
v-model只不过是一个语法糖而已,真正的实现靠的还是
v-bind:绑定响应式数据
触发oninput 事件并传递数据
Vue异步加载技术
1：vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。
2：component: resolve => require(['放入需要加载的路由地址'], resolve)
Flex的属性（6个）
flex-direction 交换主轴和交叉轴的位置
flex-wrap 是否换行
flex-flow 按赋值缩放
justify-content 主轴对齐方式
align-items 交叉轴对齐方式
align-content 多根轴对齐方式
如何利用webpack来优化前端性能？（提高性能和体验）
用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。
压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
提取公共代码。
移动端适配方式
方式一：@media + rem
@media媒体查询，可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
方式二：手机淘宝 flexible.js
flexible.js也是rem适配的，它是将设备分成10份，1rem等于1/10。
方式三：vw,vh进行适配
vw：viewport width(可视窗口宽度)1vw等于1%的设备宽度(设计稿宽度)
vh：viewport height(可视窗口高度)1vh等于1%的设备高度(设计稿高度)
vue和react的区别
共同点： 都是单向数据流，使用虚拟dom，支持跨平台。
不同点：
1. 指令解析不同，vue绑定使用v-on，react绑定事件使用合成事件;
2. 监听方式不同，vue使用object.defineProperty劫持数据，react使用render直接比较虚拟dom的变化。shouldComponentUpdate深比较，pureComponent浅比较。
3. vue使用v-module进行表单的双向绑定，react使用表单控件以及onchange事件进行双向绑定。
4. 组件之间的通讯方式不同。vue子向父$emit，父向子：props，跨组件使用发布订阅模式 react子向父：callback，父向子：props，跨组件：react.createContext/发布订阅模式/redux
5. vue文档比较友好，容易上手，很多封装的api可以直接使用，环境比较集中，vue vue-router vueX。react社区环境比较大，redux mobx react-router-dom 比较灵活，我们可以自己封装
监听数据变得实现原理不同。
6.Vue 通过 getter / setter 以及一些函数的劫持，能精确直到数据变化
React 默认是通过比较引用的方式（ diff ）进行的，如果不优化可能导致大量必要的 VDOM 的重新渲染
vue2与vue3的区别、
1. vue2和vue3双向数据绑定原理发生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。
vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x，使用proxy的优势如下
- defineProperty只能监听某个属性，不能对全对象监听
- 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
- 可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化
2. Vue3支持碎片(Fragments)就是说在组件可以拥有多个根节点。vue2可以拥有一个根节点
3. Composition API
Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）
旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。
扫一扫
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
