translate
console.info 本文翻译自 Google 的官方文档，该系列共 4 篇文章，从内部观察现代浏览器 (Chrome)，同时解答了浏览器的内部架构，讲述了浏览器从输入 url 到页面呈现的全过程。 原文链接: inside-browser-part2 前言 这是 从内部观察现代浏览器 (Chrome) 系列文章的第二篇，在上一篇文章中，我们了解了浏览器的组成，以及如何将任务分配到不同的进程 & 线程。在这篇文章中，我们将深入了解：为了将一个 web 页面呈现到浏览器上，各各不同的进程 & 线程是如何进行协作的。 浏览器都会有这个简单的场景：用户在导航栏里输入 url ，接着浏览器到对应的服务器获取数据并将页面内容呈现到浏览器上。在这篇文章中，我们将了解用户请求一个站点，浏览器准备去渲染页面这个过程，也就是导航。 导航始于 Browser 进程 我们在第一篇文章( CPU、GPU、内存以及多进程架构 )中提到过，
translate
console.info 本文翻译自 Google 的官方文档，该系列共 4 篇文章，从内部观察现代浏览器 (Chrome)，同时解答了浏览器的内部架构，讲述了浏览器从输入 url 到页面呈现的全过程。 原文链接: inside-browser-part1 前言 该篇文章作为本系列的第一篇，我们先来了解下关于计算机的核心术语和 Chrome 的多进程架构模型。 计算机的核心 - CPU & GPU 在了解浏览器是如何运行之前，我们必须对它所处的运行环境有所了解，毕竟浏览器是基于这些硬件的。 CPU 中央处理器 CPU (Central Processing Unit) 是计算机的大脑，一个 CPU 核心就像是一个员工，能逐个处理分配的任务。它可以接收数学、艺术在内的所有任务，并将任务的处理结果返回给任务的发布者。 曾经大多数的 CPU 是单核的，而目前，我们经常使用多核的 CPU ，多核
translate
console.info 本文翻译自 sessionstack.com，该系列共 19 篇文章，解释了 JavaScript 是如何在浏览器中工作，深入到了 JavaScript 解释器的工作原理，以及 JavaScript 技术实现细节。 原文链接: How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code 前言 几周前，我们开始了系列：深入研究 JavaScript 及其工作原理。我们认为：通过了解 JavaScript 的组成以及这些组成如何一起发挥作用，就将能够编写更好的代码和应用。 该系列的第一篇文章着重介绍了 JavaScript 的引擎、运行时和调用堆栈。这篇文章将深入探讨 Google
translate
console.info 本文翻译自 sessionstack.com，该系列共 19 篇文章，解释了 JavaScript 是如何在浏览器中工作，深入到了 JavaScript 解释器的工作原理，以及 JavaScript 技术实现细节。 原文链接: How JavaScript works: an overview of the engine, the runtime, and the call stack 前言 伴随着 JavaScript 越来越流行，越来越多的领域都能看到它的身影比如：前端、后端、APP 混合应用程序、嵌入式设备等。 该篇文章是本系列文章的第一篇，旨在深入探讨 JavaScript 及其工作方式。我们认为：通过了解 JavaScript 的组成以及这些组成如何一起工作，
browser
前言 JS 的本质？复读机？忍者！ “躺好吧！”js 老大拿起一旁的咖啡，对函数说道。 “好！” js 老大按下工作台旁的按钮，函数眼中射出两道光芒，投在了工作台前的白幕。工作台一旁，出现了一个小盆，里面空空如也。 “来吧，开始执行！”老大狠狠的抿了一口手中的咖啡，按下了工作台侧边的按钮。 嘿！你好 工作台上方的白幕上出现了函数保存的第一行代码： let num1 = 1; 老大大手一挥，造了个新数据：1，分配到了变量大厅的 0x007 号单间，于此同时工作台旁的小盆内出现了一个身影，头上标着 num1，身上写着 0x007。 “嘿！小不点，你好呀！”老大对刚出现的身影挥了挥手。 “你才是小不点！” num1 挥了挥那只小手，呛了老大一句。 老大嘿嘿一笑，摇了摇头。“不管你了，继续执行！
browser
烦死了！ “你说你们人类烦不烦！前几天就一直在打开这个网页，今天又打开了！这个网页啊！” 说着 javascript 老大 拍了拍自己的脑袋，叹道：“哎，这个网页的 javascript 执行任务，我实在是不想接了！这样子下去，我的头发可不保咯！” “哎！算了！谁让我不是浏览器的老大呢，干活，干活！” javascript 老大拿起一旁的的 javascript 语法解释器，将 html 解析器 送过来的 javascript 文本解释并执行了起来。 不一会，空荡荡的变量大厅开始有了声响，声音逐渐变的嘈杂起来，甚至传出了吵闹声！ 执行大厅的大屏幕上也充斥着当前执行大厅各种各样的信息。 焦急 “叮铃 ~ 叮铃 ~ 叮铃 ~ ” 一旁的电话突然响了起来，js 老大顺手按下了免提。 “怎么这么慢啊！这都过去好几秒了！我这边还等着解析 html 呢！” 电话一头穿来了
browser
警告 “警告！警告！警告！” JavaScript 执行大厅传出了刺耳的警告声。 “报告：内存即将溢出，请及时清理无效的内存占用，释放资源！” 伴随着阵阵的警告铃声，大厅正中的大屏幕上显示出了警告信息。 “什么情况？这页面才打开了一会会，内存的消耗就这么大？这都已经去了好几次了！” JavaScript 主线程，也就是 JavaScript 执行大厅的老大疑惑的说道：“看来又得去变量大厅瞧瞧了！” 说着，JavaScript 主线程放下了手头的工作，赶忙往 变量大厅 走去。 变量大厅 “挤死了，你过去点！” 还未到 变量大厅 的 JavaScript 老大远远就听到了这骂骂咧咧的声音。 “不行啊，那边已经挤满了变量！” “挤一挤啊，我这半只脚还在外面呢！” “什么！你在说一遍！太吵了听不清！” JavaScript 老大发现事情即将恶化，要是在不及时清理的话，这些变量就要反了，下意识的 JavaScript 主线程跑了起来。
browser
还能更快！ “咚咚咚” 浏览器老大的门被敲响了三次，“谁啊！” “我！” TCP 喊道，“还有我！” HTTP 随后接道。 “进来吧，都有什么事啊？” 说着，浏览器老大放下了手头的工作。 “你来说吧！毕竟是你想到的。” TCP 对 HTTP 说道。 “那我就不客气了！老大，还记得之前提的让请求变快的方式吗？” “当然，首先是缓存，然后是长连接，接着你们自己还定了个 pipelining 对吧？怎么啦？难不成又有新发现！” 浏览器老大两眼开始放光。 “emmm 那个 pipelining 不是很好用。不过确实，我们有新发现！这几天，我和 TCP 仔仔细细的研究了下发现还可以提升，这不是过来和你讨论讨论！” HTTP 显得有点兴奋。 回忆 故事开始在一周前。 “TCP 你提的这个 pipelining
browser
来客 时间定格在早上 6 点，伴随着 “哒哒哒” 的声响，浏览器地址栏出现了 https://breeze.red 浏览器知道，又是一个早高峰来袭。 “各部门就绪！” 浏览器老大，一声令下，各部门都开始做起了准备工作。 “去 HTTP 服务部，记住你的请求方式是 GET，还有这些请求头也一起拿走。” 伴随着 Enter 的输入，浏览器老大对新生成的 URL 说道。 “浏览器老大让我来找你！” URL 飞奔到我的办公室说道。 “好，请求方式？” 我一看时间，早上 6 点，知道早高峰即将来临，赶忙说道。 “GET” “请求头有吗？” “有！URL 拿出一个袋子说道。” “OK” 说着，我拿起放在一旁的麻醉针，一针下去，URL
browser
圆桌会议 “又到了一月一次的总结大会，大家说说最近工作上出现的问题吧。” 浏览器老大坐在圆桌最前端，说道：“好意见赶紧提，吐槽也可以说。” “我！我！我！” TCP 喊道。 “嗯，你说。” “上次你们优化请求，怎么没叫上我呢？对于请求速度优化我也有点想法！” TCP 说道。 “上次啊，我其实也就是到 HTTP 那儿抱怨了一句，主要还是 HTTP 和他服务器的朋友一起弄好的。” 浏览器老大看了 HTTP 一眼，眼中满是得意，转头看向 TCP 说道：“说说你的想法吧。” “上次你们弄缓存时，我也仔细的查看了一下通过我发送的报文，总结出来一个规律。” 说着 TCP 拿出了事先准备好的一张图，并投到了圆桌对面的屏幕上。 “大家请看，这是用户打开 https://breeze.red 时，通过我发送的一系类请求，我按域名进行了分类。” 说着
browser
太慢了！ “HTTP 你过来一下，有件事想和你商量商量！” 浏览器老大晃悠到了 HTTP 的手术室中说道。 “怎么有空过来，正忙着呢，快坐。” 说着，我放下手中的器具，抽出放在一旁的凳子。 “不了不了，我就想了解了解情况，门口还有还多 URL 等着你发送呢！” 浏览器老大叹了口气。 我一看门外，吓了一跳，门口的 URL 都已经围着我的手术室绕了一圈了。“什么情况？” 我问道。 “这个页面的 HTTP 请求有点多啊！” 浏览器又叹了口气，缓缓的说道：“你想想有什么办法能快一点？” “这我也没有办法呀，我这只有 6 个人，要不你加点？” “不行啊，浏览器空间太小了，操作系统老大不愿意在派人过来了，算了，你先忙，我想想办法！” 浏览器老大一脸的无奈。 协商 手术室外的 URL 慢慢的减少，大概过了 500ms
browser
计算历：7e3 年 af 月 5e 日。天气：晴。在 Chrome 实习的第一天。 终于摆脱学校开始在 Chrome 实习啦，真是不错的一天，网络很好，没有丢包情况出现，现实的情况也没老师说的那么糟糕嘛。 前辈的工作台也太炫酷了吧，就是不知道在 FireFox 实习的同学怎么样，IE 那的同学，估计是手动操作吧！哈哈！！ 今天用这工作台发了不少报文，工作台用起来比学校里手动操作报文快了不少，但基础不能忘，今天没什么需要记录的，就复习下 TCP 报文基础吧。 TCP，Transmission Control Protocol，传输控制协议，传输层的一个协议，其目的为：在复杂网络情况下（不可靠的 IP 协议下），提供一个可靠的字节流传输通道。 可靠意味着数据的完整，也就是，在网络连通的情况下，排除一切可能的错误，