← 返回图书库

语雀笔记迁移 · 67 篇

《前端面试指北》

Neptune

从 HTML、CSS、浏览器与 JavaScript，到 Vue、算法、Node.js 和 Webpack 的完整前端知识笔记。

读后感目录

基础

01 HTMLHTMLHTML元素元素分类html中每个元素默认分为三类：块级block、行内inline、行内块inline-block分类特征block构成块，单独出现在一行盒宽度默认为父元素 100% 宽度，设置 margin 和 padding 都生效代表：div、p、h1~h6、ul、ol、li、tabl... 2 分钟

CSS

02 CSS 知识点CSS › CSS 知识点选择器选择器种类元素、类、ID选择器对元素的选择：h1 { }对box类的选择：.box { }对id uique的选择：#unique { }属性选择器根据某个标签属性的存在选择元素，如选择存在title标签的：a[title] { }根据有特定值的标签属性选择，如选择指定地址... 2 分钟 03 外边距叠加CSS › CSS 知识点 › 外边距叠加先上结论，外边距叠加的解决方法兄弟叠加：给每个元素设置外部 BFC 容器父子叠加：父元素创建 BFC、父元素使用 padding-top/bottom 或 border-top/bottom、父元素不常用方法（可能影响布局）：修改元素为绝对布局、浮动或非块级元素参考链接：深入理解CSS外边距折... 2 分钟 04 CSS 多栏布局CSS › CSS 多栏布局两栏左侧定宽，右侧自适应左列设置 float，右列使用 overflow:hidden/display:flex 创建 BFC 原理：利用 BFC 不会与 float box 重叠虽然 BFC 不会与 float box 重叠，但实测这句话对于绝对定位元素并不成立设置 displa... 3 分钟 05 CSS 样式技巧CSS › CSS 样式技巧rem 使用参考链接：字体适配不同屏幕大小详解meta-viewport标签中的width和initial-scale属性MDN：元数据3分钟读懂移动端rem使用方法如何去根元素的 font-size 大小，才能让页面在不同屏幕大小看起来一致首先设置 header 的 meta，让 viewp... 1 分钟 06 CSS 动画 & 常见绘制CSS › CSS 动画 & 常见绘制CSS transformCSS transform允许旋转，缩放，倾斜或平移给定block元素。transform的行为是通过修改CSS视觉格式化模型的坐标空间来实现的——各种变化由transform func相乘叠加，一个func对应一重图层复合操作，因此如果动画中使用transform进... 3 分钟

Web & 浏览器

07 计算机网络Web & 浏览器 › 计算机网络有时候感觉自己不是能写出《劝退宝典》的人，很多东西已经完全忘干净了🆒网络协议栈所有各层协议合称协议栈，因特网协议栈有5层，ISO/OSI模型有7层PDU（Protocol Data Unit）：协议数据单元，是指对等层次之间传递的数据单位因特网协议栈应用层支持网络程序，是网络程序及其应用层协... 3 分钟 08 浏览器渲染 & 前端存储Web & 浏览器 › 浏览器渲染 & 前端存储浏览器现代浏览器通常由7部分构成：用户界面 ： 地址栏、前进/后退按钮、书签菜单等。除浏览器主窗口显示的页面外，其他各个部分都属于UI。浏览器引擎 ： 在用户界面和渲染引擎之间传送指令。渲染引擎 ：负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解... 2 分钟 09 CookiesWeb & 浏览器 › 浏览器渲染 & 前端存储 › Cookies一直对 cookies 的跨域问题、samesite 等字段混淆，这里整理下参考链接：Cookie 的 SameSite 属性SameSite Cookie，防止 CSRF 攻击Domaincookies 的 Domain 指定了哪些主机可以接受 Cookie。如果不指定，默认为 origin... 1 分钟 10 Web 安全Web & 浏览器 › Web 安全同源策略参考链接：MDN-同源策略9种常见的前端跨域解决方案（详解）同源策略限制从一个源(origin)加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制同源判定如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同... 2 分钟 11 跨域实战Web & 浏览器 › Web 安全 › 跨域实战以下的 Demo 都基于 Koa2 服务端，跨域通过限定 localhost 下的不同端口模拟运行时本地需安装 node，执行 npm install 安装依赖后执行子目录的 bat 文件即可完整代码见：https://github.com/NepJNQ/Front-end-Baby/tree... 1 分钟 12 性能优化Web & 浏览器 › 性能优化资源压缩资源压缩主要包括html压缩、css压缩、js压缩和混乱、文件压缩html压缩：在 html 中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如注释css压缩：css 代码压缩简单来说就是无效代码删除和 css 语义合并js的压缩和混乱无效字符的删除剔除注释代码语义... 2 分钟

JavaScript

13 JS 知识点JavaScript › JS 知识点JS 数据类型JavaScript 中有八（7+1）种基本的数据类型（七种基本数据类型，也称为原始类型，object 为复杂数据类型）number：用于整数或浮点数，在 ±(253-1) 范围内的整数bigInt：用于任意长度的整数string：用于字符串boolean：用于 true 和 f... 2 分钟 14 StringJavaScript › String关于String API详情，见MDN String需要区分基本数据类型的字符串和字符串对象：字符串字面量 (通过单引号或双引号定义) 和 直接调用 String 方法(没有通过 new 生成字符串对象实例)的字符串都是基本字符串当基本字符串需要调用一个字符串对象才有的方法或者查询值的时候(基... 1 分钟 15 ArrayJavaScript › Array关于Array API详情，见MDN遍历普通for循环：略使用for-of遍历可迭代对象元素let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; for (let item of arr) { console.log(item); }使用for-in遍历对象属性——... 3 分钟 16 JS继承JavaScript › JS继承红宝书第八章写的真的很不错，第四版更新了ES6的继承，这里总结下✍ES5在ES5中没有正式的class，所有的类都是用于创建特定类型对象的构造函数，同时有以下事实JS中每个函数都具有一个prototype属性，该属性是一个指向函数原型对象的引用原型对象会获得constructor属性，该属性是... 3 分钟 17 class A extends B{}过程JavaScript › JS继承 › class A extends B{}过程工具准备：Babel一直只是不断看到大家说extends过程是语法糖，背后还是原型链继承，所以其中到底封装了什么？首先祭出神器Babel，它可以把ES6+的JS代码转为向后兼容的旧版本实现准备好下面的ES6类继承代码，在babel网站上转换class B{ constructor(nam... 1 分钟 18 JS内存管理JavaScript › JS内存管理之前就想总结，拖拖拖，拖到今天写深拷贝时才整理JS内存模型JS引擎将内存空间分为两块：堆（heap）与栈（stack）JS中的原始数据类型值通常都存储在栈中（Number String Null Undefined Boolean Symbol）而引用类型的数据都被存储在堆中（Object）当... 1 分钟 19 JS运行机制JavaScript › JS运行机制总结以下内容是因为红宝书多次提出了上下文和执行栈概念，为方便后续学习，先整理一遍，中间参考的资料链接都会放在最后1. 编译执行JavaScript作为一门解释性语言，每次执行程序时，解释器都需要边编译边执行，常见的v8引擎就是一个解释器。参考我的编译原理笔记阅读体验更佳此处为语雀文档，点击链接... 2 分钟 20 Event Loop详解JavaScript › Event Loop详解红宝书异步部分对于一些更底层的异步机制没有详细解释，其中最重要的就是事件循环，整合总结在这1. 同步&异步这里不深入同步异步内容，只是给出最简单的说明：同步(sync)即一个步骤接一个步骤完成：A()执行-A()结束-B()执行,如果A()不结束就会一直阻塞下去异步(async)与同步相对，无... 2 分钟 21 DOM & 事件JavaScript › DOM & 事件获取元素id是文档中元素的不可重复属性，可以使用 document.getElementById(id) 来获取元素 Element 2 分钟 22 页面生命周期JavaScript › 页面生命周期脚本加载参考链接：MDN： 1 分钟 23 设计模式JavaScript › 设计模式参考链接：JS设计模式单例模式意义：核心思想是确保一个类只对应一个实例。虽然js是弱类型的语言，但是js也有构造函数和实例。所以这里可以理解为确保多次构造函数时，都返回同一个实例 —— 全局对象是最简单的单例模式举例：JS 执行中的 global 对象function A(name){ ... 1 分钟 24 问题收录JavaScript › 问题收录函数、类、对象？？昨天写继承，发现自己的写的ES6类执行后原型上没有方法，所有方法都在实例上？？当时的部分代码如下class Animal { constructor() { this.name = "animal"; this.sex = "male"; } sl... 1 分钟

Vue

25 Vue 知识点Vue › Vue 知识点组件通信通信方式10种此处为语雀文档，点击链接查看：https://www.yuque.com/gesidalijiashidai/fgeemd/fntvw3Vuex 和单纯的全局对象的区别Vuex 和全局对象主要有两大区别：响应式 & 提交更改的方式Vuex 的状态存储是响应式的：当 Vue... 3 分钟 26 生命周期钩子Vue › Vue 知识点 › 生命周期钩子以 此处为语雀文档，点击链接查看：https://www.yuque.com/go/doc/26497725 中 1.5.2 版本的代码为例子，在 app 和组件下加入钩子函数，给 app 实例的 data 加一个 message propVue.component("my-todo-list... 1 分钟 27 组件通信Vue › Vue 知识点 › 组件通信父子通信【父 → 子】props子组件设置 props，父组件通过 v-bind 向子组件传递数据【子 → 父】vm.$emit子组件通过 $emit 触发子实例的事件，父组件使用 v-on 监听子实例事件并指定回调函数，通过 $emit 传递的参数可以使用 $event访问，或被父组件回调接... 4 分钟 28 Vuex 使用Vue › Vue 知识点 › Vuex 使用记录下自己使用 Vuex 填的坑引入使用 ​npm install vuex -S​ 安装 vuex创建 /store 目录，其中创建子目录 /modules 和 index.js，子目录为了方便模块化使用 Vueximport Vue from "vue"; import Vuex from... 3 分钟 29 Vue3.0 新特性Vue › Vue 知识点 › Vue3.0 新特性参考链接：Vue3.0全家桶最全入门指南 - 快速搭建 (1/4)使用Vue 3.0加快网络应用的速度Vue3.0 文档：响应性原理vue3.0六大亮点Performance：通过 Proxy 实现双向响应式绑定，相比 defineProperty 的遍历属性的方式效率更高，性能更好，另外 V... 3 分钟 30 【原理一】 Vue2.x 响应式原理Vue › 【原理一】 Vue2.x 响应式原理原理描述Vue 的响应式是通过 Object.defineProperty 对数据进行劫持，并结合观察者模式实现：Vue 为每个对象创建一个 observer，之后利用 Object.defineProperty 劫持监听对象所有属性，把这些属性全部转为 getter 和 setterVue ... 1 分钟 31 【原理二】模板渲染Vue › 【原理二】模板渲染Vnode 概述参考链接：【Vue原理】VNode - 源码版 Vue中Vnode的创建与处理Vue 的 diff 算法解析什么是 Vnodeexport default class VNode { // 主要属性 tag: string | void; data: VNod... 4 分钟 32 【原理三】模板编译Vue › 【原理三】模板编译Vue2.x 实例化到渲染Vue2.x 模板编译第一部分大图中 compileToFunction() 调用 compile()，定义位置即下方的 baseCompile()var createCompiler = createCompilerCreator(function baseComp... 3 分钟 33 作用域插槽Vue › 【原理三】模板编译 › 作用域插槽参考链接：slot虽然自己很少用插槽，奈何面经常有问作用域插槽相关的问题，这里探索下普通插槽let AppLayout = { template: '' + ' 3 分钟 34 【原理四】前端路由 & Vue-routerVue › 【原理四】前端路由 & Vue-routerAjax参考链接：前端面试题——自己实现Ajax - Smiley的文章 - 知乎没有 Ajax 之前，浏览器发起请求的场景地址栏：用户在地址栏输入 http://baidu.com ，按回车，就向 http://baidu.com 发起了一个请求（同时页面刷新）a 标签：用户点击页面中的 a... 3 分钟 35 【原理五】computed & watchVue › 【原理五】computed & watch计算属性计算属性的初始化是发生在 Vue 实例初始化阶段的 initState 函数中，执行了 if (opts.computed) initComputed(vm, opts.computed)，initComputed 的定义在 src/core/instance/state.js 中：c... 4 分钟 36 【原理六】vuex 响应式Vue › 【原理六】vuex 响应式注入首先在 vuex.js 中使用 ​applyMixin()​ 进行注入：调用 Vue.mixin()，在所有组件（全局混入）的 beforeCreate 钩子混入了 ​vuexInit()​，因此之后创建的所有 vue 组件都会在 beforeCreate 钩子中执行 ​vuexInit(... 3 分钟 37 【Demo】Todo AppVue › 【Demo】Todo App通过一个todo app的开发迭代，熟悉vue中各种基本语法的使用以及组件化的思想v1.0 朴素的 todo实现一个待办清单应用，首先只使用到vue的声明式渲染，即不与html交互，而是将数据存入vue实例，由实例接管选中的DOM，对其进行响应式渲染 {{mes... 3 分钟

基础

38 操作系统操作系统进程与线程用课本的话回答“进程是资源分配的最小单位，线程是CPU调度的最小单位”怎么理解：进程：当执行一段程序时，会创建一个进程去执行代码，同时会为这个进程分配内存空间。该应用的状态都会保存在该内存空间中，当应用关闭时，该内存空间就会被回收。进程可以启动更多进程去执行任务。由于每个进程间的的内... 1 分钟

手撕代码

39 原生重写手撕代码 › 原生重写instanceof对于A.instanceof(B)，它可以判断A的原型链上是否有B的原型// left的原型链上有right.prototype function instance_of(left, right) { // 父类的原型对象 let rightProto = righ... 3 分钟 40 Promise手撕代码 › Promise参考链接：史上最易读懂的 Promise/A+ 完全实现 - 谢然的文章 - 知乎 从零开始手写Promise - 谢小飞的文章 - 知乎面试官：“你能手写一个 Promise 吗” - 齐小神的文章 - 知乎Promise 实现类构造器promise 有三类状态、解决值、拒绝理由，具有私有实... 4 分钟 41 实用函数手撕代码 › 实用函数防抖&节流⏱秒速理解防抖节流有一盏电灯💡，受三个开关控制，对应正常（无防抖无节流）、带防抖、带节流，一个熊孩子去不停拨动开关（像你小时候一样🐻），则正常开关：他拨动得多快，电灯就能给你闪多快，欠打防抖开关：任凭他拨多快，电灯状态就是不变，最后熊孩子无聊了，松手后几秒钟，电灯状态变了一下节流... 7 分钟 42 正则表达式手撕代码 › 正则表达式更多可参考此处为语雀文档，点击链接查看：https://www.yuque.com/wuchendi/fe/vx4is2日期判断日期格式是否符合 '2017-05-11'的形式，简单判断，只判断格式// 判断日期格式是否符合 '2017-05-11'的形式，简单判断，只判断格式 let reg... 2 分钟

算法

43 牛客 & 力扣算法 › 牛客 & 力扣链表NC2 重排链表假设4个结点，0312=》012+3；8个结点，07162534=》01234+567；5个结点04132=》012+34，由上述规律，我们可以使用双指针找到链表中点，则slow.next为后半链表的开头双指针找链表中点slow.next即指向右子链表首元素，应该断开和左链... 9 分钟 44 题目索引算法 › 牛客 & 力扣 › 题目索引题目索引原始笔记。 1 分钟 45 排序算法 › 排序所有的排序算法可以借用 leetcode912 排序数组 进行测试排序算法与复杂度参考此处为语雀文档，点击链接查看：https://www.yuque.com/gesidalijiashidai/ntyr7v/utq5r0#0xLTO算法稳定性原地性时间开销空间开销选择排序否是Θ(n2)Θ(1... 5 分钟

Node.js

46 Node.js 知识点Node.js › Node.js 知识点Node 事件循环Node.js采用 V8 作为 js 的解析引擎，而 I/O 处理方面使用 libuv，后者是一个基于事件驱动的跨平台抽象层，封装了不同操作系统一些底层特性，对外提供统一的API，事件循环机制也是它里面的实现。根据Node.js官方介绍，每次事件循环（tick）都包含了6个阶... 1 分钟 47 快速上手Node.js › 快速上手参考链接：how2j nodejs教程 廖雪峰 nodejs一个最简单的servervar http = require('http'); var url=require('url'); //引入url模块，帮助解析 var querystring=require('querystrin... 2 分钟

Webpack

48 模块化开发Webpack › 模块化开发在模块化编程中，开发者将程序分解为功能离散的 chunk，并称之为模块。每个模块都拥有小于完整程序的体积，使得验证、调试及测试变得轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具备了条理清晰的设计和明确的目的。—— webpack doc在其他高级语言中，Jav... 3 分钟 49 初始化 & 基本概念Webpack › 官方指南学习 › 初始化 & 基本概念参考链接：官方文档：快速开始姜瑞涛：webpack 教程本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个... 2 分钟 50 LoaderWebpack › 官方指南学习 › Loader本篇的代码使用 webpack doc：管理资源提供的 demo预处理器 Loader 是 Webpack 生态里一个重要的组成。Webpack 在进行打包的时候，对所有引入的资源文件都当作模块来处理。但 Webpack 自身只支持对 JS 文件处理（现在的版本也支持对 JSON 文件处理），... 2 分钟 51 管理输出Webpack › 官方指南学习 › 管理输出本篇的代码使用 webpack doc：管理输出提供的 demo，准备的文件参考上述链接，可删除之前的 loader ​npm uninstall css-loader style-loader​本节旨在通过插件实现自动管理资源引入，而非手动 ​import​创建 src/paint.js 并... 1 分钟 52 开发环境Webpack › 官方指南学习 › 开发环境本篇的代码使用 webpack doc：开发环境提供的 demo 本节的内容和配置只应该应用于开发环境中 使用 source map 当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在... 1 分钟 53 代码分离Webpack › 官方指南学习 › 代码分离本篇的代码使用 webpack doc：代码分离提供的 demo 什么是代码分离：把代码分离到不同的 bundle 中，然后按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间 ... 2 分钟 54 缓存Webpack › 官方指南学习 › 缓存本篇的代码使用 webpack doc：缓存提供的 demowebpack 会生成一个可部署的 /dist 目录，放置打包后的内容。只要 /dist 目录中的内容部署到 server 上，client（通常是浏览器）就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的... 1 分钟 55 webpack-vue_1：起始Webpack › Demo › Webpack 搭建 Vue 项目 › webpack-vue_1：起始项目初始化创建目录、使用命令初始化 npm，然后在本地安装 webpack 和命令行工具 webpack-climkdir webpack-demo cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev创建... 3 分钟 56 webpack-vue_2：轮播图Webpack › Demo › Webpack 搭建 Vue 项目 › webpack-vue_2：轮播图在 此处为语雀文档，点击链接查看：https://www.yuque.com/gesidalijiashidai/fgeemd/av45k0 中没有尝试使用静态资源，无法确定项目能否正确处理图片资源，在这一版本尝试引入图片，实现一个 Vue 轮播图组件项目修改基于 webpack-vue_1 ... 2 分钟 57 webpack-vue_3：优化Webpack › Demo › Webpack 搭建 Vue 项目 › webpack-vue_3：优化这篇完全基于上一篇的构建结果，大家随意 DIY，了解常用的 webpack 优化手段参考链接：三十分钟掌握Webpack性能优化优化构建速度首先大致总结 webpack 的打包过程webpack 打包过程会从 entry point 出发，递归地解析 modules 间的依赖，同时构建构建依赖... 3 分钟 58 实现一个 loaderWebpack › Demo › 实现一个 loader虽然了解了 loader 的概念，但动手实现一个哪怕再简单不过的 loader 也比单纯的纸面了解更加深印象目标 & 初始化目标：我们打算实现一个 txt 文件的 loader，准确说是两个：reverse-loader：将 txt 文件的字符逆序toUpperClass-loader：将逆序... 2 分钟 59 webpack 知识点Webpack › webpack 知识点为什么要使用 webpack，不直接 require？直接 require，而不打包，每个模块都会单独通过 http 传输下载并加载，而打包后就只有一个模块需要下载。编译后打包减少了页面的 http 请求，减少了页面加载时间，从而增加了页面的显示速度webpack 核心概念入口(entry)：... 2 分钟 60 webpack HMR 原理Webpack › webpack 知识点 › webpack HMR 原理参考链接：webpack热更新原理 - 填坑侠的文章 - 知乎Webpack HMR 原理解析 - 冉四夕的文章 - 知乎webpack HMR 提供了一种无需完全刷新整个页面就能重新加载已更新模块的开发体验。通过 HMR，可以保留当前页面已有状态，且只更新变更内容，节省开发时间下面介绍 HM... 3 分钟 61 npm 操作Webpack › npm 操作cnpm 与换源cnpm安装：npm install cnpm -g --registry=https://registry.npm.taobao.orgcnpm -v 来测试是否成功安装换源npm的默认地址：https://registry.npmjs.org/可以使用 npm config... 1 分钟

面向面经学习

62 JS 基础题目面向面经学习 › JS 基础题目作用域var temp = 1; function test() { temp = 10; return; function temp() {} } test(); console.log(temp);结果为1，因为在 test() 中的函数声明会被提升，相当于在函数作用域中有一个... 2 分钟 63 Promise 相关题目面向面经学习 › Promise 相关题目希望 1000ms 后输出 "0,1,2,3,4"下列代码的输出，解释如何修改，以实现目标for (var a = 0; a < 5; a++) { setTimeout(() => console.log(a), 1000); }上述代码打印出五个5，修改方案// 方案一：保存参数 fo... 3 分钟 64 CSS 题目面向面经学习 › CSS 题目绝对定位元素塌陷三个盒子自外而内嵌套，position属性依次为，fixed, absolute,relative（顺序可能不一样，记不太清了）。如果给最里面的盒子添加padding，问三个盒子的高度会如何变化.fixed-box { position: fixed; margin: ... 3 分钟 65 智力题 & 场景题面向面经学习 › 智力题 & 场景题智力题轮流抛硬币设先抛赢的概率为p1，后抛赢的概率为p2，当本轮先抛者失败，则后抛者赢的概率等于p1 p1 = 1/2 + 1/2 * p2 p1 + p2 = 1 解方程可得， p1 = 2/3翻牌第一步，我从牌顶拿出一张牌，放到桌子上。 第二步，我从牌顶再拿一张牌，放在手上牌的底... 2 分钟 66 单点登录面向面经学习 › 智力题 & 场景题 › 单点登录子域名共享 cookie将所有站点都设置一个主域名，如 *.baidu.com，所有站点设置 cookie 时都指明 domain: baidu.com，这样 domain 及其子域可以实现 cookies 共享，只需要将登录后的验证信息放入 cookie 即可。这种方法下，server 端要... 1 分钟 67 Web 综合面向面经学习 › Web 综合前端工程化前端工程化是藉由工程化的模式、自动化的工具，以实现前端项目高效开发，有效协同，质量可控设计阶段：需求分析组件化思想，一个软件项目可以拆分为哪些不同的子组件，子组件又能怎么拆分架构设计，如何选择技术栈、路由设计、项目结构设计开发阶段：模块化开发：将所有文件都视为模块，通过不同模块之间的... 2 分钟