前端面试题，不服来辩

学习目标：

提示：温馨提示！如有错可提建议，不要骂我

• 前端面试题

---

学习内容：

提示：加油

例如：

1. html+css
2. javaScript
3. Vue
4. webpack
5. 等等

---

Let's  go!

面试题

一.重绘和重排

在页面的生命周期中，页面至少会渲染一次，在用户访问的过程中还会触发重绘和重排，无论是重绘或者重排都会影响性能

重绘：某些元素的外观发生改变

重排：重新生成布局，重新排列元素

重绘不一定会重排 但重排一定会导致重绘

可能导致重排的原因：页面初始渲染、可见的添加删除DOM 改变元素位置或者尺寸等

二、浮动的原理 和清除浮动的方法

1.原理：浮动会脱离文档流 不会占据空间

2.清除浮动方法 ：1：使用空标签 在浮动标签后面添加一个空标签定义css clear:both 缺点是增加了无意义标签

2：使用after伪对象清除浮动 该方法适用非IE浏览器 适用此方法高度height必须为0

3：溢出隐藏 overflow：hidden

4：浮动外部元素

三、GET 和 POST

基本概念

1.GET请求是用于获取资源、查询，它不会修改服务端的数据，这点是安全的，但是由于GET请求在url地址栏上是可见的所以保密方面没有POST好，安全性较差

特点：1.对url长度有限制(这是因为浏览器会对url会进行解析，而解析的时候会分配内存)

2.有缓存

2.POST是对服务端发起修改请求，它的url的地址栏有加密，它的体积较大

特点：1.没有缓存

2.安全性较高

GET和POST的区别

1.除了以上几种，最大的区别在于报文格式上的不同，无论是get还是post用的都是一个传输层协议，所以在传输上没有区别

四、vue2.x中如何检测数组的变化

通过函数劫持的方式，重写了数组的方法，vue将data中的数组进行了原型链的重写，指向了自定义的数组原型方法，这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。

五、使用箭头函数应该注意什么

1.this的指向

2.不可以当作构造函数

3.不可以使用arguments对象

六、如何实现深拷贝

判断+递归

判断是基本数据类型和引用数据类型，如果是引用数据类型还需判断是数组还是对象

递归：自调用 有入口和出口

原理：把一个对象序列化成一个字符串—>再将对象内容转为字符串保存到磁盘，再使用JSON.parse()反序列化JSON字符串为一个新数组

七、Vue实现数据双向绑定的原理是什么

通过object.defineProperty进行数据劫持，再通过发布者-订阅者模式模式实现

八、什么是DOM，什么是BOM

1.dom是文件对象模型

作用：提供了javaScript与网页交互的方式

2.BOM

1.浏览器对象模型

作用：用于操作浏览器而出现的API

九、什么是模块化？ 为什么要使用模块化？ 怎么使用？

1.将一个复杂的代码通过规范封装成一个模块，通过其它地方可进行调用

2.为什么要使用：1.实现代码的复用性 2.解决命名冲突 3.提供代码的可维护性 4.方便模块间组合 5.多人协作不被干扰

3.怎么使用：将封装好的模块进行导出导入到对应文件里

4.加载模块是根据每个地方的规范而不同的 如CommonJS, AMD, ES6、CMD

十、CommonJS模块化规范

它是nodejs里的规范 每个文件都是一个模块并且都有自己的作用域 在浏览器端文件需要提前打包处理

特点：1.不会影响全局作用域

2.模块可以多次加载 第一次加载的时候运行一次，然后运行结果缓存、后续加载直接读取缓存 要想模块再运行得清除缓存

怎么用：导出 module.exports={} 导入 require('XXX')如果是第三方模块则使用模块名 自定义使用路径

十一、ES6模块化规范

ES6的模块化规范和CommonJsa的差异就是 ES6使用的静态化定义

ES6使用的export导出 import导入

CommonJs输出的是一个值的拷贝，Es6输出的是一个值的引用

CommonJs是运行时加载，ES6是编译时输出接口

十二、模块化总结

由于CommonJS是服务端编程，加载是同步的，这就意味着并不适合浏览器环境 因为浏览器是异步加载，同步加载会造成堵塞 所以就有了AMD和CMD

AMD CMD类似 都是异步加载模块 AMD依赖前置 不过AMD的开发成本高，书写困难 而CMD依赖就近，CMD没有全局require

ES6实现了模块功能 而且简单 所以成立主流

十三、CSS选择器优先级排序

id选择器>类选择器>属性选择器>伪类选择器>伪元素选择器>标签选择器>通配符选择器

十四、减少页面加载时间的方法

1.减少HTTTP请求

2.优化图片 减小尺寸

3.压缩JS和CSS代码

4.避免跳转

4.使用get代替ajax

5.避免空的src和href

十五、什么是内存泄漏，以及常见的内存泄露原因和排查方法

1.什么是内存泄漏：内存泄漏是指程序未及时得到释放而造成内存不能使用

2.常见的内存泄露：闭包：闭包会引用到父级函数上的变量，若没有释放就会内存泄漏

全局变量：全局变量会直接挂在root上，不会被清除 root为文档根元素，在root中声明相当于全局属性

nodejs的事件监听：对同一个事件重复监听，忘记移除

十六、Vue的原型方法

vue原型对象会帮我们初始化很多属性和方法，我们可以通过this.property直接调用，vue类也通过静态方法初始化了一些全局api,可以直接通过类名调用，如Vue.component(),Vue的原型对象和api是通过混入的方式融入Vue中的

Vue的原型方法指所有Vue.方法都是原型方法，它是绑定到Vue构造函数上的

this.$方法的是绑定到Vue原型上的

十七、异步加载JS的方式有哪些？

什么是异步加载：异步加载就是在执行过程中同步加载

异步加载有哪些：如动态创建JavaScript标签，然后设置src和async属性再进行解析插入页面中

1.使用defer属性规定是否对脚本进行延迟，直到页面加载完成

2.使用async规定脚本一旦使用则会执行异步操作

十八、同步和异步的区别

同步指用户看得见页面刷新，等请求完，页面刷新—>新内容出现—>用户看到新内容才可以进行下一步操作

异步指浏览器访问服务端请求，浏览器后端进行请求，请求完页面不刷新，新内容也会出现

十九、原型对象，原型链

1.什么是原型对象：构造函数通过prototype指向的对象就是原型对象 原型对象通过constructor指向构造函数/它的作用在于多个对象之间共享数据

原型对象怎么用：在构造函数上.添加一个原型对象方法

2.什么是原型链：一般来说构造函数可通过new实例化一个对象，实例化对象可通过原型链proto指向原型对象 实例化对象就可获取原型对象上的属性和方法

new实例化 都干了什么：创建了一个空对象 obj赋值给了this 实例对象的原型就是构造函数的原型 定义实例属性和方法 返回this

二十、JS的继承方式

1.混入式继承 ：将一个对象中的成员拷贝到另一个对象中

怎么用：需要拷贝的对象名.成员名 = 被拷贝的对象名.成员名

2.原型式继承：将父类的原型成员添加到子类的原型对象中

为什么用：一个对象中需要另一个对象中的数据的时候才用

怎么用：父类对象.prototype = 子类.prototype

3.原型链继承:将子类的原型对象指向父类的实例对象上

怎么用：子类.prototy ’= new(实例化)父类

缺点：无法通过构造函数给父类的构造函数传值

解决方案：给自身实例对象上添加成员

4.借用构造函数继承：

借用构造函数的缺点

5.组合继承

二十一、Less和Sass的区别

less和sass都是预编译处理语言，两者可配合gulp和grunt使用

主要区别在于：less是基于javaScript的客户端处理所以安装的时候用npm，sass是Ruby服务端处理

less没有输出设置 sass有输出选项：nested, compact, compressed 和 expanded。

sass支持条件语句 if{}else{} for{}

二十二、gulp和grunt

二十三、常见的浏览器内核

Trident内核：IE.360,搜狗

Gecko内核：Netscape6以上版本

Persto内核：Opera7及以上

Webkit内核:Crome,Safari等

二十四、单项数据流和双向数据流

单向数据流，一个上传数据，一个下传数据，相互独立，单向数据流只能从一个方向改变状态

双向数据流：双向数据流也叫双向绑定，改变一个状态可能其它状态也会发生改变，从而使得代码难以调试

二十五、vue-cli生成的项目文件夹assets和public(static) 的区别

相同点：都是Vue存放静态资源的地方，项目所需要的图片、静态文件都放里面

不同点：

assets在项目打包时会将静态资源与代码、index.html一起打包压缩上传服务器

public:不会被打包压缩等格式化流程而是直接进入打包好的目录上传服务器

二十六、Vue 组件 data 为什么必须是函数

因为data是函数的话，每次复用组件的时候就会得到新的data,相当于给每一个组件设置了一个私有空间，让每个组件各自维护自己的数据，如果data是一个对象，就是所有组件共用一个data，这样造成的后果是一个变了全都变

二十七、Vue3中的数组变化跟Vue2中有什么区别

Vue3使用的是proxy对象进行代理，对数据进行监控

Vue2使用Object.defineProperty()数据劫持来实现

针对数组或者对象的新增属性的变化是需要专门用Vue.set方法处理，通过命令的方式添加一个监控

二十八、loader和plugin的区别

loader是一个转换器，将一个文件进行编译成另一个文件，主要是操作文件，是单纯的文件转换过程

plugin是插件拓展器

区别是loader是作为模块的解析规则

plugin是在plugins中单独配置的，类型为数组，参数通过构造函数传入

二十九、JSONP的原理

利用JavaScript中的src属性不会被同源策略约束的漏洞实现跨域操作，只能使用get请求，优点在于可以用在旧的浏览器

怎么用？

1.创建一个JavaScript的回调

2.插入script标签

3.后台接收请求，并解析前端传过去的回调方法，并把该方法的调用和数据作为参数一并返回给前端

3.前端执行服务端返回的方法调用

三十、什么时候会用到闭包

什么是闭包：闭包就是函数执行结果返回的是一个内部函数，并被外部变量所引用

什么时候用：模块的封装和在循环中创建闭包，防止获取到意外的值

缺点：如果不及时释放，容易造成内存泄漏导致内存不能使用

三十一、什么是虚拟DOM

虚拟DOM只是普通的js对象，是对真实DOM的一层抽象，是对JavaScript中的DOM节点进行描述

三十二、get post put delete

他们对应的分别是增删改查

get请求采用的是请求中的query参数进行查询操作，拿到参数进行封装拼接

post请求用于修改

put请求专注于update操作和post一样执行改变操作，但它采用的参数需要用到query格式，否则拿不到前台传递的参数

dele请求执行删除操作，配合数据库进行删除

三十三、AJax

什么是Ajax:Ajax通过XMLHttpRequest进行对服务端发起异步请求，并操作JavaScript中的DOM进行更新页面

三十四、什么是防抖和节流的区别

防抖是指事件最后一次触发后才执行一次函数

节流指不管事件触发多频繁都在一段时间内执行一次函数

三十五、模块的打包原理

实际上是为每个模块创建了一个可导入导出的环境，本质上不会修改代码的逻辑

三十六、对Vue的template编译的理解

先转化成AST树，再得到render函数返回的Vue虚拟DOM节点

三十七、Virtua DOM的diff算法

用JavaScript对象结构表示DOM树的结构，然后构建一个真正的DOM树，当状态变更就重新构造一棵对象树，然后用新树和旧树比较（diff），记录差异

三十八、webpack的构建流程

初始化参数—>开始编译—>确定人口—>编译模块—>完成模块编译—>输出资源—>输出完成

三十八、HTTP协议的Keep-Alive 模式

Keep-Alive功能使客户端到服务端的连接持续有效、

三十九、webview中的页面怎么跳回小程序中？

使用 vx:miniProgram.navigateTo({url:xxxx})

四十、什么是“use strict”,好处和坏处

use strict 称为严格模式，是JavaScript中严格解析和错误处理的方法

优点：消除javaScript语法中一些不合理和严谨之处，减少一些怪异行为

消除代码的一些不安全之处

提高编译效率

缺点：以不同严格模式编写的脚本合并后可能导致问题

缺失许多开发人员已经习惯的功能

四十一、请介绍一下XMLhttprequest对象

它是一种支持异步请求的技术，它可以使用JavaScript向服务器提出并处理响应，而不阻塞用户，通过XMLhttprequest对象，web开发人员可以在页面加载以后进行页面的局部刷新

四十二、前端路由与后端路由的区别

前端路由：页面不刷新，通过不同的路由对应不同的页面，跳转到不同的url都是使用前端的锚点路由

优点是实现了前后端分离，不需要每次都向服务器全部获取数据展示给用户

缺点：由于是单页面没有合理利用缓存

后端路由：通过url的改变向服务端发起请求，服务端响应请求，并在后台拼接html传递给前端，问题就在于浏览器会刷新页面，可能网速慢得情况下会出现白屏，极大问题是前后端不分离

优点：分担了前端的压力，html和数据的拼接是由服务器完成

缺点：项目庞大时，加大了对服务器的压力

四十三、伪类和伪元素的区别

伪类是假的类，可以添加类达到效果

伪元素是假的元素，可以添加元素达到效果

四十四、如何进行seo优化？

1.合理的title和可kwords

2.HTML代码语义化

3.重要的HTML代码放最前面，因为引擎抓取的HTML代码是从上到下

四十五、浏览器如何渲染UI

1.浏览器获取HTML文件并进行解析再形成一颗DOM树，同时进行CSS解析形成style Rules

2.接着DOM 树 和 style.Rules合并形成render树

3.进入布局阶段,为每个节点分配一个出现在屏幕上的确切坐标

4.调用GPU进行绘制，遍历render树节点，将元素渲染出来

四十六、微信小程序云开发讲述其功能

1.云函数：运行在微信服务器上的函数，处理微信小程序相关操作有天然优势

2.数据库：可以直接操作数据库，不需要使用服务器

3.存储：可以存储图片和文件

四十七、HTTP状态码及其含义

1xx:请求正在处理

2xx:请求正常处理完毕

3xx:需要附加操作然后完成请求

4xx:服务器无法处理请求

5xx:服务器请求错误

204：请求成功处理但没有返回内容

304：所请求的资源未修改，不会返回资源

400：客户 端请求的语法错误

403：服务器理解客户端的请求，但拒绝了请求

404：服务器不能根据客户端请求找到资源

四十八、事件循环Event Loop

由于js是单线程，一次只能执行一个任务，当多个任务堆叠的时候按先进先出的规则执行，这就形成了一条消息队列，涉及宏任务和微任务

事件循环就是一个执行消息队列机制

四十九、小程序的登录流程

1.通过vx.login获取临时的登录凭证code

2.发送给后端，后端通过code,appid,appsecret调用接口并返回openid和session-key

3.后端通过openid和session-key生成token返回给前端

4.前端在对token进行缓存

五十、Vue.set的原理

向响应式对象上添加一个属性，并且属性也是响应式的，(解决视图更新问题)，修改数据就会触发watcher的重新渲染

五十一、自定义指令的原理

什么是自定义指令：给html元素增加一个自定义功能，Vue编译的DOM时会找到并执行自定义指令的相关方法

自定义指令的五个生命周期，(bind、inserted、update、componentUpdated、unbind)

原理：？？？

五十二、Vuex刷新页面数据丢失怎么解决？

1.将数据保存到浏览器缓存中

2.页面刷新时请求远程数据，动态更新Vuex数据

3.在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存到session Storage中(防止请求数据量过大，加载时拿不到数据)

五十二、loader和plugin的区别

loder转换器，将文件转换成另一种文件，仅仅只为了打包，因为webpack只能打包js文件，对于css和图片等需引入第三方模块进行打包，如打包css则是css-loader, style-loader,图片是url-loader

plugin：插件，不仅限与打包，功能强大可以处理各种各样的任务 如针对html文件打包和拷贝（还有很多设置）的插件：html-webpack-plugin。 不但完成了html文件的拷贝，打包，还给html中自动增加了引入打包后的js文件的代码（），还能指明把js文件引入到html文件的底部等等。

五十三、source map

它是将编译打包好的代码映射回源码的过程，因为打包后的代码不具备可读性，所以使用source map进行源码调试

五十四、文件监听的原理

判断文件最后编辑时间是否发生变化，如何某个文件发生变化，不会立即告诉监听者而是将它缓存起来，在aggregateTimout后再执行

webpack开启监听的方式

1.启动webpack命令时带上参数 --watch

2.在webpack.config.js配置文件中设置watch:true

五十五、webpack热更新原理

就是不用刷新浏览器，将变更的新模块替换就模块

五十六、如何对bundle体积进行监控和分析？

1.Vscode中的 Import Cost插件

2.使用webpack-bundle-annalyzer

3.使用bundlesize 进行体积监测

五十六、如何优化 Webpack 的构建速度？

1.使用高版本的webpack和nodeJs

2.压缩代码

怎么压缩：多进程并行压缩

3.压缩图片

4.提取页面公共资源

五十七、编写loader的思想

1.loader支持链式调用

2.loader是无状态的

3.loader可以任意使用nodejs的API和安装第三方模块

五十八、webpack-dev-server和http服务器(如nginx)有什么区别?

webpack-dev-server它可以用来存储打包文件并可以使用热更新，比http更简单高效

五十九、BFC

什么是BFC：块级格式化上下文

怎么触发BFC：定位(不能是static和relctiv)、浮动(除none)、display(inline-block、table-cell、table-caption、flex、inline-flex)

overflow（除visible）

作用：利用BFC避免margin重叠（塌陷）防止文字环绕、清除浮动的影响

六十、函数参数传递的三种方式

一、传值方式 将实参的值拷贝给函数或方法，在函数内对形参进行操作，操作的是实参的拷贝，不会影响实参本身，在函数结束返回后，形参会被释放，实参内容不改变

二、地址传递 指针

三、引用传递 用于把一个对象的地址作为参数传递，而非对象本身，避免了一次实参到形参的拷贝，提高了效率

四、共享传递

六十一、基本数据类型和复杂数据类型分别存放到哪里

基本数据类型存在栈中，复杂数据类型存在堆中

六十二、堆和栈

栈：栈是由操作系统自动分配释放，用于存放函数的参数值、局部变量等

堆：堆是由开发人员进行分配释放，若开发人员释放，则由OS进行回收

区别：管理方式不同、存放不同、分配效率不同、生长方向不同

六十三、HTTP请求方式

get post delete head put options link.....

六十四、请求报文和响应报文

http报文是http应用程序之间发送的数据块

浏览器发请求 必须是 ： 请求报文

服务器响应 必须是 ： 响应报文

请求报文：请求行 请求头 请求体

响应报文：响应行(状态码、服务器地址等) 响应头(服务器告诉浏览器，给的数据是什么格式) 响应体(服务器响应数据，一般是json格式)

六十五、常用的服务器端口号

HTTPS：默认443

腾讯：233

SOCKS代理协议服务器：1080

MySQL数据库：3306

Nginx服务器端口:8888

NTP网络时间协议:123

DNS域名解析:53

FTP文件传输服务:21

TCP服务端默认端口：8080

六十六、什么是TCP的粘包

粘包指发送方发送的若干包数据到达接收方时粘成了一个包，后一包数据的头紧接着前一包数据的尾

如何处理

1.发送方可以通过关闭Nagle算法来解决，使用TCP_NODELAY选项来关闭算法

2.接收方可把问题交给应用层处理

3.应用层：循环处理，应用程序从接收缓存中读取分组时，读完一条数据，就应该循环读取下一条数据，直到所有数据都被处理完成

六十七、浏览器是怎样解析CSS选择器的

CSS选择器的解析是从右向左解析的，先找到所有的最右节点，通过节点找到其父节点直到找到满足条件的匹配规则，然后结束这个分支的遍历

六十八、git分支有哪些

1.master 这个分支最稳定，代表项目处于可发布的状态

2.develop 作为开发分支，平行于master分支

3.hotfix:bug修理分支

4.release ： 预发布分支/准生产分支 一般用于项目上线前进行测试的分支

5.feature：功能分支

六十九、查找算法有哪些

1.二分查找

2.顺序查找

3.哈希查找

4.分块查找

5.插值查找

6.斐波拉契查找

7.树表查找