最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我特地针对初学者整理一套前端学习资料
跨域的处理方案有哪些
常用的:jsonp、CORS、nginx 代理,完整的大概是九种,可见:九种跨域方式实现原理(完整版)
CORS 是如何做的?
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。
对于 CORS ,Get 和 POST 有区别吗?
其实想考察的就是什么时候会有预检请求(option 请求)。
了解 HTTPS 的过程吗?
推荐浪浪的 深入理解 HTTPS 工作原理
webpack 如何做性能优化
webpack 做性能优化主要是考虑打包体积和打包速度。
体积分析用 webpack-bundle-analyzer
插件,速度分析用:speed-measure-webpack-plugin
插件。
打包速度优化瓶子君的:玩转 webpack,使你的打包速度提升 90%。
es module 和 commonjs 的区别
高频题,考察 ES6 模块和 CommonJS 模块 的区别。关键点:1. 前者是值的引用,后者是值的拷贝。2.前者编译时输出接口,后者运行时加载。
推荐文章:前端模块化:CommonJS,AMD,CMD,ES6
react 里如何做动态加载
React.lazy
,另外通过 webpack 的动态加载:import()
和 ensure.require
动态加载的原理是啥,就是 webpack 编译出来的代码
讲道理 webpack 动态加载就两种方式:import()
和 require.ensure
,不过他们实现原理是相同的。
我觉得这道题的重点在于动态的创建 script 标签,以及通过 jsonp
去请求 chunk,推荐的文章是:webpack 是如何实现动态导入的
笔试题:页面结构包括页头(永远在顶部)、主体内容、页脚,页脚永远在页面底部(不是窗口底部),即内容高度不够时,页脚也要保证在页面底部
常规题,考察基本的布局
笔试题:写 new 的执行过程
new 的执行过程大致如下:
-
创建一个对象
-
将对象的 _ *proto_* 指向 构造函数的 prototype
-
将这个对象作为构造函数的 this
-
返回该对象。
function myNew(Con, …args) {
let obj = Object.create(Con.prototype)
let result = Con.apply(obj, args)
return typeof obj === ‘object’ ? result : obj
}
笔试题:写一个处理加法可能产生精度的函数,比如 0.1 + 0.2 = 0.3
思路:对于浮点数在底层处理是有问题的,所以目的就是想办法将所以的浮点数转化为整数进行处理,同时乘以一个倍数(A),然后加起来后再除以这个倍数(A),这个倍数应该是两个数中最小的那个数的倍数,比如 0.1 + 0.02 ,那么应该同时乘以 100,变为 10 + 2,然后再将值除以 100。
1000000000 + 1000000000 允许返回字符串 处理大数
大数问题就是通过字符串来处理,从后往前加,然后处理进位的问题。
二面
聊项目
项目基本是问:
-
项目难点以及怎么解决的
-
项目有哪些亮点?
写一个 es6 的继承过程
这个题我觉得出得很好,很考察基本功。
// 这个是要实现的方法
createClass = fun(sons, super) {
// TODO
return fn;
}
// 这是个 es6 的一个例子,要实现 extends 的功能。
class Man extends Human {
cons (args) {
super(args)
// xxxxx
}
speak() {
console.log(‘’)
}
}
写一个大数相乘的解决方案。传两个字符串进来,返回一个字符串
function multi(str1, str2) {
}
这道题跟一面的时候思路差不多,只是进位的时候不一定是 1。
三面
聊项目
写一个防抖函数
算法题:https://leetcode-cn.com/problems/bu-ke-pai-zhong-de-shun-zi-lcof/
小节
字节果然是出了名的考算法题比较多的,基本每面都会算法题和编程题,对编程能力比较看重吧。
讲道理一面还是比较常规的,二三面因为都是团队 leader 和更高级别的,问的技术细节也比较少了,重点考察一些技术方案和项目的问题。
滴滴
–
一面
webpack 原理
大致就是:
-
初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;
-
开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;
-
确定入口:根据配置中的 entry 找出所有的入口文件;
-
编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
-
完成模块编译:在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
-
输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;
-
输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
babel 原理
babel 的转译过程分为三个阶段:parsing、transforming、generating,以 ES6 代码转译为 ES5 代码为例,babel 转译的具体过程如下:
-
ES6 代码输入
-
babylon 进行解析得到 AST
-
plugin 用 babel-traverse 对 AST 树进行遍历转译,得到新的 AST 树
-
用 babel-generator 通过 AST 树生成 ES5 代码
虚拟 DOM 的理解
项目里如何做的性能优化
这个跟我的项目相关。
写过 webpack loader 或者插件吗
讲讲你写的 babel 插件
二面
redux 的原理
redux 做状态管理和发布订阅模式有什么区别
redux 其实也是一个发布订阅,但是 redux 可以做到数据的可预测和可回溯。
react-redux 的原理,是怎么跟 react 关联起来的
react-redux 的核心组件只有两个,Provider 和 connect,Provider 存放 Redux 里 store 的数据到 context 里,通过 connect 从 context 拿数据,通过 props 传递给 connect 所包裹的组件。
了解多端的原理吗?
不清楚,没了解过。
http 与 tcp 的关系
tcp 可以建立多个连接吗?
我估计是想问 http 的管线化,当时忘了这个叫啥了
介绍一下为什么要有 三次握手,四次挥手
写过 babel 插件吗?用来干啥的?怎么写的 babel 插件
写过一些简单的 babel 插件,说了我们公司用来通过代码生成文档的 babel 插件是怎么做的。
知道怎么转化成 AST 的吗?
我估计就是问词法分析和语法分析相关的
研究过 React 的运行时吗?
职业规划。
三面
项目介绍
说一下你的项目有哪些复杂的点,以及怎么解决的
这个聊了挺久的,还聊了一些数据量比较大的怎么处理。
你们的业务组件库有多少个,是什么样的组件
权限组件是怎么设计的
会 node 吗?
我说我只会增删改查,会点 express,然后就开始一顿狂轰乱炸的知识。
介绍一下你对中间件的理解
怎么保证后端服务稳定性,怎么做容灾
React
-
介绍一下react
-
React单项数据流
-
react生命周期函数和react组件的生命周期
-
react和Vue的原理,区别,亮点,作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗,虚拟DOM是怎么对比的呢
-
项目里用到了react,为什么要选择react,react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
-
setState之后的流程
-
react高阶组件知道吗?
-
React的jsx,函数式编程
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西,接受几个参数
-
redux请求中间件如何处理并发
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
点,作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗,虚拟DOM是怎么对比的呢
-
项目里用到了react,为什么要选择react,react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
-
setState之后的流程
-
react高阶组件知道吗?
-
React的jsx,函数式编程
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西,接受几个参数
-
redux请求中间件如何处理并发
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】