前端面试题

前端面试题简单整理

提示：整理了前端面试遇到的比较多的问题

---

前言

提示：分为Vue、JS、CSS等模块

---

一、Vue相关问题？

1、vue2生命周期

必经阶段：

beforeCreate、created（创建前后），可以首次拿到data中定义的数据，发送axios请求、初始化数据，在created中调用接口数据可以用于一些需要准备好数据再进行页面渲染的情况，比如说一些图表类

beforeMOunt、mounted（挂载前后），实例挂载完成，dom树渲染，可以访问组件数据、方法和DOM元素，可在mounted中进行dom操作、调用第三方库和发送请求

非必经阶段：

beforeUpdate、updated（更新前后），数据更新时调用

beforeDestroy、destroyed（销毁前后），销毁时调用

2、虚拟dom

是相对于浏览器渲染出来的真实dom的，类似于在js和真实dom中间加了一层缓存，利用diff算法避免没必要的dom操作

优缺点：

优点：降低浏览器性能消耗、diff算法降低重绘和回流、本质是js对象方便进行跨平台操作

缺点：首次显示慢点、无法进行极致优化

3、diff 算法

用js对象结构表示dom树的结构，然后用这个树构建一个真实dom，插入文档中；当状态更新时，重新构造一棵新的虚拟dom，然后新旧dom进行对比，记录差异，并将更新后的差异更新到第一次的真实dom上实现视图更新

4、Vue2和Vue3的区别

1. 响应式原理发生变化：vue2是通过es5的一个api，object.defineProperty()对数据进行劫持，结合订阅模式的方式来实现；vue3是通过es6的proxy对数据进行代理，通过reactive（）函数给每个对象都包裹一层Proxy，通过Proxy监听属性的变化，从而实现对数据的监控
2. vue3支持碎片式，组件中可以拥有多个根节点，vue2组件中只能有一个根节点
3. 数据和方法的定义发生变化：vue2中使用data、computed、methods等选项型api，vue3则使用setup函数作为属性和方法的入口。
4. setup函数可以接收两个参数（来自父组件的props、上下文的context)、可以返回对象（对象中的属性方法可以直接在模板中使用）和函数（可以自定义渲染内容）、函数内部没有this、当内部有异步函数需要使用await时可以直接使用，不需要在setup前面加async
5. 生命周期钩子
   
6. 父子通信

Vue2：
	console.log('props',this.XXX)
Vue3:
	setup(props,cotext){
	   console.log('props',props)
	}
父组件提供数据
父组件将数据传递给子组件
子组件通过defineProps接收
子组件渲染父组件传递的参数

5、对MVVM的理解

model表示数据模型，view表示UI组件，view-model：监听数据模型改变和控制视图行为、处理用户交互，通过双向绑定将model和view层链接起来

6、watch和computed的区别

watch：
	监听器，watch中的函数必须和data中的数据名一致；
	有两个参数；
	函数不需要额外调用；
	只会监听数据是否发生变化，深度监听需要加deep，
	首次加载时监听加immediate；不会调用缓存，可以调用异步
computed：
	计算属性，如果函数所依赖的属性没有发生变化，就从缓存中取；
	必须有return，使用和data中的数据一样，类似一个执行方法；
	会调用缓存，不能异步操作

7、vuex的action和mutations的区别

相同点都是修改state
actions处理异步和同步操作，改变状态，通过提交mutation
mutation必须同步执行，是更改state的唯一方法

8、vue的事件修饰符

prevent：阻止默认事件
stop：阻止事件冒泡
once：事件只触发一次
capture：使用事件的捕获模式
self：只有event.target是当前操作元素的时候才可以

9、VUE异步操作方法

1）、Promise封装异步方法，使用promise结合async和await
2）、Vue.nextTick函数
3）、Vue提供实例方法：$nextTick（）、$nextTickAsync（）
4）、使用自定义定时器：setTimeout（）和setInterval（）
5）、vue双向绑定
6）、vue的mixin属性
7）、vue地图插件

10、VUE组件传参的方式

1）父子传参：父组件v-model绑定data中的数据，子组件props接收
2）事件传递：父组件@自定义事件 + 函数名称，子组件$emit自定义事
件传递参数
3）事件监听：父组件添加ref属性，通过$refs【‘属性名’】直接调用子
组件中methods方法
4）在main.js中全局挂载
$EventBus（Vue.prototype.$EventBus = new Vue（）），
A组件this.$EventBus.emit ，B组件this.$EventBus.on接收

11、VUE性能优化

1）不在模板里写过多的表达式
2）尽量减少data中的数据
3）对象层级不要太深，影响性能
4）computed和watch区分使用场景
5）频繁切换使用V-show，不频繁使用v-if
6）v-for加唯一key，v-for和v-if尽量避免同时使用
7）使用路由懒加载和异步组件
8）防抖和节流的使用

12、防抖和节流

防抖：触发高频事件后N秒内只执行一次函数，适用于多次触发但只执行最后一次的场景（search输入联想，用户不断输入值，用防抖来节约请求资源；window触resize事件，不断调整浏览器窗口大小会触发这个事件时使用防抖）

节流：高频事件触发，在N秒内只执行一次，N秒内多次触发，只执行一次，稀释函数的执行频率（鼠标多次点击相同事件；监听滚动事件，监听滚动到底部加载事件）

13、VUE中获取dom

1）给dom元素添加id，通过document.getElementById（'id名'）获取该元素
2）给相应的dom元素加ref = ‘name’，通过this.$refs.name

14、对webpack的理解

静态模块打包器
能够翻译和压缩代码
减小代码包体积
让浏览器可以更快打开网页

15、vue双向数据绑定的实现

通过v-modal在表单及元素上添加双向数据绑定，监听用户的输入操作以及数据的更新，并对一些终极场景进行特殊处理
通过v-on进行事件绑定，简化写法喂@+事件名称，常用的事件click、keydown、keyup、mouseover、mouseout

16、VUEX进行状态管理时刷新页面数据丢失

采用localStorage或cookie对必要的用户数据进行本地存储

17、VUE的常见指令

v-on、v-bind、v-modal、v-for、v-show、v-if、v-else、
v-else-if、v-text、v-html

18、从word文档复制过来到富文本编辑器中会携带文本样式

解决：const E = window.wangEditor
const editor = new E('#div1')
editor.config.pasteTextHandle =function (pasteStr) {
    var newStr = pasteStr.replace(/@font-face{[^>]*div.Section0{page:Section0;}/g})
    return newStr
}

19、前端开发遵守的开发规范

元素缩进、变量命名语义化、文件夹命名大驼峰、html文件命名小驼峰、图片命名采用小写字母+数字+下划线

20、Vue中的角色权限管理

1、后端判断用户拥有哪些权限，返回前端所需要的路由及导航
2、动态加载路由、
3、动态显示导航
具体实现：

1、在路由钩子函数beforeEach中发送请求获取需要的路由及导航数据
router.beforeEach((to,from,next) => {
    if(缓存中没有导航数据){
         //发送请求，获取路由
         //获取数据后缓存、放进vuex
         next()   
    }else{
        next()    
    }
})
2、动态添加路由(将需要的路由数据组装成需要的数据)
navData.forEach(item => {
    routes.push({
        path:item.path,
        name:item.name,
        meta:{title:item.title},
        component:()=> import ('本地路由的页面引入路径')    
    })
})
router.addRouters('组装好的路由')
3、动态显示导航栏
<ul>
    <li v-for="v in navData" :key="v.path">
        <router-link :to="v.path">
            <i class="iconfont"></i>
            <span>{{v.title}}</span>
        </router-link>
    </li>
</ul>

4、按钮权限
    通过后台返回的按钮权限或者用户权限，使用v-if或自定义指令控制按钮的功能

21、Vue 路由守卫

全局守卫
    全局前置守卫：router.beforeEach((to,from,next) => {
        to:切换后或者即将跳转的  
        from:跳转前的路由
        next:是否继续往下执行，如果不写，路由就不会跳转，操作将会被终止  
    })
    全局后置守卫：router.afterEach((to,from) => {
            to:即将跳转的路由
            from:跳转前的路由
    })
独享守卫
    组件独享守卫：beforeEnter(to,from,next){
         进入组件时被调用，区别在于想对哪个路由进行权限控制就直接在其路由配置项中添加守卫，作用域也仅限于该路由
    }
组件内守卫：使用路由规则进入或者离开该组件时就会触发组件内守卫，而组件内守卫规范也仅限于该组件
    beforeRouterEnter、beforeRouterLeave(不像全局后置守卫一样在组件加载完成后调用，而是在切换出这个组件后背调用)

22、VUE路由跳转方式

1、router-link：不带参数（如果路径带‘/’，则从根路由开始，不带则从当前路由开始）；带参数（使用params或者query传参，query类似于get传参，params类似于post传参，取参数时分别$route.params和$route.query）
2、this.$router.push()：函数里面调用。跳转到指定url路径，并且history会添加一个记录，点击后退会返回上一个页面
3、this.$router.replace（）：跳转到指定路径，history中不会添加一个记录，点击后退会退回上上个页面
4、this.$router.go（n）：向前或者向后跳转n个页面，n可以为正负整数

23、hash和history的区别

hash路由地址栏有#，history没有；
hash兼容性较history要好一点；
当hash值发生改变时，并不会向服务器端发送请求而是触发onhashChange事件，从而根据hash值来修改页面内容
history原理是利用window.history相关api进行跳转，从而改变页面内容，由于通过history的api进行路由跳转，并不会向服务器发送请求，达到前端路由的的目的
history需要后端配合，否则刷新页面，或者直接根据路径访问项目会报错404，因为打包后的文件一般只有一个index.html文件和一些打包后的js文件以及文件夹，所以需要后端重定向到首页进入项目再进行路由匹配

24、对Promise的理解

Es6规定，promise对象是一个构造函数，用来生成promise实例
promise有三种状态，分别是pending（初始状态）、fulfilled（成功状态）、rejected（失败状态），promise状态改变不可逆，只能有pending变成fulfilled和pending变成rejected
三个缺点：
一旦新建就会立即执行，无法中途修改或者取消；
如果不设置回调函数，promise内部抛出的错误不会反映到外部；
当处于pending状态时，无法确定目前进展到哪一阶段，是刚刚开始还是即将结束

25、Uni-app打包

链接: link

云打包

用HbuilderX打开要打包的项目；

选择项目列表中的项目右击选择发行 ===>原生App-云打包，弹出打包页面；

到开发者中心生成证书；

证书生成后下载下来存放到指定目录，然后在开发者中心选择需要打包的项目 => 我的证书 => 证书管理 => 证书详情中可查看别名密码；

打包页面输入别名密码，选择下载好的证书，可以选择不要开屏广告，然后选择打包；

最后生成apk包，下载安装即可本地打包

本地打包

下载AndroidStudio，下载App离线打包SDK

Android打开SDK打包配置文件，生成keystore，生成本地资源

26、vue 和 react 的区别

共同点

数据驱动视图

组件化开发，把注意力放在UI层

使用虚拟dom

不同点

1、核心思想不同：vue是灵活易用的渐进式框架，进行数据拦截代理，对侦测数据变化更敏感精确；react推崇函数式编程，数据不可变以及单项数据流。

2、组件写法不同：vue将html、css、js写在同一个文件中；react是将html和css全部写入js文件中。

3、diff算法比较不同：1、当元素节点类型相同，但类名不同时，vue认为是不同元素，会删除该元素重新创建，而react认为是同类型节点，会进行修改操作；2、列表对比时，vue采取从两端到中间的方式进行对比，而react则采用从左往右进行对比。

4、响应原理不同：vue依赖收集、自动优化、数据可变、递归监听data所有属性，直接修改，当数据改变时自动匹配组件重新渲染；react基于状态机，手动优化，状态不可变，需要setState驱动新的state替换老的state。

27、VueX和localStorage的区别

1）VueX存储存在内存，localStorage则以文件的方式存储在本地
2）VueX用于组件之间传值，localStorage则用于不同页面之间传值
3）当刷新页面时Vuex存储的数据会丢失，所以将vuex的传值写在conputed中；localStorage不会丢失数据

27、Vue中data是个函数返回一个对象的原因

1、vue中组件是用来复用的，定义一个函数并返回一个对向是为了防止data复用
2、vue中组件data数据都应该是相互隔离，互不影响的，组件每复用一次，data中的数据就会被复制，定义函数返回值的形式可以有效的避免某一处复用组件数据时影响其他页面复用组件时的data数据
3、数据已函数返回形式定义，这样每复用一次组件，就会返回一份新的data，使其拥有自己的作用域，
4、单纯定义对象形式，这些实例公用一个构造函数，就会造成一个数据变化全部变化的结果

28、vue3的生命周期钩子

组件挂载前后：
beforeCreate：组件创建前挂载，此时组件的data和methods还未初始化
create：组件实例被创建后使用，此时data和methods已经初始化但还未挂载到DOM中
beforeMount：组件挂载前调用，此时组件已经完成编译，但还未挂载到DOM中
mounted：组件挂载之后调用，此时组件已经挂载到DOM上
组件更新前后：
beforeUpdate：组件更新之前调用，此时组件的数据已经更新，但是DOM并未更新；
updated：组件更新之后调用，此时组件的数据已经更新，DOM也已经更新完成
beforeUnmount：组件卸载之前调用，此时组件中还存在DOM中
unmounted：在组件卸载之后调用，此时组件已经从DOM中删除，所有的定时器和事件监听器都已经被清除

除此之外
activated：在keep-alive组件激活时调用
deactivated：在keep-alive组件停用时调用
errorCaptured：在捕获子组件错误时调用

二、JS相关问题

1、修改this指向（call、bind、apply）

1）call和apply会调用函数，并且改变函数内的this指向
2）call和apply参数不一样，call是以字符串罗列的形式传递参数，apply是以数组的形式传参
3）bind不会调用函数，可以改变函数内部this指向
4）应用场景：call常用于继承、apply用于数组、bind可用于改变定时器内部this指向

2、this指向

1）普通函数：this指向函数的直接调用者，没有前缀时指向window，默认情况下指向window，使用（call、apply、bind）函数指向绑定的对象
2）箭头函数：指向定义的对象
3）特殊情况固定指向window：立即执行的函数、定时器传入的函数

3、forEach和map的区别

区别：forEach有返回值，map没有返回值；forEach会改变原数组，map生成新数组不改变原数组
相同：都是遍历数组，this指向window，都有三个参数（item当前项、index当前项索引、arr原数组）

4、for in 和 for of的区别

for in 是输出下标，可以遍历对象
for of 是输出每一项，不可遍历对象

5、对闭包的理解

闭包就是能够读取其他函数内部变量的函数。
创建闭包的常用方式就是在一个函数内部创建另一个函数
闭包的使用场景：返回值、函数赋值、函数参数、循环赋值、节流函数（限定时间内flag的值喂true）

6、var、let、cosnt的区别

let 和 const 是es6新增的声明变量的方法
var 和 let声明变量时可以不设置初始值，也可以被重新赋值，const必须设置初始值且不可被重新赋值（const声明常量不可以被重新赋值，定义对象时对象属性可以被修改）
var存在变量提升，let和const不具备
var可以声明同名变量，后声明的同名变量会覆盖之前声明的变量，let和const不可声明同名变量
浏览器的全局变量是window，var声明的变量会将 该变量变为全局变量的属性，let和const不会
var不具有块级作用域，可以跨块不可跨函数访问，const和let具有块级作用域

7、块级作用域

es6新增概念，es6之前只有全局作用域和函数作用域。
es6之后凡是带有 { } 的就是块级作用域，例如for（） { }、if（）{ }，但是function后面的是函数作用域

8、原型和原型链

1）、在js中，每定义一个对象都包含一些预设属性，所有的对象都有一个prototype属性，这个属性指向的函数对象就是原型对象
2）、原型链是指原型对象组成的链式结构
3）、访问一个对象时，首先在这个对象中匹配，未找到则沿着原型链向上寻找，原型链中不存在则返回undefined；定义对象时不会访问原型链，而是直接定义在对象中；方法一边定义在原型对象中，属性一般通过构造函数定义在对象中

9、构造函数

构造函数就是通过函数创建多个属性和方法相同的对象，它抽取了对象的公共部分，封装到函数里，泛指一个大类

10、null和undefined的区别

null：是一个空对象，转换成数值是0，typeof（null）返回object对象
undefined：表示未定义，转换成数值是NaN，typeof（undefined）返回undefined

11、字符串转数值，字符串转数组

转数值：number（）、parseInt（）、parseFloat（）
字符串转数组：split（）
数组转字符串：join（）

12、GET和POST的区别

相同：都是http协议发送请求的方法，本质都是TCP链接
区别：
1）、GET通过URL传参，POST参数包含在请求体中，安全性较高
2）、GET传参受浏览器和服务器影响参数有长度限制，POST则没有
3）、GET传参会被完整保留在浏览器记录中，可以被浏览器添加成书签，POST则不行
4）、GET采用百分号对参数进行编码，POST编码方式更加多样化
5）、GET方式发送请求会将请求头和data同时发送出去，服务器响应200，请求结束；PSOT先发送header，服务器响应100，浏览器再次发送data，服务器响应200，请求结束

13、ES6新增特性

新增命名变量方式let、const
新增定义类的语法糖calss
新增基本类型symbol（独一无二的值）
新增变量的解构赋值（允许按照一定模式 从对象或数组中抽取值，然后对变量进行赋值）

let arr = [1,2,3,4]
console.log(arr[0],arr[1],arr[2]，arr[3])

新增箭头函数
新增拓展运算符：三个点，可以将数组转为用逗号分割的参数序列

var arr = [1,2,3,4]
console.log(...arr) // 1,2,3,4
var str = 'string'
console.log(...str)//s,t,r,i,n,g

14、箭头函数

相当于匿名函数，简化了函数定义，有两种方式
一种是只包含一个表达式，省略了{ }和return
一种是包含多条语句，不可省略{ }和return

15、innerHtml 和 innerText 的区别

都是获取document对象内容的方式
区别：
innerHtml是指从起始位置到结束位置的全部内容包括html标签；是W3C规定的属性
innerText 是指从起始位置到结束位置的内容去除标签，存在浏览器兼容问题

16、JS获取子节点的方法

document.getElementById('div').getElementsByTagName('div')
document.getElementById('div').children
document.getElementById('div').firstElementChild
document.getElementByid('div').lastChild
document.getElementByid('div').lastElementChild
document.getElementByid('div').childNodes

17、浅克隆和深克隆

浅克隆是当对象被复制时只复制它本身和其中的值类型的变量元素，而引用类型的元素变量不会被复制
深克隆是除对象被复制外，对象所包含的所有成员变量均会被复制

18、session与Cookie的区别

1）、存放位置不同：session放在服务端， cookie放在客户端；
2）、存取方式不同：session保存的是对象，cookie保存的是字符串；
3）、安全性（隐私策略）不同：session存在服务器上，对客户端是透明的，不存在敏感信息泄露的风险；cookie存在客户端，对客户端可见，容易被修改、复制、引用；
4）、有效期不同：session存储关闭浏览器就会失效；cookie允许设置时间，时间设置足够长，cookie就可以在本地保存足够长时间；
5）、对服务器造成的压力不同：cookie保存在客户端，不占用服务器资源，并发阅读用户更多时适合使用cookie；session保存在服务端，每个用户都会生成一个session，高并发阅读发生时会给服务器造成很大压力
6）、跨域支持不同：cookie支持跨域名访问，session不支持

19、cookie、sessionStorage、localStorage的区别

1）、cookie在同源http请求中来回携带，localStorage和sessionStorage进行本地存储，
2）、存储大小：cookie在4k左右，localStorage和sessionStorage可以达到5M
3）、数据有效期：cookie可设置过期时间，localStorage长期有效，sessionStorage在同源浏览器窗口有效
4）、使用方式：cookie需要手动封装，sessionStorage和localStorage有现成api存取数据

20、axios和ajax的区别

axios ： 是基于promise库的http库，可以调用promise的api；默认发送JSON格式的GET请求；请求的数据格式会自动转化，后端响应的数据格式需要转换成JS对象格式；
ajax ： 是异步的XML和JavaScript；可以运行到浏览器不可以在node；发送给后端的数据需要手动转化，请求头需要手动设置；

21、axios请求二次封装

利用axios的create方法创建一个axios实例，创建的同时配置请求的基础路径和请求时间
配置请求拦截器，可以在请求之前进行请求检测并进行一些操作
响应拦截器可以检测响应数据，对响应成功的数据进行数据处理，响应失败的的函数可以终止promise链子，return Promise.reject（），并最后暴露这个axios实例

// 引入axios
import axios from 'axios'
import ElementUI from 'element-ui';

//1. 创建新的axios实例，
const service = axios.create({
	baseURL = process.env.VUE_APP_API_BASE_URL
    //设置请求超时时间
    timeout: "7000"
})
// 设置POST请求数据格式
service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; 
// 请求拦截器（请求拦截器作用就是用于发送接口请求前需要做的操作）
service.interceptors.request.use((config) => {
    // 配置请求头用户令牌，添加token
    const token = window.sessionStorage.getItem('token')
    if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
        config.headers.authorization = `${token}` //请求头加上token
    }
    return config
})

// 响应拦截器
service.interceptors.response.use((res) => {
// 对响应状态码进行判断，做不同的处理
    let status = res.data.meta.status
    switch (status) {
        case 401:
            ElementUI.Message.error(res.data.meta.msg);
            break;
        case 403:
            ElementUI.Message.error(res.data.meta.msg);
            break;
        case 404:
            ElementUI.Message.error(res.data.meta.msg);
            break;
        case 422:
            ElementUI.Message.error(res.data.meta.msg);
            break;
        case 500:
            ElementUI.Message.error(res.data.meta.msg);
            break;
        default:
            break;
    }
    // 响应拦截器执行完后需要将接口返回的数据也就是res回调函数，return给到之后的请求方法
    return res
})

// 将新创建的一个axios导出
export default service

22、数组常用API

unshift：给数组开头添加一个元素
shift：从数组删除第一个元素
pop：将数组最后一个元素删除并返回该元素
push：将一个或多个元素添加到数组末尾
splice：通过删除或替换现有元素或原地添加新元素来修改数组，并以数组形式返回修改后的内容
concat：用于合并两个活多个数组，不改变原数组返回一个新数组
sort：对数组元素按照码表规则进行排序并返回新数组	
reserve：将数组元素的位置颠倒并返回给该数组，影响原数组
join：将数组的所有元素连成一个字符串并返回这个字符串
slice：截取一个数组的指定位置元素并返回一个新数组，截取元素的位置由相应元素的下标决定
forEach：遍历数组，给每一个元素执行给定的函数，改变原数组并返回
map：遍历数组，对每个元素执行给定的函数，返回新数组
filter：创建新数组，包含通过函数测试的所有元素
some：测试数组中至少有一个元素通过测试函数，返回值是布尔值
every：测试数组中每一个元素是否都通过测试函数，返回布尔值

23、递归函数举例

var n = prompt('输入一个整数')
var m = res(n)
function res(m) {
	if(m == 1){
		return 1
	}else{
		return m*res(m-1)
	}
}
console.log(m)

递归的终止条件是在函数内添加 if 判断，根据判断条件选择结果是继续调用自身
还是 return 终止递归

24、APP打包上线流程

1）、配置mainfest.json：app图标配置，app启动页面，app相关权限
2）、配置uniapp安卓开发模拟器设置
3）、点击发行云打包：下载模拟器，配置基座，添加系统环境变量，链接模拟器，运行，编译完后，模拟器apk文件安装项目启动，
4）、点击地址下载

25、Uni-app中点击某个按钮发送请求时，请求发送但是网络延迟，如何优化

1）、优化服务器
2）、优化本地网络环境
3）、减少请求量
4）、使用uni-app内置优化工具，例如uni.resquest提供了timeout参数，可以指定请求超时，避免长时间等待

26、websocket的优点

是html5提出来的新的网络协议标准，
建立与TCP协议至上的应用层
一旦建立链接，服务端握手则一直保持着链接状态，是持久化链接服务端可通过实时通道主动发送消息
数据接收的实时性和时效性
较少的控制开销，链接创建后，ws客户端和服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的时候服务端和客户端的包头只有2-10个字符（取决于数据包长度），客户端到服务端的话，需要加上额外的4字节的掩码，而http协议每次通信都需要携带完整的头部信息

27、在项目中使用canvas

1）、在页面中添加canvas动画标签，并设置固定宽高
2）、canvas会创建一个大小固定的画布，会公开一个或多个渲染上下文（通过getContext方法获取和渲染上下文）
3）、使用渲染上下文(画图进行渲染fill（），画图后进行填充stoke（）），设置颜色（填充颜色fillStyle（）、描边颜色strokeStyle()）

28、类和继承

类：用于创建对象的模板，即通用事务的抽象，其核心是原型对象，实例就是类的具体化，类的每个实例都是独立的对象
继承：当多个类中存在相同属性和行为时，将这些相同属性抽取到一个单独类中，再写其他类无需定义这些属性和行为，只要继承那个类就好（语法：calss 子类名 extends 父类名）

29、JS内存机制和垃圾回收

一般来说JS的内存空间分为栈、堆、池
其中栈存放变量，堆存放复杂变量，池存放常量（也叫常量池），简言之栈存放基本数据类型及对象变量的指针，堆存放引用数据类型
栈内存运行效率比堆内存高，空间相对堆内存小，所以将构造简单的原始类型数值存放在栈内存中，将构造复杂的引用类型值存放在堆中而不影响效率

30、三个等号和两个等号的区别

三个等号：要求等式两边的数值和类型都相等，返回true
两个等号：数值相等就返回true

31、判断一个值是什么类型有哪些方法

typeof：判断数据类型，但是只能判断基本数据类型，对于数组、null、对象这种只会返回object
instanceof：测试一个对象是否为一个类的实例
object.prototype.toString：判断某个值属于哪种内置类型

const arr = [1，2，3]
arr.toString(),//1,2,3
通过call来指定arr数组为object.prototype对象的toString方法的上下文
object.prototype.toString.call（arr） // [object,Array]

32、src和href的区别

1）、作用不同：herf用于在当前文档和引用资源之间建立关系，src用于替换当前内容
2）、浏览器解析方式不同：在文档中添加herf，浏览器会自动识别该文档为css样式并加载；当浏览器解析到src 时会暂停资源下载，知道该资源加载编译完毕
3）、请求资源不同：herf是超文本引用，用来建立文档和元素的链接，常用的 link 、a 标签；src请求资源时会先将其指向的资源下载并应用到文档中，常用的标签有 img 、script、iframe

33、diff算法

是通过同层级的树节点进行比较的算法，其目的是找出新旧不同虚拟dom之间的差异，使视图更新最小化，本质是比较两个js对象的差异
特点：只会在同一层级进行比较，不会跨级；在diff比较的构成中，循环从两边向中间比较

三、CSS相关问题

1、CSS3新增属性

选择器：nth-child、nth-of-type
边框属性：border-radius，box-shadow，border-image
动画：animation
颜色：rgba
渐变：线性渐变，径向渐变
转换：transform
过渡：transition
布局：flex布局和栅格布局

2、flex：1表示什么

flex：1表示均匀分布元素，是 flex-grow（项目放大比，默认值0）、flex-shink（项目缩小比，默认值1）、flex-basic（放大缩小前是否有多余空间，默认auto即项目本身大小，设置auto会根据内容大小自动撑开盒子）三个属性的缩写

3、flex布局常用属性

触发弹性盒：display：flex
主轴：justify-content：center、space-between，space-around、flex-start、flex-end
侧轴：align-items：center、flex-start、flex-end
换行：flex-wrap：nowrap、wrap
更换主轴：flext-direction：row（横轴）、col（纵轴）
子元素侧轴对齐：align-self：center
挤压属性：flex-shrink：0（挤压）、1（不挤压）
转矩剩余宽度：flex：1

4、CSS设置垂直水平居中

position：absolute + 负margin
position：absolute + margin：auto
position：absolute + calc
position：absolute + transform（平移）
line-height：只对文本元素有效
弹性盒 + justify-content：center + align-items：center

5、CSS选择器及优先级

！important 、内联样式 、ID选择器 、类选择器 、属性选择器、伪类选择器、元素选择器（html、body、div等）、通配符选择器：*、继承选择器（子元素会继承父元素的属性，例如div标签内的span标签会继承div的元素样式）

属性选择器
// 第一种：[属性]
<h1 title = 'hello world'></h1>
<a title='url' herf=''/>
[title]:{
    color:pink
}
// 第二种：[属性='值']
<img title='one' src='...' />
<a title='one' herf=''></a>
<div title='two'></div>
<p title'two'></p>
[title=one]{
    color:pink
}
//第三种：[属性~=值] 属性中包含独立的单词
<h1 title='one two'></h1>
<p title='one three'></p>
[title~=one]{
    color:pink
}
//第四种：[属性|=值] 属性中必须是唯一且完整的单词，或用-隔开
<p lang='one'></p>
<p lang='eson'></p>
<p lang='one-gb'></p>
<p lang='us'></p>
<p lang='neo'></p>
[lang|=one]{
    color:pink
}
//第五种：[属性*=值] 属性中做字符串拆分，只要能拆出匹配值的词就可以
<p title='one'></p>
<p title='oneeeeeeeeee'></p>
<p title='ooooneee'></p>
<p title='eon'></p>
<p title='nnoweeeo'></p>
[title*=one]{
    color:pink
}
//第六种：[属性^=值] 属性的前几个字母匹配值即可
<p title='one'></p>
<p title='oneeeeeeeeee'></p>
<p title='ooooneee'></p>
<p title='eon'></p>
<p title='nnoweeeo'></p>
[title^=one]{
    color:pink
}
//第七种：[属性$=值] 属性的结尾字母匹配值即可
<p title='one'></p>
<p title='oneeeeeeeeee'></p>
<p title='ooooneee'></p>
<p title='eon'></p>
<p title='nnoweeeo'></p>
<p title='nnoweeeone'></p>
[title$=one]{
    color:pink
}
//表单样式
<form name='formData' action="demo-form.php" method="get">
    你好：<input type='text' name='fname' value='你好' size='20'></input>
    你好：<input type='text' name='lname' value='嗨' size='20'></input>
    <input type='button' value='点击'></input>
</form>
input[type='text']{
    width:200px;
    display:block;
    margin-bottom:10px;
    background-color:pink
}
input[type='button']{
    width:200px;
    display:block;
    color:yellow
}

伪类选择器

伪类选择器
a:link         选择所有未访问链接
a:visited      选择所有访问过的链接
a:active       选择活动链接
a:hover        选择鼠标在链接上面时
input：focus   选择具有焦点的输入元素
p:first-letter 选择每一个<p>元素的第一个字符
p:first-line   选择每一个p元素的第一行
p:first-child  选择<p>元素下的第一个子元素
p:before       在每个<p>元素之前插入内容
p:after        在每个<p>元素之后插入内容
p:lang(it)     选择一个lang属性的起始值为'it'的所有P元素

6、Css link 与@import的区别?

1）、从属关系：link是html标签，只能在html中使用；@import是css样式在style标签或者css样式文件中使用
2）、加载顺序：link引用css样式在页面载入的时候同步加载；@import需要在页面完全载入后加载
3）、link是html标签，无兼容性问题，@import是在css2提出的，只能在ie5+的浏览器中使用
4）、DOM可控性：link支持js去控制DOM样式；@import不知此

7、alt和title的异同

相同：都会飘出小浮窗，显示文本内容
不同：alt只能是元素的属性，title既可以是元素属性也可以是标签；alt用来指定替换文字，只能在img、area、input中使用，alt属性具有搜索引擎优化作用；当a标签嵌套img时，起作用的只有img的title属性

8、display：none 和 visibility：hidden 的区别

1）、是否占据空间：前者不占用空间，在文档渲染的时候如同该元素不存在；后者占用空间
2）、是否渲染前者会触发回流进行渲染，后者只会触发重绘，没有位置变化，不会进行渲染；
3）、是都是继承属性：前者不是，元素及其子元素都会消失；后者是继承属性，若子元素使用visibility，则不继承，子元素显示
4）、读屏器是否显示：前者不会读取，后者会读取

9、怪异盒模型和标准盒模型

盒模型是CSS技术所使用的一种四维模式，是指将网页设计元素看做一个装东西的矩形盒子，每个盒子都有内边距、外边距、边框、内容四个部分组成，除去内容部分，其他每个组成部分都分为上下左右四个方向，方向既可以分开定义也可以统一定义
标准盒模型：又称W3C标准盒模型，标准盒模型的宽高决定内容的宽高，标准盒模型的宽高是由盒子的宽高 + 内边距 + 边框构成
怪异盒模型：又称IE怪异盒模型，宽高 = 内容 + 内边距 + 边框

10、重绘和回流

1）、重绘：当元素的一部分属性发生变化，如外观、背景、颜色等不会引起布局变化而需要重新渲染的过程
2）、回流：当渲染树的一部分元素或者全部元素因为大小、位置、边距等的改变而需要重建的过程，开销较大
3）、减少重绘和回流的方式
添加CSS样式，减少JS控制样式
减少更改DOM元素的操作次数
让元素脱离动画流，减少回流的render Tree的规模
讲需要多次重排的元素position设置为absolute或者fixed，使之脱离文档流，减少该元素的位置变化对其他元素的位置影响

11、浏览器性能优化

1）、减少http请求次数、大小、缓存
2）、资源加载优化（异步加载JS文件、延迟加载图片、利用CDN将资源分发到离客户端更近的服务器，提高资源加载速度）
3）、页面渲染优化（减少DOM操作次数、避免table布局、采用CSS动画等）
4）、代码优化（避免使用全局变量、优化重复执行代码）

12、less和css的区别

1、Less是一门CSS预处理语言，css是一种用来表现HTML或XML等文件样式的计算机语言。

2、less扩展了CSS语言，增加了变量、Mixin、函数等特性。

3、css可以被浏览器直接识别，less需要先编译为css。