docs: 浏览器
xuwu
parent
f856fd609d
commit
c46ef41f24
21
README.md
21
README.md
|
|
@ -436,30 +436,39 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合
|
|||
|
||||
### 架构
|
||||
|
||||
- [Inside look at modern web browser](https://developers.google.com/web/updates/2018/09/inside-browser-part1) 另有[中文翻译](https://xie.infoq.cn/article/5d36d123bfd1c56688e125ad3)
|
||||
|
||||
- [Inside look at modern web browser](https://developers.google.com/web/updates/2018/09/inside-browser-part1)，这是一个 Google 出的系列专栏，共有四篇文章，内容上到浏览器的整体架构，下至页面的渲染规则都说了一遍，另有 [中文翻译](https://cloud.tencent.com/developer/article/1806716)
|
||||
|
||||
### 整体流程
|
||||
|
||||
- [浏览器的工作原理：新式网络浏览器幕后揭秘](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/)
|
||||
- [浏览器工作原理：从 URL 输入到页面展现到底发生了什么？](https://www.jianshu.com/p/d616d887953a)
|
||||
- [浏览器的工作原理：新式网络浏览器幕后揭秘](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/)，这虽然是一篇 11 年的文章，但是内容在如今也不过时，文章广为流传
|
||||
- [当···时发生了什么？](https://github.com/skyline75489/what-happens-when-zh_CN)，经典面试题，文中对于这个流程里的相关内容力求尽可能具体，不遗漏任何细节
|
||||
- [从输入 URL 到页面加载完成的过程中都发生了什么事情？](https://fex.baidu.com/blog/2014/05/what-happen/)，这篇文章涉及了大量网络及硬件知识
|
||||
|
||||
### 渲染相关
|
||||
|
||||
- [浏览器的渲染原理简介](https://coolshell.cn/articles/9666.html)，左耳朵耗子出品，如果上文「浏览器的工作原理：新式网络浏览器幕后揭秘」觉得太长不看或者看完觉得没看懂什么，那么可以来阅读下本文，起码能从中学会一些能用在工作上的东西
|
||||
- [浏览器的回流与重绘 (Reflow & Repaint)](https://juejin.cn/post/6844903569087266823)
|
||||
|
||||
### JS 执行机制
|
||||
|
||||
- [从浏览器多进程到 JS 单线程，JS 运行机制最全面的一次梳理](https://segmentfault.com/a/1190000012925872)
|
||||
- [从浏览器多进程到 JS 单线程，JS 运行机制最全面的一次梳理](https://segmentfault.com/a/1190000012925872)，超长文，这篇文章能让你对进程线程，浏览器多进程、浏览器内核多线程、JS 单线程、JS 运行机制有个不错的理解
|
||||
|
||||
### 缓存
|
||||
|
||||
- [彻底理解浏览器的缓存机制](https://juejin.cn/post/6844903593275817998)
|
||||
- [文档](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching)
|
||||
- [彻底理解浏览器的缓存机制](https://juejin.cn/post/6844903593275817998)，浏览器缓存机制与性能优化息息相关
|
||||
|
||||
### Devtools
|
||||
|
||||
- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)，Google 出的 DevTools 的使用说明书，对于每个功能的使用都有详细的介绍，看啥文章都不如看这个
|
||||
- [Chrome_Devtools_Tricks](https://github.com/dendoink/FrontendWingman/tree/master/Chrome_Devtools_Tricks)，介绍了 Chrome DevTools 的使用技巧，从不同的情景来说明应该如何搭配使用 Chrome DevTools 中的小技巧，适合英文不怎么好的读者阅读
|
||||
|
||||
### 浏览器安全
|
||||
|
||||
- [文档](https://developer.mozilla.org/en-US/docs/Web/Security)
|
||||
- [一文读懂 Web 安全](https://segmentfault.com/a/1190000023396707)，简单介绍了一些前端需要注意的安全知识
|
||||
- [the-book-of-secret-knowledge](https://github.com/trimstray/the-book-of-secret-knowledge)，如果你对安全领域有兴趣，可以阅读下这个仓库的内容
|
||||
|
||||
## 性能优化
|
||||
|
||||
性能优化与用户体验密切相关，是前端进阶中必不可少的一部分。
|
||||
|
|
|
|||
Loading…
Reference in New Issue