【秋招面经】全网最全大华前端题目总结
前言
本次主要搬运大华和汉得面试的常问问题
文章目录
- 前言
-
-
-
- 本次主要搬运大华和汉得面试的常问问题
-
-
- 问题总结
-
-
-
- call()、apply()了解吗，应用场景？call、apply、bind的区别？
- Set和Map?
- 页面布局有哪些布局？弹性盒模型flex怎么使用的，场景，flex布局常用哪些属性呢？怎么垂直居中？
- 导航守卫钩子函数？
- 了解websocket吗？
- 使用d3.js时遇到了什么困难？
- css3新特性了解哪些，说一下？CSS3与CSS2的区别？html5有什么新特性？ES5了解吗？ES6你懂哪些？ES5和ES6的区别是什么？
- null和undefined的区别？null是什么类型？
- 浏览器缓存（存储）？
- DOM添加？
- CSS样式继承、优先级
- js数据类型 ？
- SSL？
- 渲染过程 ？
- JSON？JSONP？
- 响应式布局？和css的哪个属性相关？css怎么设置可以实现响应式布局？
- cookie、sessionStorage、localStorage的特点以及区别？sessionStorage、localStorage在多标签页面里面能够共享吗？
- 伪类和伪元素区别及属性？
- 深拷贝和浅拷贝？如何实现深拷贝？
- 了解ref吗？
- vue中对于数组和对象的定义有什么不同？
- 数组遍历的方法 ？数组其他方法？如何删除数组中某个元素？
- for of 和for in区别 ？for和forEach的区别
- map和forEach区别？
- vue2和vue3的区别？
- proxy遍历对象需不需要递归？proxy怎么进行递归的？
- 热更新的原理（要具体）？
- 按需加载import的原理？
- 定时器setTimeout和setinterval区别，底层原理？js中定时器函数包括哪些？
- 事件循环？
- 进程和线程？
- 栈和队列？栈和堆？
- 垂直居中怎么设置？
- 节流防抖区别？
- http状态码? 304、404?
- vue父组件调用子组件的方法？
- 介绍一下promise？promise状态 状态如何改变 方法及参数 方法怎么用?promise和async的联系
- nexttick如何使用？
- 宏任务微任务及执行顺序？
- 两栏布局 左边固定 右边灵活？用flex 实现 不用flex实现 ？
- watch怎么监听数据？
- webpack，loader，plugins?
- 仓库是什么意思 把文件发布到github上的步骤?
- 迭代器怎么实现?
- rem em 的区别 再说几个类似的其他单位?
- $attrs listener中 listener监听的是什么?
- 为什么js文件放到css文件的后面？
- 你遇到报错怎么办？
- js有哪些类型？这些值是放在堆还是放在栈上?怎么判断是数组还是对象？
- 原型和原型链？手绘原型链？
- get和post方法的区别?
- w3c盒子模型和标准盒子模型 ？
- css行内、内联、外联样式表的区别，你用的是什么？为什么要用外部样式表?
- vue，你知道vue的底层原理吗？
- 闭包？优缺点？应用场景？
- opcity和display和visibility区别？
- 跨域问题，怎么解决？
- == 和===？
- js中0.1+0.2不等于0.3问题
- vue中methods和computed属性区别？生命周期created和mouted区别？
- 组件中data为什么是一个函数？
- v-model原理，另一种方法实现数据绑定效果？
- Vue生命周期函数？
- 父子组件通信方法？常用的组件通信的方法？
- https和http？http1.1和2.0？https建立请求连接过程？ http请求过程 ？
- url输入到渲染页面发生了什么？
- CA证书的过程？
- 强缓存和协商缓存？
- var let const区别？
- symbol的应用场景
- vue双向绑定原理？响应式原理？
- jquery和Vue的区别？jquery中用过什么类选择器？jquery封装过组件吗？jquery为什么可以链式调用？
- 说一下对css的理解？css的编程规划
- vue的编码规范？
- keep-alive的钩子函数？
- 箭头函数与普通函数有什么区别？
- 函数调用和原型链调用有什么区别？
- Ajax和fetch的异同？ajax原理
- TCP三次握手？
- 垃圾回收机制？
- 权限控制的路由是怎么配置的？
- vue的路由模式？
- 阻止冒泡？
- 字符串模板实现？
- ul li 点击事件，在ul上点击如何捕获li上的事件 ？
- css动画学过哪些？
- css居中布局
- 回流重绘 ？transform与回流重绘？
- 什么是BFC，BFC的作用，如何开启BFC ？
- 说说this的理解？this什么时候被绑定
- v-for key的作用及原理 ？
- 说说单向数据流的理解
- vuex和事件总线区别？
- 请求的方式有哪些 ？说说OPTONS请求
- 装饰者模式？
- 内联元素的特性？
- new操作符做了什么？
- 左固定，右自适应怎么实现？
- 如果页面有两个一样的ID，要用哪种选择器一次性获取他们的节点？
- Jquery选择器有哪些？
- 手写点击按钮元素隐藏，再点击元素显示的代码？
- promise如何实现同步，可以实现同步吗？
- 如何实现不下载图片，但能出现图片？
- 立即执行函数应用场景，哪些库会用到？
- webpack打包流程，哪些优化方式？
- echarts图表如何保证数据最新？
- 有一个链表如[K"name":“'linda",age":15,"adress":“HKJ怎么获取里面的age然后对它进行排序？
- 怎么自定义http请求头？
- 如果状态码错误了，怎么排查他的错误？
- 冒泡排序怎么排？
- 数组本身的排序方法有哪些，如何继承一个方法：若存在那个元素就返回true
-
-
问题总结
call()、apply()了解吗，应用场景？call、apply、bind的区别？
bind和call、apply有什么作用？它们的区别是什么？
Set和Map?
Set 和 Map 的区别
页面布局有哪些布局？弹性盒模型flex怎么使用的，场景，flex布局常用哪些属性呢？怎么垂直居中？
前端7大常用布局方式
flex布局
导航守卫钩子函数？
全局路由守卫：只要路由发生了路由变化，守卫就能够监听到。
- beforeEach ：全局前置守卫，
- beforeResolve： 全局解析守卫，确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。
- afterEach： 全局后置守卫，对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。
路由独享守卫：只负责一条路的守卫，beforeEnter；
组件路由守卫：只负责单个组件的守卫。
- beforeRouteEnter （在渲染该组件的对应路由被验证前调用）；
- beforeRouteLeave （在导航离开渲染该组件的对应路由时调用）；
- beforeRouteUpdate（在当前路由改变，但是该组件被复用时调用）。
应用场景：在在线商城项目中，每一步路由跳转都要判断用户是否登录，只有当用户登录后，才能够跳转到其他页面，如果用户没有跳转，就只能去login页面，这时候就要使用全局路由守卫。如果用户想去查看支付成功的页面，那么必须先去支付页面进行支付，而不能直接从首页跳转到支付成功的页面，这时就要用路由独享守卫。
了解websocket吗？
WebSocket是一种在单个TCP连接上进行全双工通信的协议。使得客户端和服务器之间的数据交换变得更加简单，并允许服务端主动向客户端推送数据。要知道在websocket之前服务器只能接收浏览器的请求。注：信息只能单向传送为单工；信息能双向传送但不能同时双向传送称为半双工；信息能够同时双向传送则称为全双工。
使用d3.js时遇到了什么困难？
D3代表Data-Driven Documents 。 D3.js是一个用于根据数据操作文档的JavaScript库。 D3.js是一个动态的，交互式的在线数据可视化框架，用于大量网站。 D3.js由Mike Bostock编写，作为早期可视化工具包Protovis的继承者而创建。
css3新特性了解哪些，说一下？CSS3与CSS2的区别？html5有什么新特性？ES5了解吗？ES6你懂哪些？ES5和ES6的区别是什么？
CSS3新增了哪些新特性？
简单来说就是css2有的属性css3都有，但是css3有的属性css2不一定有。 CSS3是最新的版本，效果上CSS2是比不了的，css3可以说是css2的进阶，因为css3是在css2的基础上增加了一些新的属性。css2推荐的是内容和表现效果分离的方式，css3是朝着模块化发展的。
html5新增的特性：1、语义化标签（header、footer、nav等）；2、webStorage储存机制；3、history对象；4、表单类型（email、tell、date等）；5、媒体元素video和audio；6、canvas。html5新增了哪些特性
ECMAScript5，即 ES5，是 ECMAScript 的第五次修订，于 2009 年完成标准化
作为ECMAScript第五个版本（第四版因为过于复杂废弃了），浏览器支持情况可看第一副图，增加特性如下。
- strict模式
严格模式，限制一些用法，‘use strict’;
- Array增加方法
增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法
PS： 还有其他方法 Function.prototype.bind、String.prototype.trim、Date.now
- Object方法
Object.getPrototypeOf
Object.create
Object.getOwnPropertyNames
Object.defineProperty
Object.getOwnPropertyDescriptor
Object.defineProperties
Object.keys
Object.preventExtensions / Object.isExtensible
Object.seal / Object.isSealed
Object.freeze / Object.isFrozen
ECMAScript6，即 ES6，是 ECMAScript 的第六次修订，于 2015 年完成，也称 ES2015
ES6 是继 ES5 之后的一次改进，相对于 ES5 更加简洁，提高了开发效率.
你知道ES5 和 ES6 的区别吗?，能说出说几个 ES6 的新增方法吗?
null和undefined的区别？null是什么类型？
undefined和null两种数据类型的区别
浏览器缓存（存储）？
浏览器缓存的全过程：
浏览器第一次加载资源，服务器返回 200，浏览器从服务器下载资源文件，并缓存资源文件与 response header，以供下次加载时对比使用；
下一次加载资源时，由于强制缓存优先级较高，先比较当前时间与上一次返回 200 时的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，直接从本地读取资源。如果浏览器不支持HTTP1.1，则使用 expires 头判断是否过期；
如果资源已过期，则表明强制缓存没有被命中，则开始协商缓存，向服务器发送带有 If-None-Match和 If-Modified-Since 的请求；
服务器收到请求后，优先根据 Etag 的值判断被请求的文件有没有做修改，Etag 值一致则没有修改，命中协商缓存，返回 304；如果不一致则有改动，直接返回新的资源文件带上新的 Etag 值并返回 200；
如果服务器收到的请求没有 Etag 值，则将 If-Modified-Since 和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回 304；不一致则返回新的 last-modified 和文件并返回 200；
DOM添加？
获取dom节点的五种方式:
document.getElementById(“标签的id名”) 返回获取到的标签节点对象
document.getElementsByTagName(“标签名”) 根据标签的名字获取多个 节点对象返回伪数组(伪数组 不能直接进行dom操作 必须取出其中元素才可以操作) 如如获取小li标签
document.getElementsByClassName(“标签的class名字”);返回伪数组对象
Html5 推出的document.querySelector(“选择器”) var firstBox = document.querySelector(‘.app’);
Html5推出的document.querySelectorAll(“选择器”);
createElement()方法能够根据参数指定的标签名称创建一个新元素，并返回新建元素的引用，用法如下
var element=document.createElement("tagName");
appendChild()方法可向当前节点的子节点列表的末尾添加新的子节点，用法如下
appendChild(newChild)；
CSS样式继承、优先级
关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。
CSS优先级与继承
js数据类型 ？
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
SSL？
超文本传输安全协议（英语：HyperText Transfer Protocol Secure,缩写：HTTPS:常称为HTTP over TLS.HTTP over SSL或HTTP Secure)是一种通过计算机网络进行安全通信的传输协议，HTTPS经由HTTP进行通信，但利用SSL/TLS来加密数据包。HTTPS开发的主要目的，是提供对网站服务器的身份认证，保护交换资料的隐私与完整性，这个协议由网景公司(Netscape)在1994年首次提出，随后扩展到5联
传输层安全性协议(英语：Transport Layer Security,缩写：TLS)及其前身安全套接层(英语：Secure Sockets Layer,缩写：SSL)是一种安全协议，目的是为互联网通信提供安全及数据完整性保障。网景公司(Netscape)在1994年推出首版网页览器·网景导航者时，推出HTTPS协议，以5SL进行加密，这是SSL的起源，IETF将SSL进行标准化。许多网站，如Google、Facebook、Wikipedia等也以这个协议来创健安全连线，发送资料。目前已成为互联网上保密通信的工业标准，SSL包含记录层(Record Layer)和传输层，记录层助议确定传输层数据的封装格式。传输层安全协议使用X.509认证，之后利用非对称加密演算来对通信方做身份认证，之后交换对称密匙作为会谈密匙(Session key)。这个会谈密匙是用来将通信两方交换的资料做边加密，保证两个应用间通信的保密性和可靠性，使客户与服务器应用之间的通信不被攻击者窃听.
SSL协议原理详解
渲染过程 ？
1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。
2.构建渲染树（Render Tree）。
3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。
浏览器如何渲染页面？
JSON？JSONP？
JSON是一种纯字符串形式的数据，它本身不提供任何方法（函数），非常适合在网络中进行传输。JavaScript、PHP、Java、Python、C++等编程语言中都内置了处理JSON数据的方法。
JSON是基于JavaScript(Standard ECMA-2623 rd Edition-December1999)的一个子集，是一种开放的、轻量级的数据交换格式，采用独立于编程语言的文本格式来存储和表示数据，易于程序员阅读与编写，同时也易于计算机解析和生成，通常用于在Wb客户端（浏览器）与Web服务器端之间传递数据。
Json作为一种通用的数据格式，大家都可以使用json格式来进行数据的传输。
对象转化为Json
var jsonStr = JSON.stringify(对象);
json转对象
var jsonObj = JSON.parse(json字符串);
什么是JSONP？
首先提一下JSON这个既念，JSON是一种轻量级的数据传输格式，被广泛应用于当前Wb应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分斋Q的架构都以JSON格式进行数据的传输。
那么JSONP是什么呢？
首先抛出浏览器同源策路Q这个概念，为了保证用户访问的安全，现代这刘览器使用了同源策路，即不允许访问非同源的页面，详细的概念大家可以自行百度。这里大家只要知道，在ajax中，不允许请求非同源的URL就可以了，比如www.a.com下的一个页面，其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的，
USONP就是用来解决跨域请求问题的，那么具体是怎么实现的呢？
JSONP原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的s脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
响应式布局？和css的哪个属性相关？css怎么设置可以实现响应式布局？
响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕
什么是响应式布局？响应式布局有几种方法？
cookie、sessionStorage、localStorage的特点以及区别？sessionStorage、localStorage在多标签页面里面能够共享吗？
【秋招面经】之神策数据第一个问题
localStorage、sessionStorage同一网站下共享问题
伪类和伪元素区别及属性？
伪类: 用来选择那些不能够被普通选择器选择的文档之外的元素，比如:hover
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。
比如，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。
虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类
常见伪类::link,:visited,:hover,:active,:focus,:not(),:first-child,:last-child,:nth-child,:nth-last-child,:only-child,:target,:checked,:empty,:valid
伪元素:
伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中
伪元素前面是两个冒号，E::first-line 伪元素。会创造出不存在的新元素，由于 css 对单冒号的伪元素也支持，单双冒号都支持,但实际上现在css3 已经明确规定了伪类单冒号，伪元素双冒号的规则,用于区分它们
::before/:before在被选元素前插入内容::after/:after 在被元素后插入内容，其用法和特性与:before相似::placeholder 匹配占位符的文本，只有元素设置了placeholder 属性时，该伪元素才能生效
对于伪元素 :before和 :after 而言，属性 content 是必须设置的，它的值可以为字符串，也可以有其它形式，比如指向一张图片的 URL
- 伪类和伪元素都是用来表示文档树以外的"元素"。
- 伪类和伪元素分别用单冒号:和双冒号::来表示。
- 伪类和伪元素的区别，最关键的点在于如果没有伪元素(或伪类)，是否需要添加- 元素才能达到目的，如果是则是伪元素，反之则是伪类。
深拷贝和浅拷贝？如何实现深拷贝？
深拷贝和浅拷贝
js中实现深拷贝的4种方法
了解ref吗？
vue2 中 ref 的使用
vue中对于数组和对象的定义有什么不同？
vue遍历数组和对象的方法以及他们之间的区别
数组遍历的方法 ？数组其他方法？如何删除数组中某个元素？
【JavaScript总结】之数组
for of 和for in区别 ？for和forEach的区别
forEach，for in，for of循环的用法
map和forEach区别？
JS中Map和ForEach的区别
vue2和vue3的区别？
vue2.0和vue3.0的区别
proxy遍历对象需不需要递归？proxy怎么进行递归的？
Proxy可以对整个对象进行代理，不需要像Object.defineProperty()那样递归遍历对象的每一个属性来为它们添加get、set达到监听效果。Vue3使用Proxy代替了Object.defineProperty()实现数据的劫持，优化了代码，减少了大部分性能。
热更新的原理（要具体）？
【webpack】详解
按需加载import的原理？
按需加载——前端性能优化思想浅析
定时器setTimeout和setinterval区别，底层原理？js中定时器函数包括哪些？
使用setTimeout实现setInterval
事件循环？
事件循环机制（Event Loop）的基本认知
进程和线程？
进程与线程
栈和队列？栈和堆？
栈和队列(Stack & Queue)
一文读懂堆与栈的区别
垂直居中怎么设置？
8种垂直居中的方法
节流防抖区别？
节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
一个经典的比喻:
想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应
假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制
电梯第一个人进来后，15秒后准时运送一次，这是节流
电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖。
相同点：
都可以通过使用 setTimeout 实现
目的都是，降低回调执行频率。节省计算资源
不同点：
函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次
应用场景：
防抖在连续的事件，只需触发一次回调的场景有：
• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
节流在间隔一段时间执行一次回调的场景有：
• 滚动加载，加载更多或滚到底部监听
• 搜索框，搜索联想功能
http状态码? 304、404?
网络状态响应码用来表示网页服务器HTTP响应状态的3位数字代码。请求状态码如果1开头就是临时相应，2开头一般表示成功，3开头是重定向，4开头是客户端错误，5开头是服务器错误。平时常见的响应状态码包括：200（成功）、301（永久重定向）、302（临时重定向）、400（错误请求）、401（未授权）、403（禁止）、404（未找到）、500（服务器内部错误）、503（服务不可用）
vue父组件调用子组件的方法？
vue 父组件调用子组件的方法
介绍一下promise？promise状态 状态如何改变 方法及参数 方法怎么用?promise和async的联系
Promise用法小结
【async和await】深入理解
nexttick如何使用？
说说nextTick的使用和原理？
宏任务微任务及执行顺序？
【JavaScript】事件循环机制
两栏布局 左边固定 右边灵活？用flex 实现 不用flex实现 ？
实现两栏布局
watch怎么监听数据？
vue中的watch监听数据变化以及watch中各属性详解
webpack，loader，plugins?
【webpack】详解
仓库是什么意思 把文件发布到github上的步骤?
github提交步骤
迭代器怎么实现?
JS Iterator（迭代器）
rem em 的区别 再说几个类似的其他单位?
rem和em的区别
$attrs listener中 listener监听的是什么?
$ attrs和$ listeners
为什么js文件放到css文件的后面？
css放上面js放下面的原因：1、在加载html生成DOM tree的时候，可以同时对DOM tree进行渲染，这样可以防止闪跳，白屏或者布局混乱；2、javascript加载后会立即执行，同时会阻塞后面的资源加载。
你遇到报错怎么办？
前端遇到报错，怎么处理？
js有哪些类型？这些值是放在堆还是放在栈上?怎么判断是数组还是对象？
JS中数据对于存储可以分为两种数据类型：基本类型和引用类型
基本类型：Number，String，Boolean，Null，Undefined
这些类型的值存放在栈区，函数调用时传递的是变量的值(值)。
引用类型：Object，Array，Function
这些类型的对象存放在堆区，对象的地址存放在栈区，函数调用时传递的是对象的地址(址)。
【JavaScript面试】如何判断变量为对象或数组？
原型和原型链？手绘原型链？
原型和原型链
get和post方法的区别?
- 应用场景：GET请求是一个幂等请求（不会对服务器的运行状态造成任何的负担与阻塞），一般Get请求用于对服务器资源不会产生影响的场景，比如请求一个网页的资源。而Post不是一个幂等请求，一般用于对服务器资源会产生影响的情景，比如注册用户这一类操作。
- 是否缓存：浏览器一般会对Get进行缓存，但很少对Post请求缓存。
- 发送的报文格式：Get请求的报文中实体部分为空，Post请求的报文中实体部分一般为向服务器发送的数据。
- 安全性：Get请求可以将请求的参数放入url中向服务器发送，这样的做法相对于Post请求来说不太安全，因为url会被保留在历史记录中。
- 请求长度：浏览器由于对url长度的限制，所以会影响get请求发送数据时的长度。这个限制时浏览器规定的，并不是RFC规定的。
- 参数类型：post的参数传递支持更多的数据类型。
w3c盒子模型和标准盒子模型 ？
搬运大华和汉得前端题目第六题
css行内、内联、外联样式表的区别，你用的是什么？为什么要用外部样式表?
CSS三种样式表（内部样式表、行内样式表、 外部样式表）
vue，你知道vue的底层原理吗？
面试题：你了解vue的底层原理吗？
闭包？优缺点？应用场景？
什么是闭包，闭包的优缺点，闭包的使用场景
opcity和display和visibility区别？
CSS之Display、Visibility和Opactity的区别
跨域问题，怎么解决？
什么是跨域？跨域解决方法
== 和===？
js中==和===区别
js中0.1+0.2不等于0.3问题
js中0.1+0.2不等于0.3问题，解决方法
vue中methods和computed属性区别？生命周期created和mouted区别？
Vue中methods和computed的区别
Vue生命周期中mounted和created的区别
组件中data为什么是一个函数？
vue中的data为什么是一个函数？起到什么作用？
组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。
v-model原理，另一种方法实现数据绑定效果？
v-model的原理及三种实现方法
Vue生命周期函数？
VUE生命周期
父子组件通信方法？常用的组件通信的方法？
父子组件通信常用方法
父给子：props；
子给父：自定义事件；
任意组件通信：全局事件总线；
另外，vuex、插槽、路由传参、本地存储都是可以进行组件之间传值的。
https和http？http1.1和2.0？https建立请求连接过程？ http请求过程 ？
https和http的区别
http1.0,http1.1和http2.0的区别
HTTPS建立连接详细过程
HTTP请求的完全过程
url输入到渲染页面发生了什么？
1、浏览器的地址栏输入URL并按下回车
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期
3、DNS解析URL对应的IP
4、根据P建TC连接（三次握手）
5、HTTP发起请求
6、服务器处理请求，浏览器接HTTP响应
7、渲染页面，构建DOM树
8、关闭TCP连接（四次挥手）
CA证书的过程？
构建CA证书详解过程步骤
强缓存和协商缓存？
【浏览器缓存机制】
var let const区别？
面试官：说说var、let、const之间的区别
symbol的应用场景
javascript中symbol类型的应用场景（意义）和使用方法
vue双向绑定原理？响应式原理？
Vue的响应式原理和双向绑定原理
jquery和Vue的区别？jquery中用过什么类选择器？jquery封装过组件吗？jquery为什么可以链式调用？
【秋招面经】搬运大华和汉得前端题目
说一下对css的理解？css的编程规划
css的理解总结
css编程规范
vue的编码规范？
vue项目编码规范
keep-alive的钩子函数？
关于keep-alive的两个钩子函数
箭头函数与普通函数有什么区别？
箭头函数与普通函数的区别详解
函数调用和原型链调用有什么区别？
JS高级–（原型和原型链，函数四种调用模式，this的指向，箭头函数）
Ajax和fetch的异同？ajax原理
TCP三次握手？
【计算机网络面试】tcp/ip协议三次握手、四次挥手
垃圾回收机制？
垃圾回收机制的过程和原理
权限控制的路由是怎么配置的？
vue-router路由权限控制的两种实现方案
vue的路由模式？
HashRouter的原理：
通过window.onhashchange方法获取新URL中hash值，再做进一步处理
HistoryRouter的原理：
通过history.pushState 使用它做页面跳转不会触发页面刷新，使用window.onpopstate 监听浏览器的前进和后退，再做其他处理
阻止冒泡？
JS中阻止冒泡事件的三种方法
字符串模板实现？
JS模板字符串的简单实现
ul li 点击事件，在ul上点击如何捕获li上的事件 ？
JS如何给ul下的所有li绑定点击事件，点击使其弹出下标和内容
css动画学过哪些？
CSS3常见动画有哪些？实现方式？
css居中布局
CSS居中布局
回流重绘 ？transform与回流重绘？
【浏览器的回流与重绘 (Reflow & Repaint)】
从重绘重排角度讲解transform的动画性能
什么是BFC，BFC的作用，如何开启BFC ？
什么是BFC？作用是什么？怎么开启？
说说this的理解？this什么时候被绑定
谈谈对this的理解和绑定原理
v-for key的作用及原理 ？
原理:
- vue实现了一套虚拟dom,使我们可以不直接操作dom元素,只操作数据就可以重新渲染页面,而隐藏在背后的原理是高效的Diff算法
- 当页面数据发生改变,Diff算法只会比较同一层级的节点
- 如果节点类型不同,直接干掉前面的节点,再创建并添加新的节点,不会再比较这个节点后面的子节点
如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新 - 使用key给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,"就地更新"找到正确的位置区插入新的节点
作用:
- 高效的更新虚拟DOM,提高渲染的性能
- 避免数据混乱的情况出现
说说单向数据流的理解
当面试官直接问：你是如何理解单向数据流的？
vuex和事件总线区别？
Vuex详解以及和事件总线的区别
请求的方式有哪些 ？说说OPTONS请求
大华和汉得面经里面有
装饰者模式？
javaScript之常用设计模式（工厂模式、单例模式、观察者模式、装饰者模式）
内联元素的特性？
css中内联元素（行内元素）的特点及常见的内联元素
new操作符做了什么？
大华和汉得面经里面有
左固定，右自适应怎么实现？
7种方法实现CSS左侧固定，右侧自适应布局
如果页面有两个一样的ID，要用哪种选择器一次性获取他们的节点？
获取dom中多个同名id的元素
Jquery选择器有哪些？
jquery选择器有哪些？
手写点击按钮元素隐藏，再点击元素显示的代码？
原生JS实现点击显示再次点击隐藏
promise如何实现同步，可以实现同步吗？
promise同步处理
如何实现不下载图片，但能出现图片？
立即执行函数应用场景，哪些库会用到？
前端面试之立即执行函数
webpack打包流程，哪些优化方式？
webpack从启动到结束会依次执行以下流程：
- 初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数；
- 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译；
- 确定入口：根据配置中的entry找出所有的入口文件；
- 编译模块：从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
- 完成模块编译：再经过第4步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
- 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
- 输出完成：在确定好输出内容后，根据配置确定输出的路径和⽂件名，把⽂件内容写⼊到⽂件系统。
优化方式：
压缩代码：删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件， 利⽤ cssnano （css-loader?minimize）来压缩css
利⽤CDN加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径
Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现
Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存
提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码
echarts图表如何保证数据最新？
ECharts类图表数据实时更新
有一个链表如[K"name":“'linda",age":15,“adress”:“HKJ怎么获取里面的age然后对它进行排序？
怎么自定义http请求头？
HTTP 自定义报文头
如果状态码错误了，怎么排查他的错误？
常见Http错误状态码及其解决方案
冒泡排序怎么排？
冒泡排序
数组本身的排序方法有哪些，如何继承一个方法：若存在那个元素就返回true
数组排序有哪些方法?
JavaScript怎样实现继承？js常见的六种继承方式