和大家分享一下面试中遇到的小知识点
实习萌新，欢迎纠错
1.变量
变量就是一个用来存储数据的容器 本质：变量是程序在内存中申请的一块用来存放内存的空间var 提升变量，把变量提升到作用域的最顶层，变量的赋值不会提升
2.内存分配
内存中的栈：存储的是简单数据类型，如字符串，数字，布尔值内存中的堆：存储的是复杂数据类型，如数组，对象
3.懒加载
a.什么是懒加载 懒加载是一种数据获取方法，它能够在用户滚动页面的时候自动获取更多的数据，而新得到的数据不会影响原有数据的显示，同时最大程度上的减少服务器端的资源耗用
b.为什么要用懒加载 能提升用户的体验 减少无效资源的加载，明显减少了服务器的压力和流量，也能减小浏览器的负担防止并发加载的资源过多会阻塞 js 的加载，影响网站的正常使用
c.懒加载的原理 先将页面上的图片 src 属性设置为空字符串，等图片进入用户的可视区域，再将图片的 src 属性设置为真实的路径，从而实现延迟加载
4.对象，原型，原型链和构造函数之间的关系
每创建一个函数，该函数都会自动带有一个 prototype 属性。该属性是一个指针，指向一个对象，该对象称之为原型对象(后期我们可以使用这个原型对象帮助我们在 js 中实现继承)。
原型对象上默认有一个属性 constructor,该属性也是一个指针，指向其相关联的构造函数。
通过调用构造函数产生的实例对象，都拥有一个内部属性，指向了原型对象。其实例对象能够访问原型对象上的所有属性和方法。
总结：三者的关系是，每个构造函数都有一个原型对象，原型对象上包含着一个指向构造函数的指针，而实例都包含着一个指向原型对象的内部指针。
通俗的说，实例可以通过内部指针访问到原型对象，原型对象可以通过constructor 找到构造函数。
显式原型，prototype，函数类型数据的属性，隐式原型，prop，当前对象的构造函数的原型对象原型链就是某个对象查找属性，自己和原型对象上都没有，就继续往原型对象的原型对象上查找，如果找不到，就继续往再上一层查找。整个过程就是顺着_prop_属性，往上查找。
5.改变 this 指向的三种方式
（只能在 function 函数内改变，箭头函数无法改变，因为这些方法是来自于prototype 对象上的，而箭头函数没有原型对象，所以不能改变this）
call:1.第一个参数是对象，后面的参数都是独立传入的 2.一旦使用就会立刻调用
apply:1.第一个参数是对象，后面的参数放在数组里 2.一旦使用就会立即调用函数
bind：1.第一个参数是对象，后面的参数可以是任意 2.不会立即调用函数，而是返回一个修改了 this 之后的新函数
各自的应用场景： call 经常做继承 apply 经常与数组有关 bind 不调用函数，但是可以改变 this 的指向，比如改变定时器内部this 的指向。
6.js 的简介
JavaScript 是一种客户端脚本语言（脚本语言是一种轻量级的编程语言），通常被直接嵌入 html 页面，有浏览器解释执行，JavaScript 是一种解释性的语言（就是，代码执行不进行预编译） JavaScript 语言中包含三个核心： 1.ECMAScript：记录了 js 的语法和基本对象 2.DOM：文档对象模型，处理网页内容的方法和接口3.BOM：浏览器对象模型，与浏览器交互的方法和对象
7.css 引入页面的三种方式：
行内式、内嵌式、外链式（link 标签的 href 属性）
8.js 引入页面的三种方式：
行间事件（主要用于事件）、页面 script 标签（可以放在 body 或者 head 中，或者同时存在两者之中）、外部引入（script 标签的 src 属性）
9..window.onload()
window.onload()方法用于在网页加载完毕后立刻执行的操作，即当HTML文档加载完毕后，立刻执行某个方法
为什么要使用 window.onload()? 因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树不完整，这样在调用一些JavaScript 代码时就可能出"undefined"错误
10.函数
a.回调函数 将一个函数作为另一个函数的参数，那么这个函数就是回调函数 b.变量与函数预解析 JavaScript 解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将 functino 定义的函数提前，并且将 var 定义的变量声明提前，并且将它赋值为 undefined c.arguments 对象 函数体内部自带一个 arguments 对象，这个对象是个数组，代表着所有的参数
11.定时器
定时器在 JavaScript 中的作用： 1.制作动画 2.异步操作 3.函数缓冲与节流
定时器类型及语法： 第一个参数可以是用括号括起来的一段代码，也可以是一个函数名，到了指定事件，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。第二个参数是millisec，表示延时或者重复执行的毫秒数
定时器： setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器
12.jsonp 跨域
jsonp 跨域只能解决 get 请求的跨域。在前端中，不管是script 的src 属性、img的 src 属性还是 a 标签的 href 属性，都不受同源策略的限制。jsonp 就是利用这一特性实现的跨域。 原生 jsonp 跨域实现方法： 1.创建 script 标签 2.设置标签的 src 属性 3.将 script 插入到文档中：document.body.appendChild()
13.浮动产生的原因和清除浮动的方式
a.原因：子元素使用了 css float 浮动属性，会使这个子元素脱离文档流，导致父级对象盒子不能被撑开，这样 css float 浮动就产生了；简单来说，浮动是因为使用了 float:left 或 float:right 或两者都有而产生了浮动（父级高度塌陷）
b.负作用：
1.背景不能显示：由于浮动产生，由于对父级设置了 css 背景颜色或css 背景图片，而父级不能被撑开，所以导致 css 背景不能显示
2.边框不能撑开： 如果父级设置了 css 边框属性，浮动产生后，父级不能被撑开，导致边框不能随内容而被撑开
3.margin padding 设置值不能正确显示
c.清除浮动的方法：
1.对父级设置合适的 css 高度
2.给父元素添加 overflow：hidden:让父级紧贴内容，这样既可紧贴其对象内内容
3.在子元素同级位置最后添加一个空标签，设置样式为clear:both（会导致页面中出现很多空白的 div）
4.给父级盒子添加 css .box:after { content: ''; clear: both; display: block; height: 0; visibility: hidden; } .box { zoom: 1 }
14.vue 的语法糖
a.什么是语法糖 指的是计算机语言中添加的一种语法，在不影响功能的情况下，添加某种简单的语法也能实现效果，这种语法对计算机没有影响，但是对程序员更方便，通常增加的语法糖增加程序的可读性，减少出错机会 使用语法糖可以简化代码，便于程序员开发 b.vue 中语法糖有哪些 1.v-model 2.v-bind 3.v-on
15.vue 数据双向绑定
vue 中使用 mvvm 的模式，Model 数据变化 View 视图自动渲染展示；View视图数据变化 Model 数据自动同步更新 原理：1.使用 Object.defineProperty 进行数据劫持，把data 对象，computed等所有属性进行数据劫持 2.使用观察者模式，完成发布订阅。 （1）模板里使用 data 对象属性的 dom 对象都订阅 （2）当 data 对象里的属性的值发生变化时，就会发布，发布时，就改变了dom里面的内容
16.ajax
ajax 默认遵循同源策略 通过 ajax 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
XML:可扩展标记语言 XML 被设计用来传输和存储数据 XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而XML 中没有预定义标签，全都是自定义标签
AJAX 的优点： 1.可以在无需刷新页面与服务器进行通信 2.允许你根据用户事件来更新部分页面内容 AJAX 的缺点： 1.没有浏览历史 2.存在跨域问题(同源) 3.SEO(搜索引擎优化)不友好
IE 缓存的解决方法： 在请求路径后加一个参数，获取到当前的时间戳，使浏览器知道两次请求不是同一个请求
17.JSON
JSON 指的是 JavaScript 对象表示法
JSON 是轻量级的文本数据交换格式
JSON.parse()：将字符串类型转换为 JavaScript 对象
JSON.stringify():将 JavaScript 对象转换为字符串
18.js 分支结构
if 语句、if else 语句、if else if 语句、三元表达式、switch
19.循环：
for、while、do...while（先执行一次循环体代码，再判断。所以do...while循环语句至少会执行一次循环体代码
20.html 标签
分为三部分：标签名称，标签内容，标签属性
21.箭头函数和普通函数的不同：
this 指向不同 不能用于构造函数 没有 arguments 对象 没有默认提升功能
22.localStorage 和 sessionStorage 的区别。
localStorage 是永久存储，sessionStorage 是暂时性存储，当浏览器窗口结束 时，其中的键值对会被清空 localStorage 不在不同的浏览器窗口中共享，localStorage 在所有同源的窗口中都是共享的
23.display 和 visibility 的区别
display:none 隐藏元素，文本布局不再保留原来的空间，就当其不存在
visibility:hidden 隐藏元素，文本布局仍然保留原来的空间
24.position 的 absolute 和 fixed 的区别
absolute 的根元素是可以设置的 fixed 的根元素是窗口
25.元素消失的方法：
display:none
visibility:hidden
z-index:-1 opacity(透明度):0
26.深拷贝和浅拷贝的区别
深拷贝对指针和内容都进行拷贝，拷贝后的指针指向不同的内存空间
浅拷贝对指针进行拷贝，拷贝后的指针指向相同的内存空间
27.什么是闭包？特性？
闭包就是能够读取其他函数内部变量的函数 封闭性：闭包内部的变量无法被外部访问 持久性：闭包不会销毁，闭包中的变量不会销毁，可能会造成内存泄漏
28.cookies 和 localStorage 与 sessionStorage 的区别
cookies 长度和数量有限，生命期有限，在服务器和浏览器间来回传递
localStorage 和 sessionStorage 只在浏览器中，存储大小限制比 cookies 大,localStorage 在本地保存，即使窗口关闭也存在，sessionStorage 仅在当前窗口有效
29.页面性能优化方法：
懒加载 合并资源 减少 http 请求 避免嵌套循环和死循环 减少 DOM 操作
30.ajax 步骤
1、创建 XML HttpRequest 对象，即创建一个异步调用对象。
2、创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法，URL 及验证信息
3、设置响应 HTTP 请求状态变化的函数。
4、发送 HTTP 请求。
5、获取异步调用返回的数据。
6、使用 JavaScript 和 DOM 实现局部刷新
31.常见的异步任务：
定时器
ajax
回调函数
promise
32.promise
promise 是异步编程的一种解决方案，用来封装异步操作并且可以获取其成功或失败的结果
promise 是一个对象或者构造函数，有三种状态，padding,fullfilled,和rejected，它的第一个参数 reslove 表示成功执行的函数，第二个参数rejected 表示失败 执行的函数。
33.前端事件流：
事件捕获 事件目标 事件冒泡
34.判断变量是数组还是对象？
typeof：数组和对象都会得到 object
instanceof：判断数组时用数组和对象都会返回 true, 判断对象时，用数组会返回 false，用对象会返回 true
Object.prototype.toString.call()可以精准判断
35.vue 生命周期
beforeCreate:Vue 实例进行初始化，此时实例的各个组件还没有完全初始化，因此不能访问 data、computed、watch、methods 的方法和数据，同时，Vue实例的挂载点也没有进行初始化
created:Vue 实例初始化完成，此时可以访问 data、computed、watch、methods 的方法和数据，但是依旧没有进行 Vue 实例的挂载点初始化
beforeMount：将实例绑定到模板并进行渲染，但并不会将实例挂载到页面上DOM 节点是虚拟的
mounted:将渲染好的模板绑定到页面上，此时，Vue 实例已完全创建好
beforeUpdate：数据变更时执行，在实例数据更改之前执行自定义逻辑或操作
Update：将 Vue 实例更新完成的数据重新渲染到内存中的虚拟DOM中，再讲虚拟 DOM 应用到页面上
beforeDestory：Vue 实例进入销毁阶段，此时实例上的data、methods、过滤器、指令等仍处于可用的状态，还没有真正执行销毁的过程（解除与页面DOM元素的绑定）
destoryed：实例被销毁（解除 Vue 实例与页面 DOM元素的绑定，但该Vue实例的对象、数据仍然可以使用）
36.router 的区别
router 是路由实例对象，包含路由的跳转方法、钩子函数等
37.vue 修饰符：
stop：阻止冒泡 prevent：阻止默认事件 once：只执行一次 self：只执行自己的事件
38.导航守卫： router.beforeEach(to,from,next)
39.v-if 和 v-show 的区别：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
40.html5 新增结构标签
header nav active aside footer
41.css 选择器有哪些？
id 选择器、类选择器、标签选择器、关系选择器（选择下边所有的兄弟：兄~弟；选择下一个兄弟：前一个+后一个）、属性选择器（[属性名]选择含有指定属性名的元素、[属性名=属性值]选择含有指定属性名和属性值的元素、[属性名^=属性值]选择指定属性值开头的元素、[属性名$=属性值]选择指定属性值结尾的元素、[属性名*=属性值]选择含有属性值的元素）、伪类选择器、通配符选择器
42.行内元素和块级元素？img 属于哪个？
行内元素怎么转换成块级元素？行内元素：在一行上，高度、行高、内外边距都不可以改变，，只能容纳其他行内元素和文本。img 是行内元素 块级元素：在新行上开始，高度、行高、内外边距都可以改变display:block
43.跨域请求
什么是跨域请求:从一个域名去请求另一个域名的资源
跨域请求的表现：请求不到数据
跨域请求获取不到数据的原因：浏览器不将数据给ajax 中的success
44.对 this 的理解
this 总是指向函数的调用者当使用 new 关键字，this 指向new出来的那个对象 在事件中，this 指向触发这个事件的对象
45.js 的同步异步?为什么会有同步异步？
因为 JavaScript 是单线程的 同步：渲染主线程执行任务，上一个任务执行完，才能继续执行下一个任务异步：渲染主线程把任务交给其他线程，当其他线程通知渲染主线程可以执行了，任务再重新进入渲染主线程
46.vue 传值：
父向子：prop 子向父：$emit
47.事件属性
window 窗口事件：
onload，在网页加载结束之后触发 onunload，在用户从网页离开时发生（点击跳转，页面重载，关闭浏览器窗口等）
form 表单事件： onblur，当元素失去焦点时触发 onchange，在元素的值被改变时触发 onfocus，当元素获得焦点时触发 onreset，当表单中的重置按钮被点击时触发 onselect，在元素中文本被选中后触发 onsubmit，在提交表单时触发
keyboard 键盘事件： onkeydown，在用户按下按键时触发 onkeypress，在用户按下按键后，按着按键时触发。（该属性不会对所有按键生效，不生效的有：alt，ctrl，shift，esc）
mouse 鼠标事件： onclick，当在元素上发生鼠标点击时触发 onblclick，当在元素上发生鼠标双击时触发 onmousedown，当元素上按下鼠标按钮时触发 onmousemove，当鼠标指针移动到元素上时触发 onmouseout，当元素指针移出元素时触发 onmouseup，当元素上释放鼠标按钮时触发。
Media 媒体事件： onabort，当退出时触发 onwaiting，当媒体已停止播放但打算继续播放时触发
48.margin 塌陷及合并问题
所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。 1.改变父级元素渲染规则，使其变为 BFC 元素(何为 BFC? BFC 简单理解就是，一块元素区域被赋予了某些样式特性，就会形成一个独立的区域，在此区域内的元素进行 margin，padding 等改变内部元素样式的操作，不会影响 BFC 区域外的其他元素) position: absolute; display: inline-block; float: left/right; overflow: hidden; 2.给外层元素加一个顶棚 border （给父元素设置边框）
49.简述 px、em、rem 的区别
1.px 是像素单位，可以用来设置屏幕宽高。
2.em 和 rem 都是相对长度单位，不同的是 em 是相对于当前元素设置的字体大小而言的，rem 是相对于根标签而言的，也就是相对于html 标签。
50.什么是媒体查询
什么是媒体查询 媒体查询（Media Query）是 CSS3 新语法。 使用@media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android 手机，平板等设备都用得到媒体查询
51. 什么是防抖和节流？
防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在n 秒内又触发了事件，则会重新计算函数执行时间。 节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率
52.new 的实现原理
new 的四个步骤 创建一个空对象→这个新对象继承原函数的原型→更改this 指向，为对象设置属性→返回新对象
1.创建一个空对象 var obj={}
2.这个新对象继承原构造函数的原型 obj.proto=Constructor.prototype
3.更改 this 指向，为对象设置属性 let result=Constructor.apply(obj,...args)
4.返回新对象 return result instanceof Object ? result : obj
53.web 单页应用的优缺点 web 单页应用是什么？
Web 单页应用就是指只有一个 Web 页面作为入口的应用，在浏览器中运行期间不会重新加载页面。也就是说浏览器一开始会加载它必需的thml、css 和Js，之后所有的交互操作都在一个页面上完成，这些都是由JavaScript 动态的加载合适的内容来响应用户的操作，所以 Web 单页应用会包含大量的js 代码，支持单个页面上与多个组件进行丰富的交互。
web 单页应用的好处 ：
相比传统网站而已，我们认为单页应用的好处主要有：
1、提供了更加吸引人的用户体验：具有桌面应用的即时性、网站的可移植性和可访问性。
2、单页应用的内容的改变不需要重新加载整个页面。
3、单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
4、单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
5、良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API 通用化，即同一套后端程序代码，不用修改就可以用于 Web 界面、手机、平板等多种客户端。
web 单页应用的缺点：
1、首次加载耗时比较多。
2、SEO 问题，不利于百度，360 等搜索引擎收录。
3、如有造成 Css 命名冲突。 解决办法：我们可以使用 Sass、LESS 和 Stylus 等 CSS 预处理器，在一定程度上可以解决该问题。
4、前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。
54. 什么是事件委托？
事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。
事件代理的原理是 DOM 元素的事件冒泡。
