「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)

7.8 月份面试题新鲜出炉啦,里面有很多大厂面试题原题,大家喜欢的可以给笔者点个赞,花费了很长时间整理,这些面试题更适合为中级前端进阶高级前端的小伙伴查缺补漏,和为打算金九银十换工作的同学们保驾护航。

陆续还有相关文章分享连载,喜欢的可以关注一下笔者和笔者的公众号:前端Sharing

废话不说,面试题奉上

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第1张图片

html篇

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第2张图片

问题一:Meta标签常用属性值的写法和作用

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

必要属性

name:属性名
content:属性内容
charset: charset为HTML5中新增的,用来声明字符编码;
http-equiv:属性在HTML4中有很多值,在HTML5中只有refresh、default-style、content-type可用

name的值和说明

application name 当前页所属Web应用系统的名称
keywords 描述网站内容的关键词,以逗号隔开,用于SEO搜索
description 当前页的说明
author 当前页的作者名
copyright 版权信息
renderer renderer是为双核浏览器准备的,用于指定双核浏览器默认以何种方式渲染页面
viewreport 它提供有关视口初始大小的提示,仅供移动设备使用

viewreport
meta标签的name属性值为viewreport时的视口的大小

1.content内容为空时,默认视口宽度为980
2.content设置width,不设置initail-scale时,视口宽度为设置的width值
3.content不设置width,只设置initail-scale时,是可以根据initail-scale的值计算出视口的宽度
initail-scale = 屏幕宽度 / 视口宽度
4.content同时设置width和initail-scale时,视口宽度为width的值,页面显示按照initail-scale比率进行缩放
5.一般都是进行如下设置,来实现视口宽等于设备宽,布局完成后屏幕显示也不进行缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0">

声明字符编码
charset属性为HTML5新增的属性,用于声明字符编码,以下两种写法效果一样

<meta charset="utf-8"> //HTML5

模拟http标头字段

http-equiv属性与content属性结合使用, http-equiv属性为指定所要模拟的标头字段的名称,content属性用来提供值。

<meta http-equiv="参数" content="具体的描述">

content-Type 声明网页字符编码:

<meta http-equiv="content-Type" content="text/html charset=UTF-8">

refresh 指定一个时间间隔(以秒为单位),在此时间过去之后从服务器重新载入当前页面,也可以另外指定一个页面.

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">//2秒后在当前页跳转到百度

X-UA-Compatible 浏览器采取何种版本渲染当前页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> //指定IE和Chrome使用最新版本渲染当前页面

expires 用于设定网页的到期时间,过期后网页必须到服务器上重新传输

<meta http-equiv="expires" content="Sunday 22 July 2016 16:30 GMT">

catch-control 用于指定所有缓存机制在整个请求/响应链中必须服从的指令

<meta http-equiv="cache-control" content="no-cache">

js篇

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第3张图片

问题1: 给对象加上iterator接口,使之能被 for of遍历

ES6 规定,默认的 Iterator 接口部署在数据结构的 Symbol.iterator 属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)。Symbol.iterator 属性本身是一个函数,就是当前数据结构默认的遍历器生成函数

因为object 没有 Symbol.iterator 属性,所以不能被 for of 遍历。


const text = {
   a: 1,
   b: 2,
   c:3
}
for(let i of text){
    console.log(i) //报错: Uncaught TypeError: text is not iterable
}

所以,object想要被 for … of遍历 ,必须在原来的基础上加上 Symbol.iterator 接口属性。

const text = {
   a: 1,
   b: 2,
   c:3
}
text[Symbol.iterator] = function (){
    const _this = this
    return {
        index:-1,
        next(){
            const arr = Object.keys( _this )
            if(this.index < arr.length){
                this.index++
                return {
                    value:_this[arr[this.index]],
                    done:false
                }
            }else{
                return {
                    value:undefined,
                    done:true
                }
            }
        }
    }
}

for(let i of text){
    console.log(i) // 1 2 3 undefined
}

问题2:统计按钮一秒钟点击次数?

这道题是变相考对防抖函数+闭包的理解

<script>

const button = document.getElementById('button')
function debounce(fn, time) {
    let number = 0 , timer  = null
    return function(...arg) { 
        fn.apply(this, arg)
        number++
        if (timer) return
        timer = setTimeout(() => {
           console.log( '点击'+ number + '次' )
           number = 0
           timer = null
        }, time)
    }
}
button.onclick = debounce(()=>{
    console.log(1111)
},1000)

script>

效果如下

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第4张图片

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第5张图片

问题3:单页面应用路由的原理

无论我们用vue还是react构建单页面应用,都离不开路由的概念,路由跳转监听url改变,根据路由的改变来决定渲染的页面。

hash模式

改变路由

const path = "home"
window.location.hash = path

监听路由

window.addEventListener('hashchange',function(e){
  //路由发生改变时切换渲染组件...
});

histroy模式

改变路由

var path = "home"
history.pushState(null,null,'?='+path);

监听路由

window.addEventListener('popstate',function(e){
   //路由发生改变时切换渲染组件...
})

问题4:如下打印结果

执行如下代码,回发生什么?

function fn1(){
    console.log(a)
}
var a = 1

function fn2(){
    console.log(a)
    let a = 2;
    console.log(a)
    fn1()
}

fn2()

结果://Uncaught ReferenceError: Cannot access ‘a’ before initialization

let 暂时性死区

let/const是使用区块作用域;var是使用函数作用域

在let/const声明之前就访问对应的变量与常量,会抛出ReferenceError错误;但在var声明之前就访问对应的变量,则会得到undefined


console.log(a) // undefined
console.log(b) // causes ReferenceError: b is not defined
var a = 1
let b = 2 

问题5:apply和call,bind的区别

apply,call和bind都是 用来改变this的指向

apply和call会让当前函数立即执行,而bind会返回一个函数,后续需要的时候再调用执行

apply,call的区别实参数不同

const foot ={
    apple:'苹果'
}
function eat(a,b){
   console.log(a,b,this)
}

const bindEat = eat.bind(foot)
 
eat(1,2) // 1 2 Window

bindEat(1,2) //1 2  foot 

eat.call(foot,1,2) //1 2  foot

/* apply参数已数组形式传递  */
eat.apply(foot,[1,2]) //1 2  foot

问题6:开发过程中遇到的内存泄露情况,如何解决的?

javascript内存泄漏几种情况

1 意外的全局变量

function foo(arg) { 
    bar = "this is a hidden global variable"; 
}

另一种意外的全局变量可能由 this 创建:


function foo() { 
    this.variable = "potential accidental global"; 
} 
// Foo 调用自己,this 指向了全局对象(window) 
// 而不是 undefined 
foo();

尽管我们讨论了一些意外的全局变量,但是仍有一些明确的全局变量产生的垃圾。它们被定义为不可回收(除非定义为空或重新分配)。尤其当全局变量用于 临时存储和处理大量信息时,需要多加小心。如果必须使用全局变量存储大量数据时,确保用完以后把它设置为 null 或者重新定义。与全局变量相关的增加内存消耗的一个主因是缓存。缓存数据是为了重用,缓存必须有一个大小上限才有用。高内存消耗导致缓存突破上限,因为缓 存内容无法被回收。

2被遗忘的计时器或回调函数

var someResource = getData(); 
setInterval(function() { 
    var node = document.getElementById('Node'); 
    if(node) { 
        // 处理 node 和 someResource 
        node.innerHTML = JSON.stringify(someResource)); 
    } 
}, 1000);

与节点或数据关联的计时器不再需要,node 对象可以删除,整个回调函数也不需要了。可是,计时器回调函数仍然没被回收(计时器停止才会被回收)。同时,someResource 如果存储了大量的数据,也是无法被回收的。

3脱离 DOM 的引用

var elements = { 
    button: document.getElementById('button'), 
    image: document.getElementById('image'), 
    text: document.getElementById('text') 
}; 
 
function doStuff() { 
    image.src = 'http://some.url/image'; 
    button.click(); 
    console.log(text.innerHTML); 
    // 更多逻辑 
} 
 
function removeButton() { 
    // 按钮是 body 的后代元素 
    document.body.removeChild(document.getElementById('button')); 
 
    // 此时,仍旧存在一个全局的 #button 的引用 
    // elements 字典。button 元素仍旧在内存中,不能被 GC 回收。 
}

4 闭包的错误使用

var theThing = null; 
var replaceThing = function () { 
  var originalThing = theThing; 
  var unused = function () { 
    if (originalThing) 
      console.log("hi"); 
  }; 
  theThing = { 
    longStr: new Array(1000000).join('*'), 
    someMethod: function () { 
      console.log(someMessage); 
    } 
  }; 
}; 
setInterval(replaceThing, 1000); 

每次调用 replaceThing ,theThing 得到一个包含一个大数组和一个新闭包(someMethod)的新对象。同时,变量 unused 是一个引用 originalThing 的闭包(先前的 replaceThing 又调用了 theThing )。思绪混乱了吗?最重要的事情是,闭包的作用域一旦创建,它们有同样的父级作用域,作用域是共享的。someMethod 可以通过 theThing 使用,someMethod 与 unused 分享闭包作用域,尽管 unused从未使用,它引用的 originalThing 迫使它保留在内存中(防止被回收)。当这段代码反复运行,就会看到内存占用不断上升,垃圾回收器(GC)并无法降低内存占用。本质上,闭包的链表已经创建,每一个闭包作用域携带一个指向大数组的间接的引用,造成严重的内存泄露。

解决内存泄漏方式

1 使用严格模式,合理声明变量。使用严格模式可以避免第一种情况的发生。

2 及时清理定时器,延时器,对于不需要的定时器和延时器,一定要及时清除。

3 合理应用闭包,合理的应用闭包,避免闭包函数反复执行导致内存无法及时释放。

问题7:介绍一下__proto__和prototype

__proto__和prototype 是我们在平时工作中容易忽略的问题,对象原型 和 原型链 的概念也容易混淆。

__proto__是每个对象都有的属性 ,在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都会具有对象共有的特点。即:对象具有属性proto,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。

prototypee是函数才有的属性,方法(Function)方法这个特殊的对象,除了和其他对象一样有上述proto属性之外,还有自己特有的属性——原型属性(prototype),这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法就是该实例的__proto__。原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数。

 let a = function (){

 }
 a.prototype.eat = function(){ console.log(111) }
 const na = new a()
 console.log( na.__proto__ === a.prototype ) // ture

问题8:说一下arguments对象

在函数调用的时候,浏览器每次都会传递进arguments对象,arguments 对象实际上是所在函数的一个内置类数组对象,arguments对象不是一个 Array 。它类似于Array,但除了length属性和索引元素之外没有任何Array属性。例如,它没有 pop 方法。但是它可以被转换为一个真正的Array.typeof参数返回 ‘object’。

属性
arguments.callee指向参数所属的当前执行的函数。指向调用当前函数的函数。
arguments.length传递给函数的参数数量。
**arguments[@@iterator]**返回一个新的Array 迭代器 对象,该对象包含参数中每个索引的值。

问题9:怎么实现一个队列的数据结构?

介绍
队列也是一种线性表。它允许在表的一端插入数据,在另一端删除元素。插入元素的这一端称之为队尾。删除元素的这一端我们称之为队首。

特性
1 在队尾插入元素,在队首删除元素。
2 FIFO(先进先出),就向排队取票一样。

简单js实现

class Queue {
    constructor(){
        this.queue = []
    }
    /* 进入队列 */
    enqueue(item){
        this.queue.push(item)
    }
    /* 移除队列 */
    dequeue(){
        this.queue.shift()
    }
    /* 获取队列长度 */
    size(){
        return this.queue.length
    }
    /* 判断是否为空 */
}

css

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第6张图片

问题一: 什么是vw+vh布局?有哪些有优点?有哪些缺陷?

解答:

1什么是什么是vw/vh

css3中引入了一个新的单位vw/vh,与视图窗口有关,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,除了vw和vh外,还有vmin和vmax两个相关的单位。各个单位具体的含义如下:
单位含义vw相对于视窗的宽度,视窗宽度是100vwvh相对于视窗的高度,视窗高度是100vhvminvw和vh中的较小值vmaxvw和vh中的较大值;
这里我们发现视窗宽高都是100vw/100vh,那么vw或者vh,下简称vw,很类似百分比单位。vw和%的区别为:
单位含义%大部分相对于祖先元素,也有相对于自身的情况比如(border-radius、translate等)vw/vh相对于视窗的尺寸
从对比中我们可以发现,vw单位与百分比类似,单确有区别,前面我们介绍了百分比单位的换算困难,这里的vw更像"理想的百分比单位"。任意层级元素,在使用vw单位的情况下,1vw都等于视图宽度的百分之一。

2vw单位换算

同样的,如果要将px换算成vw单位,很简单,只要确定视图的窗口大小(布局视口),如果我们将布局视口设置成分辨率大小,比如对于iphone6/7 375*667的分辨率,那么px可以通过如下方式换算成vw:

1px =1/375*100 vw

3缺陷

1 绝大多数的浏览器支持vw单位,但是ie9-11不支持vmin和vmax,考虑到vmin和vmax单位不常用,vw单位在绝大部分高版本浏览器内的支持性很好,但是opera浏览器整体不支持vw单位,如果需要兼容opera浏览器的布局,不推荐使用vw。

2 由于是相对手机窗口,针对不同的手机视图大小不同,所以需要对单位进行换算处理。

问题二:什么是rem布局?rem布局的缺陷。

答:

rem布局

rem是一个灵活的、可扩展的单位,由浏览器转化像素并显示。与em单位不同,rem单位无论嵌套层级如何,都只相对于浏览器的根元素(HTML元素)的font-size。默认情况下,html元素的font-size为16px,所以:
1 rem = 12px
为了计算方便,通常可以将html的font-size设置成:

html{ font-size: 62.5% }

这种情况下:
1 rem = 10px
rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准,当页面的size发生变化时,只需要改变font-size的值,那么以rem为固定单位的元素的大小也会发生响应的变化。 因此,如果通过rem来实现响应式的布局,只需要根据视图容器的大小,动态的改变font-size即可。

rem布局缺陷

1 在响应式布局中,必须通过js来动态控制根元素font-size的大小。
1 css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前

问题三:怎么让Chrome支持小于12px 的文字**

谷歌浏览器默认最小字体为12px,若想让chorme支持12px字体,只需要用css3属性transform就可以

例子:在谷歌浏览器写出10px字体

transform:scale(0.5);
font-size:20px;

搞定收工~~~

问题四:透明度opacity和rgba的区别

opacity

取值在0到1之间,0表示完全透明,1表示完全不透明。

.box{opacity: 0.5;}

rgba

rgba中的R表示红色,G表示绿色,B表示蓝色,三种颜色的值都可以是正整数或百分数。A表示Alpha透明度。取值0~1之间,类似opacity。

.box{background: rgba(255,0,0,0.5);}

rgba和opacity的区别
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景色。

问题五:position的属性值有哪些?

absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative
生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。

static
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit
规定应该从父元素继承 position 属性的值。

问题六:display的属性值有哪些?

none(元素不会被显示);

block(元素将显示为块级元素,元素前后会带有换行符);

inline(元素会被显示为内联元素,元素前后没有换行符);

inline-block(行内块元素。CSS2.1新增的值);

table(元素会作为块级表格来显示,类似table,表格前后带有换行符);

table-row(元素会作为一个表格行显示,类似tr);

table-cell(元素会作为一个表格单元格显示,类似td和th)

flex 弹性盒结构

gird 网格结构

问题七:垂直水平居中的方案有哪些(尽量说全面一些)

position absolute 50% + 负margin -50%

.container {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50%;
    margin-left: -50%;
}

position absolute 50% + transform -50%

.container {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

css-table


/* 此处引用上面的公共代码 */
.container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

flex

/* 此处引用上面的公共代码 */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-center {
    text-align: center;
}

grid

/* 此处引用上面的公共代码 */
.container {
    display: grid;
    justify-items: center;
    align-items: center;
}
.box-center {
    text-align: center;
}

vue 篇

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第7张图片

问题1:vue各个生命周期及其作用

1.初始化

beforeCreate:大vue已经初始化,只是数据初始化与事件系统构建尚未形成,不能获取DOM节点(没有data,没有el)
使用场景:因为此时data和methods都拿不到,所以通常在实例以外使用。
created:实例已经创建,仍然不能获取DOM节点(有data,没有el)
使用场景:模板渲染成html前调用,此时可以获取data和methods, 可以初始化进行数据请求,得到渲染数据,,异步操作可以放在这里
2 挂载
beforeMount是个过渡阶段,此时依然获取不到具体的DOM节点,但是vue挂载的根节点已经创建(有data,有el)
mounted:组件挂载完成,数据和DOM都已经被渲染出来了
使用场景:模板渲染成html后调用,通常是初始化页面完成后再对数据和DOM做一些操作,需要操作DOM的方法可以放在这里
3.更新
beforeUpdate:检测到数据更新时,但在DOM更新前执行
updated:更新结束后执行
使用场景:需要对数据更新做统一处理的;如果需要区分不同的数据更新操作可以使用$nextTick
4.销毁
beforeDestroy:当要销毁vue实例时,在销毁前执行
destroyed:销毁vue实例时执行

父子组件mounted和destroyed顺序

beforeMount执行顺序 先父后子

mounted执行顺序,先子后父

beforeDestroy 执行顺序,先父后子

destroyed 执行顺序 , 先子后父

问题2:vue3的双向绑定原理,与vue2.0比起来有那些优势?

vue3.0 的数据绑定原理 proxy 对象
vue3.0 于 Proxy 的 observer 实现, 代替了Vue 2 系列中基于 Object.defineProperty 做为响应式原理

感兴趣的同学可以看一下笔者的vue3.0响应式原理详解

传送门:vue3.0 响应式原理(超详细)

优势:
1 对属性的添加、删除动作的监测;

2 对数组基于下标的修改、对于 .length 修改的监测;

3 对 Map、Set、WeakMap 和 WeakSet 的支持;;

4 vue3 对依赖收集用的是weaMap,WeakSet,保持了对键名所引用的对象的弱引用,即垃圾回收机制不将该引用考虑在内,一旦不再需要,WeakMap 里面的键名对象和所对应的键值对会自动消失,不用手动删除引用。

5 vue2.0 初始化data时候,对于对象等引用数据类型,进行了递归处理,也就是对于一些挂载在data上属性,但是并没有用到的属性,也同样做了响应式处理,而vue3.0之后访问到父级属性之后,在进行下一层track,也就是说初始化data时候无需把大量性能浪费在递归上。

问题3:vue路由卫士?

vue中路由守卫一共有三种,一个全局路由守卫,一个是组件内路由守卫,一个是router独享守卫。

一、全局路由守卫

只要全局路由变化,就会触发全局的路由守卫。
全局路由守卫有个两个:一个是全局前置守卫,一个是全局后置守卫。

router.beforeEach((to, from, next) => {
    console.log(to) => // 到哪个页面去?
    console.log(from) => // 从哪个页面来?
    next() => // 一个回调函数
}
router.afterEach(to,from= {}

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址,next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项.

二、组件路由守卫

// 跟methods: {}等同级别书写,组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
    // 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过vm来访问组件实例
    next(vm => {})
}
beforeRouteUpdate (to, from, next) {
    // 同一页面,刷新不同数据时调用,
}
beforeRouteLeave (to, from, next) {
    // 离开当前路由页面时调用
}

三、路由独享守卫
路由独享守卫是在路由配置页面单独给路由配置的一个守卫

export default new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: 'Home',
            beforeEnter: (to, from, next) => {
               // ...
            }
        }
    ]
})

问题4:vue 中watch和computed区别?

watch侧重点是对数据更新所产生的依赖追踪,而computed侧重点是对数据的缓存与处理引用,这就是watch和computed本质的区别 ,computed可以看作一种特殊的data数据类型 ,它内部进行了二次依赖收集 ,第一次依赖收集是引用computed属性值,而进行的依赖收集 ,第二次是对computed内部是否关联data或者props的属性,而又进行的一次依赖收集。

下面我们按照vue3.0两个例子,来分别两者之前在流程上有什么区别。

watch

<div id="app">
   <p>{{ count }}p>
   <button @input="add" >addbutton>
div>
<script>
const { reactive, watch, toRefs } = Vue
Vue.createApp({
  setup(){
    const state = reactive({
       count:1,
    })
    const add = () => state.count++
    watch(state.count,(count, prevCount) => {
       console.log('新的count=' , count )
    })
    return {
      ...toRefs(state),
      add
    }
  }
}).mount('#app')
script>

从上述例子我们看出,当点击add后count变化 ,而是 watch作用就是,追踪到count变化 ,而促使回调函数执行。我们用一张流程图来解析整个流程。

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第8张图片

computed

<div id="app">
   <p>{{ plusOne }}p>
   <button @input="add" >addbutton>
div>

<script>
Vue.createApp({
  data: () => ({
    number: 1
  }),
  computed: {
    plusOne() {
      return this.number + 1
    }  
  },
  methods: {
    add(){
      this.number++
    }
  }
}).mount('#app')
script>

当我们点击add改变的是number,但是引用过this.number的computed也更新了新的值 ,页面更新,我们可以看出 plusOne计算属性可以看作一个对number缓存的数据类型,data下的number收集了plusOne依赖项,同样plusOne也收集了{{ plusOne }}的依赖促使更新视图,我们用一张流程图来解析整个流程。

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第9张图片

如果想要看原理解析请看笔者的文章

传送门 vue3.0 watch 和 computed源码解析(举例图解)

问题5:vue中data为什么要是个函数?

vue中data必须是一个函数是和js本身特性有关。

我们做vue项目的时候,所有的vue组件都是基于大vue实例化的,我们可以用一个简单例子来解释一下:


function Vue(){
 
}
Vue.prototype.data = {
    name:'jack',
    age:22,
}
var componentA = new Vue();
var componentB = new Vue();
componentA.data.age=55;
console.log(componentA,componentB)

此时,componentA 和 componentB data之间指向了同一个内存地址,age 都变成了 55, 导致了问题!
接下来很好解释为什么 vue 组件需要 function 了:

function Vue(){
 this.data = this.data()
}
Vue.prototype.data = function (){
    return {
    name:'jack',
    age:22,
}
}
var componentA = new Vue();
var componentB = new Vue();
componentA.data.age=55;
console.log(componentA,componentB)

componentA 和 componentB data之间相互独立, age 分别是 55 和 22
当data是一个方法的时候,每一个实例化组件都会形成一个独立的data对象,相互之间没有影响。

react 篇

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第10张图片

问题1:setState是同步的还是异步的?

对于这个问题,笔者自己总结了一下:对于setState是同步还是异步,对于整个react代码上下文执行栈来说,setState是同步的,但是setState触发以后,并不一定得到新的数据,这里有一个react有一个batchUpdate批量更新的概念。

我们来看一个例子:

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};

答案是: 0 0 2 3

在React的setState函数实现中,会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说,而isBatchingUpdates默认是false,也就表示setState会同步更新this.state,但是,有一个函数batchedUpdates,这个函数会把isBatchingUpdates修改为true,而当React在调用事件处理函数之前就会调用这个batchedUpdates,造成的后果,就是由React控制的事件处理过程setState不会同步更新this.state 。

问题2:介绍一下 react-hooks API及其如何使用?

usestate 无状态组件的state

useCallback,useMemo 性能优化利器.

useContext 可以使用操纵react context.

useEffect ,useLayoutEffect 副作用钩子 可以替代class声明组件中的声明周期 .useLayoutEffect 在浏览器渲染之前 , effect在浏览器渲染之后

useReducer 功能可以参考redux

useRef 可以获取元素和组件实例,还可以缓存数据

详细的react-hooks使用可以戳

传送门:react-hooks如何使用?

webpack篇

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第11张图片

问题一:webpack性能优化?

打包的时间和打包之后文件的体积是影响webpack性能的主要因素。所以我们可以从这两个方面入手,来优化webpack性能。

1合理使用loader
用 include 或 exclude 来帮我们避免不必要的转译,优化loader的管辖范围。

2缓存babel编译过的文件

loader: ‘babel-loader?cacheDirectory=true’
如上,我们只需要为 loader 增加相应的参数设定。选择开启缓存将转译结果缓存至文件系统,可以提交babel-loader的工作效率。

3 DllPlugin类库引入

DllPlugin 是基于 Windows 动态链接库(dll)的思想被创作出来的。这个插件会把第三方库单独打包到一个文件中,这个文件就是一个单纯的依赖库。这个依赖库不会跟着你的业务代码一起被重新打包,只有当依赖自身发生版本变化时才会重新打包。

4 happypack多进程编译

我们都知道nodejs是单线程。无法一次性执行多个任务。这样会使得所有任务都排队执行。happypack可以根据cpu核数优势,建立子进程child_process,充分利用多核优势解决这个问题。提高了打包的效率。

const HappyPack = require('happypack')
// 手动创建进程池
const happyThreadPool =  HappyPack.ThreadPool({ size: os.cpus().length })
module.exports = {
  module: {
    rules: [
      ...
      {
        test: /\.js$/,
        // 问号后面的查询参数指定了处理这类文件的HappyPack实例的名字
        loader: 'happypack/loader?id=happyBabel',
        ...
      },
    ],
  },
  plugins: [
    ...
    new HappyPack({
      // 这个HappyPack的“名字”就叫做happyBabel,和楼上的查询参数遥相呼应
      id: 'happyBabel',
      // 指定进程池
      threadPool: happyThreadPool,
      loaders: ['babel-loader?cacheDirectory']
    })
  ],
}

happypack成功,启动了三个进程编译。加快了loader的加载速度。

5 scope Hoisting

scope Hoisting的作用是分析模块之前的依赖关系 , 把打包之后的公共模块合到同一个函数中去。它会代码体积更小,因为函数申明语句会产生大量代码;代码在运行时因为创建的函数作用域更少了,内存开销也随之变小。

const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');

module.exports = {
 resolve: {
   // 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件
   mainFields: ['jsnext:main', 'browser', 'main']
 },
 plugins: [
   // 开启 Scope Hoisting
   new ModuleConcatenationPlugin(),
 ],
};

6 tree Shaking 删除冗余代码

Tree-Shaking可以通过分析出import/exports依赖关系。对于没有使用的代码。可以自动删除。这样就减少了项目的体积。

举个例子:

import { a, b } from ‘./pages’
a()
pages 文件里,我虽然导出了两个页面:
export const a = ()=>{ console.log(666) }
export const b = ()=>{ console.log(666) }
所以打包的结果会保留这部分:
export const a = ()=>{ console.log(666) }
b方法直接删掉,这就是 Tree-Shaking 帮我们做的事情。删掉了没有用到的代码。

7 按需加载

像vue 和 react spa应用,首次加载的过程中,由于初始化要加载很多路由,加载很多组件页面。会导致 首屏时间 非常长。一定程度上会影响到用户体验。所以我们需要换一种按需加载的方式。一次只加载想要看到的内容

require.ensure 形式

const getComponent => (location, cb) {
  require.ensure([], (require) => {
    cb(null, require('../pages/AComponent').default)
  }, 'a')
}
<Route path="/a" getComponent={getComponent}>

import形式

import B from '@/pages/business/b.vue'
//按需加载变成了:
const B = () => import('@/pages/business/b.vue')

8 按需引用

不知道大家有没有体会到,当我们用antd等这种UI组件库的时候。明明只想要用其中的一两个组件,却要把整个组件库连同样式库一起引进来,就会造成打包后的体积突然增加了好几倍。为了解决这个问题,我们可以采取按需引入的方式。

拿antd为例,需要我们在.babelrc文件中这样声明,

{
"presets": [
   [
    "@babel/preset-env",
    {
      "targets": {
          "chrome": "67"
      },
    "useBuiltIns": "usage",
     "corejs": 2
    }
   ],
    "@babel/preset-react"
 ],
  "plugins": [
  [
   "@babel/plugin-transform-runtime",
  ],
  //重点按需引入antd里面的style
  [  "import", {
   "libraryName": "antd",
   "libraryDirectory": "es",
   "style": true
  }]
 ]
}

经过如上配置之后,我们会发现体积比没有处理的要小很多。

问题二:webpack怎么配置多页面应用?

实际这个问题变相再问webpack,配置多入口和多个html对应

entry 应该这么配 ,entry支持 string array object

{
  //入口文件配置 string | array | object
  entry: {
    index: './src/index.js',
    list: './src/list.js',
    detail: './src/detail.js'
  },
}

html输出配置 输出html需要webpack插件 html-webpack-plugin

{
    plugins: [
    new htmlWebpackPulgin({
      title: 'hello 我是首页',
      template: './index.html',
      inject: 'head',
      filename: 'index.html',
      chunks: ['index'] //对应 index.js
    }),
    new htmlWebpackPulgin({
      title: 'hello 我是列表',
      template: './index.html',
      inject: 'body',
      filename: 'list.html',
      chunks: ['list'] // 对应 list.js
    }),
    new htmlWebpackPulgin({
      title: 'hello 我是详情',
      template: './index.html',
      inject: 'body',
      filename: 'detail.html',
      chunks: ['detail']  //对应detail.js
    })
  ]
}

http篇

「原题 + 精讲 」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)_第12张图片

问题1:URL请求页面之后浏览器的解析过程

1.用户输入网址,浏览器发起DNS查询请求,域名解析。

2.三次握手

3.建立tcp连接,发送http请求

4.服务器接受到请求,并相应http请求

5.浏览器对返回的html进行解析,在这期间可能继续请求css,js等文件,浏览器渲染、构建网页

6.断开连接,四次挥手

7.浏览器对页面进行渲染呈现给用户

问题2:javascript的同源策略

同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。

如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话,则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”,或者直接是 “元组”。(“元组” 是指一组项目构成的整体,双重/三重/四重/五重/等的通用形式)。

源的继承
在页面中通过 about:blank 或 javascript: URL 执行的脚本会继承打开该 URL 的文档的源,因为这些类型的 URLs 没有包含源服务器的相关信息。

源的修改
满足某些限制条件的情况下,页面是可以修改它的源。脚本可以将 document.domain 的值设置为其当前域或其当前域的父域。如果将其设置为其当前域的父域,则这个较短的父域将用于后续源检查。

问题3:怎么解决ie浏览器对get请求的缓存?

不知道大家有没有过一种情况,在低版本ie浏览器下,在短暂的时间内发出相同的get情况(比如相同时间请求一个数据列表多次),就会发现请求只发送了一次,其他的请求都被浏览器缓存了,对于这种缓存ajax情况,我们可以在url拼上时间戳,这样浏览器就不会认为这是相同的情况,就不会缓存get情况。

以aixos为例,我们可以在每次发起请求的时候对get请求加以拦截

/* 拦截器 */
axios.interceptors.request.use(
    (config) => {
        const method   = config.method || 'get'
        if (method.toLowerCase() === 'get') {  /* 防止浏览器缓存 */
            const url  = config.url || ''
            const t = new Date().getTime()
            config.url = `${url}${url.indexOf('?') === -1 ? '?' : '&'}t=${t}`
        }else if(method.toLowerCase() === 'post'){ /* 设置不同请求头 */
            //...
        }
        return config
    },
    (error) => { 
    }
)

如上,就完美解决了ajax被ie浏览器缓存的问题。

参考文档

布局常用解决方案对比(媒体查询、百分比、rem和vw/vh)

css中的多种垂直水平居中

JavaScript内存泄露的4种方式及如何避免

vue路由守卫哪几种?

Vue组件为什么data必须是一个函数?

深入 setState 机制

总结

感谢您的辛苦阅读,如果有什么需要改进的地方,请在下方留言,陆续还有相关文文章分享连载,喜欢的大家可以关注一下笔者和笔者的公众号:前端Sharing

在这里插入图片描述
微信扫码关注公众号,定期分享技术文章

你可能感兴趣的:(javascript,前端技术,webpack,前端,javascript,html,vue.js,reactjs)