damomhd / interview-question Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 2 KB

整理各大厂面试题

interview-question's Introduction

Thank You-🙏🏼

⭐️ From DamomHd

interview-question's People

Contributors

Stargazers

interview-question's Issues

什么是函数柯里化，如何实现？

函数的柯里化，是 Javascript 中函数式编程的一个重要概念。它返回的，是一个函数的函数。其实现方式，需要依赖参数以及递归，通过拆分参数的方式，来调用一个多参数的函数方法，以达到减少代码冗余，增加可读性的目的。

如何判断一个浏览器是否支持webp 如何让IOS设备支持webp

webpack的热更新是如何做到的？说明其原理？

第一步，在 webpack 的 watch 模式下，文件系统中某一个文件发生修改，webpack 监听到文件变化，根据配置文件对模块重新编译打包，并将打包后的代码通过简单的 JavaScript 对象保存在内存中。
第二步是 webpack-dev-server 和 webpack 之间的接口交互，而在这一步，主要是 dev-server 的中间件 webpack-dev-middleware 和 webpack 之间的交互，webpack-dev-middleware 调用 webpack 暴露的 API对代码变化进行监控，并且告诉 webpack，将代码打包到内存中。
第三步是 webpack-dev-server 对文件变化的一个监控，这一步不同于第一步，并不是监控代码变化重新打包。当我们在配置文件中配置了devServer.watchContentBase 为 true 的时候，Server 会监听这些配置文件夹中静态文件的变化，变化后会通知浏览器端对应用进行 live reload。注意，这儿是浏览器刷新，和 HMR 是两个概念。
第四步也是 webpack-dev-server 代码的工作，该步骤主要是通过 sockjs（webpack-dev-server 的依赖）在浏览器端和服务端之间建立一个 websocket 长连接，将 webpack 编译打包的各个阶段的状态信息告知浏览器端，同时也包括第三步中 Server 监听静态文件变化的信息。浏览器端根据这些 socket 消息进行不同的操作。当然服务端传递的最主要信息还是新模块的 hash 值，后面的步骤根据这一 hash 值来进行模块热替换。
webpack-dev-server/client 端并不能够请求更新的代码，也不会执行热更模块操作，而把这些工作又交回给了 webpack，webpack/hot/dev-server 的工作就是根据 webpack-dev-server/client 传给它的信息以及 dev-server 的配置决定是刷新浏览器呢还是进行模块热更新。当然如果仅仅是刷新浏览器，也就没有后面那些步骤了。
HotModuleReplacement.runtime 是客户端 HMR 的中枢，它接收到上一步传递给他的新模块的 hash 值，它通过 JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求，服务端返回一个 json，该 json 包含了所有要更新的模块的 hash 值，获取到更新列表后，该模块再次通过 jsonp 请求，获取到最新的模块代码。这就是上图中 7、8、9 步骤。
而第 10 步是决定 HMR 成功与否的关键步骤，在该步骤中，HotModulePlugin 将会对新旧模块进行对比，决定是否更新模块，在决定更新模块后，检查模块之间的依赖关系，更新模块的同时更新模块间的依赖引用。
最后一步，当 HMR 失败后，回退到 live reload 操作，也就是进行浏览器刷新来获取最新打包代码。

请说一下Js中的事件循环机制

JS任务分类分为 同步任务和异步任务

虽然JS是单线程的，但是浏览器内核却是多线程的，在浏览器内核中不同的异步操作由不同的浏览器内核模块调度执行，异步任务操作会将相关回调添加到任务队列中

然后不同的异步操作添加到任务队列的时机也是不同的，比如onclick、setTimeout、ajax处理的方式都不相同

这些异步操作是由浏览器内核来执行的，浏览器内核上包含3种webAPI，分别是DOM Binding（Dom绑定）、network（网络请求）、timer（定时器）模块

按这种分类方式，JS的执行机制是：

首先判断JS代码是同步还是异步，不停的检查调用栈种是否有任务需要执行，如果没有就检查任务队列，从中弹出一个任务，放入栈中，如果反复循环，要是同步任务就进入主线程，异步任务就进入事件表
异步任务在事件表种注册函数，当满足触发条件后，被推入事件队列
同步任务进入主线程后一直执行，直到主线程空闲时，才回去事件队列种查看是否有可执行的异步任务，如果有则推入主线程

以上三步循环执行，这就是事件循环（Event loop），它是连接任务队列和控制调用栈的

如何让 if(a == 1 && a == 2 && a == 3)条件成立？

实现数组扁平化

多维数组=》一维数组

let arr = [1, [2, [3, [4, [5, ] , 6], 7], 8]]
let str = JSON.stringify(arr)

webpack与grunt、gulp的不同？

三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。

grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。

webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能

this指向问题

一道阿里面试题尝试输出结果

var length = 100 
function f1 (){
    console.log(this.length)
}

var obj = {
    length:10,
    f2:function(f1){
        f1();
        arguments[0]()
    }    
}

obj.f2(f1,1)

执行output输出指定的N维数组

var arr = [1,2,3,4,5,6,7]

function output(){

}
output() 
//[[1,2],[3,4],[5,6],[7]]
//[[1,2,3],[4,5,6],[7]]

函数arguments为什么不是数组？如何转化成数组？

因为arguments本身并不能调用数组方法，它是一个另外一种对象类型，只不过属性从0开始排，依次为0，1，2...最后还有callee和length属性。我们也把这样的对象称为类数组。

常见的类数组还有：

用getElementsByTagName/ClassName()获得的HTMLCollection
用querySelector获得的nodeList

为什么全部输出的6？如何让它输出1，2，3，4，5？

for(var i = 1; i <= 5; i ++){
  setTimeout(function timer(){
    console.log(i)
  }, 0)
}

oss存储的原理，访问一张图，怎么实现oss->cdn->client的?

宏任务执行顺序

timers定时器：执行已经安排的setTimeout和setInterval的回调函数
pending callback 待定回调：执行延迟到下一个循环迭代的I/0回调
idle，prepare：仅系统内部使用
poll：检索新的I/0事件，执行与I/0相关回调
check：执行setImmediate()回调函数
close callbacks：socket.on('close',()=>{})

微任务和宏任务在node执行顺序

Node v10及以前：

执行完一个阶段中的所有任务
执行nextTick队列里的内容
执行完微任务

Node v10以后：
和浏览器的行为统一了

实现水平垂直居中的N种方式

<div class="container">
  <div class="content"></div>
</div>

.container{
      width:500px;
      height:500px;
      background-color:#999;
}
.content{
     width:200px;
     height:200px;
     background-color:#333;
}

如何通过instanceof判断基本数据类型？

`
class PrimitiveNumber {
static Symbol.hasInstance{
return typeof num === 'number'
}
}
console.log(111 instanceof PrimitiveNumber) //true

是否写过Loader和Plugin？描述一下编写loader或plugin的思路？

Loader像一个"翻译官"把读到的源文件内容转义成新的文件内容，并且每个Loader通过链式操作，将源文件一步步翻译成想要的样子。

编写Loader时要遵循单一原则，每个Loader只做一种"转义"工作。每个Loader的拿到的是源文件内容（source），可以通过返回值的方式将处理后的内容输出，也可以调用this.callback()方法，将内容返回给webpack。还可以通过 this.async()生成一个callback函数，再用这个callback将处理后的内容输出出去。此外webpack还为开发者准备了开发loader的工具函数集——loader-utils。

相对于Loader而言，Plugin的编写就灵活了许多。 webpack在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

前端进行监控、埋点统计为什么要用gif？

为什么用gif
为什么不是png/jpg

JS基础-连续赋值

如何利用webpack来优化前端性能？（提高性能和体验）

压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件，利用cssnano（css-loader?minimize）来压缩css
利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现
提取公共代码。

get和post的区别？

GET在浏览器回退是无害的，不会重新请求，POST会再次提交请求
GET产生的URL地址是可以被收藏的，POST不可以
GET请求会被浏览器主动缓存，POST不会，除非手动设置
GET请求只能进行URL编码，而POST支持多种编码方式
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留
GET请求在URL中传送的参数是有长度限制的，而POST没有
对参数的数据类型，GET只接受ASCII字符，而POST没有
GET比POST更不安全，因为参数全部暴露在URL上，所以不能用来传递敏感信息
GET参数通过URL传递，而POST放在request body中

call 和 apply 的区别是什么，哪个性能更好一些

什么是BFC?触发条件有哪些?

BFC:BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围，把它理解成是一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干。

JS如何实现继承？

Loader和Plugin的不同？

作用不同

Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

用法不同

Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
Plugin在plugins中单独配置。类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。

首屏加载优化有哪些？

webpack的构建流程是什么?

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
确定入口：根据配置中的 entry 找出所有的入口文件；
编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

如何提高webpack的构建速度？

多入口情况下，使用CommonsChunkPlugin来提取公共代码
通过externals配置来提取常用库
利用DllPlugin和DllReferencePlugin预编译资源模块通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
使用Happypack 实现多线程加速编译
使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
使用Tree-shaking和Scope Hoisting来剔除多余代码