问题之下:每个结论都值得再问一次
Hash 模式?history 模式?
地址栏变了,页面为什么没有刷新?刷新一下,history 路由又为什么突然 404?Hash 和 History 的差别,不只是 URL 里有没有一个 `#`。
问题之下:每个结论都值得再问一次
地址栏变了,页面为什么没有刷新?刷新一下,history 路由又为什么突然 404?Hash 和 History 的差别,不只是 URL 里有没有一个 `#`。
问题之下:每个结论都值得再问一次
一张背景图而已,浏览器怎么还要忙着定画布、改尺寸、找起点、做裁剪?再叠上渐变和多背景,谁先画、谁盖住谁?
问题之下:每个结论都值得再问一次
Flex 只是个“居中神器”?主轴一换、内容一换行,熟悉的属性立刻开始打架。搞清容器行和空间分配,Flex 才算真正用明白。
问题之下:每个结论都值得再问一次
[] == ![] 为什么是 true?加号什么时候做加法,什么时候突然开始拼字符串?与其背下一串怪异结果,不如顺着 JavaScript 的转换规则一步步算清楚。
问题之下:每个结论都值得再问一次
“原始类型存在栈里,对象存在堆里”——背了这么多年的结论,真能解释闭包吗?先把口诀放到一边,顺着变量的生命周期重新看看 JavaScript 内存。
translate
console.info 本文翻译自 Google 的官方文档。该系列共 4 篇文章,主题为从内部观察现代浏览器(Chrome),主要介绍浏览器的内部架构,以及浏览器从输入 URL 到页面呈现的全过程。 原文链接:inside-browser-part4 前言 这是**从内部观察现代浏览器(Chrome)**系列文章的第四篇。在上一篇文章中,我们知道了浏览器是如何将代码转化成网页的。在这篇文章中,我们将了解事件合成器是如何顺畅地处理用户交互的。 从浏览器的角度看待用户的输入 何为输入?使用键盘在文本框中输入,或是使用鼠标点击?是的,这些都是。但从浏览器的角度来看,输入意味着用户与网页交互的所有行为,比如鼠标点击、鼠标移动、滚轮滚动、触摸事件等等。 那么,浏览器如何处理输入呢?当用户触发 touch 事件时,浏览器进程最先知道事件已经发生,但它只知道事件发生的坐标。因为选项卡中的内容完全由渲染进程控制,所以浏览器进程并不知道具体触发了哪个元素。因此,浏览器进程只能通过 IPC 将事件类型和发生坐标发送给渲染进程,
translate
console.info 本文翻译自 Google 的官方文档。该系列共 4 篇文章,主题为从内部观察现代浏览器(Chrome),主要介绍浏览器的内部架构,以及浏览器从输入 URL 到页面呈现的全过程。 原文链接:inside-browser-part3 前言 这是**从内部观察现代浏览器(Chrome)**系列文章的第三篇。在先前的文章中,我们了解了浏览器的多进程架构,以及一次导航中到底发生了什么。在这篇文章中,我们将了解渲染进程到底做了什么。 渲染进程直接关系到 Web 页面的性能。由于渲染进程涉及许多内容、处理大量逻辑,并不是一篇文章能够完整描述的,因此,这篇文章只是一个概述。如果你想进一步了解,可以查看 the Performance section of Web Fundamentals。 主要构成 选项卡内部的所有逻辑都由渲染进程处理。在渲染进程中,主线程处理绝大部分网页代码。由 Worker 或 Service
translate
console.info 本文翻译自 Google 的官方文档。该系列共 4 篇文章,主题为从内部观察现代浏览器(Chrome),主要介绍浏览器的内部架构,以及浏览器从输入 URL 到页面呈现的全过程。 原文链接:inside-browser-part2 前言 这是**从内部观察现代浏览器(Chrome)**系列文章的第二篇。在上一篇文章中,我们了解了浏览器的组成,以及如何将任务分配给不同的进程和线程。在这篇文章中,我们将深入了解:为了将一个 Web 页面呈现在浏览器中,各个进程和线程是如何协作的。 浏览器中都会出现这样一个简单的场景:用户在导航栏里输入 URL,接着浏览器从对应的服务器获取数据,并将页面内容呈现出来。在这篇文章中,我们将了解用户请求一个站点后,浏览器准备渲染页面的过程,也就是导航。 导航始于 Browser 进程 我们在第一篇文章(CPU、GPU、内存以及多进程架构)中提到过,除了页面显示区域,其他部分基本都由 Browser
translate
console.info 本文翻译自 Google 的官方文档。该系列共 4 篇文章,主题为从内部观察现代浏览器(Chrome),主要介绍浏览器的内部架构,以及浏览器从输入 URL 到页面呈现的全过程。 原文链接:inside-browser-part1 前言 作为本系列的第一篇,我们先来了解一下计算机的核心术语和 Chrome 的多进程架构模型。 计算机的核心——CPU & GPU 在了解浏览器是如何运行之前,我们必须对它所处的运行环境有所了解,毕竟浏览器是基于这些硬件的。 CPU 中央处理器 CPU(Central Processing Unit) 是计算机的大脑。一个 CPU 核心就像一名员工,能够逐个处理分配给它的任务。它可以接收包括数学、艺术在内的各种任务,并将处理结果返回给任务的发布者。 过去,大多数 CPU 都是单核的;而目前,我们经常使用多核 CPU,为计算机提供更加强大的计算能力。
浏览器背后:一座从不打烊的城市
一段 while 循环转得头晕,HTML 解析器还在电话里催命。任务队列、微任务队列轮番塞活,JavaScript 老大只能在两个大厅反复横跳:“来,下一个!”
浏览器背后:一座从不打烊的城市
数字、字符串、null、对象挤进同一个小盆,刚见面就吵翻了。加号一落下,到底相加还是拼接?JavaScript 老大的类型转换器开始冒烟……
浏览器背后:一座从不打烊的城市
“警告!内存即将溢出!”变量大厅已经挤到半只脚悬空,JavaScript 老大冲进门就开始点名:“说吧,你是什么垃圾?”这次又轮到哪批变量消失?