题目来源: 牛客

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 打包原理及流程解析，超详细！