📚关于该专栏: 该专栏的发布内容是前端面试中笔试部分真题、答卷类、机试等等的题目，题目类型包括逻辑题、算法题、选择题、问答题等等，除了内容的分享，还有解析和答案。真实来自某些互联网公司，坐标广东广州。
🔥🔥🔥 持 续 更 新🔥🔥🔥
😉专栏博主: 黛琳ghz，万粉博主，计算机软件专业博主，校专业第一，优秀毕业生，国家奖学金候选人，拥有二十余项校级奖项、多项省级奖项、软件著作权一项等等。，专注于软件开发学习和分享，从事于软件开发行业。在 优快云 获得有优快云 实力新星（两期新星计划 TOP5）、优快云 全栈领域新星创作者、优快云 前端领域优质创作者、2022年度博客之星前端领域TOP 8、2022年度博客之星TOP 95、华为云社区云享专家、阿里云社区专家博主、腾讯云创作之星、优快云 第四届猿创征文优质博文奖（分数85第一）、以及多项优秀TOP 博文、优快云开源挑战赛优秀奖等等。欢迎你的关注与访问、可私信交流学习、问答等等。
文章目录
📋前言
这篇文章来自一个全新的专栏，该专栏的发布内容是前端面试中笔试部分真题、答卷类、机试等等的题目，题目类型包括逻辑题、算法题、选择题、问答题等等，除了内容的分享，还有解析和答案。真实来自某些互联网公司，坐标广东广州、深圳。
这篇文章分享的真题是来自 2024 年某科技公司的面试真题，面试的岗位是薪资 5k 的初级前端，这套题目还是非常基础以及必备的前端知识点，题目涵盖了浏览器渲染原理、HTTPS 加密过程、SPA 优化、Vue 双向绑定、Vuex 设计与实现，以及 Vue Router 的底层原理，还有 MVVM 设计与实现、async/await 和 Promise 的底层实现、computed 和 watch 的区别、JavaScript 的垃圾回收机制以及前端缓存机制的介绍。具体题目如下如图。
- 浏览器渲染原理
- https 如何进行加密
- spa 首屏加载慢优化
- vue 双向绑定原理
- vuex 设计与实现
- vue-router 底层原理
- mvvm 设计与实现
- async，await底层实现
- promise 底层实现
- computed 和 watch 的区别和应用场景
- js 垃圾回收机制
- 前端缓存机制
🎯 浏览器渲染原理
浏览器渲染的过程主要分为以下几个步骤：
- 解析 HTML：浏览器从服务器获取 HTML 文档，构建出 DOM 树。
- 解析 CSS：获取 CSS 文件，构建 CSSOM 树（CSS 对象模型）。
- 构建渲染树：将 DOM 和 CSSOM 合并，构建出渲染树，渲染树只包含可见的节点。
- 布局（Reflow）：计算渲染树中每个节点的几何信息（位置和大小）。
- 绘制（Painting）：将渲染树中的节点转换为实际的像素。
- 合成：如果页面有多个层（例如使用 CSS 的 z-index），浏览器会将这些层合成成最终的图像。
下面的代码演示了如何使用 JavaScript 修改 DOM，从而触发浏览器重新渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Browser Render Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
<button id="changeColor">Change Color</button>
<script>
document.getElementById('changeColor').addEventListener('click', () => {
// 改变 DOM，触发重新渲染
const box = document.querySelector('.box');
box.style.backgroundColor = 'red';
});
</script>
</body>
</html>
🎯 https 如何进行加密
HTTPS（HTTP Secure） 是在 HTTP 协议上增加了一层安全保障，主要通过 SSL/TLS 协议进行加密。加密过程包括以下几个步骤：
1. SSL/TLS 握手：
- 客户端发送一个请求，包含支持的加密算法和一个随机数。
- 服务器选择一个算法，发送数字证书（包含公钥）给客户端。
- 客户端验证证书的有效性，然后生成会话密钥，用服务器的公钥加密会话密钥并发送给服务器。
2. 数据加密：
- 一旦会话密钥建立，之后的数据传输使用这个会话密钥进行加密和解密。
下面是一个简单的 HTTPS 服务器示例，使用 Node.js 和 Express。
const https = require('https');
const fs = require('fs');
const express = require('express');
const app = express();
const PORT = 443; // 默认 HTTPS 端口
// 读取 SSL 证书和私钥
const options = {
key: fs.readFileSync('server-key.pem'),
cert: fs.readFileSync('server-cert.pem')
};
// 创建 HTTPS 服务器
https.createServer(options, app).listen(PORT, () => {
console.log(`HTTPS server running on port ${PORT}`);
});
// 定义一个路由
app.get('/', (req, res) => {
res.send('Hello Secure World!');
});
🎯 SPA 首屏加载慢优化
单页应用（SPA） 首屏加载慢的主要原因是资源过多或过大。优化方法包括：
- 懒加载：使用动态导入进行路由懒加载。
const Home = () => import('./components/Home.vue');
- 代码分割：利用 Webpack 实现代码分割，将不同模块分成多个文件。
- 预加载与预渲染：使用 加载关键资源，并使用 SSR（服务器端渲染）进行预渲染。
- 压缩与合并资源：对 CSS、JS 文件进行压缩，并合并文件以减少 HTTP 请求。
- 使用 CDN：利用内容分发网络（CDN）加速静态资源的加载。
以下是 Webpack 的代码分割配置示例：
// webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
splitChunks: {
chunks: 'all', // 所有模块都进行分割
},
},
};
🎯 Vue 双向绑定原理
Vue.js 实现双向绑定主要依赖于数据劫持和观察者模式。主要步骤如下：
- <font color=#000数据劫持：使用 Object.defineProperty 将数据对象的属性转换为 getter/setter。
function defineReactive(obj, key, val) {
const dep = new Dep();
Object.defineProperty(obj, key, {
get() {
if (Dep.target) {
dep.depend();
}
return val;
},
set(newVal) {
if (newVal !== val) {
val = newVal;
dep.notify();
}
}
});
}
-
<font color=#000指令和 Watcher：Vue 的指令（如 v-model）会创建 Watcher 实例，观察数据变化。
-
<font color=#000DOM 更新：数据变化时，Watcher 会通知相关组件更新。
<div id="app">
<input v-model="message" />
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
🎯 Vuex 设计与实现
Vuex 是 Vue.js 的状态管理库，主要结构包括：
- State：存储应用的全局状态。
- Getters：计算属性，用于派生状态。
- Mutations：同步方法，用于修改状态。
- Actions：异步方法，可以执行多个 mutations。
- Modules：模块化管理状态。
示例代码如下。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});
// 在组件中使用
export default {
computed: {
count() {
return this.$store.state.count;
},
doubleCount() {
return this.$store.getters.doubleCount;
}
},
methods: {
increment() {
this.$store.commit('increment');
},
incrementAsync() {
this.$store.dispatch('incrementAsync');
}
}
};
🎯 Vue Router 底层原理
Vue Router 是 Vue.js 的路由管理器，其基本原理如下：
- 路由配置：定义路由表，包含路径和组件映射。
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
- 路由匹配：访问某个 URL 时，Vue Router 根据路由表匹配对应组件。
- 视图渲染：匹配成功后，动态渲染组件到 中。
- 历史管理：使用 HTML5 History API 或 Hash 模式管理浏览器历史记录。
示例代码如下。
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});
export default router;
🎯 MVVM 设计与实现
MVVM（Model-View-ViewModel） 是一种设计模式，旨在简化界面与业务逻辑的分离。MVVM 的核心组件包括：
- Model：数据模型，负责数据的存储和业务逻辑。
- View：用户界面，展示数据并接收用户输入。
- ViewModel：连接 Model 和 View，处理用户输入并更新 Model。
实现原理
- 数据绑定：通过数据绑定，ViewModel 将数据模型中的数据与 UI 组件关联。
- 双向绑定：ViewModel 中的变更会自动更新到 View，反之亦然。
以下是一个简单的 MVVM 实现：
<div id="app">
<input type="text" v-model="message" />
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
在上面的代码中，message 是 ViewModel 中的一个数据属性，通过 v-model 指令与输入框进行双向绑定。
🎯 async/await 底层实现
async/await 是 ES2017 引入的语法糖，基于 Promises 实现的异步编程方式。其底层原理如下：
- async 函数：返回一个 Promise 对象，内部的代码执行会被包装为 Promise。
- await 关键字：只能在 async 函数内部使用，用于暂停代码执行，直到 Promise 被解决或拒绝。
下面是 async/await 的基本用法：
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data fetched!");
}, 1000);
});
}
async function asyncFunction() {
console.log("Fetching data...");
const data = await fetchData(); // 暂停，等待 Promise 解决
console.log(data); // 输出 "Data fetched!"
}
asyncFunction();
🎯 Promise 底层实现
Promise 是用于处理异步操作的对象，提供了更清晰的异步编程方式。其底层实现包括以下部分：
- 状态管理：Promise 具有三种状态：pending（等待中）、fulfilled（已完成）、rejected（已拒绝）。
- 回调队列：每个 Promise 都有两个回调函数：then 和 catch，在状态改变时执行。
以下是一个简单的 Promise 实现：
class MyPromise {
constructor(executor) {
this.state = 'pending';
this.value = undefined;
this.reason = undefined;
this.onResolvedCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {
if (this.state === 'pending') {
this.state = 'fulfilled';
this.value = value;
this.onResolvedCallbacks.forEach(fn => fn());
}
};
const reject = (reason) => {
if (this.state === 'pending') {
this.state = 'rejected';
this.reason = reason;
this.onRejectedCallbacks.forEach(fn => fn());
}
};
executor(resolve, reject);
}
then(onFulfilled, onRejected) {
if (this.state === 'fulfilled') {
onFulfilled(this.value);
} else if (this.state === 'rejected') {
onRejected(this.reason);
} else {
this.onResolvedCallbacks.push(() => {
onFulfilled(this.value);
});
this.onRejectedCallbacks.push(() => {
onRejected(this.reason);
});
}
}
}
// 使用示例
const myPromise = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve("Success!");
}, 1000);
});
myPromise.then((value) => {
console.log(value); // 输出 "Success!"
}, (reason) => {
console.error(reason);
});
🎯 computed 和 watch 的区别与应用场景
computed 和 watch 是 Vue.js 中用于响应式数据处理的两种机制，但它们的用途和实现方式不同。
computed
- 用途：用于计算属性，基于其他响应式数据的值来计算新的值。计算属性会被缓存，只有在依赖的数据变化时才会重新计算。
- 适用场景：适用于需要基于现有数据计算出新值的场景。
示例代码
new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
});
watch
- 用途：用于观察一个或多个数据的变化，适合执行异步或开销较大的操作。
- 适用场景：适用于需要在数据变化时执行特定操作的场景，比如 API 调用。
示例代码
new Vue({
el: '#app',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
question(newQuestion) {
this.answer = 'Waiting for you to stop typing...';
this.getAnswer(newQuestion);
}
},
methods: {
getAnswer(question) {
// 假设这是一个异步 API 调用
setTimeout(() => {
this.answer = 'The answer is: ...';
}, 1000);
}
}
});
🎯 JavaScript 垃圾回收机制
JavaScript 的垃圾回收机制主要基于 引用计数 和 标记-清除 算法：
- 引用计数：每个对象都有一个引用计数器，引用计数为零时，表示该对象不再被使用，可以被垃圾回收。
- 标记-清除：遍历所有根对象，标记可达的对象，未被标记的对象会被清除。
垃圾回收示例
let obj = { name: "John" };
obj = null; // 取消对对象的引用，准备被回收
在上述示例中，当 obj 被设置为 null 时，如果没有其他引用指向原对象，该对象就会被垃圾回收。
🎯 前端缓存机制
前端缓存机制主要用于提高应用性能，减少请求延迟。常见的缓存机制包括：
浏览器缓存：
- Cache-Control：HTTP 头部控制缓存行为，如 max-age、no-cache。
- ETag：用于验证资源是否变化的标识符。
LocalStorage：存储在用户浏览器中的键值对，可以在多个页面和会话中访问。容量通常为 5MB。
localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');
SessionStorage：类似于 LocalStorage，但数据仅在当前会话中可用，关闭标签页后即被清除。
sessionStorage.setItem('sessionKey', 'sessionValue');
const sessionValue = sessionStorage.getItem('sessionKey');
IndexedDB：一个低级别的 API，用于客户端存储大量结构化数据。
const request = indexedDB.open("myDatabase", 1);
request.onsuccess = (event) => {
const db = event.target.result;
// 进行数据库操作
};
📝最后
这套面试题适用于前端开发初级的岗位，适合有面试、工作经验的同学进行练习和阅读，这套面试题涉及的内容也很经典，包括了浏览器渲染原理、HTTPS 加密过程、SPA 优化、Vue 双向绑定、Vuex 设计与实现，以及 Vue Router 的底层原理，还有 MVVM 设计与实现、async/await 和 Promise 的底层实现、computed 和 watch 的区别、JavaScript 的垃圾回收机制以及前端缓存机制的介绍。总体来说这套面试题不算很难、都是很基础的内容，但是也是非常重要的知识点和技术。其中也有经常出现在面试中的技术点、比如 Vue 的基础知识点、computed 和 watch 等等。如果这套题的可以做到9成以上的正确率，说明你的基础很扎实了，继续努力、加油。
扫一扫
24万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
