抖音

面试

js防抖和节流
new关键字都干了什么
1）新建一个this空对象
2）将新建对象的属性proto指向构造函数的prototype
3)将构造函数中的this指向新建的子例对象
简述document和window两个对象的区别
window指窗体，document指文档
document是window的一个子对象
用户不能改变document.location 但是可以改变window.location
window.onload和document.ready的区别
document.ready是dom结构加载完成
window.onload是页面加载完成，包括js css html img等
如何修改iframe内的页面的元素的样式

```
document.getElementById('iframe').contentWindow.document.getElementById('title')
```

style内联样式优先级 》 id样式 》 class样式
强缓存 协商缓存
协商缓存流程： 发请求->看资源是否过期-》过期-》请求服务器-》服务器对比资源是否真的过期-》没过期-》返回304 not modified-》客户端使用缓存 etag last-modified
强缓存： 设置缓存时间，服务器和客户端同时缓存，再加immutable，会一直命中缓存 cache-control max-age private public

vue中用到的设计模式

常见的loader和plugin区别
loader转换器，将A.scss转换成B.css
plugin扩展器，丰富了webpack本身，针对的是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，例如run make build-module normal-module-loader program seal optimize-chunk-assets emit 通过对节点的监听从而找到合适的节点对文件进行适当的处理
参考文档：https://blog.csdn.net/yq_oxygen/article/details/78107696

webpack前端性能优化：

分离比较大的node_modules包，通过CDN引入到项目中，在webpack中用externals指定即可
1)分包：将不需要变动的第三方包分离出去
2)拆包：将大包拆分成小包，将公共模块抽离，将公共组件与业务代码分离，commonChunkPlugin SplitChunkPlugin
3)按需加载：将无需首屏加载的模块分离出去，才用按需加载模式，当点击按钮的时候才去加载指定模块，有助于提升性能 使用require.ensure dynamic import
4)减少文件搜索范围： 各种loader一定要配置include和exclude，减少查找范围；使用noParse跳过文件解析；使用resolve缩短搜索目录和路径
5)开启并行加速：使用happyPack对多种loader进行并行加速
使用并行的uglify插件对uglify进行并行加速，常用的插件有webpack-parallel-uglify-plugin webpack-uglify-parallel
6)开启缓存 webpack的loader和plugin都有自己的缓存
7）减少模块的引入，减少解构的引入方式，会引入整体
8）scope hoisting 将多个闭包合并为一个闭包
9) 部分loader的替换优化
10） 到处json文件，导入分析工具进行分析
参考文档：https://www.cnblogs.com/mengff/p/9717193.html

require和import的区别
require是commonjs的语法，运行时加载，动态加载，不能在编译时做到静态化；它是赋值过程
import是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量；同事es6模块默认使用严格模式；因为是编译时调用，所以必须放在文件开头；import是解构过程

class实现原理
es6的语法糖而已，大部分功能可以用es5来实现，可以看作构造函数的另一种写法
自执行函数 createClass（parent, 属性方法，静态方法）
super this指向子类的实例 extends 继承 constructor 不写的话默认有
https://blog.csdn.net/liangklfang/article/details/64919861

async和await实现原理
async 是generator函数 * 的语法糖，await是yield的语法糖
promise 原理
是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果
语法上来说，promise是一个对象，它可以获取异步操作的消息
特点：1） 状态不受外界的影响
2） 一旦状态改变，就不会再变
https://blog.csdn.net/Merciwen/article/details/80963279

fetch和xhr
fetch是基于promise实现的， 就算返回404或者500的状态码，依然是在resolve里，只不过会将返回值的ok属性设置为false；仅当网络故障时或请求被阻止时，才会标记为reject；默认不会从服务端发送或者接收任何cookie
xhr是基于xmlhttpRequest实现的
ts优势
柯里化

function currying() {
let args = Array.prototype.slice.call(arguments)
let fn = function() {
args.push(...arguments)
return fn
}
fn.toString = function() {
return args.reduce((a,b) => {return a + b})
}
return fn
}
console.log(currying(1)(2)(3)(4))

参考链接：https://blog.csdn.net/dapangzi88/article/details/61197937#

js编程实现简单模板引擎变量替换
replace 正则表达式 new Function('')
求二叉树是否存在和为N的路径
封装ajax请求实现get和post方法
JS中prototype、proto、super分别是什么？
function Person(name) {
this.name = name
}
let person1 = new Person()
person1.proto = Person.prototype
参考链接：https://blog.csdn.net/cc18868876837/article/details/81211729
https://www.cnblogs.com/az96/p/6014621.html
使用至少两种方式实现纯css的自适应搜索

Object.defineProperty() proxy 区别
参考链接：https://blog.csdn.net/qq_42833001/article/details/83302149
vue2.x利用Object.defineProperty()，
vue3.x改用proxy进行实现
object.defineProperty方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象
主要缺点： 不能监听数组的变化；必须遍历对象的每个属性；必须深层次遍历嵌套的对象
vue2.x中改变原始数组的方法被称为变异方法，将其重写进行了数据劫持，比如pop push shift unshift splice sort reverse
不改变原始数组的方法有slice filter concat 等，这些是非变异方法
proxy： 针对对象整体，不需要对keys进行遍历；支持数组；嵌套支持，get里面递归调用proxy并返回

compositionStart compositionEnd input

判断字符串是否闭合
思路：左括号+1，右括号-1，看结果是否为0
利用堆栈来解决，左括号直接入栈，右括号判断栈是否为空或者是否有匹配的左括号，字符串遍历完毕后，栈为空则正确，否则是false

function valid(str) {
let stack = [];
let paren_map = {')': '(', ']': '[', '}': '{'};
for (let i = 0, len = str.length; i < len; i++) {
let tmpStr = str.charAt(i);
if (!(tmpStr in paren_map)) {
stack.push(tmpStr);
} else if (stack.length !== 0 && paren_map[tmpStr] !== stack.pop()) {
return false;
}
}
return stack.length === 0;
}
let isValid = valid("(())")//true
let isValid = valid("()[]{}")//true
let isValid = valid("]][[")//false

参考链接：https://blog.csdn.net/weixin_34252686/article/details/91393433