彻底弄懂JS需要看的文章

给自己做一下总结，此处先记录看过的好文，以后有时间再慢慢用自己的话写出来。

• 写给初中级前端的高级进阶指南（JS、TS、Vue、React、性能、学习规划）
• 冴羽的博客 —— 大佬终究是大佬！！！
• 冴羽的掘金个人主页
• 木易杨 的博客

前端知识点汇总

• xgqfrms-GitHub/前端知识汇总.md
• web前端面试基础题目(含答案)
• 霖呆呆的近期面试128题汇总(含超详细答案) | 掘金技术征文
• 面试分享：两年工作经验成功面试阿里P6总结

计算机基础知识

• 程序员不得不了解的硬核知识大全

计算机网络

• 计算机网络基础知识总结
• 01 | Chrome架构：仅仅打开了1个页面，为什么有4个进程？

TCP/IP

在面试中，计算机网络的TCP三次握手和四次挥手是很常见的问题，但是在实际面试中，面试官会更愿意听到怎样的回答？详细程度是怎样的？

• 为什么TCP连接要三次握手，四次挥手——清晰明了的好文！
• 关于三次握手和四次挥手，面试官想听到怎样的回答？
• 02 | TCP协议：如何保证页面文件能被完整送达浏览器？

HTTP

• 03 | HTTP请求流程：为什么很多站点第二次打开速度会很快？
• 看完这篇HTTP，跟面试官扯皮就没问题了
• （建议精读）HTTP灵魂之问，巩固你的 HTTP 知识体系

DNS

• 一篇让你彻底了解DNS原理及其解析过程

cookie、session、token

• 彻底理解cookie，session，token（转）
• 授权认证登录之 Cookie、Session、Token、JWT 详解

缓存

• HTTP 缓存

浏览器内部揭秘

• [译] 现代浏览器内部揭秘（第一部分）
  • 浏览器的同源策略
  • 站点隔离Site Isolation for web developers
• [译] 现代浏览器内部揭秘（第二部分）
  • MIME 类型嗅探
  • Safe Browsing
  • Cross-Origin Read Blocking for Web Developers
  • Window: beforeunload event
  • 页面生命周期概览Page Lifecycle states and events
  • 页面声明周期 API Page Lifecycle API
  • Service Workers
  • The Service Worker Lifecycle
  • 导航预加载 Speed up Service Worker with Navigation Preloads
• [译] 现代浏览器内部揭秘（第三部分）
  • Overview of the parsing model
  • JavaScript 执行中发生的事情——V8 团队就此发表的演讲和博客文章
  • JavaScript 模块
  • async
  • defer
  • crossorigin
  • Resource Prioritization – Getting the Browser to Help You
  • chrome默认样式
  • Eliminate content repaints with the new Layers panel in Chrome
  • Stick to Compositor-Only Properties and Manage Layer Count
  • Optimize JavaScript Execution
  • WebWorkers: Code Session - Supercharged
• [译] 现代浏览器内部揭秘（第四部分）

浏览器相关问题

• 图解浏览器
• (1.6w字)浏览器灵魂之问，请问你能接得住几个？
  • 浏览器缓存
  • 浏览器的本地存储
  • 从输入URL到页面呈现发生了什么？
    • 网络篇
    • 解析算法篇
    • 渲染过程篇
  • 重绘和回流
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 防抖和节流
  • 图片懒加载

从输入 URL 到页面加载完成，发生了什么？

• DNS 解析
• TCP 连接
• HTTP 请求抛出
• 服务端处理请求，HTTP 响应返回
• 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户

• 04｜导航流程：从输入URL到页面展示，这中间发生了什么？——李兵——前盛大创新院高级研究员
• 从输入URL到渲染页面 -- 全流程
• 从输入URL到页面加载 —— 网络请求篇
• 从输入URL到页面加载 ——页面渲染篇
• （详解）从浏览器输入 URL 到页面展示过程发生了什么？
• web前端性能优化 -- 从浏览器输入url到页面加载完成全过程解析
• 换一个角度分析，网页性能优化
• 「查缺补漏」送你18道浏览器面试题
• 从浏览器原理谈EventLoop与微任务宏任务

跨域问题

• 跨域请求产生错误的原因及处理方法

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

执行上下文/作用域链

• 深入系列目录
  • JavaScript深入之词法作用域和动态作用域
  • JavaScript深入之执行上下文栈
  • JavaScript深入之变量对象
  • JavaScript深入之作用域链
  • JavaScript深入之从ECMAScript规范解读this
  • JavaScript深入之执行上下文
• 一道js面试题引发的思考
• [译] 理解 JavaScript 中的执行上下文和执行栈
• JS执行上下文的两个阶段做了些啥？
• 温故而知新：JS 变量提升与时间死区

闭包

• JavaScript深入之闭包
• [译]发现 JavaScript 中闭包的强大威力
• 我从来不理解JavaScript闭包，直到有人这样向我解释它...
• 破解前端面试（80% 应聘者不及格系列）：从闭包说起
• JavaScript闭包的底层运行机制 —— 这篇文章讲得也太好了吧！！！
• 用自然语言的角度理解JavaScript中的this关键字 —— 跟上一篇同一个作者
• 5分钟内使用React、Webpack与ES6构建应用 —— 跟上一篇同一个作者

this/call/apply/bind

• 用自然语言的角度理解JavaScript中的this关键字 —— 看这一篇其实就够了，写得太好了
• 【建议👍】再来40道this面试题酸爽继续(1.2w字用手整理)
• [译] this（他喵的）到底是什么 — 理解 JavaScript 中的 this、call、apply 和 bind
• JavaScript基础心法——this
• JavaScript深入之从ECMAScript规范解读this
• 端基础进阶（七）：全方位解读this
• 面试官问：JS的this指向
• JavaScript深入之call和apply的模拟实现
• JavaScript基础心法—— call apply bind
• 面试官问：能否模拟实现JS的call和apply方法
• 回味JS基础:call apply 与 bind
• 面试官问：能否模拟实现JS的bind方法
• 不用call和apply方法模拟实现ES5的bind方法

原型/继承

• 深入javascript——构造函数和原型对象 —— 先看这一篇，其中的图片真的好！
• 深入理解 JavaScript 原型 —— 绝对好文！很长！
• JavaScript深入之从原型到原型链 到原型链继承
• 💦【何不三连】做完这48道题彻底弄懂JS继承(1.7w字含辛整理-返璞归真)
• 【THE LAST TIME】一文吃透所有JS原型相关知识点
• 重新认识构造函数、原型和原型链
• JavaScript深入之从原型到原型链
• 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一）
• 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（二）
• 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（三）
• JavaScript 引擎基础：原型优化
• Prototypes in JavaScript
• JavaScript深入之创建对象的多种方式以及优缺点
• 详解JS原型链与继承
• 从__proto__和prototype来深入理解JS对象和原型链
• 代码复用模式
• JavaScript 中的继承：ES3、ES5 和 ES6

Promise、async/await、generator

• 【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理)
• 我终于弄懂了Promise
• 剖析Promise内部结构，一步一步实现一个完整的、能通过所有Test case的Promise类

setTimeout、setInterval

• JavaScript定时器与执行机制详细介绍

fetch、axios

• 为什么有了 XMLHttpRequest，还要设计一套 fetch API?

JS基础

• 从一次连续赋值体验搞懂JavaScript存储与赋值
• (建议收藏)原生JS灵魂之问, 请问你能接得住几个？(上)
• (建议精读)原生JS灵魂之问(中)，检验自己是否真的熟悉JavaScript？
• (2.4w字,建议收藏)😇原生JS灵魂之问(下), 冲刺🚀进阶最后一公里(附个人成长经验分享)
• 这些一行 JS 实现功能的代码，让你看起来像一个前端专家

性能优化

• 浅谈JavaScript性能优化

防抖和节流

• JavaScript专题之跟着underscore学防抖
• JavaScript专题之跟着 underscore 学节流

像素、分辨率、屏幕适配和布局方案

• 关于移动端适配，你必须要知道的
• 详解前端响应式布局、响应式图片，与自制栅格系统
• 基于媒体查询和 rem 的响应式布局实践
• 从网易与淘宝的font-size思考前端设计稿与工作流
• 前端响应式布局原理与方案（详细版）
• 移动端适配总结（长文） - 掘金
• 面试官：你了解过移动端适配吗？
• 骚年你的屏幕适配方式该升级了!-今日头条适配方案
• 今日头条屏幕适配方案落地研究
• Web移动端最强适配方案总结，没想到这么好用！
• 深入浅出移动端适配（总结版）
• 移动端适配总结
• 移动端适配方案-让分辨率来的更猛烈些吧！
• 移动端适配以及百分比布局与rem比较
• 浅谈-web屏幕适配的解决方案
• 再看CSS长度单位使用，做到胸有成竹
• 响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
• 前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
• 看完这篇你再也不用担心屏幕适配的问题啦 （EasySmallWidth版本发布）
• 关注巧用rem实现数据可视化大屏

CSS

flexbox

• 14 张有趣深动图解 FlexBox ！

屏幕适配

• css img 等比例自动缩放

动画

• 精细控制transition细节 - 实现一个活泼的弹框

3d

• 揭秘 3D 互动技术在蚂蚁数字金融的应用实战

移动端

• 中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

flutter

• Flutter在流式场景下的架构设计与应用

数据库

• 炸裂！MySQL 82 张图带你飞
• 扛不住了，老大让我上分库分表方案

React

• [译] 以面试官的角度来看 React 工作面试
• 「前端工程化」从0-1搭建react，ts脚手架（1.2w字超详细教程）
• 还在用 redux 全家桶么? 不如试试更轻量更简单的结构化 hook?

---