> **想写这篇文章已经很久了，作为一个技工，怎么能免的了一直学习呢！** 也换过两份工作，所以深知每次面试就是一次大考。写这篇文章的目的是`对技术的回顾，也是对自己成长的记录`。（**对于某些知识点如果我理解的不对，大家有更好的理解角度，也希望大家指出来，大家相互讨论，学习吧！**）。

## 闲话休提，书归正传。`面试就是用较短的时间做到双方相互了解`，所以我尽量用简短语言来描述事物本质，至于对于某些重要知识点的深入理解，我会在后续逐步整理出文，请关注、点赞、收藏！（更新日期：2023-08-06） ## 这篇文章我断断续续写了两个月的时间，也是总结了我面试过程中的遇到的`90%`的内容，看完这篇文章，足以应对市面上`70% - 80%` 的面试题，再剩下算法类和一些公司自己出的题就需要大家再多面试，多总结经验了。我此时已经完成了所有的编辑内容，后面如果有新的题也会做补充，截止到现在已经`五万多字了`，现在这个编辑器已经卡的不行了，如果出新的文章，也希望大家多多关注哈！码字不易啊！！！

--- ### 面试路上互助交流群如果**你也在找工作**或者**你准备换工作**，那么可以一起交流一下呀，也不介意潜水哈 😄，我只是**希望面试的路上不是你我一个人独立奋斗**，在大城市生活久了人都变的孤独了许多，我**不希望面试完想找人分享找不到**。在群里我们可以共享资源、一同避一下那些踩雷的公司、📣 吐槽生活、互相激励等等，下面是群二维码，欢迎加群交流呦！💪 加油准备冲刺2023！**需要进群的`后台私信`找我要群二维码**

841697600407_.pic.jpg

### 一、`http` 浏览器相关 > `http` 相关知识，前端必备网络相关知识。关于浏览器这一部分，[我整理成一篇完整的文章，请看这里](https://juejin.cn/post/7240333779221987384) *** ### 二、性能优化 #### 1.前端性能优化指标`RAIL` | RAIL | 关键指标 | 用户操作 | | ---- | ---------------------------- | ----------------------------------------------------------------------------------- | | 响应 | 输入延迟时间（从点按到绘制）**小于100毫秒** | 用户点按按钮（例如打开导航） | | 动画 | 每个帧的动画（从js到绘制）完成时间**小于16毫秒** | 用户滚动页面，拖动手指（例如，打开菜单）或看到动画。拖动时，应用的响应与手指位置有关（例如，拉动刷新、滑动轮播）。此指标仅适用于拖动的持续阶段，不适用于开始阶段。 | | 空闲 | 主线程工作分成**不大于50毫秒的块** | 用户没有与页面交互，但主线程应足够用于处理下一个用户输入。 | | 加载 | 页面可以**在1000毫秒内就绪** | 用户加载页面并看到关键路径内容 | [参考文献](https://segmentfault.com/a/1190000010512899) *** #### 2. 前端性能优化常用的方法有哪些？ **js方面：** * 减少`http`请求：节流、防抖、缓存（`keep-alive`）； * 及时消除对象引用，清除定时器，清除事件监听器； * 使用常量，避免全局变量； * 减少`dom` 操作， * 删除冗余代码(没有使用到的代码) * 推迟js 加载：defer **css 方面** * 使用``不使用`@import` * 减少重绘和回流，减少`table` 表格布局，`html` 层级嵌套不要太深； * 合理配置图片加载方式(图片压缩上传、iconfont、base64、file文件、cdn、预加载、懒加载) * 开启硬件加速(GPU加速) **工程化方面** * `webpack` ：打包压缩、`Loader` 、插件； * 合理利用浏览器缓存（首次缓存） * 开启gzip压缩（减少文件访问体积） * 使用`ssr`服务端渲染。 * 路由、组件、长页面使用懒加载 * 减少重定向请求 *** #### 3. 大量图片加载优化策略 1. 可以考虑上传到图片服务器 2. 图片压缩再进行上传 3. 使用懒加载（滚动加载，当滚动到可视区时再进行加载） 4. 使用预加载（先将部分图片下载到本地，使用时进行替换，设定一个阀值，后面判断数据中剩余的图片阀值再进行下载） 5. 在`webpack` 配置图片优化策略：小于指定大小使用`base64` 6. 如果是大量的图标，可以使用`iconfont` *** #### 4. 关于页面白屏如何排查原因？ > 下面提供几种排查场景 * 检查网络连接是否异常，看`network`资源加载情况，传输数据量是否过大； * 检查控制台是否有报错； * 看`dom`结构，是否正常加载，是否是静态资源加载失败； * 在其他电脑打开是否一样白屏； * 更换浏览器，检查是否是浏览器兼容问题。 *** #### 5. 什么是服务端渲染？ > 服务端渲染`SSR`指的是`Server-side Rendering`，意思为服务端渲染就是在浏览器请求页面`url`的时候，服务端将我们需要的`html`文本组装好，并返回给浏览器，这个`html`文本被浏览器解析之后，不需要经过`js`脚本的执行，即可直接构建出`DOM`树，并展示到页面中，这个服务端组装`html`的过程叫做服务器渲染。 *** ### 三、`HTML` 相关 #### 1. 浅谈前端工程化介绍：模块化、组件化、规范化、自动化 > 前端工程化：指使用软件工程的技术与方法**对前端开发的技术、工具、流程、经验、方案**等指标`标准化`，它具备**模块化**、**组件化**、**规范化**、**自动化**四大特性，主要目的是`降低成本`与`增加效率`。 ![截屏2022-12-16 20.36.38.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/689fd9da9ff04fb9bf17fe8f243960c4~tplv-k3u1fbpfcp-watermark.image?) * **模块化**：是指在文件层面上对代码与资源实现拆分与组装，将一个大文件拆分为互相依赖的小文件，再统一拼装与加载。各个模块功能独立，分模块来维护，组合方式更灵活，多人协作也互不干扰。例如：接口模块、资源模块、路由模块等。 * **组件化**：是指在功能开发场景中，将具备通用功能的交互设计划分为模板、样式和逻辑组成的功能单元，是具体某个功能的封装，实现了代码更高层次的复用性，提升开发效率。组件的封装也是对象的封装，同样要做到**高内聚低耦合**，例如分页器、`table`表格、`form`表单等。 * **规范化**：将一系列预设规范接入工程各个阶段，通过各项指标标准化开发者的工作流程，为每个开发者指明一个方向，引领着成员往该方向走。例如：`eslint、stylelint、pre-commit`等，拉齐代码标准，形成规范底线，方便不同人员等交叉维护。 * **自动化**：指将一系列繁琐重复的工作流程交由程序根据预设脚本自动处理，常见`自动化`场景包括但不限于`自动化构建`、`自动化测试`、`自动化打包`、`自动化发布`和`自动化部署`等。在保证效率的同时，又解放了双手。总结：`前端工程化`**不是某个具体的工具**，而是对项目的**整体架构与整体规划**，使开发者能在未来可判断时间内动态规划发展走向，以提升整个项目对用户的服务周期。最终的目的是**从手动处理流程全部替换为自动处理流程**，以解放团队双手，让其他成员**更专注于自身业务需求**。 [参考掘金小册：《从 0 到 1 落地前端工程化》 ](https://juejin.cn/book/7034689774719860739?enter_from=course_center) *** #### 2. `html5` 的新特性语义化标签： `