【每日前端面经】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 打包原理及流程解析，超详细！