浏览器工作原理与实践专栏 40 篇学习笔记合集

Posted 2022-02-09 凯小默

说明

这些文章只是笔者学习记录的笔记，仅供参考。请支持正版的专栏。

目录

1. Chrome架构：仅仅打开了1个页面，为什么有4个进程？
2. TCP协议：如何保证页面文件能被完整送达浏览器？
3. HTTP 请求流程：为什么很多站点第二次打开速度会很快？
4. 导航流程：从输入URL到页面展示，这中间发生了什么？
5. 渲染流程：HTML、CSS和JavaScript，是如何变成页面的？
6. 变量提升：JavaScript代码是按顺序执行的吗？
7. 调用栈：为什么JavaScript代码会出现栈溢出？
8. 块级作用域：var缺陷以及为什么要引入let和const？
9. 作用域链和闭包 ：代码中出现相同的变量，JavaScript引擎是如何选择的？
10. this：从 JavaScript 执行上下文的视角讲清楚 this
11. 栈空间和堆空间：数据是如何存储的？
12. 垃圾回收：垃圾数据是如何自动回收的？
13. 编译器和解释器：V8是如何执行一段JavaScript代码的？
14. 消息队列和事件循环
15. WebAPI：setTimeout 是如何实现的？
16. WebAPI：XMLHttpRequest是怎么实现的？
17. 宏任务和微任务
18. Promise 到底解决了什么问题呢？
19. JavaScript 引擎是如何实现 async / await 以同步的方式来编写异步代码的？
20. Chrome开发者工具：利用网络面板做性能分析
21. DOM树：JavaScript是如何影响DOM树构建的？
22. 渲染流水线：CSS如何影响首次加载时的白屏时间？
23. 分层和合成机制：为什么CSS动画比JavaScript高效？
24. 页面性能：如何系统地优化页面？
25. 虚拟DOM和实际的DOM有何不同？
26. 渐进式网页应用（PWA）：它究竟解决了Web应用的哪些问题？
27. WebComponent
28. HTTP/1：HTTP性能优化
29. HTTP/2：如何提升网络速度？
30. HTTP/3
31. 同源策略：为什么XMLHttpRequest不能跨域请求资源？
32. 跨站脚本攻击（XSS）：为什么Cookie中有HttpOnly属性？
33. CSRF攻击：为什么Cookie中有SameSite属性？
34. 安全沙箱
35. HTTPS
36. 浏览上下文组：如何计算Chrome中渲染进程的个数？
37. 任务调度：有了setTimeOut，为什么还要使用 requestAnimationFrame？
38. 加载阶段性能：使用 Audits（Lighthouse） 来优化 Web 性能
39. 页面性能工具：如何使用 Performance？
40. 性能分析工具：如何分析 Performance 中的 Main 指标？（完结）