【每日前端面经】2023-02-27

题目来源: 牛客

CSS盒模型

CSS中的盒子包括margin|border|padding|content四个部分，对于标准盒子模型（content-box）的width=content，但是对于IE盒子模型（border-box）的width=content+border2+padding2

CSS选择器

• 标签选择器
• 类选择器
• ID选择器
• 参数选择器
• 通用选择器
• 组合选择器
• 子代选择器
• 后代选择器
• 兄弟选择器
• 相邻兄弟选择器
• 列表选择器
• 伪类选择器
• 伪元素选择器

JS数据类型

• Number
• String
• Object
• Undefined
• Null
• Boolean
• Symbol
• BigInt

Webpack打包的理解、性能优化

本质上，webpack是一个现代JavaScript应用程序的静态模块打包器。当Webpack处理应用程序时，会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle

• 提升基础环境版本
• 使用include/exclude避免重复打包
• 合理利用缓存
• 合理使用plugin
• 合理配置resolve
• 启用多进程打包
• 开发中使用热更新替换自动刷新
• 使用DIIPlugin插件优化时间

前端性能优化

• 浏览器
  • 减少HTTP请求
  • 使用HTTP2.0
  • 设置浏览器缓存
  • 白屏做加载动画
• 资源
  • 静态资源CDN
  • 静态资源单独域名
  • GZIP压缩
  • 做服务端渲染
  • 头部放置CSS，底部放置JS
• 图片
  • 字体图标代替图片图标
  • 精灵图
  • 图片懒加载
  • 图片预加载
  • 使用PNG格式的图片
  • 图片转BASE64格式
• 代码
  • 慎用全局变量
  • 缓存全局变量
  • 减少回流与重绘
  • 节流防抖
  • 少用闭包
  • 减少数据读取次数
  • 文档碎片优化节点
  • 减少判断层级
  • 字面量与构造式
• 项目
  • 长列表优化
  • web worker
  • 避免iframe
• 打包
  • 减少代码体积
  • 按需加载
  • 提取第三方库代码
  • webpack dll优化

Vue2和Vue3的区别

• 生命周期
• 多根节点
• 组合式API
• 异步组件
• Teleport: 可以将部分DOM移动到APP之外的位置
• 响应式原理: Vue2的原理是Object.defineProperty；Vue3的原理是Proxy/Reflect
• 虚拟DOM: 新增patchFlag字段，优化渲染
• 事件缓存
• Diff算法优化
• 打包优化: 新增Tree-shaking
• TypeScript支持

Vue-Router的原理

路由描述的是URL与UI之间的映射关系，这种隐射是单向的，即URL变化引起UI变化（无需刷新页面）

• hash模式: 通过hashchange事件监听URL的变化
• history模式: 拦截pushState/replaceState的调用和标签的点击事件监听URL的变化

开发中遇到错误怎么排查

css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
深入浅出vue-router原理
CSS 3 所有的选择器整理（2023.2）
判断Vue3与Vue2的区别
web前端性能优化（全汇总）
webpack 打包原理及流程解析，超详细！