Teemwu's blog前端基础面试题集合
- 从输入一个 URL 地址到浏览器完成渲染的整个过程
- 浏览器解析出主机名
- 浏览器查询这个主机名的 IP 地址（DNS）
- 浏览器获得端口号
- 浏览器发起到 IP 为 xxx.xx.xx.x 端口 xx 的连接
- 浏览器向服务器发送一条 HTTP 报文
- 浏览器从服务器读取 HTTP 响应报文
- 浏览器关闭连接
- 浏览器解析请求到的数据资源
- 浏览器更新 DOM
什么是事件代理（事件委托） 有什么好处
事件委托就是把元素响应事件的函数委托到另一个元素，通常委托给父级元素，利用事件的冒泡机制去触发父级绑定的事件，从而执行函数。亦可通过事件捕获来委托，但不常用。
冒泡委托好处：
- 减少内存消耗
- 可动态绑定事件
冒泡委托局限：
- focus、blur 等事件没有冒泡机制，无法委托
- mousemove、mouseout 等事件，需要通过不断计算位置来定位，能耗高，不适合委托
addEventListener 默认是捕获还是冒泡
默认是冒泡，需要改为捕获则需要修改第三个参数，改为 false
css 的渲染层合成是什么 浏览器如何创建新的渲染层
Webpack Plugin 和 Loader 的区别
apply call bind 区别
相同：
- 都是通过函数调用
- 皆可改变函数 this 指向
- 第一个参数皆为 this 要指向的对象
- 第一个参数为 undefined 或 null 时都默认指向全局 window
不同：
- apply 和 call 立即执行无并返回，bind 返回函数且需手动调用
- call 和 bind 均可传多个参数，apply 只能传上下文 this 和参数数组
举出闭包实际场景运用的例子
css 优先级是怎么计算的
根据选择器的优先级来进行计算。
!important > inlineStyle > id > class(class, attribute and pseudo-class selector) > Element(element and pseudo element selector) > *
事件循环相关题目--必考（一般是代码输出顺序判断）
http 状态码 204 301 302 304 400 401 403 404 含义
- 范围定义（200 ～ 599）
- 表示成功：200 ~ 299
- 表示资源被移走：300 ～ 399
- 表示客户端请求出错：400 ～ 499
- 表示服务器出错：500 ～ 599
- 常见状态
- 204: 请求成功但无需离开当前页面
- 301: 永久重定向，请求资源被转移指定 url 上
- 302: 请求资源被暂时转移到指定 url 上
- 304: 无需再次请求资源，可以使用缓存内容
- 400: 语法无效，服务端无法解析该请求的参数
- 401: 未授权，需要用户输入用户名和密码
- 404: 服务器无法找到 URL 的资源
- 范围定义（200 ～ 599）
http2.0 做了哪些改进 3.0 呢
http 与 https 有何差异
https 比 http 多了一层安全层（TSL or SSL）
position 有哪些值，作用分别是什么
fixed、absolute、static、relative、inherit
垂直水平居中实现方式
块级元素：flex、margin + absolute、grid
行内元素：text-align + verical-align、flex、table、gride
vue 组件通讯方式有哪些方法
vue 组件通讯分为父子、子父、子子、祖孙，孙祖。
常用通讯方法有：
- vuex 状态管理
- props、$emit
- event-bus
- provide、inject
- $attrs、 $listeners
- $refs、$parent、$children
Vue 响应式原理
整体实现思路是通过数据劫持，使用观察者模式进行检测。通过拦截数据的 get 和 set，监听、改变数据。Vue 2.x 版本使用 Object.defineProperty 进行劫持，Vue 3.x 版本开始使用 Proxy 进行劫持。
Vue nextTick 原理
DOM 更新完毕后执行回调。使用微任务或者宏任务来完成事件调用的机制，让回调事件能在一个 eventloop 的最后执行。
Vue diff 原理
比较新旧树节点的差异，获得需要更新的节点。
路由原理 history 和 hash 两种路由方式的特点
history 模式的 url 中不需要带 # 号，hash 的需要。
history 模式需要服务器中配置请求指向，hash 无需。
手写 apply、call、bind
使用场景：
- 自定义默认方法
- 兼容处理
手写 Promise.all 和 Promise.race（京东）
使用场景：
- Promise.all - 需要监测发起多个异步请求时，比如通过异步请求批量获取图片地址
- Promise.race - 可以通过 Promise.race 来模拟异步请求的 timeout
https://gist.github.com/Teemwu/904bea9369decf3649ba86f63993bbab
手写-实现一个寄生组合继承
基本思想：
为了解决组合继承的缺点，组合继承调用了两次父构造函数，生成了两个实例属性，只不过实例上覆盖了原型的属性。用了寄生组合式继承，将子类原型指向父类原型，一般用 Object.create() 和 Object.setPrototype()
缺点：
父类原型中的引用类型值会被所有下面的实例共享，一个改变，其它都变
手写-new 操作符
https://gist.github.com/Teemwu/cdc87c6bbfc1054e4f2a06d11721af2d
手写-setTimeout 模拟实现 setInterval
setInterval 缺点：
- 在执行的时候可能会跳过指定时间间隔
- 多个定时器函数会立刻执行
为什么要模拟：
- setTimeout 执行后会立刻将 fn 放入到消息队列中，而 setInterval 每次在放入之前都会判断消息队列中存不存在上一个任务。
- setTimeout 的执行机制，也就是浏览器的事件循环机制，setTimeout 是一个宏任务，当js栈空了，就会依次执行宏任务。
https://gist.github.com/Teemwu/48fe604c10c525dcf33e24911150d20d
手写-发布订阅模式（字节）
手写-防抖节流（京东）
手写-将虚拟 Dom 转化为真实 Dom（类似的递归题-必考）
https://gist.github.com/Teemwu/f0efc99986c68270e8a54ba8acfea2c3
手写-实现一个对象的 flatten 方法（阿里）
手写-判断括号字符串是否有效（小米）
手写-查找数组公共前缀（美团）
手写-字符串最长的不重复子串
手写-如何找到数组中第一个没出现的最小正整数 怎么优化（字节）
手写-怎么在制定数据源里面生成一个长度为 n 的不重复随机数组 能有几种方法 时间复杂度多少（字节）
- 去重后生成
- 生成时去重
Webpack 有哪些优化手段
css 怎么开启硬件加速(GPU 加速)
可通过设置
transform: transitionZ(0)等伪 3D 属性进行触发。常用设计模式有哪些并举例使用场景
浏览器缓存策略是怎样的（强缓存 协商缓存）具体是什么过程？
https 加密过程是怎样的
- 客户端请求服务器获取证书公钥
- 客户端（SSL/TLS）解析证书（无效则弹窗警告）
- 生成随机值
- 用公钥加密随机值生成密钥
- 客户端将密钥发送给服务器
- 服务端用私钥解密密钥得到随机值
- 将信息和随机值混合在一起进行对称加密
- 将加密的内容发送给客户端
- 客户端用密钥解密信息
flex: 1 是哪些属性组成的
- flex-grow: 1
- flex-shrink: 1
- flex-basis: 0%
304 是什么意思 一般什么场景出现 ，命中强缓存返回什么状态码
手写 Vue.extend 实现
vue-router 中路由方法 pushState 和 replaceState 能否触发 popSate 事件
tree shaking 是什么，原理是什么
babel 是什么，原理了解吗
原型链判断
RAF 和 RIC 是什么
Es6 的 let 实现原理
编译阶段会记录块级作用域中的 let 变量声明，将其写入特定的栈中，词法执行前对应的块级作用域会依次出栈。可通过
闭包和函数作用域来实现块级作用域的效果。如何设计实现一个渲染引擎
需要了解浏览器的页面渲染机制。HTML/SVG/XHTML 的解析，CSS 解析，Javascript 脚本的执行。
require 具体实现原理是什么
前端性能定位以及优化指标
HTTP 请求中 HEAD 和 PUT 方法理解
HEAD：和 GET 方法行为类似，而 HEAD 请求服务器只返回首部，常用来检测超链接是否有效
PUT：向服务器写入或替换文档，请求前常需要密码登录验证，可用来对博客文章的更新