前言

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译，而是结合个人的理解将作者想表达的意思表达出来，而且会尽量补充一些相关的内容来帮助大家更好地理解。

到达合成线程的输入

这篇文章是探究Chrome内部工作原理的四集系列文章中的最后一篇了。在上一篇文章中，我们探讨了一下浏览器渲染页面的过程以及学习了一些关于合成线程的知识，在本篇文章中，我们要看一下当用户在网页上输入内容的时候，合成线程（compositor）做了些什么来保证流畅的用户体验的。

前言

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译，而是结合个人的理解将作者想表达的意思表达出来，而且会尽量补充一些相关的内容来帮助大家更好地理解。

导航的时候都发生了什么

这篇文章是探究Chrome内部工作原理的四集系列文章中的第二篇，在上一篇文章中我们探讨了不同进程或者线程是如何负责浏览器各个不同部分的工作的。在这篇文章中，我们将会深入了解每个进程和线程是如何沟通协作来为我们呈现出网站内容的。

让我们来看一个用户浏览网页最简单的情景：你在浏览器导航栏里面输入一个URL然后按下回车键，浏览器接着会从互联网上获取相关的数据并把网页展示出来。在本篇文章中，我们将会重点关注这个简单场景中网站数据请求以及浏览器在呈现网页之前做的准备工作 - 也就是导航（navigation）的过程。

一切都从浏览器进程开始

我们在上一篇文章CPU，GPU，内存和多进程架构中提到，浏览器中tab外面发生的一切都是由浏览器进程（browser process）控制的。浏览器进程有很多负责不同工作的线程（worker thread），其中包括绘制浏览器顶部按钮和导航栏输入框等组件的UI线程（UI thread）、管理网络请求的网络线程（network thread）、以及控制文件读写的存储线程（storage thread）等。当你在导航栏里面输入一个URL的时候，其实就是UI线程在处理你的输入。

UI，网络和存储线程都是属于浏览器进程的

前言

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译，而是结合个人的理解将作者想表达的意思表达出来，而且会尽量补充一些相关的内容来帮助大家更好地理解。

CPU，GPU，内存和多进程架构

在这个4集系列教程里面，我将会从Chrome浏览器的高层次架构（high-level architecture）开始说起，一直深入讲到页面渲染流水线（rendering pipeline）的具体细节。如果你想知道浏览器是怎么把你编写的代码转变成一个可用的网站，或者你不知道为什么一些特定的代码写法可以提高网站的性能的，那你就来对地方了，这篇文章就是为你准备的。

作为本系列文章的第一篇，我们会先了解一些关键的计算机术语以及Chrome浏览器的多进程架构。

console.log我相信写过JavaScript人一定都有接触过，它可谓是我们debug的灵丹妙药。可是除了log方法，你知道console还有很多可以帮你快速提高代码debug效率（逼格）的方法吗？

console.log | console.info | console.debug | console.warn | console.error

使用场景

输出不同类型（level）的内容。

用法

这几个方法用起来都差不多，只不过输出结果可能会存在颜色上的区别：

注意console.debug如果没有输出可以将log level中的verbose选上（chrome）:

React, Vue和Angular差不多占据了Web开发的大部分江山，可是最近半年Svelte开始逐渐吸引越来越多人的眼球。这个Svelte框架到底有什么过人之处呢？本文将会为大家分析一下Svelte火起来的原因，并且通过使用Svelte去搭建一个简单的书店应用（bookshop）来帮助大家快速入门这门框架。

Svelte为什么会火?

要想知道Svelte为什么会火，首先得看看React和Vue这些框架存在什么问题。

本文整理了一些在日常工作可以用到的JavaScript数组小技巧

去重

巧用Set特性

1
2
3
4

const arr = [1, 2, 2, 3, 4, 7, 7]
const uniqueArr = [...new Set(arr)]
console.log(uniqueArr)
// [1, 2, 3, 4, 7]

每年都有一些新的属性进入ECMA262标准，今年发布的ECMAScript2019/ES10同样也有很多新的特性，本文将会挑选一些普通开发者会用到的新属性进行深入的解读。

Array.prototype.flat()

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. – MDN

简单来说flat这个函数就是按照一定的深度depth将一个深层次嵌套的数组拍扁, 例子:

1
2
3
4
5
6
7
8
9
10
11

const nestedArr = [1, 2, [3, 4, [5, 6, [7, [8], 9]]], 10]
console.log(nestedArr.flat())
// [1, 2, 3, 4, [5, 6, [7, [8], 9]], 10]
console.log(nestedArr.flat(2))
// [1, 2, 3, 4, 5, 6, [7, [8], 9], 10]
console.log(nestedArr.flat(3))
// [1, 2, 3, 4, 5, 6, 7, [8], 9, 10]
console.log(nestedArr.flat(4))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(nestedArr.flat(Infinity))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

由上面的例子可以看出flat会按照指定的深度depth将一个数组扁平化，如果需要将数组完全拍扁变成一维数组，则指定depth为无限大，即是Infinity，相反如果不指定深度，其默认值是1。