面经

[littlecoder-M]

React：

1. VUE和React喜欢哪个, 为什么, 重点说出react的优势

Vue:

1. vue组件间通信方式： https://segmentfault.com/a/1190000019208626
2. vue面试总结：https://juejin.cn/post/6921353140918812685
3. 彻底理解单页面应用/多页面应用：https://www.jianshu.com/p/4ac01b0b4168
4. Nuxt : https://www.nuxtjs.cn/guide
5. Template 编译过程： https://blog.nowcoder.net/n/57623d6fe8574541907b410195d56f1d
6. vue created 和 watch 输入属性哪个先执行：如果watch 加了 immediate: true, 就是watch先执行，否则就是created 先执行
7. 执行顺序 https://www.jianshu.com/p/f412bff6da82
8. Nuxt知识 ：https://blog.csdn.net/weixin_43848576/article/details/115674982
9. Vue相关的面试题：https://juejin.cn/post/6989932460184174606
10. vue双向绑定原理（数组和对象分别的处理方式）；https://segmentfault.com/a/1190000039750996
11. vue组件通信的方式；props、 $emit
12. 如果在一个组件中，在一个方法中，修改了某一个data中属性的值，然后跟着又修改了一次，那么整个组件更新了几次？如果第二次更新使用了setTimeout来进行包裹，那么又应该更新几次？为什么？（主要就是说一下vue的nextTick部分源码的一个逻辑即可）
13. Vue相关的性能优化：https://juejin.cn/post/6844903913410314247
14. Vue数据劫持，响应式原理: https://juejin.cn/post/6844903870661918727
15. vue组件间通信方式： https://segmentfault.com/a/1190000019208626vue style scope知道吧 我答完 他问。scope怎么实现的:
16. https://juejin.cn/post/6989932460184174606
17. 数据响应 怎么响应的。我说watcher 触发更新函数 ，他问 更新函数干啥了。。：就更新啊。重绘那块区域啊
18. https://juejin.cn/post/6844903870661918727
19. vue3 vue2区别：https://juejin.cn/post/6892295955844956167
20. vue3对diff算法的优化有哪些？：https://cloud.tencent.com/developer/article/1803519
21. vue中key的作用是啥，有什么弊端吗？https://cloud.tencent.com/developer/article/1676293
22. vue-router路由切换的原理，onhashchange做了什么？：https://juejin.cn/post/6854573222231605256
23. 路由守卫： https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB
24. [x]Vue父子组件挂载顺序
25. 父组件先于子组件created，而子组件先于父组件mounted
26. 父子组件加载渲染过程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
27. 子组件更新：父beforeUpdate->子beforeUpdate->子updated->父updated
28. 父组件更新过程：父beforeUpdate->父updated
29. 销毁：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
30. VUE之mixin混入机制： 面试官：说说你对vue的mixin的理解，有什么应用场景？ febobo/web-interview#15
31. Vue 通信方式：面试官：Vue组件间通信方式都有哪些? febobo/web-interview#12
32. vue 怎么实现双向绑定
33. vue3 proxy 相对于 vue2区别
34. Vue 和 TS 结合有什么问题？TS 的优点？TS 的高级类型
35. Vue 和 React 中的 key 的作用
36. 多次改变同一状态，是一次还是多次执行？

性能优化：

1. 项目中做了什么提高了网页的加载速度：
   1. CDN预热，图片懒加载，服务器端渲染、页面缓存、DNS预加载、图片压缩、使用网页字体代替图片字体、消除不必要的图片、首屏内容预加载非首屏内容延迟加载，减少DOM数
2. 常见的性能优化的手段 ：https://segmentfault.com/a/1190000022205291

构建工具：

1. 关于webpack的面试题总结 https://zhuanlan.zhihu.com/p/44438844
2. 比较各个构建工具的区别
3. babel-pollyfill的原理是什么？babel-present-env、babel-present-2015这些的原理是什么？他们之间有什么区别
4. ES6是如何被转化的
5. webpack相关优化: https://zhuanlan.zhihu.com/p/44438844
6. npm run build 的时候干嘛了 我：打包压缩 追问：还干啥了 https://juejin.cn/post/6976811777593966600
7. Webpack loader ，编写Loader的思路: 面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路？ febobo/web-interview#125
8. webpack 构建过程，详情解释，说了一多分钟，不够。。。。
9. websocket 做了什么事情、和http有什么区别
10. Webpack的dllplugin的原理、commonchunk的原理、压缩图片的原理

JS

1. js的基本数据类型；Boolean、 String、 Number、 undefined、 null 、Object、 bigInit、 Symbol
2. JS 哪些对象是可迭代的
3. JS 常用数组方法全涵盖：https://juejin.cn/post/6844903826005164046
4. JS 常用数组方法全涵盖：https://juejin.cn/post/6844903826005164046
5. 创建一个dom,设置class，添加点击事件，用原生怎么写？
6. object.creat()过程： https://www.cnblogs.com/Zonblog/p/14757492.html
7. 深拷贝与浅拷贝：https://juejin.cn/post/6844904197595332622
8. 纯函数：https://segmentfault.com/a/1190000039807327
9. 原型链定义+使用：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
10. 原型+原型链：面试官：JavaScript原型，原型链 ? 有什么特点？ febobo/web-interview#59
11. 原生阻止冒泡的方法，vue中使用什么修饰符阻止冒泡：https://segmentfault.com/a/1190000015852875
12. SSL过程
    • https://segmentfault.com/a/1190000021559557
    • https://www.ruanyifeng.com/blog/2014/02/ssl_tls.html
13. 如何防止CSRF攻击：https://tech.meituan.com/2018/10/11/fe-security-csrf.html
14. 浏览器从输入URL到底发生了什么：https://juejin.cn/post/6844903784229896199
    • 输入地址
    • 浏览器查找域名的 IP 地址
    • 浏览器向 web 服务器发送一个 HTTP 请求
    • 服务器的永久重定向响应
    • 服务器处理请求
    • 服务器返回一个 HTTP 响应
    • 浏览器显示 HTML
    • 浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
15. 跨域场景及跨域方式： https://segmentfault.com/a/1190000011145364
16. promise笔试题：https://segmentfault.com/a/1190000016848192?utm_source=tag-newest
17. promise笔试题： https://segmentfault.com/a/1190000020934020
18. 阮一峰Promise.allSettled：https://es6.ruanyifeng.com/#docs/promise#Promise-allSettled
19. 实现Promise.allSettled ：https://segmentfault.com/a/1190000025142845
20. 实现flat : https://juejin.cn/post/6844904025993773063
21. flat MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
22. 字节最爱考的前端面试题：https://juejin.cn/post/6934500357091360781
23. Js模块化，工程化：https://juejin.cn/post/6844904113910611975
24. JSBridge：https://zhuanlan.zhihu.com/p/101159969
25. 闭包：https://blog.csdn.net/IKUN__/article/details/117372287
26. Git 常用命令：https://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html
27. Liunx常用命令: https://zhuanlan.zhihu.com/p/101478169
28. 缓存Etag和lastModified区别：https://blog.nowcoder.net/n/d37337b3ab084cd2a94b7e6fe266bcd1
29. HTTP1.0、HTTP1.1 和 HTTP2.0 的区别：https://juejin.cn/post/6844903489596833800
30. 垃圾回收机制：https://juejin.cn/post/6844903858972409869
31. 让你弄懂 call、apply、bind的应用和区别: https://juejin.cn/post/6844903567967387656#heading-8
32. 箭头函数和普通函数的区别：https://juejin.cn/post/6844903805960585224
33. 什么是原型： https://muyiy.vip/blog/5/5.1.html#%E5%8E%9F%E5%9E%8B //====// https://bbs.huaweicloud.com/blogs/detail/262517
34. 继承的方式： JavaScript常用八种继承方案 yygmind/blog#7. //====// https://segmentfault.com/a/1190000016708006
35. 事件循环机制： https://segmentfault.com/a/1190000022805523
36. 说一下 GET 和 POST 的区别？面试官：说一下 GET 和 POST 的区别？ febobo/web-interview#145
37. 数组去重：https://juejin.cn/post/6844904165638963214
38. typeof 与 instanceof 区别： 面试官：typeof 与 instanceof 区别 febobo/web-interview#65
39. typeof 的原理，与 instanceOf 、 Object.prototype.toString.call() 的区别：第170题(2020-03-11)：typeof 的原理，与 instanceOf 、 Object.prototype.toString.call() 的区别 qappleh/Interview#172
40. jsbrige 底层原理
41. v-layd的原理
42. 不使用全局变量, 怎么实现一个递增计数
43. http缓存：https://www.jianshu.com/p/54cc04190252
44. 状态码：面试官：说说HTTP 常见的状态码有哪些，适用场景？ febobo/web-interview#144
45. 箭头函数和普通函数的区别 ：https://juejin.cn/post/6844903805960585224
46. 事件循环：https://www.ruanyifeng.com/blog/2014/10/event-loop.html
47. 事件循环+promise：https://segmentfault.com/a/1190000016848192?utm_source=tag-newest
48. Promise 在 forEach 的一个题：https://juejin.cn/post/6961415313711693837#heading-10
49. defineProperty应用：https://juejin.cn/post/6844903853695975438
50. 比较两个对象是否相等：https://blog.csdn.net/weixin_43797046/article/details/107673635 更全面的：JavaScript专题之如何判断两个对象相等 mqyqingfeng/Blog#41
51. 跨域场景及跨域方式： https://segmentfault.com/a/1190000011145364
52. 什么是构造函数 https://javascript.ruanyifeng.com/oop/basic.html#toc1 原生的构造函数： https://developer.aliyun.com/article/96280
53. 捕获、冒泡区别 为啥要有捕获冒泡 ：https://juejin.cn/post/6965127548980166670
54. [x]isNaN和Number.isNaN的区别
55. isNaN只是判断传入的参数是否能转换成数字，并不是严格的判断是否等于NaN
56. Number.isNaN来判断它的值是否为NaN
57. 最大的区别：Number.isNaN不存在类型转换的行为,
58. 如何判断一个对象是否为数组: Array.isArray(), Object.prototype.toString.call()
59. 说说new操作符具体干了什么？面试官：说说new操作符具体干了什么？ febobo/web-interview#69
60. 说说：map 和 weakMap 面试官：ES6中新增的Set、Map两种数据结构怎么理解? febobo/web-interview#38
61. 箭头函数和普通函数的区别：https://juejin.cn/post/6844903805960585224
62. 你是怎么理解ES6中Proxy的？使用场景? 面试官：你是怎么理解ES6中Proxy的？使用场景? febobo/web-interview#42
63. JS 中区分 array object date function：https://bbs.huaweicloud.com/blogs/detail/181194
64. new Date呢，typeof 原理、怎么区分数组：第170题(2020-03-11)：typeof 的原理，与 instanceOf 、 Object.prototype.toString.call() 的区别 qappleh/Interview#172
65. instance of解释下，判断数组会有问题吗？
66. bigInt
67. 0.1 + 0.2得到什么？为什么？怎么得到 0.3？
68. MAX_SAFE_INTEGER、Number.EPSILON、Number.MIN_SAFE_INTEGER、Number.NEGATIVE_INFINITY是什么、怎么
69. 设计 AutoComplete 组件（又叫搜索组件、自动补全组件等）时，需要考虑什么问题？ 从性能、交互上说，不需要说实现
70. 手写防抖动、节流，用在什么场景
71. event loop
72. 递归的优化、尾调用。。。https://www.ruanyifeng.com/blog/2015/04/tail-call.html
73. promise能实现异步的原理

浏览器：

1. 浏览器缓存
2. 如果一个静态文件发生了改变，但是强缓存时间还没有过期，怎么让文件内容也发送改变；（生成的静态文件名称使用哈希值，这样的话只要结果改变之后文件名就会不一样，这样请求的就是新的文件）
3. expire, maxage的区别
4. https加密的原理是什么？页面当中怎么强制使用https
5. http 的下一层是啥 。 答：tcp 。问那tcp下一层呢 https://segmentfault.com/a/1190000039344096
6. cookie有哪些属性 ：cookie干啥的 ,为啥用cookie存 用了什么机制:https://zhuanlan.zhihu.com/p/52091630
7. get、 post区别。 追问我为啥post要两次请求
   • 面试官：说一下 GET 和 POST 的区别？ febobo/web-interview#145
   • https://www.zanejs.com/nizhendelejie-get-he-post-ma-tamendequbieshishenme.html
8. 介绍下浏览器缓存：https://blog.nowcoder.net/n/d37337b3ab084cd2a94b7e6fe266bcd1

CSS

1. 盒模型、常见 CSS 布局、BFC：https://segmentfault.com/a/1190000015235886
2. div水平垂直居中:第 52 题：怎么让一个 div 水平垂直居中 Advanced-Frontend/Daily-Interview-Question#92
3. 说一下哪些布局能用的css属性 我答完。 问：flex-grow ，flex属性是 flex-grow、flex-shrink 和 flex-basis 的简写， https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
4. flex-shirik相关知识点：https://juejin.cn/post/6844903837841489934
5. flex-shirik 的一个题： https://blog.csdn.net/weixin_43924228/article/details/107151673
6. flex: 1;的真实值是啥
   • 利用 flex: 1; 确实实现了三个不同内容的 div 平分空间, 所以按我以前的想法来说:
   • flex: 1; === flex: 1 1 auto;
   • 这是完整写法, 详见mdn, 它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto)
   • 第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
   • 第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
   • 第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
7. 文本单行居中，多行居左显示：用css 实现
   • //父元素设置 text-align:center;
   • //子元素 p标签 text-align :left ; display:inline-block;
   • // 文本不够一行的时候，父元素属性使p标签居中显示。p元素内部文本撑开宽度。多行时，p标签宽度顶满父元素宽度，内部文本居左
8. 用css实现画对勾：https://blog.csdn.net/Luxuriant_tree/article/details/83181888
9. 三栏布局：左右定宽，中间撑满剩余宽度：https://juejin.cn/post/6844903990690316296
10. flex-shrink: 默认值 :
11. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
12. flex语法:https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
13. 宽度不够 shrink 怎么搜索的：https://blog.csdn.net/weixin_43924228/article/details/107151673
14. 两个 div 一个是 margin-bottom: 20px 一个是 margin-top: 30px 问间距真实是多少
15. 由上题展开到 BFC，BFC 触发条件
16. 实现4:3的div，这里涉及了padding-top宽度以父元素的宽为参照: https://blog.csdn.net/Honeymao/article/details/77884744
17. vh和vw有什么兼容性问题: https://zhuanlan.zhihu.com/p/30413803
18. 对rem的了解: https://zhuanlan.zhihu.com/p/30413803
19. 边距合并的问题，如何解决：https://segmentfault.com/a/1190000015235886
20. 怎么定义BFC：https://segmentfault.com/a/1190000015235886
21. 实现一个进度条动画, 0.5s突变为1/3 1s突变为2/3 1.5s突变为1 2s突变为0
22. 如何实现抛物线动画

HTML

1. meta的常用值
2. dom中查询节点的方式有哪些 删除节点呢。面试官：DOM常见的操作有哪些？ febobo/web-interview#75

项目经验：

1. 合作完成项目时候遇到的问题，以及怎么个解决方案；
2. 合作完成项目时候你是怎么划分模块的；
3. 为什么进行前后端分离
4. 如果现在让你实现一个日历的公共组件，你觉得作为封装这个组件，需要暴露出哪些可以配置的选项，就是类似于ui库一样的，你封装的组件能够提供给其他使用者哪些操作
5. 抓过包吗 怎么抓https ： https://zhuanlan.zhihu.com/p/26182135
6. 项目提问，主要是fsp的实现和问题，问的比较细 ？？https://juejin.cn/post/6844904153869713416
7. First Screen Paint（FSP）：页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容
8. 微信扫码登录思路：https://cloud.tencent.com/developer/article/1373154
9. 性能优化指标？首屏渲染时间怎么统计？如果让你封装一个性能统计的SDK，你怎么设计？
10. https://tech.meituan.com/2014/03/03/performance-metric.html
11. https://github.com/LuckyWinty/blog/blob/master/markdown/perf/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8B%E8%87%AA%E5%AE%9A%E4%B9%89%E6%80%A7%E8%83%BD%E6%8C%87%E6%A0%87%E5%8F%8A%E4%B8%8A%E6%8A%A5%E6%96%B9%E6%B3%95%E8%AF%A6%E8%A7%A3.md
12. 如何设计错误监控SDK：https://www.tangshuang.net/7954.html
13. 聊聊错误监控： https://juejin.cn/post/6867773840768909326
14. Viewport、dpr :一文看懂移动端适配 willson-wang/Blog#84
15. 接口一次性返回了1w条数据，需要渲染到页面，不分页，如何保证页面的交互体验 、js的事件循环
16. 简要介绍一下 CDN 的用途和原理
17. 如果是你怎么实现一个cdn，各种优化、后台怎么优化
18. 如果数据库中采用64位长整型存储一个数据的id，前端通过api拿到这个id的话，会有什么问题？怎么解决？
19. 移动端适配方案
20. 重排和重绘
21. 前端首屏加载时间是如何得到的

知识梳理：

1. 单行、多行溢出显示省略号：https://www.daqianduan.com/6179.html
2. Flex 布局：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
3. box-sizing布局：https://www.jianshu.com/p/e2eb0d8c9de6
4. call、apply、bind的应用和区别？https://juejin.cn/post/6844903567967387656#heading-8
5. 一个网站的资源会存在于多个域中:https://blog.csdn.net/shuidinaozhongyan/article/details/73433635
6. 圣杯布局：https://segmentfault.com/a/1190000017540629
7. 伪类与伪元素的区别及实战：https://segmentfault.com/a/1190000017784553
8. HTTP1.0、HTTP1.1 和 HTTP2.0 的区别: https://juejin.cn/post/6844903489596833800
9. localstroage必知必会：https://segmentfault.com/a/1190000004121465
10. 性能优化指标：https://juejin.cn/post/6844904153869713416
11. Performance 使用文档：https://firebase.google.com/docs/perf-mon/get-started-web?hl=zh-cn
12. react css ：https://mp.weixin.qq.com/s/oywTpNKEikMXn8QTBgITow
13. DNS-prefetch (DNS 预获取)：https://juejin.cn/post/6844903999821316104
14. table布局：https://juejin.cn/post/6844903504817946637
15. 网格布局：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html