个人学习总结

面试总结

1. css选择器/选择符?优先级算法如何计算？

内联样式>ID选择器>类，伪类和属性选择器>标签选择器,伪元素选择器> 通配符、子选择器、相邻选择器等
另外继承的样式没有权值

2. CSS中margin边界叠加问题及解决方案?

1 外层padding 2. 透明边框border:1pxsolidtransparent 3 外层DIV overflow:hidden;

3. hash和history的区别

最直观的区别就是在url中hash 带了一个很丑的 # ，而history是没有#的。vue默认使用hash。
hash 比如http://www.abc.com/#/hello hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
history 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持） 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id 如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
所以对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景，用 history 模式即可，只需在后端（Apache 或 Nginx）进行简单的路由配置，同时搭配前端路由的 404 页面支持。

4. 解释下CSS sprites

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置

5.vue混入的理解?

vue实例中有这个一个属性mixins，是个数组。它的作用呢，就是将一个组件混入进另一个组件，使得两个组件的方法，属性，生命钩子啥的合二为一。使用的方式和导入类似，只不过一个放在了components中，一个放在了mixins中。组件混入后，产生冲突的属性和方法以原组件为主，但是钩子函数先执行混入组件的内容，也可以全局注册但是这样每个组件实例都会混入，慎用。。。
实例可点击https://www.jianshu.com/p/9f69a80d83f7

6.vue中filter的使用

主要用于文本格式化，对数据做一些处理。

7. vue插槽slot的用法

匿名插槽 具名插槽 作用域插槽 带数据的插槽
匿名插槽和具名插槽的功能是 预留插入代码的空间；
作用域插槽是提供数据资源，预留代码渲染逻辑空间。
详细用法可点击https://blog.csdn.net/qdmoment/article/details/104758864/

8.匿名插槽与作用域插槽的合并和覆盖行为

1.匿名插槽的合并行为 效果：内容合并
2.匿名作用域插槽的覆盖行为 以靠后的作用域插槽模板为准，绘制了两遍
3.匿名插槽模板和作用域插槽模板混合 效果：匿名插槽以匿名作用域插槽模板为准进行渲染，即使你把匿名插槽模板放后面，也是一样的结果；
详细实例可点击 https://www.cnblogs.com/xianshenglu/p/8479915.html
所以不要使用匿名作用域插槽 使用具名作用域插槽

具名作用域插槽获取数据的写法  
子组件中 <slot name="child" width="500px" text="child"></slot>  
父组件中使用 <template v-slot:child="{text,width}">
                <div>
                    <div>{{text}}+{{width}}</div>
                </div>
            </template>

9.sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器端存储的缓存数据

不同点：

(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；

web storage,会将数据保存到本地，不会造成宽带浪费；

(2)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据存储可以达到5M;

(3)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；

sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

(4)、作用域不同：cookie和localStorage在同源同窗口中都是共享的；sessionStorage在不同的浏览器窗口中不共享，即使是同一个页面；

10. 浏览器是如何渲染页面的

1.解析HTML文件，创建DOM树。

2.解析CSS，生成CSSOM树
划重点！！！Dom树和CSSOM两者不是解析完再渲染的，而是边解析边进行渲染的！
3.DOM树和CSSOM渲染完成后合并生成Render树（Render Tree）

4.布局（layout）reflow重排/回流发生在这个阶段 通过递归调用进行布局的，引擎计算各元素的尺寸大小，进行布局树绘制

5.绘制（paint）repainting重绘发生在这个阶段
触发重绘：改变元素颜色、背景、visibility、outline等属性
详细解释可点击https://www.cnblogs.com/liuarui/p/11393297.html

11. CSS3新增的属性

1.CSS3边框 2.CSS3背景 3.CSS3文字效果 4.CSS3 2D转换、3D转换 5.弹性盒模型 6.CSS3 过渡 7.CSS3动画 8.CSS3多列 9.CSS3用户界面 10.引入web字体（在服务器端存储）11.媒体查询

12. html5新特性

1.H5新标签 2. Canvas 3.拖放 首先，为了使元素可拖动，把 draggable 属性设置为 true 4. 地理定位 Geolocation API 用于获得用户的地理位置。5.Audio(音频)、Video(视频) 6. Input 类型 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证 7.表单元素 8. 表单属性 9.语义元素 10.Web 存储 11.离线Web应用（应用程序缓存）12.WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。13.浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。
详细CSS3以及HTML5总结可点击 https://blog.csdn.net/chandoudeyuyi/article/details/69206236

13.从输入url到显示页面，都经历了什么？

简单的说可以分为六步：1.DNS查询 / 解析、2.TCP连接： TCP三次握手、3.发送请求、4.返回响应、5.渲染页面、6.断开连接：TCP四次挥手
详细解释可点击https://blog.csdn.net/q761830908/article/details/103378934

14.对<meta></meta>标签有什么理解？

<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

15.new操作符到底到了什么？

var Func=function(){
};
var func=new Func ();

1，创建一个空的对象 var obj=new Object（）；

2，让空对象的原型属性指向原型链，设置原型链 obj.proto=Func.prototype;

3，让构造函数的this指向obj，并执行函数体 var result=Func.call(obj);

4，判断返回值类型，如果是值就返回这个obj，如果是引用类型，返回这个引用对象。

16. 谈谈对闭包的理解？

闭包函数：声明在一个函数中的函数，叫做闭包函数。
内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。
特点：
让外部访问函数内部变量成为可能；

局部变量会常驻在内存中；

可以避免使用全局变量，防止全局变量污染；

会造成内存泄漏（有一块内存空间被长期占用，而不被释放）
详细实例点击https://blog.csdn.net/weixin_43586120/article/details/89456183

17.谈谈垃圾回收机制方式及内存管理？

回收机制方式

1、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。
3、垃圾回收策略：标记清除(较为常用)和引用计数。
标记清除：
　　定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为：“离开环境”。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。
　　到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。
引用计数：
　　定义和用法：引用计数是跟踪记录每个值被引用的次数。
　　基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

18.判断一个字符串中出现次数最多的字符，统计这个次数

实例点击https://blog.csdn.net/weixin_42659625/article/details/82755827

19.vue.js的核心是什么？

数据驱动、组件系统。解释可看https://blog.csdn.net/qq_28529373/article/details/80966095
另一个不错的解释https://www.jianshu.com/p/a4339bad5256

20.vue双向绑定原理？

首先我们为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；
　
　　然后在编译的时候在该属性的数组dep中添加订阅者，v-model会添加一个订阅者，{{}}也会，v-bind也会，只要用到该属性的指令理论上都会；

接着为input会添加监听事件，修改值就等于为该属性赋值，则会触发该属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图。
详细解释点击https://www.cnblogs.com/webcabana/p/11077628.html
实现方法的代码https://www.jianshu.com/p/f194619f6f26

21.$(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

22.jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？（常见）

23.px和em rem的区别（常见）

1、px是相bai对长度单位，它是相对于显示器屏幕分辨率du而言的。
优缺点：比zhi较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

2、em是相对长度单位，EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
优缺点：em的值并不是固定的，它会继承父级元素的字体大小。

3、rem是CSS3新增的一个相对单位，REM是相对单位，是相对HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

24.浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

25.什么叫优雅降级和渐进增强？（常见）

渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

26.fetch和ajax的区别?

Ajax的本质是使用XMLHttpRequest对象来请求数据，
fetch 是全局 window 的一个方法，它的主要特点有：
1、第一个参数是URL:
2、第二个是可选参数，可以控制不同配置的 init 对象，比如method,headers,body等
3、使用了 JavaScript Promises 来处理结果/回调
fetch采用了Promise的异步处理机制，使用比ajax更加简单，有可能会逐渐代替ajax,目前所有版本的 IE 均不支持原生 Fetch。

27.xml和json的区别?

xml 扩展标记语言 是一种用于标记电子文件使其具有结构性的标记语言 可以用来标记数据、定义数据类型
JSON(JavaScript Object Notation)一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性。
· JSON相对于XML来讲，数据的体积小，传递的速度更快些
· JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
· XML对数据描述性比较好；
· JSON的速度要远远快于XML

28.请讲一下圣杯布局和双飞翼布局。

圣杯布局与双飞翼布局都是双边固定宽度，中间自适应的布局。
具体实例可点击:
https://www.jianshu.com/p/81ef7e7094e8

29.location 和 history ？

1.window.location
location.href
location.hash
location.search
location.pathname
2.window.history
history.pushState()
history.replaceState()
history.go()
history.back()
history.forward()
详细实例可点击https://segmentfault.com/a/1190000014120456
另一篇不错的文章：https://blog.csdn.net/u012844719/article/details/17075635

30.BFC是什么？

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
详细实例可点击https://blog.csdn.net/u012844719/article/details/24968987

31.proxy和defineproperty区别？

Object.defineProperty的第一个缺陷,无法监听数组变化。然而Vue的文档提到了Vue是可以检测到数组变化的，但是只有八种方法可以检测到,vm.items[indexOfItem] = newValue这种是无法检测的。
第二个缺陷,只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历，如果属性值也是对象那么需要深度遍历,显然能劫持一个完整的对象是更好的选择。
Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改。Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等。Proxy的劣势就是兼容性问题
详细解释可点击https://www.jianshu.com/p/2df6dcddb0d7

32.计算一个数组arr所有元素的和

1.普通循环(包括forEach)

var arr1=[1,2,3,4,5,6,7,8,9];
var sum1=0;
for (var i=0;i<=arr1.length;i++) {
	if (typeof arr1[i]=="number") {
	sum1+=arr1[i];
	}
}
console.log(sum1);
//====================================
function sum2(arr){
var all=0;
for (var i=0;i<arr.length;i++) {
		if (typeof arr[i]=="number") {
		all+=arr[i];
		}
	}
return all;
}
console.log(sum2([1,2,3,4]));

2.数组reduce求和

function sum(arr) {
    return arr.reduce(function(prev, curr, idx, arr){
        return prev + curr;//reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
    });
}

33.一个数组去重的简单实现

var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
//定义一个新的数组
var s = [];
//遍历数组
for(var i = 0;i<arr.length;i++){
    if(s.indexOf(arr[i]) == -1){  //判断在s数组中是否存在，不存在则push到s数组中
        s.push(arr[i]);
    }
}
console.log(s);

利用ES6 Set去重也可以实现，

function unique (arr) {
  return Array.from(new Set(arr))
}
或者
[...new Set(arr)]

双重for循环实现

function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
return arr;
}

利用filter实现

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}

34.http 和 https 有何区别？如何灵活使用？

http协议传输的数据都是未加密的，也就是明文的，
https协议是由ssl+http协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。
https和http的主要区别：
一、https协议需要到ca机构申请ssl证书(如沃通CA)，另外沃通CA还提供3年期的免费ssl证书，高级别的ssl证书需要一定费用。
二、http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议。
三、http和https使用的是完全不同的连接方式，用的端口也不一样，http是80端口，https是443端口。
四、http的连接很简单，是无状态的;https协议是由ssl+http协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
五、如果要实现HTTPS那么可以淘宝Gworg获取SSL证书。

35.常见的HTTP状态码

2开头 （请求成功）表示成功处理了请求的状态代码。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

36. react和vue有哪些不同，说说你对这两个框架的看法

相同点
· 都支持服务器端渲染
· 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
· 数据驱动视图
· 都有支持native的方案,React的React native,Vue的weex
不同点
· React严格上只针对MVC的view层,Vue则是MVVM模式
· virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
· 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
· 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
· state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

37. 什么是mvvm mvc是什么区别 原理

一、MVC（Model-View-Controller）
MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。
MVC使用非常广泛，比如JavaEE中的SSH框架
三、MVVM（Model-View-ViewModel）
如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定
”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

38.Vue引发的getter和setter?

Vue的data里，每个属性都有set和get属性,可以把get看成一个取值的函数，函数的返回值就是它拿到的值
set name(val){…}；形参val就是我赋给name属性的值，在这个函数里，我就可以做很多事了，比如双向绑定！因为这个值的每次改变都必须经过set
解释可点击https://www.cnblogs.com/Leo_wl/p/6002068.html

39. vue组件化的理解?

组件化是Vue的精髓，Vue应用就是由一个个组件构成的。
1.定义
组件是可复用的 Vue 实例，准确讲它们是VueComponent的实例，继承自Vue。
2.优点
可以增加代码的复用性、可维护性和可
测试性。提高开发效率， 方便重复使用，简化调试步骤，提升整个项目的可维护性，便于协同开发，是高内聚、低耦合代码的实践。
3.使用场景
通用组件：实现最基本的功能，具有通用性和复用性。例如按钮组件、布局组件等
业务组件：完成具体的业务，具有一定的复用性。例如登录、轮播图、提示信息等
页面组件：组织应用各部分的独立内容，需要根据条件切换页面内容。例如列表页、详情页
4.如何使用组件
注册：Vue.component()，component选项，单文件
通信：props $emit(’’’’) / $on、provide/inject, $children/ $parent/ $root/ $attrs/ $listeners
内容分发： <slot> <template> 、v-slot

40.vue 组件中的data为什么必须是函数?

组件是可复用的如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计无关。

41. $route和 $router的区别是什么？

$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

42. 编程路由传参以及声明路由传参?

编程路由传参和声明路由传参规则是一样 只不过一个是采用的是router-link标签 to属性跳转 一个路由本身的push方法 当传参时使用params以及query是有区别的:
( 1 )使用Params:
只能使用name，不能使用path
参数不会显示在路径上
浏览器强制刷新参数会被清空

this.$router.push({
	name:home,
	params: {
	key:value
	}
})

（2）使用Query：
参数会显示在路径上，刷新不会被清空
name 可以使用path路径

this.$router.push({
	name:home,
	query: {
		key: value
	}
})

43. vue中组件name的作用

1.当项目使用keep-alive时，可搭配组件name进行缓存过滤
keep-alive以及生命周期解释:
https://blog.csdn.net/HANGSOME123/article/details/97142383
2.DOM做递归组件时
比如说detail.vue组件里有个list.vue子组件，递归迭代时需要调用自身name
3.当你用vue-tools时
vue-devtools调试工具里显示的组见名称是由vue中组件name决定的
4. 全局注册组件时自动作为组件唯一id
递归例子https://blog.csdn.net/badmoonc/article/details/80380557

44. vue生命周期理解

详解https://www.cnblogs.com/shuaigebie/p/12705415.html

45. 移动端适配？

首先确定你的设计稿是基于iphone6还是iphone4/5：
如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem
如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem
(1).对视口做如下设置：

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

(2).在index.html入口文件里写：

var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';  // 注意：iphone6要除以7.5

(3).使用方法：如果设计图上标注高200px, 写 height: 2rem

document.documentElement.clientWidth:
在PC端中，该值代表的是浏览器视口的宽度 offsetWidth是指包括滚动条的部分，而document.documentElement.clientWidth是去除滚动条的部分，
而移动端中，该值代表的是整个文档的宽度，也就是ppk所定义的layout viewport。
详细点击https://blog.csdn.net/zmm13298329239/article/details/83307842
js获取高度总结
https://www.cnblogs.com/itdansan/p/8116273.html

46.移动端1px问题？

1.伪元素 + transform 实现
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
单条border样式设置：

.scale-1px{ position: relative; border:none; }
.scale-1px:after{
    content: '';
    position: absolute; bottom: 0;
    background: #000;
    width: 100%; height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
     -webkit-transform-origin: 0 0;
    transform-origin: 0 0; 
}

优点：所有场景都能满足，支持圆角(伪元素和本体都需要加border-radius)
缺点：对于已经使用伪元素的元素(例如clearfix)，可能需要多层嵌套
viewport + rem 实现
同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。

在devicePixelRatio = 2 时，输出viewport：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio = 3 时，输出viewport：
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。
对于这种方案，可以看看《使用Flexible实现手淘H5页面的终端适配》
优点：
所有场景都能满足
一套代码，可以兼容基本所有布局
缺点：
老项目修改代价过大，只适用于新项目
其他可点击https://www.jianshu.com/p/3a262758abcf

47.移动设备忽略数字转为电话号？

标准的电话号码格式是这样的:<a href="tel:1-408-555-5555">1-408-555-5555</a>，点击后会自动打开电话功能；

<meta name = "format-detection" content = "telephone=no">

详细可看https://blog.csdn.net/shuidinaozhongyan/article/details/73194556?utm_source=blogxgwz9

48.原始值的比较?

1.布尔值、数字、字符串三者在比较之前要先转换成数字。
2.对象的比较并非值的比较：
即使两个对象包含同样的属性及相同的值，它们也是不相等的。
各个索引元素完全相等的两个数组也不相等。
3.空数组和布尔值有两种关系：当空数组作为判断条件时，相当于true。当空数组与布尔值直接比较时，相当于false。
4.new Array(1) == false; // true new Array(3) == false //false 为什么两条语句的结果不一样，是什么原因导致的？？？
对象到数字的转换过程：调用toString()方法，返回一个字符串直接量，js将这个字符串转换成数字类型，并返回这个数字

Number(new Array(1) .toString())  == number(false) 
Number(new Array(1) .toString()) !== number(false) 

new Array() 参数只有一个时返回一个长度为参数值的空数组, 多个参数时返回以这些数值为数组项的数组.
Javascript规范中提到， 要比较相等性之前，不能将 null 和 undefined 转换成其他任何值，并且规定null 和 undefined 是相等的。所以null == undefined 结果为true 全等类型不同是false
null 和 undefined都代表着无效的值。
实例可点击https://blog.csdn.net/CEZLZ/article/details/103340714

49. 面向对象和面向过程的区别

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了；面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。
详细解释可看https://blog.csdn.net/jerry11112/article/details/79027834

50.面向对象的三个基本特征?

https://blog.csdn.net/ztj111/article/details/1854611

51.监听页面刷新和离开

onload、onunload、onbeforeunload的执行问题：
页面加载时只执行onload
页面关闭时，先onbeforeunload事件，再onunload事件。
页面刷新时先执行onbeforeunload，然后onunload，最后onload。
注意：这种执行顺序是有浏览器的兼容问题的，请注意各种浏览器的区别
https://blog.csdn.net/halo1416/article/details/86705437

52. 准确判断数据类型的三种方法?

Object.prototype.toString.call()
Object.prototype.toString.call()方法是直接调用Object原型上的toString方法，并通过call来改变this的指向来返回一个像是[object Array] [object Object]这样的字符串。
A instanceof B 判断A是否在B的实例上
typeof

53. vue中watch和computed区别?watch的用法?

watch三种用法:
1.直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数

  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {
      // ...
    }
  } 

2.immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，

data: {
    cityName: ''
  },
  watch: {
    cityName: {
    　　handler(newName, oldName) {
      　　// ...
    　　},
    　　immediate: true
    }
  } 

3.当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

data: {
    cityName: {id: 1, name: 'shanghai'}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {
      // ...
    },
    deep: true,
    immediate: true
    }
  } 

设置deep: true 则可以监听到cityName.name的变化，此时会给cityName的所有属性都加上这个监听器，

4.如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性

watch: {
    'cityName.name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。

计算属性computed :

1.支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

1.不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，immediate：组件加载立即触发回调函数执行，deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

54. 每个HTML文件里面都有Doctype?

此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面）

55.H5新增form控件和表单属性?

https://www.cnblogs.com/jinfeixiang/p/10868382.html

56.grid布局有过了解么？

使用CSS Grid创建一个超酷的图像网格图，它可以根据屏幕的宽度来改变列的数量 所有的响应特性被添加到了一行css代码中。这意味着我们不必将HTML与丑陋的类名(如col-sm-2, col-md-4)混杂在一起，也不必为每个屏幕创建媒体查询。
https://blog.csdn.net/weixin_43606158/article/details/93379228

57.img的alt与title有何异同？strong与em的异同？

alt：用来指定替换文字【图片加载失败展示】。
title：用来提供建议性文字【移入显示】。
strong：粗体强调标签。
em：斜体强调标签。

58.知道什么是微格式吗？谈谈理解。

微格式是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
优点：将智能数据添加到网页上，让网页内容在搜索引擎结果页面可以显示额外的提示。（应用范例：豆瓣）

59.图片懒加载原理？

以下链接使用jquery方法实现图片懒加载 / 使用js同理 亦可操作
https://www.jianshu.com/p/68a6683b6a6a
vue中可以使用插件npm install vue-lazyload --save-dev
https://blog.csdn.net/Tom__cy/article/details/90299757

60.超链接访问过后hover样式就不出现的问题是什么？如何解决？

改变CSS属性的排列顺序：L-V-H-A(link，visited,hover,active)

61.伪元素&伪类?

伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
详情可点击
https://www.jianshu.com/p/8b610fdf0d48

62.前端常见的跨域解决办法?

jsonp（只支持get请求，支持老的IE浏览器）适合加载不同域名的js、css，img等静态资源；CORS（支持所有类型的HTTP请求，但浏览器IE10以下不支持）适合做ajax各种跨域请求；Nginx代理跨域和nodejs中间件跨域原理都相似，都是搭建一个服务器，直接在服务器端请求HTTP接口，这适合前后端分离的前端项目调后端接口。document.domain+iframe适合主域名相同，子域名不同的跨域请求。postMessage、websocket都是HTML5新特性，兼容性不是很好，只适用于主流浏览器和IE10+。
详情点击 http://www.imooc.com/article/291931

63.vue模板编译原理

关于Vue编译原理这块的整体逻辑主要分为三步：

第一步将模版字符串转换成element ASTs(解析器)
每截取一段标签的开头就 push 到 stack中，解析到标签的结束就 pop 出来，当所有的字符串都截没了也就解析完了。
用正则把 开始标签 中包含的数据（attrs, tagName 等）解析出来之后 维护一个 stack 这个 stack 是用来记录一个层级关系的，用来记录DOM的深度。
当解析到一个标签的开始时，要判断当前被解析的标签是否是自闭和标签，如果不是自闭和标签才 push 到 stack 中。
每解析一个 开始标签 就生成一个 ASTElement (存储当前标签的attrs，tagName 等信息的object）
并且把当前的 ASTElement push 到 parentNode 的 children 中，同时给当前 ASTElement 的 parent属性设置为 stack 中的最后一项

第二步是对AST进行静态节点标记，主要用来做虚拟DOM的渲染优化(优化器)

第三步是使用element ASTs生成render函数代码字符串(代码生成器)
可点击https://www.jianshu.com/p/77717a3bfb17
详细解释可点击https://blog.csdn.net/weixin_33963594/article/details/91422116

64. vuex原理解析

转自https://zhuanlan.zhihu.com/p/78981485

65.textContent和innerText以及innerHTML的区别，结合demo进行理解

textContent属性可以获取指定节点的文本及其后代节点中文本内容，也包括

innerText也是获取指定节点的文本及其后代节点中文本内容，但不能获取

innerHTML是获取HTML文本结构内容。
textContent会获取display:none的节点的文本；而innerText好像会感知到节点是否呈现一样，不作返回。
也就是说textContent能够获取元素的所有子节点上的文本，不管这个节点是否呈现；而innerText只返回呈现到页面上的文本。
由于innerText需要知道元素的最新样式，因此应首先触发重排（刷新排队的重排列表）并重新计算元素的样式，然后获得预期的结果。
而textContent则不必这样做，因为它不了解样式。

66.Vue 更新Data数据页面无反应问题

原因1：存在this指向问题，没有真正更新到data
原因2：Vue不能检测对象属性的添加或删除
1、方案一：利用Vue.set(object,key,value)
2、方案二：利用this.$set(this.object,key,value)
3、方案三：利用Object.assign({},this.obj)

对于通过this.$set添加的属性，通过以下方式删除即可：
//以下这种方式可以删除属性，同时会触发数据响应式的更新

this.$delete(this.mainData.test, "boolean");

释义: https://segmentfault.com/a/1190000014826146
原因3：更新的层级太深
实例解释:
https://blog.csdn.net/u010108836/article/details/104708864/

67. Vue.nextTick 的原理和用途

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
详细解释点击https://segmentfault.com/a/1190000012861862#comment-area

68. form表单中只有一个input时,回车键默认提交表单

在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性。
参考资料http://blog.sina.com.cn/s/blog_13887bf130102x02k.html