推荐网站 | xinxin's little world

CSS基础

CSS Reference - A free visual guide to CSS

JS基础

基础知识

经常被面试官问道的JavaScript数据类型知识你真的懂吗？ - 掘金 (juejin.cn)

for in 和 for of 的区别 - 掘金 (juejin.cn)

菜鸟也能搞懂的typeof 与 instanceof 区别 - 掘金 (juejin.cn)

解锁多种JavaScript数组去重姿势 - 掘金 (juejin.cn)

一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧 - 掘金 (juejin.cn)

JavaScript与Unicode - CJ Ting’s Blog

死磕 36 个 JS 手写题（搞懂后，提升真的大） - 掘金 (juejin.cn)

this

面试官问：JS的this指向 - 掘金 (juejin.cn)

前端基础进阶（七）：全方位解读this - 简书 (jianshu.com)

JavaScript深入之从ECMAScript规范解读this · Issue #7 · mqyqingfeng/Blog · GitHub

JavaScript基础心法——this · Issue #6 · axuebin/articles · GitHub

call/apply/bind

this、apply、call、bind - 掘金 (juejin.cn)

JavaScript基础心法——call apply bind · Issue #7 · axuebin/articles · GitHub

面试官问：能否模拟实现JS的call和apply方法 - 掘金 (juejin.cn)

JavaScript深入之call和apply的模拟实现 - 掘金 (juejin.cn)

面试官问：能否模拟实现JS的bind方法 - 掘金 (juejin.cn)

不用call和apply方法模拟实现ES5的bind方法 · Issue #16 · jawil/blog · GitHub

Event Loop

JavaScript之彻底理解EventLoop - 掘金 (juejin.cn)

javascript 事件流 - 掘金 (juejin.cn)

从event loop规范探究javaScript异步及浏览器更新渲染时机 · Issue #5 · aooy/blog · GitHub

浏览器与Node的事件循环(Event Loop)有何区别? - 知乎 (zhihu.com)

这一次，彻底弄懂 JavaScript 执行机制 - 掘金 (juejin.cn)

【THE LAST TIME】彻底吃透 JavaScript 执行机制 - 掘金 (juejin.cn)

一次弄懂Event Loop（彻底解决此类面试问题） - 掘金 (juejin.cn)

深入理解 JavaScript Event Loop - 知乎 (zhihu.com)

原型

深度解析原型中的各个难点 · Issue #2 · KieSun/Dream · GitHub

【THE LAST TIME】一文吃透所有JS原型相关知识点 - 掘金 (juejin.cn)

【进阶5-1期】重新认识构造函数、原型和原型链 - 掘金 (juejin.cn)

JavaScript深入之从原型到原型链 · Issue #2 · mqyqingfeng/Blog · GitHub

深入理解 JavaScript 原型 (qq.com)

最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一） - 简书 (jianshu.com)

从proto和prototype来深入理解JS对象和原型链 · Issue #9 · creeperyang/blog · GitHub

[译] JavaScript 引擎基础：原型优化 - Joe’s Blog (hijiangtao.github.io)

详解JS原型链与继承 | louis blog (louiszhai.github.io)

代码复用模式

闭包/执行上下文/作用域

破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金 (juejin.cn)

[译]发现 JavaScript 中闭包的强大威力 - 掘金 (juejin.cn)

[译] 理解 JavaScript 中的执行上下文和执行栈 - 掘金 (juejin.cn)

我从来不理解JavaScript闭包，直到有人这样向我解释它 - 掘金 (juejin.cn)

解密 JavaScript 执行上下文 - 掘金 (juejin.cn)

一道js面试题引发的思考 · Issue #18 · kuitos/kuitos.github.io · GitHub

JavaScript深入之词法作用域和动态作用域 · Issue #3 · mqyqingfeng/Blog · GitHub

JavaScript深入之作用域链 · Issue #6 · mqyqingfeng/Blog · GitHub

异步/Promise/async

如何在使用async & await 时优雅的处理异常 - 掘金 (juejin.cn)

ES7 中的 async await

100 行代码实现 Promises/A+ 规范 (qq.com)

Promise实现原理（附源码） - 掘金 (juejin.cn)

BAT前端经典面试问题：史上最最最详细的手写Promise教程 - 掘金 (juejin.cn)

一起学习造轮子（一）：从零开始写一个符合Promises/A+规范的promise - 掘金 (juejin.cn)

你好，JavaScript异步编程—— 理解JavaScript异步的美妙 - 掘金 (juejin.cn)

Promise不会？？看这里！！！史上最通俗易懂的Promise！！！ - 掘金 (juejin.cn)

Promise 必知必会（十道题） - 掘金 (juejin.cn)

防抖/节流

7分钟理解JS的节流、防抖及使用场景 - 掘金 (juejin.cn)

深浅拷贝

深拷贝的终极探索（90%的人都不知道） - 掘金 (juejin.cn)

JavaScript专题之深浅拷贝 · Issue #32 · mqyqingfeng/Blog · GitHub

JavaScript基础心法——深浅拷贝 · Issue #20 · axuebin/articles · GitHub

javaScript中浅拷贝和深拷贝的实现 · Issue #3 · wengjq/Blog · GitHub

【进阶4-3期】面试题之如何实现一个深拷贝 · Issue #29 · yygmind/blog · GitHub

函数式编程

函数式编程，真香 - 掘金 (juejin.cn)

Introduction · 函数式编程指北 (gitbooks.io)

简明 JavaScript 函数式编程——入门篇 - 掘金 (juejin.cn)

JavaScript 函数式编程到底是个啥 - SegmentFault 思否

Coding-Guide/JavaScript函数式编程.md at master · ecmadao/Coding-Guide · GitHub

JavaScript专题之函数柯里化 · Issue #42 · mqyqingfeng/Blog · GitHub

Service Worker

Service Worker: 简介 | Web Fundamentals | Google Developers

8.JavaScript 是如何工作的：Service Worker 的生命周期及使用场景 · Issue #8 · qq449245884/xiaozhi · GitHub

借助Service Worker和cacheStorage缓存及离线开发 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

PWA来了，你准备好了么？ - PWA学习手册 (alienzhou.com)

面试官：请你实现一个PWA 我：😭 - 掘金 (juejin.cn)

Web Worker

浅谈HTML5 Web Worker - 掘金 (juejin.cn)

JavaScript 中的多线程 — Web Worker - 知乎 (zhihu.com)

JavaScript 性能利器 —— Web Worker - 掘金 (juejin.cn)

ES6

1.5万字概括ES6全部特性(已更新ES2020) - 掘金 (juejin.cn)

近一万字的ES6语法知识点补充 - 掘金 (juejin.cn)

Vue

MVVM

基于Vue实现一个简易MVVM - 掘金 (juejin.cn)

不好意思！耽误你的十分钟，让MVVM原理还给你 - 掘金 (juejin.cn)

50行代码的MVVM，感受闭包的艺术 - 掘金 (juejin.cn)

双向数据绑定

GitHub - DMQ/mvvm: 剖析vue实现原理，自己动手实现mvvm

深入响应式原理 | Vue.js 技术揭秘 (ustbhuangyi.github.io)

面试官: 实现双向绑定Proxy比defineproperty优劣如何? - 掘金 (juejin.cn)

为什么Vue3.0不再使用defineProperty实现数据监听？ (qq.com)

computed/watch

Vue.js的computed和watch是如何工作的？ - 掘金 (juejin.cn)

计算属性 VS 侦听属性 | Vue.js 技术揭秘 (ustbhuangyi.github.io)

生命周期

你真的理解$nextTick么 - 掘金 (juejin.cn)

生命周期 | Vue.js 技术揭秘 (ustbhuangyi.github.io)

组件

vue中8种组件通信方式, 值得收藏! - 掘金 (juejin.cn)

Vue 组件间通信六种方式（完整版） - 掘金 (juejin.cn)

虚拟DOM

Virtual DOM | Vue.js 技术揭秘 (ustbhuangyi.github.io)

面试官: 你对虚拟DOM原理的理解? - 掘金 (juejin.cn)

让虚拟DOM和DOM-diff不再成为你的绊脚石 - 掘金 (juejin.cn)

探索Virtual DOM的前世今生 - 知乎 (zhihu.com)

虚拟 DOM 到底是什么？(长文建议收藏) (qq.com)

详解vue的diff算法 - 掘金 (juejin.cn)

浅入浅出图解domDIff - 掘金 (juejin.cn)

模板编译

Vue 模板编译原理 · Issue #18 · berwin/Blog · GitHub

源码分析

基于Vue实现一个简易MVVM - 掘金 (juejin.cn)

网络

前端需要了解的计算机网络知识，这一篇就够了！(图文并茂，万字长文，点赞收藏哦！) - 掘金 (juejin.cn)

回流、重绘

浏览器的回流与重绘 (Reflow & Repaint) - 掘金 (juejin.cn)

回流与重绘：CSS性能让JavaScript变慢？ « 张鑫旭

HTTP

前端基础篇之HTTP协议 - 掘金 (juejin.cn)

HTTP 响应代码 - HTTP | MDN (mozilla.org)

如何理解HTTP响应的状态码？ | Harttle Land

都9102年了，还问GET和POST的区别 - SegmentFault 思否

听说『99% 的人都理解错了 HTTP 中 GET 与 POST 的区别』？？ - 知乎

HTTP keep-alive 二三事 | 三点水 (lotabout.me)

HTTP协议头部与Keep-Alive模式详解 (byvoid.com)

HTTPS

看图学HTTPS - 掘金 (juejin.cn)

谈谈 HTTPS - 掘金 (juejin.cn)

分分钟让你理解HTTPS - 掘金 (juejin.cn)

深入理解HTTPS工作原理 - 掘金 (juejin.cn)

九个问题从入门到熟悉HTTPS - 掘金 (juejin.cn)

浅谈 HTTP/2 Server Push - 知乎 (zhihu.com)

HTTP2基本概念学习笔记 - 掘金 (juejin.cn)

解密HTTP/2与HTTP/3 的新特性 - SegmentFault 思否

缓存

关于浏览器缓存你知道多少 (qq.com)

浏览器缓存 · Issue #9 · xiangxingchen/blog · GitHub

DNS

前端优化: DNS预解析提升页面速度 - 简书 (jianshu.com)

DNS解析 - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客

写给前端工程师的DNS基础知识 | Da’sBlog (sunhao.win)

TCP

面试时，你被问到过 TCP/IP 协议吗? - 掘金 (juejin.cn)

通俗大白话来理解TCP协议的三次握手和四次分手

TCP协议详解 - 掘金 (juejin.cn)

“三次握手，四次挥手”你真的懂吗？ - 知乎 (zhihu.com)

CDN

漫话：如何给女朋友解释什么是CDN？ - 掘金 (juejin.cn)

关于 cdn、回源等问题一网打尽 - 掘金 (juejin.cn)

CDN是什么？使用CDN有什么优势？ - 知乎 (zhihu.com)

五分钟了解CDN - 掘金 (juejin.cn)

跨域

前端开发如何独立解决跨域问题 - SegmentFault 思否

九种跨域方式实现原理（完整版） - 掘金 (juejin.cn)

浏览器同源策略与ajax跨域方法汇总 - 简书 (jianshu.com)

经典题

史上最详细的经典面试题从输入URL到看到页面发生了什么？ - 掘金 (juejin.cn)

04 | 导航流程：从输入URL到页面展示，这中间发生了什么？

前端经典面试题: 从输入URL到页面加载发生了什么？ - SegmentFault 思否

浏览器渲染

深入浅出浏览器渲染原理 - 知乎 (zhihu.com)

浏览器的工作原理：现代网络浏览器幕后揭秘 - HTML5 Rocks

工程化

webpack

前端工程师都得掌握的 webpack Loader

webpack loader 从上手到理解系列：vue-loader (qq.com)

webpack loader 从上手到理解系列：style-loader (qq.com)

手把手教你撸一个 Webpack Loader - 掘金 (juejin.cn)

【webpack进阶】你真的掌握了loader么？- loader十问 - 掘金 (juejin.cn)

一文掌握Webpack编译流程 (qq.com)

手把手教你撸一个简易的 webpack - 掘金 (juejin.cn)

带你走进webpack世界，成为webpack头号玩家。 - 掘金 (juejin.cn)

关于webpack4的14个知识点,童叟无欺 - 掘金 (juejin.cn)

【Webpack小书】前端打包工具Webpack参考书 - Tim的资源站 (timsrc.com)

webpack 如何通过作用域分析消除无用代码 | Vincent Chan 的巴士站 🚉 (diverse.space)

聊一聊webpack-dev-server和其中socket，HMR的实现

使用webpack4提升180%编译速度 | louis blog (louiszhai.github.io)

Webpack 大法之 Code Splitting - 知乎 (zhihu.com)

轻松理解webpack热更新原理 (qq.com)

轻松理解webpack热更新原理 - 掘金 (juejin.cn)

揭秘webpack plugin | ChampYin’s Blog

babel

不容错过的 Babel7 知识 - 掘金 (juejin.cn)

前端工程师需要了解的 Babel 知识 - 政采云前端团队 (zoo.team)

深入浅出 Babel 上篇：架构和原理 + 实战 - 掘金 (juejin.cn)

深入浅出 Babel 下篇：既生 Plugin 何生 Macros - 掘金 (juejin.cn)

前端工程师的自我修养-关于 Babel 那些事儿 - 掘金 (juejin.cn)

前端与编译原理——用JS写一个JS解释器 - SegmentFault 思否

模板引擎

编写一个简单的JavaScript模板引擎 - 廖雪峰的官方网站 (liaoxuefeng.com)

JavaScript模板引擎原理，几行代码的事儿 - Barret李靖 - 博客园 (cnblogs.com)

Vue 模板编译原理 · Issue #18 · berwin/Blog · GitHub

前端发布

(24 封私信 / 16 条消息) 大公司里怎样开发和部署前端代码？ - 知乎 (zhihu.com)

前端高级进阶：前端部署的发展历程 - 掘金 (juejin.cn)

性能监控

5 分钟撸一个前端性能监控工具 - 掘金 (juejin.cn)

把前端监控做到极致 - 知乎 (zhihu.com)

GMTC 大前端时代前端监控的最佳实践 - 掘金 (juejin.cn)

前端监控和前端埋点方案设计 - 掘金 (juejin.cn)

腾讯CDC团队：前端异常监控解决方案 (qq.com)

性能优化

面试官: 说一下你做过哪些性能优化? - 掘金 (juejin.cn)

打包优化

Webpack优化——将你的构建效率提速翻倍 - 掘金 (juejin.cn)

性能优化篇—-Webpack构建速度优化 - SegmentFault 思否

让你的Webpack起飞—考拉会员后台Webpack优化实战 - 知乎 (zhihu.com)

webpack dllPlugin打包体积和速度优化 - 知乎 (zhihu.com)

Webpack 打包优化之速度篇 | 晚晴幽草轩 (jeffjade.com)

多进程并行压缩代码 | 个人博客 (jkfhto.github.io)

Tree-Shaking性能优化实践 - 原理篇 - 掘金 (juejin.cn)

体积减少80%！释放webpack tree-shaking的真正潜力 - 掘金 (juejin.cn)

加速Webpack-缩小文件搜索范围 - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客

通过Scope Hoisting优化Webpack输出 - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客

webpack优化之code splitting - SegmentFault 思否

[译]webpack 4: Code Splitting和chunks切分优化 - 掘金 (juejin.cn)

（译）2019年前端性能优化清单 — 上篇 - 掘金 (juejin.cn)

网络优化

网站性能优化实战——从12.67s到1.06s的故事 - 掘金 (juejin.cn)

浏览器页面资源加载过程与优化 - 掘金 (juejin.cn)

用 preload 预加载页面资源 - 掘金 (juejin.cn)

App内网页启动加速实践：静态资源预加载视角 (qq.com)

腾讯HTTPS性能优化实践 (qq.com)

代码优化

浏览器IMG图片原生懒加载loading=”lazy”实践指南 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

聊聊前端开发中的长列表 - 知乎 (zhihu.com)

再谈前端虚拟列表的实现 - 知乎 (zhihu.com)

浅说虚拟列表的实现原理 · Issue #70 · dwqs/blog · GitHub

设计模式

Javascript设计模式详解 - 龙恩0707 - 博客园 (cnblogs.com)

JavaScript设计模式 - 掘金 (juejin.cn)

JavaScript 中常见设计模式整理 - 掘金 (juejin.cn)

JavaScript 常见设计模式解析 - 掘金 (juejin.cn)

深入 JavaScript 设计模式，从此有了优化代码的理论依据 - 掘金 (juejin.cn)

设计模式之美-前端 - 知乎 (zhihu.com)

Web安全

常见 Web 安全攻防总结 - zoumiaojiang

前端安全系列（一）：如何防止XSS攻击？ - 美团技术团队 (meituan.com)

前端安全系列（二）：如何防止CSRF攻击？ - 美团技术团队 (meituan.com)

前端也需要了解的 JSONP 安全 - 掘金 (juejin.cn)

【面试篇】寒冬求职之你必须要懂的Web安全 - 掘金 (juejin.cn)

谈谈对 Web 安全的理解 - 知乎 (zhihu.com)

程序员必须要了解的web安全 - 掘金 (juejin.cn)

(24 封私信 / 16 条消息) 前端如何给 JavaScript 加密（不是混淆）？ - 知乎 (zhihu.com)

面经

大前端面试宝典 - 图解前端 (lucifer.ren)

CavsZhouyou/Front-End-Interview-Notebook: 前端面试复习笔记 (github.com)

面试分享：两年工作经验成功面试阿里P6总结 - 掘金 (juejin.cn)

牛客最新前端JS笔试百题 - 掘金 (juejin.cn)

22 道高频 JavaScript 手写面试题及答案 - 掘金 (juejin.cn)

20道JS原理题助你面试一臂之力！ - 掘金 (juejin.cn)

「面试题」20+Vue面试题整理 - 掘金 (juejin.cn)

「源码级回答」大厂高频Vue面试题（上） - 掘金 (juejin.cn)

高级前端开发者必会的34道Vue面试题系列（一） - 掘金 (juejin.cn)

「吐血整理」再来一打Webpack面试题 - 掘金 (juejin.cn)

字节跳动最爱考的前端面试题：JavaScript 基础 - 掘金 (juejin.cn)

落魄前端，整理给自己的前端知识体系复习大纲（上篇） - 掘金 (juejin.cn)

在阿里我是如何当面试官的 - 掘金 (juejin.cn)

写给女朋友的中级前端面试秘籍（含详细答案，15k级别） - 掘金 (juejin.cn)

我的前端面试心法（已拿字节offer） - 掘金 (juejin.cn)

怎样判断面试者是否有扎实的前端基础？ - 掘金 (juejin.cn)

中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上) - 掘金 (juejin.cn)

怎样花两年时间去面试一个人 – 刘未鹏 | Mind Hacks

一年半经验如何准备阿里巴巴前端面试 - 掘金 (juejin.cn)

面试分享：两年工作经验成功面试阿里P6总结 - 掘金 (juejin.cn)

总结了17年初到18年初百场前端面试的面试经验(含答案) - 掘金 (juejin.cn)

2018春招前端面试: 闯关记(精排精校) | 掘金技术征文 - 掘金 (juejin.cn)

一年半经验，百度、有赞、阿里前端面试总结 - 掘金 (juejin.cn)

面试分享：专科半年经验面试阿里前端P6+总结(附面试真题及答案) - 掘金 (juejin.cn)

阿里前端攻城狮们写了一份前端面试题答案，请查收 - 掘金 (juejin.cn)

字节跳动今日头条前端面经（4轮技术面+hr面） - 掘金 (juejin.cn)

社区/团队

Web前端导航 (alloyteam.com)

SegmentFault 思否

前端_前端开发_web前端-InfoQ

前端乱炖, 最专业的前端技术内容社区 (html-js.com)

OSCHINA - 中文开源技术交流社区

IT技术 - 简书 (jianshu.com)

热门分享 - 前端头条 (toutiao.io)

美团技术团队 (meituan.com)

其他

JS

重新介绍 JavaScript（JS 教程） - JavaScript | MDN (mozilla.org)

JavaScript 中文开发手册 - 开发者手册 - 云+社区 - 腾讯云 (tencent.com)

Kata Categories | 学习ES6

JavaScript 秘密花园 (bonsaiden.github.io)

Js Tips - A JavaScript tip per day!

练手游戏

Interactive Learning Tools For Front-End Developers — Smashing Magazine

Javascript Challenges Overview | JSchallenger

项目

Vue.js Examples (vuejsexamples.com)

2020年 JavaScript 明星项目 (risingstars.js.org)

(24条消息) github上优秀的源码_Eminem1147的博客-CSDN博客_github源码

nice好文

一个合格(优秀)的前端都应该阅读这些文章 - 掘金 (juejin.cn)

「百毒不侵(六)」月薪从3k到15k，一个普通人的学习路线 - 掘金 (juejin.cn)

(21 封私信 / 67 条消息) 学习JavaScript，有哪些好的博客或者网站推荐？ - 知乎 (zhihu.com)

优秀博主

原创技术博客大联盟 | techblog

阮一峰的网络日志：全部文章（按分类查看） (ruanyifeng.com)

首页 - 廖雪峰的官方网站 (liaoxuefeng.com)

上位者的怜悯 - 博客园 (cnblogs.com)

1. 如何理解前端和 Vue | 被删的前端游乐场 (godbasin.com)

CSS：ChokCoco - 博客园 (cnblogs.com)

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=39z08mfeityc0

CSS基础

基础知识

rem/em

position

布局

选择器

层叠上下文

CSS预处理器

JS基础

基础知识

this

call/apply/bind

Event Loop

原型

闭包/执行上下文/作用域

异步/Promise/async

防抖/节流

深浅拷贝

函数式编程

Service Worker

Web Worker

ES6

Vue

MVVM

双向数据绑定

computed/watch

生命周期

组件

虚拟DOM

模板编译

源码分析

网络

回流、重绘

HTTP

HTTPS

缓存

DNS

TCP

CDN

跨域

经典题

浏览器渲染

工程化

webpack

babel

模板引擎

前端发布

性能监控

性能优化

打包优化

网络优化

代码优化

设计模式

Web安全

面经

社区/团队

其他

JS

练手游戏

项目

nice好文

优秀博主