2 深入学习.md

JS 深入

1. 浅谈 instanceof 和 typeof 的实现原理

   浅谈 instanceof 和 typeof 的实现原理 https://juejin.im/post/5b0b9b9051882515773ae714

2. Symbol

   Symbol http://es6.ruanyifeng.com/#docs/symbol

3. JavaScript 中的变量在内存中的具体存储形式

   前端基础进阶：详细图解 JavaScript 内存空间 https://juejin.im/entry/589c29a9b123db16a3c18adf

4. 理解 XSS 和 CSRF 原理

   浅说 XSS 和 CSRF https://juejin.im/entry/5b4b56fd5188251b1a7b2ac1

   Web 安全的三个攻防姿势 https://juejin.im/post/59e6b21bf265da43247f861d

   前端安全系列（一）：如何防止 XSS 攻击？ https://tech.meituan.com/2018/09/27/fe-security.html

   浅谈 CSRF 攻击方式 https://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html

5. 理解 es6 class 构造以及继承的底层实现原理

   ES6 创建类的基本语法和继承实现原理 https://juejin.im/post/5ab31129f265da2378402cb3

6. 理解 this

   this、apply、call、bind https://juejin.im/post/59bfe84351882531b730bac2

7. 作用域和闭包

   作用域与词法作用域 https://juejin.im/post/5afb0ae56fb9a07aa2138425

   闭包详解 https://juejin.im/post/5b081f8d6fb9a07a9b3664b6

8. try catch finally 语句执行原理

   try 里面放 return，finally 还会执行吗？ https://jdsheng.cn/2019/03/25/JavaScript%E6%89%A7%E8%A1%8C%EF%BC%88%E5%9B%9B%EF%BC%89%EF%BC%9Atry%E9%87%8C%E9%9D%A2%E6%94%BEreturn%EF%BC%8Cfinally%E8%BF%98%E4%BC%9A%E6%89%A7%E8%A1%8C%E5%90%97%EF%BC%9F/

9. EventLoop

   JavaScript 运行机制详解：再谈 Event Loop http://www.ruanyifeng.com/blog/2014/10/event-loop.html

   JavaScript：彻底理解同步、异步和事件循环(Event Loop) https://segmentfault.com/a/1190000004322358

   深入探究 eventloop 与浏览器渲染的时序问题 jin5354/404forest#61

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

10. 微任务、宏任务与 EventLoop

    微任务、宏任务与 Event-Loop https://juejin.im/post/5b73d7a6518825610072b42b

    Tasks, microtasks, queues and schedules https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

11. 如何处理跨域

    前端常见跨域解决方案 https://segmentfault.com/a/1190000011145364

    不要再问我跨域的问题了 https://segmentfault.com/a/1190000015597029

12. Execution Context

    深入理解 JavaScript 执行上下文和执行栈 https://juejin.im/post/5c77365c6fb9a049b2228e4a#heading-0

13. 异步

    异步解决方案的发展历程以及优缺点 frontend9/fe9-interview#24

14. Promise

    Promise 原理讲解 https://juejin.im/post/5aa7868b6fb9a028dd4de672

15. 继承

    深入 JavaScript 继承原理 https://juejin.im/post/5a96d78ef265da4e9311b4d8

    JavaScript 深入之继承的多种方式和优缺点 mqyqingfeng/Blog#16

16. 内存泄漏

    4 种 JavaScript 内存泄漏浅析及如何用谷歌工具查内存泄露 wengjq/Blog#1

17. Javascript 创建对象的几种方式

    JavaScript 深入之创建对象的多种方式以及优缺点 mqyqingfeng/Blog#15

浏览器

1. 浏览器工作原理

   浏览器的工作原理 https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

   How browsers work http://taligarsiel.com/Projects/howbrowserswork1.htm

   浏览器渲染详细过程：重绘、重排和 composite 只是冰山一角 https://juejin.im/entry/590801780ce46300617c89b8

   你真的了解回流和重绘吗 chenjigeng/blog#4

2. 浏览器缓存

   浏览器缓存知识小结及应用 https://www.cnblogs.com/lyzg/p/5125934.html

   深入理解浏览器的缓存机制 https://www.jianshu.com/p/54cc04190252

3. 视口宽高、位置与滚动高度

   JavaScript 视口宽高、元素位置、滚动高度、尺寸属性 https://www.jianshu.com/p/62f691f4811c

4. DOM 操作成本到底高在哪儿？

   DOM 操作成本到底高在哪儿？ https://segmentfault.com/a/1190000014070240?utm_source=index-hottest

5. 从输入 URL 到页面加载发生了什么？

   【原】老生常谈-从输入 url 到页面展示到底发生了什么 http://www.cnblogs.com/xianyulaodi/p/6547807.html

HTTP 协议

1. HTTPS

   HTTPS 详解 https://segmentfault.com/a/1190000011675421

   HTTPS 工作原理 https://www.cnblogs.com/xrq730/p/5041921.html

   HTTPS 工作原理 https://cattail.me/tech/2015/11/30/how-https-works.html

   图文还原 HTTPS 原理，架构师必读！ https://mp.weixin.qq.com/s?__biz=MzI3NjU2ODA5Mg==&mid=2247483985&idx=1&sn=0b6de989219032d64648785946a974a4&chksm=eb72c322dc054a340219898f0c78a88cf0728f3562d47e306bfc912a304f3c13063e4836a5d3&mpshare=1&scene=23&srcid=0731o25oAogd05GGEfu9GW4b#rd

2. HTTP 协议

   HTTP 协议入门 http://www.ruanyifeng.com/blog/2016/08/http.html

   深入理解 HTTP 协议 https://juejin.im/post/5ba65296f265da0ac8493503#heading-0

   HTTP 协议 https://juejin.im/post/5d032b77e51d45777a126183

3. 公钥和私钥

   理解公钥与私钥 https://songlee24.github.io/2015/05/03/public-key-and-private-key/

   数字签名是什么？ http://www.ruanyifeng.com/blog/2011/08/what_is_a_digital_signature.html

4. http 状态码有那些？分别代表是什么意思？

   http 状态码是什么，有什么用，在哪里查看，分别代表什么意思？ https://juejin.im/post/590082e6a22b9d0065be1a5c

5. HTTP 请求报文和 HTTP 响应报文

   HTTP 请求报文和 HTTP 响应报文 https://www.cnblogs.com/biyeymyhjob/archive/2012/07/28/2612910.html

   一篇文章带你详解 HTTP 协议（网络协议篇一） https://www.jianshu.com/p/6e9e4156ece3

6. http1.1 时如何复用 tcp 连接

   HTTP 协议篇(一)：多路复用、数据流 https://www.cnblogs.com/XiongMaoMengNan/p/8425724.html

7. HTTP Header 详解

   https://kb.cnblogs.com/page/92320/

8. Token

   基于 Token 的身份验证 https://ninghao.net/blog/2834

   彻底理解 cookie，session，token https://www.cnblogs.com/moyand/p/9047978.html

9. TCP 协议

   一篇文章带你熟悉 TCP/IP 协议（网络协议篇二） https://www.jianshu.com/p/9f3e879a4c9c

   通俗大白话来理解 TCP 协议的三次握手和四次分手 jawil/blog#14

HTML

1. placeholder

2. HTML5 离线缓存原理

   HTML5 离线缓存-manifest 简介 http://yanhaijing.com/html/2014/12/28/html5-manifest/

   HTML5 离线存储 初探 http://www.cnblogs.com/chyingp/archive/2012/12/01/explore_html5_cache.html

   有趣的 HTML5：离线存储 https://segmentfault.com/a/1190000000732617

3. placeholder

4. iframe 异步加载技术及性能

   iframe 异步加载技术及性能 http://www.cnblogs.com/beiyuu/archive/2011/07/18/iframe-tech-performance.html

5. Page Visibility API

   HTML5 页面可见性接口应用 https://www.helloweba.net/javascript/390.html

   Page Visibility(页面可见性) API 介绍、微拓展 http://www.zhangxinxu.com/wordpress/2012/11/page-visibility-api-introduction-extend/

6. Web Worker

   web worker 详解 http://xgfe.github.io/2017/05/03/LexHuang/web-worker/

   深入 HTML5 Web Worker 应用实践：多线程编程 https://www.ibm.com/developerworks/cn/web/1112_sunch_webworker/

7. PostMessage

   html5 API postMessage 跨域详解 http://blog.xieliqun.com/2016/08/25/postMessage-cross-domain/

   Window.postMessage() https://developer.mozilla.org/en-US/docs/Web/API/Window

8. requestAnimationFrame

   浅析 requestAnimationFrame https://taobaofed.org/blog/2017/03/02/thinking-in-request-animation-frame/

9. HTML5 File API

   基于 html5 File API 的文件操作 https://segmentfault.com/a/1190000006600936

   通过 File API 使用 JavaScript 读取文件 https://www.html5rocks.com/zh/tutorials/file/dndfiles/

10. HTML meta 标签

    常见的 meta 标签及详细解说 https://www.jianshu.com/p/ce6edbe8825d HTML-meta 标签详解 https://www.jianshu.com/p/30bf38c799e4

CSS

1. CSS Animation

   使用 css 实现一个持续的动画效果 http://www.cnblogs.com/gaoxuerong123/p/8540554.html

2. CSS3 Box-sizing

   CSS3 box-sizing 详解https://www.cnblogs.com/iflygofy/p/6323275.html

3. CSS 选择器及其优先级

   CSS 优先级计算规则 http://www.cnblogs.com/wangmeijian/p/4207433.html

4. 居中

   盘点 8 种 CSS 实现垂直居中水平居中的绝对定位居中技术 https://blog.csdn.net/freshlover/article/details/11579669

   CSS 实现垂直居中 6 种方法 http://www.cnblogs.com/Yirannnnnn/p/4933332.html http://www.cnblogs.com/yugege/p/5246652.html

5. 布局

   一个满屏品字布局怎么设计？ https://blog.csdn.net/sjinsa/article/details/70903940

   CSS 常见布局方式 https://juejin.im/post/599970f4518825243a78b9d5

   CSS 布局解决方案（终结版） https://segmentfault.com/a/1190000013565024?utm_source=channel-hottest#articleHeader2

   CSS 布局说——可能是最全的 https://segmentfault.com/a/1190000011358507#articleHeader0

6. 轮播图

   原生 JS 实现轮播图 https://juejin.im/post/5b8d4171f265da436e74e5c1

7. 移动端适配

   关于移动端适配，你必须要知道的 https://mp.weixin.qq.com/s/V3UpVZH8AWfSScIRAsr2dw

   移动端适配方案(上下) riskers/blog#17

8. Containing Block

   Layout and the containing block https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

   KB008: 包含块( Containing block ) http://w3help.org/zh-cn/kb/008/

9. BFC

   前端精选文摘：BFC 神奇背后的原理 http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

   理解 CSS 中 BFC https://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html

10. 浏览器是怎样解析 CSS 选择器的

    CSS 选择器从右向左的匹配规则 http://www.cnblogs.com/zhaodongyu/p/3341080.html

11. 元素竖向的百分比设定是相对于容器的高度吗

    https://segmentfault.com/a/1190000012955996

12. 全屏滚动

    H5 全屏滑动 https://segmentfault.com/a/1190000003691168

    用 ES6 写全屏滚动插件 https://juejin.im/post/5aeef41cf265da0ba0630de0

13. 视差滚动

    小 tip: 纯 CSS 实现视差滚动效果 http://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/

    视差滚动(Parallax Scrolling)效果的原理和实现 http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html

    Alloy Team 的《视差滚动的爱情故事》 http://www.alloyteam.com/2014/01/parallax-scrolling-love-story/

14. 理解 line-height

    深入理解 CSS 中的行高 http://www.cnblogs.com/rainman/archive/2011/08/05/2128068.html

    我对 line-height 及 vertical-align 的一点理解 https://segmentfault.com/a/1190000013031367

    css 行高 line-height 的一些深入理解及应用 https://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

15. Sticky Footer

    Sticky Footer，完美的绝对底部 https://aotu.io/notes/2017/04/13/Sticky-footer/index.html

    Sticky Footer, Five Ways https://css-tricks.com/couple-takes-sticky-footer/

16. CSS3 Transform Perspective

    perspective https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective

    CSS3 实践之摩天轮式图片轮播+3D 正方体+3D 标签云 标签云 https://www.bbsmax.com/A/QV5Z1xv6Jy/

17. PNG 图片压缩原理

    PNG 图片压缩原理 airuikun/front-core#1

React

1. 组件之间如何通信

   React 中组件通信的几种方式 https://juejin.im/post/5a2cbc57f265da431523d6de

   React 组件间通讯 http://taobaofed.org/blog/2016/11/17/react-components-communication/

2. 如何配置 React-Router

   路由配置 https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html

   React Router 使用教程 http://www.ruanyifeng.com/blog/2016/05/react_router.html

   单页面应用路由实现原理 youngwind/blog#109

   从路由原理出发，深入阅读理解 react-router 4.0 的源码 forthealllight/blog#26

3. React 事件机制

   React 事件系统分析与最佳实践 https://zhuanlan.zhihu.com/p/27132447

   React 事件机制 - 源码概览（上） https://juejin.im/post/5bd32493f265da0ae472cc8e

4. React 怎么做数据的检查和变化

   React 高效渲染策略 fi3ework/blog#15

5. placeholder

6. 虚拟 DOM & diff 原理

   深度剖析：如何实现一个 Virtual DOM 算法 livoras/blog#13

   React 源码剖析系列 － 不可思议的 react diff https://zhuanlan.zhihu.com/p/20346379

7. React 中 keys 的作用是什么？

   React 技术内幕 key 带来了什么 https://juejin.im/post/59abb01c518825243f1b6dad

8. WebView 和原生是如何通信

   IOS、Android 与 H5 通信-JsBridge 原理(总结) https://juejin.im/post/5abfbb7251882555731c434a

   好好和 h5 沟通！几种常见的 hybrid 通信方式 http://zjutkz.net/2016/04/17/%E5%A5%BD%E5%A5%BD%E5%92%8Ch5%E6%B2%9F%E9%80%9A%EF%BC%81%E5%87%A0%E7%A7%8D%E5%B8%B8%E8%A7%81%E7%9A%84hybrid%E9%80%9A%E4%BF%A1%E6%96%B9%E5%BC%8F/

9. RN 遇到的兼容性问题

   React+RN 开发过程中的一些问题总结 amandakelake/blog#52

10. RN 如何实现一个原生的组件

    React Native 封装原生 UI 组件(iOS) https://www.jianshu.com/p/e16c91acce03

    React Native 集成到原生项目 https://www.jianshu.com/p/3dc9d70a790f

    ReactNative 之原生模块开发并发布——iOS 篇 http://www.liuchungui.com/blog/2016/05/02/reactnativezhi-yuan-sheng-mo-kuai-kai-fa-bing-fa-bu-iospian/

11. RN 的原理，为什么可以同时在安卓和 IOS 端运行

    React Native for Android 原理分析与实践：实现原理 https://juejin.im/post/5a6460f8f265da3e4f0a446d

12. RN 如何调用原生的一些功能

    RN 调用原生流程总结 https://www.jianshu.com/p/b078ab50baf3

13. RN 和原生通信

    React Native 与 iOS 和 Android 通信 https://juejin.im/post/5c6ca781f265da2da8356c81

    ReactNative 与原生代码的通信(iOS 篇) https://www.jianshu.com/p/99c32dc5cf29

    React Native 通信机制详解 http://blog.cnbang.net/tech/2698/

14. React 中 refs 的作用是什么？

    React 之 ref 详细用法 https://segmentfault.com/a/1190000008665915

15. React 中有三种构建组件的方式

    React 创建组件的三种方式及其区别 https://cloud.tencent.com/developer/article/1165838

16. 调用 setState 之后发生了什么？

    你真的理解 setState 吗？ https://juejin.im/post/5b45c57c51882519790c7441

    React setState 详解 https://github.com/PeterChen1997/FightForOffer/wiki/02-React-setState%E8%AF%A6%E8%A7%A3

    setState 源码分析，流程详解 https://cisy.me/setState/

17. 为什么建议传递给 setState 的参数是一个 callback 而不是一个对象

    https://juejin.im/post/58cfcf6e44d9040068478fc6

18. (在构造函数中)调用 super(props) 的目的是什么

    React 构造函数中为什么要写 super(props) https://blog.csdn.net/huangpb123/article/details/85009024

19. 在 React 当中 Element 和 Component 有何区别？createElement 和 cloneElement 有什么区别？

    React 中元素与组件的区别 https://segmentfault.com/a/1190000008587988

    比较与理解 React 的 Components，Elements 和 Instances creeperyang/blog#30

20. Controlled Component 与 Uncontrolled Component 之间的区别是什么？

    React 中受控与非受控组件 https://segmentfault.com/a/1190000012404114

状态管理

1. Vuex、Flux、Redux、Redux-saga、Dva、MobX

   Vuex、Flux、Redux、Redux-saga、Dva、MobX https://zhuanlan.zhihu.com/p/53599723

2. React Hooks

   30 分钟精通 React Hooks https://juejin.im/post/5be3ea136fb9a049f9121014

3. Redux

   完全理解 redux（从零实现一个 redux） brickspert/blog#22

   Redux 入坑进阶-源码解析 https://github.com/ecmadao/Coding-Guide/blob/master/Notes/React/Redux/Redux%E5%85%A5%E5%9D%91%E8%BF%9B%E9%98%B6-%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90.md

4. Redux 如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理

   用 Redux 来进行组件间通讯 https://segmentfault.com/a/1190000008411613

   彻底弄懂 React-Redux 组件通信 https://blog.csdn.net/DFF1993/article/details/80410154

5. Redux 中间件是什么东西，接受几个参数（两端的柯里化函数）

   redux 中间件原理及实现 https://www.jianshu.com/p/8c2a37247020

6. Redux 中异步的请求怎么处理

   Redux 异步流最佳实践 https://juejin.im/entry/59fd15b951882534af2552af

7. React-Redux

   React-Redux 源码分析 https://juejin.im/post/59cb5eba5188257e84671aca

设计模式

1. 观察者模式

   观察者模式 vs 发布-订阅模式 https://juejin.im/post/5a14e9edf265da4312808d86

前端工程

1. 简单实现项目代码按需加载，例如 import { Button } from 'antd'，打包的时候只打包 button

   airuikun/technology-blog#9

2. Webpack HMR 原理解析

   Webpack HMR 原理解析 https://zhuanlan.zhihu.com/p/30669007

3. Javascript 模块化

   Javascript模块化编程（一）：模块的写法 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

   探索 JavaScript 中的依赖管理及循环依赖 https://juejin.im/post/5a6008c2f265da3e5033cd93

   很全很全的JavaScript的模块讲解 https://segmentfault.com/a/1190000012464333

正则表达式

正则表达式 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

javascript 正则表达式 https://www.cnblogs.com/rubylouvre/archive/2010/03/09/1681222.html

JavaScript 正则进阶之路——活学妙用奇淫正则表达式 jawil/blog#20

Git

待完善

Reference

1. Weekly-FE-Interview https://github.com/airuikun/Weekly-FE-Interview

2. 前端进阶系列 https://github.com/yygmind/blog

3. Daily-Interview-Question https://github.com/Advanced-Frontend/Daily-Interview-Question

4. Jony 的博客，记录学习工作的点点滴滴 https://github.com/forthealllight/blog

5. 【面试篇】寒冬求职季之你必须要懂的原生 JS(上) https://juejin.im/post/5cab0c45f265da2513734390