2023年最新的前端面试收集（2）

webpack熟悉吗？webpack打包流程是什么？

webpack打包流程

1. 解析配置文件： 读取并解析配置文件，并根据配置生成一个Compiler对象。
2. 读取入口文件：根据配置中的入口文件，读取这些文件及其依赖的模块，并将它们组成一个依赖关系图。
3. 解析模块依赖：根据模块之间的关系，递归解析它们的依赖，直到所有依赖都被解析完
4. 加载模块：根据路径，使用对应的loader加载对应的源代码，并将其转换成Webpack可处理的形式
5. 转换代码：根据配置中的插件，对加载的模块金雄一系列的转换操作，比如压缩、合并、优化等
6. 生成代码，将所有模块转换后的代码合成一个或者多个文件，并输出到相应的输出目录中。

Webpack声明周期

1. 进入编译前：此时会初始化Compiler对象
2. 开始编译前：此时会读取入口文件和依赖，并创建依赖关系图
3. 开始编译：此时会开始编译入口文件和依赖的模块，并生成输出文件
4. 生成文件前：此时可以在插件中处理生成的输出文件
5. 完成打包：此时可以在插件中进行一些清理工作

你在公司制定前端规范的时候，都有哪些内容？

1. 命名风格
   • CSS命名规范
     1. 选择器命名一律用小写字母，避免使用拼音命名
     2. 选择器统一采用横线很分隔，禁止使用下换线，分隔符尽量不要超过4个
   • JS命名规范
     1. 代码中命名不能使用${、}_{，}不能以$、_以及数字结尾
     2. 代码中命名禁止使用拼音、拼音+英文
     3. 尽量使用驼峰命名法
     4. 常量统一使用大写，单词之间用下换线 _ 隔开
     5. TS接口名统一用大写字母 I 作为前缀
     6. TS枚举类名称以及其属性名统一使用大写，单词之间用下换线 _ 隔开
     7. 函数名、方法名、属性名、变量名规范
        • 获取单个对象、接口数据，使用get作为前缀
        • 获取多个对象使用list作为前缀
        • 获取数组使用List作为后缀
        • 保存、添加使用save、add作为前缀
        • 编辑、更新、删除，移除使用edit、update、delete、remove作为前缀
   • 代码格式规范
     1. CSS代码格式
        • 一个样式独占一行，使用tab或者4个空格
        • 选择器单独一行，与大括号之间空格，样式属性值与冒号之间空格
        • 嵌套层级不能过多，最多不要超过4层
     2. JS代码格式
        • 尽量使用const和let声明变量
        • 大括号使用规范，注意前后空格和换行
     3. 引号使用
        • HTML代码中class、id或其他属性都采用双引号
        • JS中字符串使用单引号
        • 注意使用 === 、== !=、!== 的使用
        • 采用4个空格缩进
        • 三元表达式在一条表达式中最多出现两次
   • 对象处理
     1. 不要修改标准JS对象的原型
     2. 不要通过原型向对象添加新的属性或方法，通过封装导出的方式引用
     3. 使用对象字面量创建
     4. 使用展开运算符…复制或者合并数组或对象
     5. 使用解构获取对象的属性值
     6. 使用数组对象的方法前，如果不确定，则需要先进行类型判断
     7. 使用JSON.parse前，需要对变量做类型及JSON格式检查
     8. 使用定时器后，一定要在销毁组件是，进行销毁。
   • 注释规约
     1. 如果用只说明用途或功能，单行注释，如果要对参数进行解释，多行注释
     2. 修改代码的同时，注释也要进行相应的修改，尤其是参数或返回值

   小程序跟H5的区别是什么？

   1. 运行环境的不同
   • 小程序: 小程序的运行环境是基于浏览器内核完全重构的一个内置解析器，针对性做了优化，配合自己定义的开发语言标准，提升了小程序的性能。 脚本内无法使用浏览器中常用的window对象和document对象，从源头上避免了DOM的内存泄漏。
   • H5: 无法控制开发人员对DOM的操作，容易出现内存泄漏，在SPA单页应用还存在页面加载慢的问题。
   2. 开发成本不同
   • 小程序: 小程序规范了开发标准，则简单得多。前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，这样避免了框架五花八门，加大了项目接手人员上手维护难度。支付宝小程序可能是AXML、ACSS；头条小程序可能是TTML、TTSS等。
   • H5: 涉及开发工具（vscode、Atom等）、前端框架（Angular、react等）、模块管理工具（Webpack 、Browserify 等）、任务管理工具（Grunt、Gulp等），还有UI库选择、接口调用工具（ajax、Fetch Api等）、浏览器兼容性
   3. 获取系统权限的不同
   • 小程序: 更多的系统权限，比如网络通信状态、数据缓存能力等，这些系统级权限都可以和小程序无缝衔接。
   • H5: 获取系统权限是大多H5被诟病的地方，这也是H5的大多应用场景被定位在业务逻辑简单、功能单一的原因。
   4. 运行流畅度的不同
   • 小程序: 小程序，它的代码直接在APP上运行，通过浏览器双线程UI渲染和业务逻辑分离等技术，因此，在微信中使用小程序，才会比H5流畅很多,首次打开需要几秒的加载时间外，小程序各个页面的切换、跳转等体验已经媲美原生App，有着同样的柔丝般顺滑的效果。
   • H5: 实际上是打开一个网页，而网页需要在浏览器中渲染。所以加载这一过程，会给人明显的「卡顿」感觉，面对复杂的业务逻辑或者丰富的页面交互时尤为明显。
   5. 运维方式不同
   • 小程序: 小程序支持灰度发布、AB测试，在出现异常情况下可以实时在管理界面上操作回退。
   • H5: H5如果出现异常问题，需要运维人员在生产环境重新部署回滚系统，要动到生产环境的系统部署，有较大的风险。
   6. 用户体验不同
   • 小程序: 由于微信的关系，小程序近几年大火，用户的接受度和认可度都非常高，而且小程序的体验确实要比h5好很多，小程序下载到本地可以缓存，因此用户体验也更平滑，更关键的是，用户对小程序的收藏等操作会更自然，体验更好，不用担心收藏后的东西不好找等情况。
   • H5: H5传统上给人感觉加载始终比较卡，而且H5一旦点击退出去后经常会比较难找到对应入口，特别是链接深度比较深，用户在里面一直点击后，用户一旦退出也很难找到自己关注的东西。

vue3中做了哪些优化？

1. 源码优化

   • 更好的代码管理方式，代码库中各功能区分得更加细致，责职分工更加明确
   • package 是可以独立于 Vue.js 使用的，例如 reactivity 响应式库能力，可以单独依赖这个响应式库而不用依赖整个 Vue.js 减少了引用包的体积大小，在 Vue.js 2.x 是做不到这一点的
   • 使用了类型语言 TypeScript 重构项目

2. 性能优化

   • 移除了一些冷门的内置方法，引入 tree-shaking 的技术（在打包中只会引入使用了的代码，从而减少了打包后代码的体积）

3. 数据劫持优化

   • 数据响应式处理放弃使用 Object.defineProperty，改用 new Proxy 监听整一个对象。原因是 Object.defineProperty 不管是否遇到有嵌套层级的对象，都需要无脑递归对象，逐层监听对象，对性能损耗过大。而采用 Proxy 后，只有在真正遇到有嵌套层级的对象的时候，才会在 getter 的时候逐层递归，对每一个对象进行监听处理，在很大程度上提升了性能。

4. 编译优化

   • petch 函数优化；通过编译阶段对静态模版的分析，编译生成了 Block tree

     • Block tree 是一个将模板基于动态节点指令切割的嵌套区块，每个区块内部的节点结构是固定的，每个区块只需要以一个 Array 来追踪自身包含的动态节点
     • 借助 Block tree，Vue.js 将 vnode 更新性能由与模板整体大小相关提升为与动态内容的数量相关

   • 在编译阶段还包含了对 Slot 的编译优化、事件侦听函数的缓存优化，并且在运行时重写了 diff 算法

5. 语法APi优化：composition api

   • Oprion API：当组件小的时候，这种分类方式一目了然；但是在大型项目中，一个组件可能有多个逻辑关注点，每一个关注点都有自己的 Options，当需要修改某一个逻辑关注点时，就需要在单个文件中不断上下切换和寻找
   • Composition API：将某个逻辑关注点相关的代码全部放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中翻来覆去