窥探现代浏览器架构(一)

前言

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

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

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

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

几个提高效率的console APIs

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

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

使用场景

输出不同类型(level)的内容。

用法

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

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

Svelte 3 初学者完全指南

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

Svelte为什么会火?

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

JavaScript小技巧 - 数组篇

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

去重

巧用Set特性

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

详解ECMAScript2019/ES10新属性

每年都有一些新的属性进入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
const nestedArr = [1, 2, [3, 4, [5, 6, [7, [8], 9]]], 10]
2
console.log(nestedArr.flat())
3
// [1, 2, 3, 4, [5, 6, [7, [8], 9]], 10]
4
console.log(nestedArr.flat(2))
5
// [1, 2, 3, 4, 5, 6, [7, [8], 9], 10]
6
console.log(nestedArr.flat(3))
7
// [1, 2, 3, 4, 5, 6, 7, [8], 9, 10]
8
console.log(nestedArr.flat(4))
9
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
10
console.log(nestedArr.flat(Infinity))
11
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

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

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×