1. [参考地址](https://www.bilibili.com/video/BV1jL4y1G7dz?p=1&share_medium=android&share_plat=android&share_session_id=4c305a7d-d0b0-4a9c-8159-d47eb5773ce5&share_source=WEIXIN&share_tag=s_i×tamp=1652770945&unique_k=bifQn7k)
2. vue2，vue3和react的区别
1. 相似点
1. 核心概念
1. 组件化
2. 数据驱动
2. 都支持jsx
3. vue2 option api
4. vue3 composition api
5. vue3 动态比对
6. 虚拟dom跨平台
7. 都提供生命周期
2. 不同点
1. React采用的Virtual DOM会对渲染出来的结果做脏检查
2. Vue.js在模板中提供了指令，过滤器等
3. seo
1. 服务端渲染（同构）
1. next
1. 返回静态资源，js，html文件
2. nuxt
2. [siteMap](https://zhuanlan.zhihu.com/p/441973408)
1. Sitemap（站点地图）是一种文件的统称，通常Sitemap（站点地图）可以是txt或者XML格式。
2. 通过Sitemap（站点地图）你可以告诉搜索引擎关于你的站点中的网页、视频或者其他文件的相关信息，帮助搜索引擎更好的认识和理解你的站点。
3. 除了框架的seo优化
1. meta标签（tdk，title、description、keywords）
2. h5语义化标签
3. h1标签不嵌入其他元素
4. [微数据结构化](https://blog.youkuaiyun.com/websites/article/details/18727187)
1. 将页面里面的name之类的信息字段，dom标签化
2. Schema.org 提供了一份共享的词汇表
4. [next跟react的区别](https://blog.youkuaiyun.com/juse__we/article/details/89388296)
5. 样式处理
1. css module和css-in-js
1. CSS in JS，意思就是使用 JS 语言写 CSS
2. 它们与"CSS 预处理器"（比如 Less 和 Sass，包括 PostCSS）有什么区别？
1. 回答是 CSS in JS 使用 JavaScript 的语法，是 JavaScript 脚本的一部分，不用从头学习一套专用的 API，也不会多一道编译步骤。
3. 项目中使用less和css-loader开启modules，来实现css局部作用域
6. axios，node和浏览器中如何实现
1. node 基于http.request
2. 浏览器，ajax封装XHR
3. 新版本都是fetch
7. 大文件下载
1. 文件时blob二进制，可以使用http添加range请求头的方式
2. 服务端通过http.get,监听data事件拼接数据，通过creatwritestream下载
8. 性能优化
1. webpack-bundle-analyzer帮助解析
2. 首屏时间（FCP）计算
1. 白屏时间（FP）performence，DomContentLoaded
2. mutationObsrve
1. 监听到body层级，每次计算dom层级的权重，取最大值所对应的时间
9. [webWorker](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers)
1. 不能操作dom
2. js单线程
3. 同源限制
1. 分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
4. Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息（postmessage）完成。
5. 脚本限制
1. Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。
6. 文件限制
1. Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。
7. 场景
1. 在worker线程中你可以运行任何你喜欢的代码，如大数据计算
2. postmessage渲染回视图
8. 不会影响主线程
1. onerror捕获错误
2. myWorker.terminate(); // 脚本中关闭
3. close(); // 线程中关闭
9. subworker
2. 如果需要的话 worker 能够生成更多的 worker。这就是所谓的subworker，它们必须托管在同源的父页面内
1. subworker 解析 URI 时会相对于父 worker 的地址而不是自身页面的地址
10. 引入脚本与库
3. Worker 线程能够访问一个全局函数importScripts()来引入脚本
1. importScripts('foo.js', 'bar.js'); // 引入两个脚本
10. 工程化
1. 减少重复性
2. cli模板包
3. webpack
4. npm包管理
5. eslint
6. gitlab完成devops
11. webpack
12. 算法
1. 二叉树的种类
1. 平衡二叉树
2. 完美二叉树
3. 搜索二叉树
2. 二叉树遍历方式
1. 前序
2. 中序
3. 后续
13. 网络
1. http2和http1.1的区别
1. 二进制传输，氛围head帧，body帧
2. 多路复用
3. HPACK算法（压缩已经传输过的header，服务端和浏览器共有一个查询表，查询）
4. 服务端推送
5. 问题：对头阻塞（基于TCP的问题）
2. tcp和UDP的区别
1. 都是传输层协议
2. UDP不需要握手，报文
3. tcp连接
4. 重传
14. 安全漏洞防御
1. XSS（跨站脚本攻击）的防御
1. url，input传入脚本。
1. 浏览器禁止页面的Javascript访问带有HttpOnly属性的cookie
2. 过滤特殊符号
3. 转义成实体字符
1. 过滤，转义：输入检查（XSS Filter），输出检查（需要使用“\”对特殊字符进行转义，同时要求输出的变量必须在引号内部）
2. 返回html做一次encode
2. csrf
1. 验证码(网站不能给所有的操作都加上验证码)
2. 利用HTTP头中的Referer判断请求来源是否合法（但服务器并非什么时候都能取到Referer，比如从HTTPS跳转到HTTP浏览器不会发送Referer）
3. 利用Token
3. XSRF（XSS和CSRF结合）
15. babel插件
1. 解析AST
2. 处理各类文件
3. 转化基础的js，css语法
16. babel和polyfill
1. polyfill对babel的增强实现，浏览器不支持的一些新语法
17. 前端错误监控
1. sentry
2. 自定义错误监控
1. 采集
1. window.onerror
2. 框架自带错误回调（react，errorboundary）
2. 上报
1. sendBeacon
3. 入库、分析
1. mysql入库
2. 图表控件展示
3. source-map上传
17. 前端规范
1. eslint,husky
1. husky怎么捕获git提交
2. 利用了githooks的pre-commit生命钩子
2. codeReview
18. 换肤
1. less颜色变量
2. 添加class类
19. 布局定制
1. react resolve.extension
20. 微前端
1. 一个平台可以启动多个不同架构的应用
2. webpack5 模块联邦，乾坤
3. 好处
1. 每个应用单独打包
2. 模块可以复用
3. 方便技术升级，单独发布上线
4. 减少项目复杂度
21. 部署规范
1. 分支管理
2. devops
22. 单元测试
1.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
