前端面试题分析——个人总结

题目来源——牛客上的面经

• 刷他人面经时，自己也想了一些答案，特此记录一下。
• 后续会不断更新，如果存在问题欢迎指正。

题目（CSS）

透明度设置为0和visibility：hidden有啥区别？

• opacity: 0：将元素的透明度设置为 0，元素在页面中仍占据空间，并且能响应元素绑定的监听事件。
• visibility: hidden：元素在页面中仍占据空间，但不会响应绑定的监听事件。

---

题目（Webpack）

.abcd要设计loader，这个loader干嘛的？

• webpack 原生只能对 js 文件进行处理（模块化），如果需要兼容处理，可以使用 babel-loader，所以不同的文件需要匹配 loader 进行加载、解析，将模块进行打包，能在宿主环境中直接运行。
• loader 本质：对源代码进行转换，转换为目标代码（类似于编译器），处理 .abcd 文件，转换为 JS 格式的字符串。

编译的过程：源代码 -> 词法分析，生成 tokens 数组 -> 语法分析，生成 AST -> 对 AST 进行遍历、访问 -> 在访问的过程中，通过插件对结点进行修改 -> 生成一个新的 AST -> 代码生成，得到目标代码。

---

题目（Vue）

vue的双向绑定（v-model）

• 数据 + 事件 的形式，通过 v-bind 绑定对应的数据，通过 v-on 绑定对应的事件，触发事件改编数据，当数据改变时，会重新渲染。
• 因为数据是响应式的，当数据改变后会触发渲染函数，重新渲染视图，mvvm 模型。
• v-model 是 v-on 和 v-bind 结合的语法糖。

.vue文件怎么去解析的？

• 模版解析：vue 文件中会有 template 模块，在解析时会有一个模版编译器，将模版编译为相应的 render 函数（该函数会返回一个虚拟 DOM 对象，JS 对象，h 函数），在运行时，渲染器会将虚拟 DOM 渲染为真实 DOM。
• 脚本解析：vue 文件中会有 script 模块，就是普通的 JS 模块，可以使用 webpack 中的 vue-loader 来解析 .vue 文件，最后模块导出一个对象，包含 render 函数。
• 样式解析：vue 文件中会有 style 模块，就是普通的 CSS 样式模块，可以使用相应的 loader 来处理（less-loader、css-loader、style-loader）。

---

题目（浏览器）

浏览器的缓存原理？

• 浏览器缓存分为：协商缓存和强缓存，通过响应头的字段可以进行区分。
• 如果响应头存在 cache-control：max-age 或 expires 字段，浏览器在解析时，会将该资源进行缓存（强缓存），缓存时间由响应字段决定，当缓存新鲜时，下一次获取相同资源，不会向服务器发送请求，浏览器直接将缓存返回（200）；当缓存不新鲜时，浏览器会和服务器协商，由服务器决定浏览器缓存是否需要更新。
• 如果响应头存在 Etag 或 last-modified 字段，当缓存不新鲜时，会先将上一次响应的字段 Etag 的值（如果有），作为本次请求头字段 if-none-match 的值，发送给服务器，服务器会对资源的 Etag 进行判断，如果没有改变，会返回 304（not modified），可以使用缓存，没有响应体，改变了，返回新的资源（200）；如果没有 Etag，会将上一次响应的 last-modified，作为本次请求头字段 if- modified-since 的值，发送给服务器，服务器会对资源的最后修改时间进行比较，如果没有改变，会返回 304（not modified），可以使用缓存，没有响应体，改变了，返回新的资源（200）。