得闲饮茶

主题

📚 前端常用知识点 ​

1. 浏览器渲染原理 ​

  1. 构建DOM树：浏览器解析HTML文档，将标签转化为DOM节点，形成文档对象模型。
  2. 构建CSSOM树：解析CSS（包括内联、外链样式），生成CSS对象模型，确定元素样式。
  3. 渲染树构建：将DOM树和CSSOM树结合，忽略display:none等不可见元素，形成渲染树，确定页面元素的视觉呈现。
  4. 布局（回流）：计算渲染树中每个元素的位置和大小等几何信息，确定元素在页面上的布局。
  5. 绘制（重绘）：根据渲染树和布局信息，将元素的视觉效果绘制到屏幕上 。

2. https如何进行加密 ​

  1. 握手阶段：客户端向服务器发起请求，服务器返回公钥等证书信息。
  2. 密钥交换：客户端生成随机对称密钥，用服务器公钥加密后发送给服务器，服务器用私钥解密得到对称密钥。
  3. 数据传输：后续客户端和服务器之间通过对称密钥进行数据的加密传输，保证数据的保密性和完整性。

3. spa首屏加载慢优化 ​

  1. 代码拆分：将代码按路由或功能模块拆分成多个文件，首屏只加载必要模块。
  2. 懒加载：对非首屏展示的组件、图片等资源进行懒加载，在需要时再加载。
  3. 预渲染：在服务器端提前渲染首屏内容，返回给客户端直接显示。
  4. 压缩和缓存：压缩代码文件，设置合理的缓存策略，减少重复请求。

4. vue双向绑定原理 ​

通过Object.defineProperty() 方法（Vue 3中也使用了Proxy）来劫持对象属性的get和set操作。在数据变化时触发set，通知订阅者（Watcher），进而更新视图；视图变化触发事件时，更新对应的数据。

5. vuex设计与实现 ​

  1. 设计理念：是Vue的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
  2. 实现：包含state（存储状态）、mutations（同步修改state的方法）、actions（异步操作，可提交mutations）、getters（对state进行计算处理，相当于派生状态 ）、modules（将store分割成模块，每个模块有自己的state、mutations等 ）。

6. vue - router底层原理 ​

  1. hash模式：利用URL中的#及后面的内容作为路由标识，#变化不会引起页面重载，通过监听hashchange事件来实现路由切换和视图更新。
  2. history模式：利用HTML5的history.pushState()、history.replaceState()方法改变URL，通过监听popstate事件及配合后端配置，实现无刷新的路由跳转和视图更新。

7. mvvm设计与实现 ​

  1. 设计理念：Model - View - ViewModel，Model代表数据模型，View是视图，ViewModel是视图模型，负责View和Model之间的双向数据绑定和逻辑处理。
  2. 实现：通过数据劫持（如Vue中Object.defineProperty() 或Proxy）和发布 - 订阅模式，当Model数据变化时，自动更新View；View的交互操作通过事件触发，更新ViewModel进而更新Model。

8. async/await底层实现 ​

async函数返回一个Promise对象，await只能在async函数内部使用，它用于等待一个Promise对象的解决（resolved）。其底层是基于Promise和Generator函数实现，Generator函数可以暂停和恢复执行，async/await语法糖让异步代码更像同步代码，提高可读性。

9. promise底层实现 ​

通过状态机实现，有pending（进行中）、fulfilled（已成功）、rejected（已失败）三种状态 。状态一旦改变就不能再变，通过then方法注册成功回调，catch方法注册失败回调，内部维护一个微任务队列，用于处理状态变化后的回调执行。

10. computed和watch的区别和应用场景 ​

  • 区别：computed是基于依赖数据的缓存计算，只有依赖数据变化时才重新计算，且必须有返回值；watch是监听数据变化，只要监听的数据变化就执行回调，可进行异步操作等，不一定有返回值。
  • 应用场景：computed适合用于对多个响应式数据进行复杂计算后返回结果，如计算属性；watch适合监听数据变化后做一些副作用操作，如异步请求、数据持久化等。

11. js垃圾回收机制 ​

  1. 标记 - 清除算法：垃圾回收器在运行时会给内存中的所有变量加上标记，然后去掉从根对象（如全局对象window）可达的变量的标记，剩下有标记的就是不再使用的变量，回收其占用内存。
  2. 引用计数算法：记录每个值被引用的次数，当引用次数为0时，回收其内存，但存在循环引用问题（对象间相互引用导致无法回收）。现代浏览器主要采用标记 - 清除及优化版本，配合分代回收等策略提高回收效率。

12. 前端缓存机制 ​

  1. 浏览器缓存：包括强缓存（通过Expires和Cache-Control设置缓存过期时间，在有效期内浏览器直接从本地缓存读取资源 ）和协商缓存（通过Last-Modified/If-Modified-Since 或ETag/If-None-Match ，服务器判断资源是否改变，未改变则返回304，浏览器从缓存读取 ）。
  2. 本地存储（localStorage和sessionStorage）：用于持久化存储少量字符串类型数据，localStorage生命周期是永久，sessionStorage在页面会话结束时清除。
  3. 内存缓存：浏览器将一些资源临时存储在内存中，关闭页面或标签页时释放，读取速度快。

13. 箭头函数与普通函数的区别 ​

  1. 语法：箭头函数更简洁，如() => {}，且可省略return。
  2. this指向：箭头函数的this继承自外层函数，普通函数的this取决于调用方式。
  3. arguments对象：箭头函数没有自己的arguments，普通函数有。
  4. 构造函数：箭头函数不能用作构造函数，普通函数可以。
  5. yield使用：箭头函数不能使用yield，普通函数可以（在生成器函数中）。

14. 水平垂直居中方式 ​

  • flex/grid布局：父元素用display: flex/grid配合justify-content和align-items。
  • 绝对定位+transform：子元素top:50%;left:50%;transform:translate(-50%,-50%)。
  • 绝对定位+负margin：已知宽高时，margin-top/left为宽高负值的一半。

15. 常用伪元素 ​

  • ::before/::after：在元素内容前后插入内容。
  • ::first-letter/::first-line：选中首字母或首行。
  • ::selection：选中文本时的样式。

16. 移动端适配 ​

  • viewport：<meta name="viewport" content="width=device-width">。
  • rem/em：根据根元素字体大小或元素自身字体大小设置尺寸。
  • 媒体查询：@media根据屏幕宽度应用不同样式。
  • 弹性布局：flex/grid自适应容器尺寸。

17. 本地存储区别 ​

类型大小有效期数据传输
Cookie4KB可设置过期时间随HTTP请求发送
LocalStorage5MB永久，需手动清除仅前端使用
SessionStorage5MB会话结束（标签页关闭）仅前端使用

18. JS数据类型及判断 ​

  • 基本类型：undefined、null、boolean、number、string、symbol、bigint。
  • 引用类型：object（包括数组、函数等）。
  • 判断方法：
    • typeof：识别基本类型（null返回"object"）。
    • instanceof：判断对象是否为某个构造函数的实例。
    • Object.prototype.toString.call()：精确判断类型。

19. ES6新特性 ​

  • 语法糖：箭头函数、模板字符串、解构赋值、扩展运算符。
  • 声明方式：let/const（块级作用域）。
  • 面向对象：class/extends（类和继承）。
  • 异步处理：Promise、async/await。
  • 模块化：import/export。

20. let/const/var区别 ​

特性varlet/const
作用域函数/全局块级作用域
变量提升存在不存在（暂时性死区）
重复声明允许不允许
重新赋值允许const不允许

21. 数组去重 ​

  • [...new Set(arr)]
  • 循环遍历+indexOf/includes
  • reduce+includes

22. 深拷贝vs浅拷贝 ​

  • 浅拷贝：复制对象一层属性，引用类型共享内存。
  • 深拷贝：递归复制所有层级属性，创建完全独立对象。
  • 实现方法：
    • JSON.parse(JSON.stringify())（不支持函数、undefined等）。
    • 递归实现（处理循环引用需额外判断）。

23. Vue生命周期 ​

  1. beforeCreate：实例初始化后，数据观测前。
  2. created：数据观测、$data和$methods可用。
  3. beforeMount：挂载前，$el尚未生成。
  4. mounted：挂载完成，可操作DOM。
  5. beforeUpdate：数据更新前，DOM未更新。
  6. updated：数据更新后，DOM已更新。
  7. beforeDestroy：销毁前，实例仍然完全可用。
  8. destroyed：销毁后，所有事件监听器和子实例被销毁。

24. 组件通讯 ​

  • 父子：props（父→子）、$emit（子→父）。
  • 兄弟/跨层级：事件总线、Vuex、provide/inject。

25. Vuex核心属性 ​

  • state：存储应用状态。
  • mutations：同步修改state（唯一方式）。
  • actions：处理异步操作，提交mutations。
  • getters：计算state派生数据（类似计算属性）。
  • modules：将store分割为模块。

26. 计算属性vs监听属性 ​

特性计算属性监听属性
依赖缓存是否
适用场景复杂逻辑计算数据变化时执行异步操作
定义方式函数形式watch选项

27. 防抖vs节流 ​

  • 防抖：延迟执行，多次触发重置计时器（如搜索框输入）。
  • 节流：固定时间间隔执行一次（如滚动加载）。

28. Vue导航守卫 ​

  • 全局：beforeEach（全局前置）、afterEach（全局后置）。
  • 路由独享：beforeEnter。
  • 组件内：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。

29. 登录拦截实现 ​

  • 利用router.beforeEach全局前置守卫，在路由全局前置守卫中检查用户登录状态，未登录则重定向到登录页。

基于 MIT 许可发布

版权所有 © 2019-2025 尤雨溪