我真的很感激、很开心、很幸运、很幸福！

由于她也准备找工作了，所以本篇文章，写给我家女朋友，提前祝她找到一家好公司

HTML + CSS

​​HTML + CSS 面试复习指北​​


CSS 和 JS 基础都很重要，有些人明明框架源码都能对答如流，可是这些基础却支支吾吾说不明白，从而错过好的 offer 是真的很可惜，所以面试前一定要好好复习下这些基础知识


JavaScript 基础

可以看这篇文章 ​​JavaScript 进阶知识点​​。内容包含数据类型、类型转换、Set、Map、WeakSet、WeakMap、this、箭头函数、闭包、深浅拷贝、原型链、继承、垃圾回收、事件循环等

JS 数据类型

最新的 ECMAScript 标准定义了​​8种​​​数据类型。​​JavaScript 数据类型和数据结构​​

基础类型：​​Number​​​, ​​String​​​, ​​Boolean​​​, ​​undefined​​​, ​​null​​​, ​​Symbol​​​, ​​BigInt​​

复杂类型：​​Object​​

事件循环

​​JavaScript 执行机制​​

事件循环：一句话概括就是入栈到出栈的循环。即：一个宏任务，所有微任务，渲染(需要渲染的话)，一个宏任务，所有微任务，渲染.....

循环过程：

  1. 所有同步任务都在主线程上依次执行，形成一个执行栈(调用栈)，异步任务则放入一个任务队列
  2. 当执行栈中任务执行完，再去检查微任务队列里的微任务是否为空，有就执行，如果执行微任务过程中又遇到微任务，就添加到微任务队列末尾继续执行，把微任务全部执行完
  3. 微任务执行完后，再到任务队列检查宏任务是否为空，有就取出最先进入队列的宏任务压入执行栈中执行其同步代码
  4. 然后回到第2步执行该宏任务中的微任务，如此反复，直到宏任务也执行完，如此循环

深浅拷贝

浅拷贝：只拷贝对象第一层，键值是引用类型就拷贝指针。拷贝栈不拷贝堆

// 1. 展开运算符 ...
let obj1 = { ...obj }

// 2. Object.assign() 把obj2合并到obj1
Object.assign(obj1, obj2)

// 3. 手写
function clone(target){
    let obj = {}
    for(let key in target){
        obj[key] = target[key]
    }
    return obj
}

// 4. 数组浅拷贝  用Array方法 concat()和slice()
let arr1 = [ 1,2,{ c:3 } ]
let arr2 = arr1.concat()
let arr3 = arr1.slice()

深拷贝：如果拷贝键值是对象，就需要进一步拷贝值，而不是指针了，所以一般需要用递归，直到全部键值都是基本类型

需要注意的是 属性引用了自身的情况，就会造成循环引用，导致栈溢出

解决循环引用 可以额外开僻一个存储空间，存储当前对象和拷贝对象的关系，当需要拷贝对象时，先去存储空间找，有木有这个拷贝对象，如果有就直接返回，如果没有就就继续拷贝，这就解决了

// 1. 用序列化和反序列化，重新开辟一块内存
let obj2 = JSON.parse(JSON.stringify(obj1))

// 2.手写递归 - 简易版
function clone(target, map = new Map()){
    if (typeof target === 'object') { // 引用类型才继续深拷贝
        let obj = Array.isArray(target) ? [] : {} // 考虑数组
        //防止循环引用
        if (map.get(target)) {
            return map.get(target) // 有拷贝记录就直接返回
        }
        map.set(target,obj) // 没有就存储拷贝记录
        for (let key in target) {
            obj[key] = clone(target[key]) // 递归
        }
        return obj
    } else {
        return target
    }
}

Set、Map、WeakSet、WeakMap

​​Set​​​ 和 ​​Map​​ 都是强引用，都可以遍历，比如 for of / forEach

​​WeakSet​​​ 和 ​​WeakMap​​​ 都是弱引用，对 ​​GC(垃圾回收)​​ 更加友好，都不能遍历

Set 和 WeakSet 只有键值(key)没有键名，Map 和 WeakMap 是键值对的集合

强弱引用：比如: let obj = {} 就默认创建了一个强引用的对象，只有手动将 obj = null，在没有引用的情况下它才会被垃圾回收机制进行回收，如果是弱引用对象，垃圾回收机制会自动帮我们回收，某些情况下性能更有优势，比如用来保存 DOM 节点，不容易造成内存泄漏

数组

会改变原数组的几个方法：​​pop()​​​、​​push()​​​、​​shift()​​​、​​unshift()​​​、​​reverse()​​​、​​sort()​​​、​​splice()​​​、​​fill()​​​、​​copyWithin()​​

其他更多详细的可以看这篇文章，总结的很详细：​​JS数组方法总览及遍历方法耗时统计​​​，不说所有都记住吧，但是对于一些常用的方法要熟悉并知道区别，比如 ​​forEach()​​​、​​map()​​​、​​filter()​​ 之间的区别？

字符串

字符串相关如图，用法都在这篇文章 ​​JavaScript 28个常用字符串方法及使用技巧​​

写给女朋友的前端面试秘籍_前端

JavaScript 手写

很多公司喜欢考这个，比如：call、bind、apply、防抖、节流、Promise、深拷贝等，有时间的时候看看练一下这几个。具体可以参考这个 ​​22个高频JavaScript手写代码​​

Vue

这一块知识也要尽可能熟练掌握，可能里面一些知识点觉得工作中用不到，而且公司也不会让你去写框架，但是如何让别人知道你能保质保量的完成好开发任务呢，就需要你熟练掌握框架

Vue 核心思想

  • 数据驱动，视图内容随着数据改变而改变；
  • 组件化，可以增加代码复用性，可维护性，体现了高内聚低耦合

Vue2 相关的可以看这篇三心大佬总结的文章：​​熬夜总结50个Vue知识点，全都会你就是神​​

Vue3 相关的看我写的这个：​​聊一聊 Vue3 的 9 个知识点​​​，还有 ​​Vue3的8种和Vue2的12种组件通信​​

Vue-Router 可以看下这篇红尘炼心大佬总结的文章：​​Vue-Router面试题汇总​​

Vue 新的状态管理 Pinia or Vuex5 ? 看这个：​​上手 Vue 新的状态管理 Pinia，一篇文章就够了​​


可以毎天看一部份，慢慢来，看不懂的就先跳过，知道个大概先，之后再来巩固一下就行


网络 + 浏览器

输入 URL 到页面显示的过程

这个是真的非常容易被问到，因为这里面涉及大量知识点，所以要尽可能熟练。 ​​输入URL到页面显示的前端体系知识​​

HTTP 相关

这也是一个高频考点，特别是加密算法、签名原理、get和post的区别、常见状态码、http 不同版本的区别，这几个点要巩固一下。​​20分钟助你拿下HTTP和HTTPS，巩固你的HTTP知识体系​​

TCP/UDP 相关

过一下 TCP/UDP 的使用场景和区别，有个印象。​​巩固你的网络底层基础，再不怕被问TCP/IP/UDP​​

安全相关

浏览器在不断在进化和发展过程中，不断引入 CSP、​​SameSite​​​、​​HttpOnly​​​、Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要我们不断进行“查漏补缺”，所以也是很容易被问到一些安全问题和防范。​​吃透浏览器安全（同源限制/XSS/CSRF/中间人攻击）及防范​​

跨域相关

跨域是我们日常开发中一定会遇到的，怎么突破同源限制的一些方法，你可以不用，但你不能不知道。​​前端跨域整理总结​​

前端缓存相关

前端缓存(就是浏览器缓存/http缓存)，特别强缓存和协商缓存，还有本地存储这一块这也是必问的，​​五步吃透前端缓存，让页面飞起​​

工程化

这一块如果没有很多实践的话，可能就会难一点，不过再怎么样，关于 Webpack 和 Vite 的特别一些区别还是要清楚的

Webpack

推荐刘小夕大佬的系列文章，由浅入深

​​带你深度解锁Webpack系列(基础篇)​​

​​带你深度解锁Webpack系列(进阶篇)​​

​​带你深度解锁Webpack系列(优化篇)​​

Vite

这里主要是 Vite 从安装到配置的实践流程：​​vite工程化实践，建议收藏​​

这里主要是 Vite 和传统打包方式的对比和原理：​​深入理解Vite核心原理​​

结语

在此祝愿大家：有对象的幸福美满，单身的早日找到如意良配

感谢大家的每一个点赞