1.计算最外层div高度是?
<div class="big1">
<div class="no1">a</div>
<div class="no2">b</div>
</div>
<style>
.no1{
margin: 10px;
height: 20px;
}
.no2{
margin: 10px;
height: 20px;
}
</style>
答案:最大div 50px
2.JS如何为一个元素绑定多个事件?
一、onclick()方式
<script>
window.onload = function(){
document.getElementById('btn').onclick = function () {
alert(1);
};
document.getElementById('btn').onclick = function () {
alert(2);
};
}
</script>
二、addEventListener()方法
<script>
window.onload = function(){
document.getElementById('btn').addEventListener('click', function(){
alert(1);
}, false);
document.getElementById('btn').addEventListener('click', function(){
alert(2);
}, false);
}
</script>
addEventListenert方法第一个参数填写事件名，第二个参数是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序。true代表捕获阶段处理， false代表冒泡阶段处理。第三个参数可以省略，大多数情况也不需要用到第三个参数，不写第三个参数默认false
3.给出一个对象获取到它的key和value
var obj = {
a: 1,
b: 2,
c: 3
}
// 遍历所有 key/value
for(let i in obj){
console.log(i) //a b c
console.log(obj[i]) //1 2 3
}
4.写出一个对象的解构赋值和数组的解构赋值
//对象结构赋值
let obj = {username: '妲己', age: 18, gender: 'girl'}
// 进行解构赋值
let {age, username, gender} = obj
console.log(age)
//数组的解构赋值
let arr = ["潘金莲", 26, "Sexy married women"]
let [name, age, MaritalStatus] = arr
console.log(MaritalStatus)
5.在vue中如何正确使用定时器?
答:在页面销毁前记得清除定时器 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
友情文档链接:blog.csdn.net/qq_36824777…
6.vue的两个核心
1.数据驱动
:在vue中，数据的改变会驱动视图的自动更新。传统的做法是需要手动改变DOM来使得视图更新，而vue只需要改变数据。
2.组件化
:组件化开发，优点很多，可以很好的降低数据之间的耦合度。将常用的代码封装成组件之后（vue组件封装方法），就能高度的复用，提高代码的可重用性。一个页面/模块可以由多个组件所组成。
7.DOCTYPE的作用?严格模式和混杂模式是什么?
(1).主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。
(2)
严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。比如：loose.dtd
严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面
混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。\
8.如何居中一个浮动元素?
方法一
.left{
floa: left;
width: 100px;
background-color: yellow;
}
.content{
width: 100px;
margin: 0 auto;
}
<div class="content">
<div class="left">left</div>
</div>
方法说明：
- 在要浮动元素的外面嵌套一个v标签，并且这个div标签的宽度设置为与要浮动元素的宽度相同，在设置一下margin值即可
方法二
.left{
float: left;
background-color: yellow;
position: relative;
left: -50%;
}
.content{
float: left;
position: relative;
left: 50%;
}
<div class="content">
<div class="left">left</div>
</div>
特点：
- 浮动元素以及外面嵌套的那一层都变成行内块元素了
方法三
定位 + 浮动 + margin
.left{
float: left;
width: 100px;
background-color: yellow;
position: relative;
left: 50%;
margin-left: -50px;
}
<div class="left">left</div>
特点：
- 不需要在浮动元素外面再次设置元素
- 需要设置宽度
9.页面内容超出范围解决方法
1.word-wrap和word-break，要给容器加上width
10.js如何判断undefined和null.
typeof 返回的是字符串 ，有六种类型：
“number”、”string”、”boolean”、”object”、”function”、”undefined”
判断是否为undefined
var example = undefined;
if (typeof(example) == "undefined")
{
console.log("undefined")
}
判断是否为null
var example = null;
if (!example && typeof(example)!='undefined' && example!=0)
{
console.log("null");
}
11.forEach map filter方法区别
1， forEach循环，循环数组中每一个元素并采取操作， 没有返回值， 可以不用知道数组长度
2，map函数，遍历数组每个元素，并回调操作，需要返回值，返回值组成新的数组，原数组不变
3，filter函数， 过滤通过条件的元素组成一个新数组， 原数组不变
4， some函数，遍历数组中是否有符合条件的元素，返回Boolean值
5，every函数， 遍历数组中是否每个元素都符合条件， 返回Boolean值
12.for in 和for of的区别
for in 是遍历数组对象的key
let arr = [1, 2, 3];
for (let i in arr) {
console.log(i)
}
let obj = {
name: 'wuxiaodi',
age: 18,
};
for (let i in obj) {
console.log(i)
}
输出结果
0 1 2
name age
for…of是遍历数组的value
let arr = [1, 2, 3];
for (let i of arr) {
console.log(i)
}
输出结果
1 2 3
13.说一下数组Array常用的方法.
14.Promise的异常捕获
1.第一种单独对 .then() 中指定处理异常函数（第一种一般用在，希望捕获异常然后不影响接下里Promise的执行）
我们只需要在 .then() 中添加两个function就好了，第二个是用来处理失败的情况。
2.第二种使用.catch来实现全部捕获（第二种一般用在，当一个Promise发生了异常，剩下的Promise都不在执行）
15.src和href的区别
href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
16.在响应式布局中需要注意哪些点
1、移动端字体放大问题:当可视部分的宽度小于480px也就是iPhone横屏时的宽时 iPhone会将过小的字号放大，我们可以通过-webkit-text-size-adjust属性进行调整 将main-nav中的字号设置为90%
2、弹性图片 :我们需要为图片设置max-width: 100%和height: auto，来实现其弹性化。对于IE，仍然需要一点
3、弹性视频 :对于视频，我们也需要做max-width: 100%的设置；但是Safari对embed的该属性支持不是很给力，所以我们以width: 100%来代替：
4、兼容问题:对于那些尚不支持media query的浏览器，我们要在页面中调用css3-mediaqueries.js
17.什么是行标签 空标签 块元素
行标签：
不独占一行，设置宽高无效，继承父级属性 、、、、、…
块标签：
独占一行，设置宽高有效，继承父级属性
、
、、、…
空元素：
、
、、、![]()
…
语义化标签：
标签本身能代表其含义
~
、、![]()
、、、、、、、
、…
非语义化标签：
标签本身不能代表其含义 、、、、
18.数组扁平化
-
reduce
-
toString & split
-
join & split
-
递归
-
扩展运算符
19.call和apply区别
call和apply改变了函数的this指向后便立即执行该函数,而bind则是返回一个新的函数，不执行。
apply 参数是数组
20.CSS中的伪类和伪元素有哪些
CSS伪类用于向某些选择器添加特殊的效果。CSS伪元素用于向某些选择器设置特殊效果。
伪类：
: active，将样式添加到被激活的元素。
:focus，将样式添加到被选中的元素。
:hover，当鼠标悬浮在元素上方是，向元素添加样式。
:link，将特殊的样式添加到未被访问过的链接。
:visited，将特殊的样式添加到被访问的链接。
:first-child，将特殊的样式添加到元素的第一个子元素。
:lang，允许创作者来定义指定的元素中使用的语言。
伪元素：
:first-letter，将特殊的样式添加到文本的首字母。
:first-line，将特殊的样式添加到文本的首行。
:before，在某元素之前插入某些内容。
:after，在某元素之后插入某些内容。
21.原型对象的constructor属性的作用
1.原型链继承
2.为类添加新的方法
3.解析构造函数的参数名
22.js原型对象和原型链理解
23.代码运算
for(var i = 0; i < 6; i++) {
setTimeout(function () {
console.log(i);
},1000);
}
6个6
25.浏览器内核有哪些
五大主流浏览器及四大内核
1、IE浏览器： 2、Opera浏览器： 3、Safari浏览器 4、Firefox浏览器： 5、Chrome浏览器：
内核
Blink内核 Firefox内核 Webkit内核 IE内核
promise对象的属性
promise中有两个属性
PromiseState：表示promise对象的状态属性
PromiseResult：表示promise对象的结果属性 即对象的值
保存着异步任务【成功/失败】的结果
可以使用resolve，reject改变这个属性中的内容\
调用localstorge、cookies等本地存储方式。
立即执行函数
(function (name, profession) {
console.log('My name is' + name + ' I'm an' + profession );
})(Jackie Chan, actor);
30.html5 应用程序缓存和浏览器缓存有什么区别
链接：www.nowcoder.com/questionTer…
来源：牛客网
应用程序缓存是会预加载的，保证齐全地供应和保存。浏览器缓存没有这些控制，不能作为程序缓存使用。 不幸地，应用程序缓存过於简单，导致效率不彰，预期将会被 Service Worker 取代
应用程序缓存的优势：
离线缓存：用户可在离线时使用它们
速度：加载速度更快
减少服务器负载：浏览器只从服务器下载更新的或者更改过的资源
- 本地缓存为整个 web 应用程序服务的，而浏览器的网页缓存只服务于单个网页
任何网页都有网页缓存，本地缓存只缓存指定的页面。
- 网页缓存不安全
我们不知道在网站中到底缓存了哪些网页，缓存了网页上的哪些资源。而本地缓存可以控制缓存哪些内容。开发人员还可以利用编程的手段来控制缓存的更新，利用缓存对象的各种属性、状态和事件来开发出更加强大的离线应用程序。
- 网页缓存不可靠
要实现浏览器缓存必须要满足一个前提，那就是网络必须要保持连接。如果网络没有连接，即使浏览器启用了对一个站点的缓存，依然无法打开这个站点。只会收到一条错误信息。
而使用离线 web 应用，我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件，并且在网络离线状态下依然能够访问这个网站。
32.html5中哪些是不同的新的表单元素类型
新的input的类型有
email（自动验证email格式）
url（自动验证url格式）
number（只能输入数字）
range（类似音量滑动条）
Date pickers (date, month, week, time, datetime, datetime-local)（自带日期选择）
search（搜索域，类似百度的类似搜索提示）
color（颜色选择，这个现在不兼容大部分浏览器=-=）
新标签
datalist（自动验证内容是否在可选择选项中）
keygen
output （这俩我没看懂神马意思，也是大部分浏览器不兼容
33.jq和dom对象怎么互转?
jQuery对象转化成DOM对象
1.利用数组下标的方式读取到jQuery中的DOM对象 $div[0]
2.通过jQuery自带的get()方法
DOM对象转化成jQuery对象
1.$()
34.jq中load 的方法怎么用
JQuery load 方法使用
一、JQuery load 方法可以在一个页面动态加载另一个页面。这个特性的应用场景是查询页面。传统的查询页面是：输入查询条件，点击“搜索”后，提交表单，到查询条件传输到后台，获取数据后，跳转到原页面，然后通过循环显示查询到的结果。这样的不足是：页面会闪动，体验不好。
二、使用JQuery load 方法可以更好的解决这个问题。方法如下：
（1）先在查询页面定义一个div：
注：这个div将会显示我们查询到的结果信息，如：一个List集合数据。
（2）在JS定义使用load 加载数据页面的方法：
注：load 方法可以接收三个参数，第一个是URL，这个参数是必选的，另二个参数是可选的。第二个参数是：参数，也就是查询条件，必须封装成JSON格式的参数，第三个参数是回调函数。
35.jquery中的$(document).ready()方法和window.onload方法的区别
window.onload方法是在网页中的所有的元素（包括元素的所有关联文件）都完全加载到浏览器之后才执行。而通过jQuery中 的$(document).ready()方法注册的事件处理程序，只要在DOM完全就绪时，就可以调用了，比如一张图片只要![]()
标签 完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等。
onload即加载完成，ready即DOM准备就绪。
36.es6 数组新特性
ES6数组新特性
1.Array.from 从类数组和可遍历对象中创建Array的实例
****类数组对象包括：函数中的arguments、由document.getElementsByTagName()返回的nodeList对象、新增加的Map和Set数据结构。
2.Array.of方法
****该方法表现的很像Array的构造函数，它适合只传一个参数的情况，因此Array.of是new Array()的更优选择，所以，构建数组的方式，现在有三种：
3.Array的find，findIndex,fill方法
****1)find返回回调返回true的第一个元素
****2)findIndex返回回调函数返回true的第一个元素的下标
3)fill用所给参数‘覆盖’数组的元素
37.Vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决？($set())
添加属性视图并不会渲染 可以用$set 视图也跟随着改变了
38.页面从输入网址到渲染都经历了哪些过程
- 输入网址；
- 发送到DNS服务器（解析） ，并获取域名对应的web服务器对应的ip地址；
- 与web服务器建立TCP连接（低级协议，高级协议基础） ；
- 浏览器向web服务器发送http请求（高级协议） ；
- web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
- 浏览器下载web服务器返回的数据及解析html源文件；
- 生成DOM树，解析css和js，渲染页面，直至显示完成
39.jq如何扩展自定义方法
(jQuery.fn.myMethod=function () {
alert('myMethod');
})
// 或者：
(function ($) {
$.fn.extend({
myMethod : function () {
alert('myMethod');
}
})
})(jQuery)
40.jQuery获取的dom对象和原生的dom对象有何区别
js原生获取的dom是一个对象，
jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价
- 原生DOM对象转jQuery对象
var box = document.getElementById('box') var $box = $(box)
- jQuery对象转原生DOM对象
var $box = $('#box') var box = $box[0]
42.document.write和innerHTML区别
主要区别：document.write是直接将内容写入页面的内容流，会导致页面全部重绘，innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
43.CSS样式加载的三种方式优先级
行内元素样式设置> 内部样式设置 >外部连接样式设置
44.js面向对象继承方式
1、原型链继承
2、构造继承
3、组合继承
4、寄生组合继承
onload时的异步加载
XHR Injection
XHR Eval
Script In Irame
GMail Mobile
46.例举三种强制转换类型和2种隐式转换类型
强制（parseInt,parseFloat,number）
隐式（== – ===）
47.ajax请求时,如何解释json数据
使用eval() 或者JSON.parse() 鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。
48.添加、删除、替换、插入到某个节点的方法（js、jq）
appendChild()
//添加
removeChild()
//删除节点
insertBefore（插入节点，被插节点）
//插入（前插后）
replaceChild（新节点,旧节点）
//替换（前替换后）
jq：
append() （旧节点添加新节点后面）
appendTo() （新节点添加到旧节点后面）
prepend() （旧节点添加新节点的前面）
prependTo() （新节点添加到旧节点的前面）
//添加
remove()
（//清空：） empty()
//删除
after() *****// 旧节点后面插入 新节点 before() ***** //旧节点前面插入 新节点
insertAfter() **//新节点插到旧节点后
insertBefore() _ **//新节点插到旧节点前
//插入
replaceWith()
//替换
49.解释 jsonp 的原理，以及为什么不是真正的 ajax?
1. jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。
2.为什么不是真正的ajax?
ajax的核心是 ： 通过XmlHttpRequest获取非本页内容，
jsonp的核心 ： 动态添加
50.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms
51.一次完整的HTTP事务是怎样一个过程？
域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求，浏览器得到html代码 –> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） –> 浏览器对页面进行渲染呈现给用户
52.JS中的序列化与反序列化
序列化:js中的object转化为字符串
1.使用toJSONString
2.使用stringify
3.json转字符串函数
反序列化:json字符串转化为object
1.eval
2.使用parseJSON
3.使用parse
4.使用封装函数
53.关于vue(Js)从数组中删除元素
Vue.delete
delete和$delete
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.$delete 直接删除了数组 改变了数组的键值。
flex布局分为旧版本dispaly: box;，过渡版本dispaly: flex box;，以及现在的标准版本display: flex;。所以如果你只是写新版本的语法形式，是肯定存在兼容性问题的。
-
Android
- 2.3 开始就支持旧版本
display:-webkit-box;
- 4.4 开始支持标准版本
display: flex;
-
IOS
- 6.1 开始支持旧版本
display:-webkit-box;
- 7.1 开始支持标准版本
display: flex;
-
PC
ie10开始支持，但是IE10的是-ms形式的。
55.property和attribute的区别
property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；
@support：用于检测浏览器是否支持CSS某个属性，即条件判断，如果支持某个属性，可以写一套样式，如果不支持某属性，提供另一套样式作为替补。
calc（）：用于计算动态函数值，支持“+”，“-”，“*”，“/”运算
@media：针对不同的媒体类型定义不同的样式
57.画一条0.5px的线
采用transform: scale()的方式
transform: scale(0.5,0.5);
58.Vue的生命周期有哪些，第一次加载会触发哪些钩子函数
beforeCreate
created 创建 初始化数据事件
beforeMount
mounted 载入 DOM渲染完成
beforeUpdate
updated 更新
beforeDestroy
destroyed 销毁
第一次页面加载会触发哪几个钩子？
会触发 下面这几个beforeCreate, created, beforeMount, mounted 。\
59.在vue中子组件直接修改父组件的值会发什么什么?怎么解决？修改是数据怎么办?
子组件直接修改父组件传来的 prop 对象的属性会出现不同步的问题
解决办法:将prop的值赋值给data的一个值
60.前端怎么做单元测试?
61.canvas和svg区别
1.绘制的图片格式不同
Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，可以说是位图
SVG 可以在H5中直接绘制，但绘制的是矢量图
由于位图依赖分辨率，矢量图不依赖分辨率，所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。
2.Canvas不支持事件处理器，SVG支持事件处理器
Canvas 绘制的图像 都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素。
原文链接
62.拖拽事件有哪些
ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondragleave 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
event.setDataTransfer.effectAllowed 属性：就是拖拽的效果。
evetn.setDataTransfer.setDragImage() 方法：指定图片或者文档元素做拖动时的视觉效果。\
63.get和post区别
1.GET在浏览器回退时是无害的，而POST会再次提交请求
2.GET产生的URL地址可以被Bookmark，而POST不可以。
3.GET请求只能进行url编码，而POST支持多种编码方式。
4.GET请求在URL中传送的参数是有长度限制的，而POST没有
5.GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
64.堆和栈的区别有哪些？
堆和栈的区别主要有五大点，分别是：
基本数据类型的值直接在栈内存中存储，
1、申请方式的不同。栈由系统自动分配，而堆是人为申请开辟;
2、申请大小的不同。栈获得的空间较小，而堆获得的空间较大;
3、申请效率的不同。栈由系统自动分配，速度较快，而堆一般速度比较慢;
4、存储内容的不同。栈在函数调用时，函数调用语句的下一条可执行语句的地址第一个进栈，然后函数的各个参数进栈，其中静态变量是不入栈的。而堆一般是在头部用一个字节存放堆的大小，堆中的具体内容是人为安排;
5、底层不同。栈是连续的空间，而堆是不连续的空间。
65.原型原型链直接的关系
构造函数原型： 每一个构造函数的内部都有一个 prototype 属性，这个属性是一个指针，指向另一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。
对象原型： 当我们使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，这个指针称为对象的原型。
原型链
当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype，然后Object.prototype. _proto _为null。\
66.new构造函数发生什么了
- 首先创建了一个新的空对象
- 设置原型，将对象的原型设置为函数的 prototype 对象。
- 让函数的 this 指向这个对象，执行构造函数的代码。
- 判断函数return的是否为Object，若为Object则返回该object，否则返回创建的新对象
67.eval是做什么的?
eval()的作用把字符串参数解析成JS代码并运行，并返回执行的结果
- eval(“2+3”); //执行加运算，并返回运算值。
- eval(“varage=10”); //声明一个age变量
68.什么是Cookie 隔离？
如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量， 所以不如隔离开。 因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据， 这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。 同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节， 提高了webserver的http请求的解析速度。
69.keep-alive 生命周期钩子
- 初次进入时：created > mounted > activated；退出后触发 deactivated
- 再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中
70.js手写面试题
71.js 获取当前页面url地址的参数
const urlSearchParams = new URLSearchParams(window.location.href)
const result = Object.fromEntries(urlSearchParams.entries())
- 、…
-
reduce
-
toString & split
-
join & split
-
递归
-
扩展运算符
- 本地缓存为整个 web 应用程序服务的，而浏览器的网页缓存只服务于单个网页
- 网页缓存不安全
- 网页缓存不可靠
- 输入网址；
- 发送到DNS服务器（解析） ，并获取域名对应的web服务器对应的ip地址；
- 与web服务器建立TCP连接（低级协议，高级协议基础） ；
- 浏览器向web服务器发送http请求（高级协议） ；
- web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
- 浏览器下载web服务器返回的数据及解析html源文件；
- 生成DOM树，解析css和js，渲染页面，直至显示完成
- 原生DOM对象转jQuery对象
var box = document.getElementById('box') var $box = $(box) - jQuery对象转原生DOM对象
var $box = $('#box') var box = $box[0] -
Android
- 2.3 开始就支持旧版本
display:-webkit-box; - 4.4 开始支持标准版本
display: flex;
- 2.3 开始就支持旧版本
-
IOS
- 6.1 开始支持旧版本
display:-webkit-box; - 7.1 开始支持标准版本
display: flex;
- 6.1 开始支持旧版本
-
PC
ie10开始支持，但是IE10的是-ms形式的。 - 首先创建了一个新的空对象
- 设置原型，将对象的原型设置为函数的 prototype 对象。
- 让函数的 this 指向这个对象，执行构造函数的代码。
- 判断函数return的是否为Object，若为Object则返回该object，否则返回创建的新对象
- eval(“2+3”); //执行加运算，并返回运算值。
- eval(“varage=10”); //声明一个age变量
- 初次进入时：created > mounted > activated；退出后触发 deactivated
- 再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中
空元素：
、
、、、
语义化标签：
标签本身能代表其含义
~
、、![]()
、、、、、、、
、…
非语义化标签：
标签本身不能代表其含义 、、、、
18.数组扁平化
19.call和apply区别
call和apply改变了函数的this指向后便立即执行该函数,而bind则是返回一个新的函数，不执行。
apply 参数是数组
20.CSS中的伪类和伪元素有哪些
CSS伪类用于向某些选择器添加特殊的效果。CSS伪元素用于向某些选择器设置特殊效果。
伪类：
: active，将样式添加到被激活的元素。
:focus，将样式添加到被选中的元素。
:hover，当鼠标悬浮在元素上方是，向元素添加样式。
:link，将特殊的样式添加到未被访问过的链接。
:visited，将特殊的样式添加到被访问的链接。
:first-child，将特殊的样式添加到元素的第一个子元素。
:lang，允许创作者来定义指定的元素中使用的语言。
伪元素：
:first-letter，将特殊的样式添加到文本的首字母。
:first-line，将特殊的样式添加到文本的首行。
:before，在某元素之前插入某些内容。
:after，在某元素之后插入某些内容。
21.原型对象的constructor属性的作用
1.原型链继承
2.为类添加新的方法
3.解析构造函数的参数名
22.js原型对象和原型链理解
23.代码运算
for(var i = 0; i < 6; i++) {
setTimeout(function () {
console.log(i);
},1000);
}
6个6
25.浏览器内核有哪些
五大主流浏览器及四大内核
1、IE浏览器： 2、Opera浏览器： 3、Safari浏览器 4、Firefox浏览器： 5、Chrome浏览器：
内核
Blink内核 Firefox内核 Webkit内核 IE内核
promise对象的属性
promise中有两个属性
PromiseState：表示promise对象的状态属性
PromiseResult：表示promise对象的结果属性 即对象的值
保存着异步任务【成功/失败】的结果
可以使用resolve，reject改变这个属性中的内容\
调用localstorge、cookies等本地存储方式。
立即执行函数
(function (name, profession) {
console.log('My name is' + name + ' I'm an' + profession );
})(Jackie Chan, actor);
30.html5 应用程序缓存和浏览器缓存有什么区别
链接：www.nowcoder.com/questionTer…
来源：牛客网
应用程序缓存是会预加载的，保证齐全地供应和保存。浏览器缓存没有这些控制，不能作为程序缓存使用。 不幸地，应用程序缓存过於简单，导致效率不彰，预期将会被 Service Worker 取代
应用程序缓存的优势：
离线缓存：用户可在离线时使用它们
速度：加载速度更快
减少服务器负载：浏览器只从服务器下载更新的或者更改过的资源
任何网页都有网页缓存，本地缓存只缓存指定的页面。
我们不知道在网站中到底缓存了哪些网页，缓存了网页上的哪些资源。而本地缓存可以控制缓存哪些内容。开发人员还可以利用编程的手段来控制缓存的更新，利用缓存对象的各种属性、状态和事件来开发出更加强大的离线应用程序。
要实现浏览器缓存必须要满足一个前提，那就是网络必须要保持连接。如果网络没有连接，即使浏览器启用了对一个站点的缓存，依然无法打开这个站点。只会收到一条错误信息。
而使用离线 web 应用，我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件，并且在网络离线状态下依然能够访问这个网站。
32.html5中哪些是不同的新的表单元素类型
新的input的类型有
email（自动验证email格式）
url（自动验证url格式）
number（只能输入数字）
range（类似音量滑动条）
Date pickers (date, month, week, time, datetime, datetime-local)（自带日期选择）
search（搜索域，类似百度的类似搜索提示）
color（颜色选择，这个现在不兼容大部分浏览器=-=）
新标签
datalist（自动验证内容是否在可选择选项中）
keygen
output （这俩我没看懂神马意思，也是大部分浏览器不兼容
33.jq和dom对象怎么互转?
jQuery对象转化成DOM对象
1.利用数组下标的方式读取到jQuery中的DOM对象 $div[0]
2.通过jQuery自带的get()方法
DOM对象转化成jQuery对象
1.$()
34.jq中load 的方法怎么用
JQuery load 方法使用
一、JQuery load 方法可以在一个页面动态加载另一个页面。这个特性的应用场景是查询页面。传统的查询页面是：输入查询条件，点击“搜索”后，提交表单，到查询条件传输到后台，获取数据后，跳转到原页面，然后通过循环显示查询到的结果。这样的不足是：页面会闪动，体验不好。
二、使用JQuery load 方法可以更好的解决这个问题。方法如下：
（1）先在查询页面定义一个div：
注：这个div将会显示我们查询到的结果信息，如：一个List集合数据。
（2）在JS定义使用load 加载数据页面的方法：
注：load 方法可以接收三个参数，第一个是URL，这个参数是必选的，另二个参数是可选的。第二个参数是：参数，也就是查询条件，必须封装成JSON格式的参数，第三个参数是回调函数。
35.jquery中的$(document).ready()方法和window.onload方法的区别
window.onload方法是在网页中的所有的元素（包括元素的所有关联文件）都完全加载到浏览器之后才执行。而通过jQuery中 的$(document).ready()方法注册的事件处理程序，只要在DOM完全就绪时，就可以调用了，比如一张图片只要![]()
标签 完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等。
onload即加载完成，ready即DOM准备就绪。
36.es6 数组新特性
ES6数组新特性
1.Array.from 从类数组和可遍历对象中创建Array的实例
****类数组对象包括：函数中的arguments、由document.getElementsByTagName()返回的nodeList对象、新增加的Map和Set数据结构。
2.Array.of方法
****该方法表现的很像Array的构造函数，它适合只传一个参数的情况，因此Array.of是new Array()的更优选择，所以，构建数组的方式，现在有三种：
3.Array的find，findIndex,fill方法
****1)find返回回调返回true的第一个元素
****2)findIndex返回回调函数返回true的第一个元素的下标
3)fill用所给参数‘覆盖’数组的元素
37.Vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决？($set())
添加属性视图并不会渲染 可以用$set 视图也跟随着改变了
38.页面从输入网址到渲染都经历了哪些过程
39.jq如何扩展自定义方法
(jQuery.fn.myMethod=function () {
alert('myMethod');
})
// 或者：
(function ($) {
$.fn.extend({
myMethod : function () {
alert('myMethod');
}
})
})(jQuery)
40.jQuery获取的dom对象和原生的dom对象有何区别
js原生获取的dom是一个对象，
jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价
42.document.write和innerHTML区别
主要区别：document.write是直接将内容写入页面的内容流，会导致页面全部重绘，innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
43.CSS样式加载的三种方式优先级
行内元素样式设置> 内部样式设置 >外部连接样式设置
44.js面向对象继承方式
1、原型链继承
2、构造继承
3、组合继承
4、寄生组合继承
onload时的异步加载
XHR Injection
XHR Eval
Script In Irame
GMail Mobile
46.例举三种强制转换类型和2种隐式转换类型
强制（parseInt,parseFloat,number）
隐式（== – ===）
47.ajax请求时,如何解释json数据
使用eval() 或者JSON.parse() 鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。
48.添加、删除、替换、插入到某个节点的方法（js、jq）
appendChild()
//添加
removeChild()
//删除节点
insertBefore（插入节点，被插节点）
//插入（前插后）
replaceChild（新节点,旧节点）
//替换（前替换后）
jq：
append() （旧节点添加新节点后面）
appendTo() （新节点添加到旧节点后面）
prepend() （旧节点添加新节点的前面）
prependTo() （新节点添加到旧节点的前面）
//添加
remove()
（//清空：） empty()
//删除
after() *****// 旧节点后面插入 新节点 before() ***** //旧节点前面插入 新节点
insertAfter() **//新节点插到旧节点后
insertBefore() _ **//新节点插到旧节点前
//插入
replaceWith()
//替换
49.解释 jsonp 的原理，以及为什么不是真正的 ajax?
1. jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。
2.为什么不是真正的ajax?
ajax的核心是 ： 通过XmlHttpRequest获取非本页内容，
jsonp的核心 ： 动态添加
50.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms
51.一次完整的HTTP事务是怎样一个过程？
域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求，浏览器得到html代码 –> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） –> 浏览器对页面进行渲染呈现给用户
52.JS中的序列化与反序列化
序列化:js中的object转化为字符串
1.使用toJSONString
2.使用stringify
3.json转字符串函数
反序列化:json字符串转化为object
1.eval
2.使用parseJSON
3.使用parse
4.使用封装函数
53.关于vue(Js)从数组中删除元素
Vue.delete
delete和$delete
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.$delete 直接删除了数组 改变了数组的键值。
flex布局分为旧版本dispaly: box;，过渡版本dispaly: flex box;，以及现在的标准版本display: flex;。所以如果你只是写新版本的语法形式，是肯定存在兼容性问题的。
55.property和attribute的区别
property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；
@support：用于检测浏览器是否支持CSS某个属性，即条件判断，如果支持某个属性，可以写一套样式，如果不支持某属性，提供另一套样式作为替补。
calc（）：用于计算动态函数值，支持“+”，“-”，“*”，“/”运算
@media：针对不同的媒体类型定义不同的样式
57.画一条0.5px的线
采用transform: scale()的方式
transform: scale(0.5,0.5);
58.Vue的生命周期有哪些，第一次加载会触发哪些钩子函数
beforeCreate
created 创建 初始化数据事件
beforeMount
mounted 载入 DOM渲染完成
beforeUpdate
updated 更新
beforeDestroy
destroyed 销毁
第一次页面加载会触发哪几个钩子？
会触发 下面这几个beforeCreate, created, beforeMount, mounted 。\
59.在vue中子组件直接修改父组件的值会发什么什么?怎么解决？修改是数据怎么办?
子组件直接修改父组件传来的 prop 对象的属性会出现不同步的问题
解决办法:将prop的值赋值给data的一个值
60.前端怎么做单元测试?
61.canvas和svg区别
1.绘制的图片格式不同
Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，可以说是位图
SVG 可以在H5中直接绘制，但绘制的是矢量图
由于位图依赖分辨率，矢量图不依赖分辨率，所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。
2.Canvas不支持事件处理器，SVG支持事件处理器
Canvas 绘制的图像 都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素。
原文链接
62.拖拽事件有哪些
ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondragleave 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
event.setDataTransfer.effectAllowed 属性：就是拖拽的效果。
evetn.setDataTransfer.setDragImage() 方法：指定图片或者文档元素做拖动时的视觉效果。\
63.get和post区别
1.GET在浏览器回退时是无害的，而POST会再次提交请求
2.GET产生的URL地址可以被Bookmark，而POST不可以。
3.GET请求只能进行url编码，而POST支持多种编码方式。
4.GET请求在URL中传送的参数是有长度限制的，而POST没有
5.GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
64.堆和栈的区别有哪些？
堆和栈的区别主要有五大点，分别是：
基本数据类型的值直接在栈内存中存储，
1、申请方式的不同。栈由系统自动分配，而堆是人为申请开辟;
2、申请大小的不同。栈获得的空间较小，而堆获得的空间较大;
3、申请效率的不同。栈由系统自动分配，速度较快，而堆一般速度比较慢;
4、存储内容的不同。栈在函数调用时，函数调用语句的下一条可执行语句的地址第一个进栈，然后函数的各个参数进栈，其中静态变量是不入栈的。而堆一般是在头部用一个字节存放堆的大小，堆中的具体内容是人为安排;
5、底层不同。栈是连续的空间，而堆是不连续的空间。
65.原型原型链直接的关系
构造函数原型： 每一个构造函数的内部都有一个 prototype 属性，这个属性是一个指针，指向另一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。
对象原型： 当我们使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，这个指针称为对象的原型。
原型链
当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype，然后Object.prototype. _proto _为null。\
66.new构造函数发生什么了
67.eval是做什么的?
eval()的作用把字符串参数解析成JS代码并运行，并返回执行的结果
68.什么是Cookie 隔离？
如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量， 所以不如隔离开。 因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据， 这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。 同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节， 提高了webserver的http请求的解析速度。
69.keep-alive 生命周期钩子
70.js手写面试题
71.js 获取当前页面url地址的参数
const urlSearchParams = new URLSearchParams(window.location.href)
const result = Object.fromEntries(urlSearchParams.entries())
- …
非语义化标签：
标签本身不能代表其含义 、、、、
18.数组扁平化
19.call和apply区别
call和apply改变了函数的this指向后便立即执行该函数,而bind则是返回一个新的函数，不执行。
apply 参数是数组
20.CSS中的伪类和伪元素有哪些
CSS伪类用于向某些选择器添加特殊的效果。CSS伪元素用于向某些选择器设置特殊效果。
伪类：
: active，将样式添加到被激活的元素。
:focus，将样式添加到被选中的元素。
:hover，当鼠标悬浮在元素上方是，向元素添加样式。
:link，将特殊的样式添加到未被访问过的链接。
:visited，将特殊的样式添加到被访问的链接。
:first-child，将特殊的样式添加到元素的第一个子元素。
:lang，允许创作者来定义指定的元素中使用的语言。
伪元素：
:first-letter，将特殊的样式添加到文本的首字母。
:first-line，将特殊的样式添加到文本的首行。
:before，在某元素之前插入某些内容。
:after，在某元素之后插入某些内容。
21.原型对象的constructor属性的作用
1.原型链继承
2.为类添加新的方法
3.解析构造函数的参数名
22.js原型对象和原型链理解
23.代码运算
for(var i = 0; i < 6; i++) {
setTimeout(function () {
console.log(i);
},1000);
}
6个6
25.浏览器内核有哪些
五大主流浏览器及四大内核
1、IE浏览器： 2、Opera浏览器： 3、Safari浏览器 4、Firefox浏览器： 5、Chrome浏览器：
内核
Blink内核 Firefox内核 Webkit内核 IE内核
promise对象的属性
promise中有两个属性
PromiseState：表示promise对象的状态属性
PromiseResult：表示promise对象的结果属性 即对象的值
保存着异步任务【成功/失败】的结果
可以使用resolve，reject改变这个属性中的内容\
调用localstorge、cookies等本地存储方式。
立即执行函数
(function (name, profession) {
console.log('My name is' + name + ' I'm an' + profession );
})(Jackie Chan, actor);
30.html5 应用程序缓存和浏览器缓存有什么区别
链接：www.nowcoder.com/questionTer…
来源：牛客网
应用程序缓存是会预加载的，保证齐全地供应和保存。浏览器缓存没有这些控制，不能作为程序缓存使用。 不幸地，应用程序缓存过於简单，导致效率不彰，预期将会被 Service Worker 取代
应用程序缓存的优势：
离线缓存：用户可在离线时使用它们
速度：加载速度更快
减少服务器负载：浏览器只从服务器下载更新的或者更改过的资源
任何网页都有网页缓存，本地缓存只缓存指定的页面。
我们不知道在网站中到底缓存了哪些网页，缓存了网页上的哪些资源。而本地缓存可以控制缓存哪些内容。开发人员还可以利用编程的手段来控制缓存的更新，利用缓存对象的各种属性、状态和事件来开发出更加强大的离线应用程序。
要实现浏览器缓存必须要满足一个前提，那就是网络必须要保持连接。如果网络没有连接，即使浏览器启用了对一个站点的缓存，依然无法打开这个站点。只会收到一条错误信息。
而使用离线 web 应用，我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件，并且在网络离线状态下依然能够访问这个网站。
32.html5中哪些是不同的新的表单元素类型
新的input的类型有
email（自动验证email格式）
url（自动验证url格式）
number（只能输入数字）
range（类似音量滑动条）
Date pickers (date, month, week, time, datetime, datetime-local)（自带日期选择）
search（搜索域，类似百度的类似搜索提示）
color（颜色选择，这个现在不兼容大部分浏览器=-=）
新标签
datalist（自动验证内容是否在可选择选项中）
keygen
output （这俩我没看懂神马意思，也是大部分浏览器不兼容
33.jq和dom对象怎么互转?
jQuery对象转化成DOM对象
1.利用数组下标的方式读取到jQuery中的DOM对象 $div[0]
2.通过jQuery自带的get()方法
DOM对象转化成jQuery对象
1.$()
34.jq中load 的方法怎么用
JQuery load 方法使用
一、JQuery load 方法可以在一个页面动态加载另一个页面。这个特性的应用场景是查询页面。传统的查询页面是：输入查询条件，点击“搜索”后，提交表单，到查询条件传输到后台，获取数据后，跳转到原页面，然后通过循环显示查询到的结果。这样的不足是：页面会闪动，体验不好。
二、使用JQuery load 方法可以更好的解决这个问题。方法如下：
（1）先在查询页面定义一个div：
注：这个div将会显示我们查询到的结果信息，如：一个List集合数据。
（2）在JS定义使用load 加载数据页面的方法：
注：load 方法可以接收三个参数，第一个是URL，这个参数是必选的，另二个参数是可选的。第二个参数是：参数，也就是查询条件，必须封装成JSON格式的参数，第三个参数是回调函数。
35.jquery中的$(document).ready()方法和window.onload方法的区别
window.onload方法是在网页中的所有的元素（包括元素的所有关联文件）都完全加载到浏览器之后才执行。而通过jQuery中 的$(document).ready()方法注册的事件处理程序，只要在DOM完全就绪时，就可以调用了，比如一张图片只要标签 完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等。
onload即加载完成，ready即DOM准备就绪。
36.es6 数组新特性
ES6数组新特性
1.Array.from 从类数组和可遍历对象中创建Array的实例
****类数组对象包括：函数中的arguments、由document.getElementsByTagName()返回的nodeList对象、新增加的Map和Set数据结构。
2.Array.of方法
****该方法表现的很像Array的构造函数，它适合只传一个参数的情况，因此Array.of是new Array()的更优选择，所以，构建数组的方式，现在有三种：
3.Array的find，findIndex,fill方法
****1)find返回回调返回true的第一个元素
****2)findIndex返回回调函数返回true的第一个元素的下标
3)fill用所给参数‘覆盖’数组的元素
37.Vue中给data中的对象属性添加一个新的属性时会发生什么，如何解决？($set())
添加属性视图并不会渲染 可以用$set 视图也跟随着改变了
38.页面从输入网址到渲染都经历了哪些过程
39.jq如何扩展自定义方法
(jQuery.fn.myMethod=function () {
alert('myMethod');
})
// 或者：
(function ($) {
$.fn.extend({
myMethod : function () {
alert('myMethod');
}
})
})(jQuery)
40.jQuery获取的dom对象和原生的dom对象有何区别
js原生获取的dom是一个对象，
jQuery对象就是一个数组对象，其实就是选择出来的元素的数组集合，所以说他们两者是不同的对象类型不等价
42.document.write和innerHTML区别
主要区别：document.write是直接将内容写入页面的内容流，会导致页面全部重绘，innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
43.CSS样式加载的三种方式优先级
行内元素样式设置> 内部样式设置 >外部连接样式设置
44.js面向对象继承方式
1、原型链继承
2、构造继承
3、组合继承
4、寄生组合继承
onload时的异步加载
XHR Injection
XHR Eval
Script In Irame
GMail Mobile
46.例举三种强制转换类型和2种隐式转换类型
强制（parseInt,parseFloat,number）
隐式（== – ===）
47.ajax请求时,如何解释json数据
使用eval() 或者JSON.parse() 鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。
48.添加、删除、替换、插入到某个节点的方法（js、jq）
appendChild()
//添加
removeChild()
//删除节点
insertBefore（插入节点，被插节点）
//插入（前插后）
replaceChild（新节点,旧节点）
//替换（前替换后）
jq：
append() （旧节点添加新节点后面）
appendTo() （新节点添加到旧节点后面）
prepend() （旧节点添加新节点的前面）
prependTo() （新节点添加到旧节点的前面）
//添加
remove()
（//清空：） empty()
//删除
after() *****// 旧节点后面插入 新节点 before() ***** //旧节点前面插入 新节点
insertAfter() **//新节点插到旧节点后
insertBefore() _ **//新节点插到旧节点前
//插入
replaceWith()
//替换
49.解释 jsonp 的原理，以及为什么不是真正的 ajax?
1. jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。
2.为什么不是真正的ajax?
ajax的核心是 ： 通过XmlHttpRequest获取非本页内容，
jsonp的核心 ： 动态添加
50.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms
51.一次完整的HTTP事务是怎样一个过程？
域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求，浏览器得到html代码 –> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） –> 浏览器对页面进行渲染呈现给用户
52.JS中的序列化与反序列化
序列化:js中的object转化为字符串
1.使用toJSONString
2.使用stringify
3.json转字符串函数
反序列化:json字符串转化为object
1.eval
2.使用parseJSON
3.使用parse
4.使用封装函数
53.关于vue(Js)从数组中删除元素
Vue.delete
delete和$delete
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.$delete 直接删除了数组 改变了数组的键值。
flex布局分为旧版本dispaly: box;，过渡版本dispaly: flex box;，以及现在的标准版本display: flex;。所以如果你只是写新版本的语法形式，是肯定存在兼容性问题的。
55.property和attribute的区别
property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；
@support：用于检测浏览器是否支持CSS某个属性，即条件判断，如果支持某个属性，可以写一套样式，如果不支持某属性，提供另一套样式作为替补。
calc（）：用于计算动态函数值，支持“+”，“-”，“*”，“/”运算
@media：针对不同的媒体类型定义不同的样式
57.画一条0.5px的线
采用transform: scale()的方式
transform: scale(0.5,0.5);
58.Vue的生命周期有哪些，第一次加载会触发哪些钩子函数
beforeCreate
created 创建 初始化数据事件
beforeMount
mounted 载入 DOM渲染完成
beforeUpdate
updated 更新
beforeDestroy
destroyed 销毁
第一次页面加载会触发哪几个钩子？
会触发 下面这几个beforeCreate, created, beforeMount, mounted 。\
59.在vue中子组件直接修改父组件的值会发什么什么?怎么解决？修改是数据怎么办?
子组件直接修改父组件传来的 prop 对象的属性会出现不同步的问题
解决办法:将prop的值赋值给data的一个值
60.前端怎么做单元测试?
61.canvas和svg区别
1.绘制的图片格式不同
Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，可以说是位图
SVG 可以在H5中直接绘制，但绘制的是矢量图
由于位图依赖分辨率，矢量图不依赖分辨率，所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。
2.Canvas不支持事件处理器，SVG支持事件处理器
Canvas 绘制的图像 都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素。
原文链接
62.拖拽事件有哪些
ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondragleave 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
event.setDataTransfer.effectAllowed 属性：就是拖拽的效果。
evetn.setDataTransfer.setDragImage() 方法：指定图片或者文档元素做拖动时的视觉效果。\
63.get和post区别
1.GET在浏览器回退时是无害的，而POST会再次提交请求
2.GET产生的URL地址可以被Bookmark，而POST不可以。
3.GET请求只能进行url编码，而POST支持多种编码方式。
4.GET请求在URL中传送的参数是有长度限制的，而POST没有
5.GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
64.堆和栈的区别有哪些？
堆和栈的区别主要有五大点，分别是：
基本数据类型的值直接在栈内存中存储，
1、申请方式的不同。栈由系统自动分配，而堆是人为申请开辟;
2、申请大小的不同。栈获得的空间较小，而堆获得的空间较大;
3、申请效率的不同。栈由系统自动分配，速度较快，而堆一般速度比较慢;
4、存储内容的不同。栈在函数调用时，函数调用语句的下一条可执行语句的地址第一个进栈，然后函数的各个参数进栈，其中静态变量是不入栈的。而堆一般是在头部用一个字节存放堆的大小，堆中的具体内容是人为安排;
5、底层不同。栈是连续的空间，而堆是不连续的空间。
65.原型原型链直接的关系
构造函数原型： 每一个构造函数的内部都有一个 prototype 属性，这个属性是一个指针，指向另一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。
对象原型： 当我们使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，这个指针称为对象的原型。
原型链
当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype，然后Object.prototype. _proto _为null。\
66.new构造函数发生什么了
67.eval是做什么的?
eval()的作用把字符串参数解析成JS代码并运行，并返回执行的结果
68.什么是Cookie 隔离？
如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量， 所以不如隔离开。 因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据， 这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。 同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节， 提高了webserver的http请求的解析速度。
69.keep-alive 生命周期钩子
70.js手写面试题
71.js 获取当前页面url地址的参数
const urlSearchParams = new URLSearchParams(window.location.href)
const result = Object.fromEntries(urlSearchParams.entries())
