Maison interface Web js tutoriel 浏览器可以有多快?

浏览器可以有多快?

Dec 01, 2016 am 09:27 AM
浏览器

React.js 以高效的 UI 渲染著称,其中一个很重要的原因是它维护了一个虚拟 DOM,用户可以直接在虚拟 DOM 上进行操作,React.js 用 diff 算法得出需要对浏览器 DOM 进行的最小操作,这样就避免了手动大量修改 DOM 的时候造成的性能损失。等等,明明是在中间加了一层,为什么结果反而变快了呢?React.js 的核心思想是认为 DOM 操作是缓慢的,因此可以需要最小化 DOM 操作,以换取整体的性能提升。DOM 操作慢是有目共睹的,而其他 JavaScript 脚本的运行速度就一定快吗?

2281.jpg

在 V8 出世之前,这个问题的答案是否定的。Google 早年商业模式建立在 Web 的基础上,当它在浏览器中写出 Gmail 这样一个无比复杂的 Web app 的时候,它不可能意识不到浏览器难以忍受的性能,而这主要是因为 JavaScript 的执行速度太慢。2008 年 9 月,Google 决定自己造一个 JavaScript 引擎来改变这一现状—— V8。当搭载着 V8 的 Chrome 浏览器出现在市场上的时候,它的速度远远甩开了当时的所有浏览器。浏览器性能的空前提升让复杂的 Web app 成为了可能。

  近七年过去,浏览器的性能随着 CPU 的性能不断上升,但再也没有获得过 2008 年那样突破性的增长。V8 到底用了什么样的技术让 JavaScript 的性能获得了如此大的提升呢?

 V8 的优化

要说如何让 JavaScript 变快,就应该先来谈谈它为什么会慢。众所周知 JavaScript 是 Brendan Eich 这个家伙用了一周多的时间开发出来的,相比现如今如日中天的 Swift 是 Apple 的一个团队四年工作的成果,你首先可能就不应该对它有过高的期待。事实上,Brendan Eich 并未意识到自己要开发的是这样一个体量的语言。为了程序员编写时的灵活,他将 JavaScript 设计成为弱类型的语言,并且在运行时可以对对象的属性增添删改。难倒一大群人的 C++ 中的继承、多态,还有什么模板、虚函数、动态绑定这些概念在 JavaScript 中完全不存在了。那这些工作谁来做了呢?自然就只有 JavaScript 引擎。由于不知道变量类型,它在运行时做着大量的类型推导工作。在 Parser 完成工作建出一棵抽象语法树(AST)的时候,引擎会把这棵 AST 翻译成字节码(bytecode)交给字节码解释器去执行。其中最拖慢性能的一步就是解释器执行字节码的阶段。回望当时,大家不知道解释器性能低下吗?其实不是,这样设计的原因是当时的人们普遍认为 JavaScript 作为一种给设计师开发的语言(前端工程师有没有心里一凉?),并不需要太高的性能,这样做符合成本,也满足需求。

  V8 做的工作主要就是去掉了这个拖慢引擎速度的部分,它从 AST 直接生成了 CPU 可执行的机器码。这种即时编译的技术被称为 JIT (Just in time)。如果你足够好奇,一个自然的想法就是,这到底是怎么办到的?

  我们举一个例子来说:

function Foo(x, y) {
    this.x = x;
    this.y = y;
}
var foo = new Foo(7, 8);
var bar = new Foo(8, 7);
foo.z = 9;
Copier après la connexion

 属性读取

  首先是数据结构。你打算如何索引对象的属性?我们已经太熟悉 JSON 中 key: value 的数据结构,但在内存中可以以 key 来索引吗?value 在内存中的位置可以确定吗?当然可以,只要对每个对象维护一个表,里面存着每个 key 对应的 value 在内存中的位置就可以了不是吗?

  这里的陷阱在于,你需要对每一个对象都维护这样一个表。为什么?我们来看看 C 语言是怎么做的。

struct Foo {
    int x, y;
};
struct Foo foo, bar;
foo.x = 7;
foo.y = 8;
bar.x = 8;
bar.y = 7;
// Cant' set foo.z
Copier après la connexion

  仔细想想大学时候的教材,foo.x 和 foo.y 的地址是可以直接算出来的呀。这是因为成员 x 和 y 的类型是确定的,JavaScript 里完全可以 foo.x = "Hello" ,而 C 语言就没办法这样做了。

  V8 不想给每个对象都维护一个这样的表。它也想让 JavaScript 拥有 C/C++ 直接用偏移就读出属性的特性。所以它的解决思路就是让动态类型静态化。V8 实现了一个叫做隐藏类(Hidden Class)的特性,即给每个对象分配一个隐藏类。对于 foo 对象,它生成一个类似于这样的类:

class Foo {
    int x, y;
}
Copier après la connexion

  当新建一个 bar 对象的时候,它的 x 和 y 属性恰好都是 int 类型,那么它和 foo 对象就共享了这个隐藏类。把类型确定以后,读取属性就只是在内存中增加一个偏移的事情了。而当 foo 新建了 z 属性的时候,V8 发现原来的类不能用了,于是就会给 foo 新建一个隐藏类。修改属性类型也是类似。

  Inline caching

  由上可知,当访问一个对象的属性的时候,V8 首先要做的就是确定对象当前的隐藏类。但每次这样做的开销也很大,那很容易想到的另一个计算机中常用的解决方案,就是缓存。在第一次访问给定对象属性的时候,V8 将假设所有同一部分代码的其他对象也都使用了这个对象的隐藏类,于是会告诉其他对象直接使用这个类的信息。在访问其他对象的时候,如果校验正确,那么只需要一条指令就可以得到所需的属性,如果失败,V8 就会自动取消刚才的优化。上面这段话用代码来表述就是:

foo.x
Copier après la connexion
# ebx = the foo object
cmp [ebx,<hidden class offset>],<cached hidden class>
jne <inline cache miss>
mov eax,[ebx, <cached x offset>]
Copier après la connexion

  这极大提升了 V8 引擎的速度。

 随着 Intel 宣布 Tick-Tock 模型的延缓,CPU 处理速度不再能像之前一样稳步增长了,那么浏览器还能继续变快吗?V8 的优化是浏览器性能的终点吗?

  JavaScript 的问题在于错误地假设前端工程师都是水平不高的编程人员(如果不是,你应该不会读到这里),岂图让程序员写得舒服而让计算机执行得痛苦。在现代浏览器引擎已经优化到这个地步的时候,我们不禁想问:为什么一定是 JavaScript ?前端工程师是不是可以让出一步,让自己多做一点点事情,而让引擎得以更高效地优化性能?JavaScript 成为事实上的浏览器脚本标准有历史原因,但这不能是我们停止进步的借口。

  当 Web Assembly 正式宣布的时候,我才确定了不仅仅是我一个名不见经传的小程序员有这样的想法,那些世界上最顶级的头脑已经开始行动了。浏览器在大量需求的驱动下正在朝着一个高性能的方向前进,浏览器究竟可以有多快,2015 可能是这条路上另一个转折点。


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

OUYI Exchange App Download Download Tutorial OUYI Exchange App Download Download Tutorial Mar 21, 2025 pm 05:42 PM

Cet article fournit un guide détaillé pour le téléchargement en toute sécurité de l'application OUYI OKX en Chine. En raison des restrictions sur les magasins d'applications nationales, il est conseillé aux utilisateurs de télécharger l'application via le site officiel d'Ouyi OKX, ou d'utiliser le code QR fourni par le site officiel pour analyser et télécharger. Pendant le processus de téléchargement, assurez-vous de vérifier l'adresse officielle du site Web, de consulter les autorisations d'application, d'effectuer une analyse de sécurité après l'installation et d'activer la vérification à deux facteurs. Pendant l'utilisation, veuillez respecter les lois et réglementations locales, utiliser un environnement de réseau sûr, protéger la sécurité des comptes, être vigilant contre la fraude et investir rationnellement. Cet article est pour référence uniquement et ne constitue pas des conseils d'investissement.

Port de connexion Coinbase Exchange 2025 Port de connexion Coinbase Exchange 2025 Mar 21, 2025 pm 05:51 PM

Guide de connexion de la sécurité Coinbase: comment éviter les sites de phishing et les escroqueries? Le phishing et les escroqueries deviennent de plus en plus rampants, et il est crucial d'accéder solidement au portail de connexion officiel de Coinbase. Cet article fournit des guides pratiques pour aider les utilisateurs à trouver et à utiliser en toute sécurité le dernier portail de connexion officiel de Coinbase pour protéger la sécurité des actifs numériques. Nous couvrirons comment identifier les sites de phishing et comment se connecter en toute sécurité via des sites Web officiels, des applications mobiles ou des plateformes tierces de confiance, et fournir des suggestions pour améliorer la sécurité des comptes, comme l'utilisation d'un mot de passe fort et permettant une vérification à deux facteurs. Pour éviter les pertes d'actifs dues à une connexion incorrecte, assurez-vous de lire attentivement cet article!

Le dernier portail d'inscription pour le site officiel d'Ouyi Le dernier portail d'inscription pour le site officiel d'Ouyi Mar 21, 2025 pm 05:54 PM

En tant que la principale plateforme de trading d'actifs numériques au monde, OUYI OKX attire de nombreux investisseurs avec ses riches produits de trading, ses fortes garanties de sécurité et sa expérience utilisateur pratique. Cependant, les risques de sécurité des réseaux deviennent de plus en plus graves et comment enregistrer en toute sécurité le compte officiel OUYI OKX est crucial. Cet article fournira le dernier portail d'enregistrement pour le site officiel OUYI OKX et expliquera en détail les étapes et les précautions pour une inscription sûre, y compris comment identifier le site officiel, définir un mot de passe solide, permettre la vérification à deux facteurs, etc., pour vous aider à démarrer votre voyage d'investissement dans les actifs numériques en toute sécurité. Veuillez noter qu'il existe des risques dans l'investissement des actifs numériques, veuillez prendre des décisions prudentes.

Binance Exchange App Download Téléchargement Tutoriel Binance Exchange App Download Téléchargement Tutoriel Mar 21, 2025 pm 05:45 PM

Cet article fournit un guide de téléchargement d'application d'échange de binance sûr et fiable pour aider les utilisateurs à résoudre le problème du téléchargement de l'application Binance dans le pays. En raison de restrictions sur les magasins d'applications domestiques, l'article recommande la priorité de télécharger les packages d'installation APK à partir du site officiel de Binance et présente trois méthodes: le téléchargement officiel du site Web, le téléchargement de la boutique d'applications tiers et le partage d'amis. En outre, l'article rappelle également aux utilisateurs de comprendre les lois et réglementations locales, de faire attention à la sécurité du réseau, de protéger les informations personnelles, de se méfier de la fraude, d'investissement rationnel et de transactions sécurisées. À la fin de l'article, l'article a une fois de plus souligné que le téléchargement et l'utilisation de l'application Binance doivent se conformer aux lois et réglementations locales, et à vos propres risques, et ne constitue aucun conseil en investissement.

Connectez-vous au dernier site officiel de Bitmex Exchange Connectez-vous au dernier site officiel de Bitmex Exchange Mar 21, 2025 pm 06:06 PM

Cet article fournit des guides sûrs et fiables pour aider les utilisateurs à accéder au dernier site Web officiel de Bitmex Exchange et à améliorer la sécurité des transactions. En raison des menaces réglementaires et de cybersécurité, il est crucial d'identifier le site Web officiel de Bitmex et d'éviter les sites Web de phishing volant des informations et des fonds de compte. L'article présente la recherche de portails de sites Web officiels via des plateformes de crypto-monnaie de confiance, des médias sociaux officiels, des médias d'information et souscrit aux e-mails officiels. Il souligne l'importance de vérifier les noms de domaine, de l'utilisation des connexions HTTPS, de la vérification des certificats de sécurité et de l'activation régulière de la vérification à deux facteurs et de la modification des mots de passe. N'oubliez pas que le trading des crypto-monnaies est un risque élevé, veuillez investir avec prudence.

Portail de connexion de la version Web de Coinbase Exchange Portail de connexion de la version Web de Coinbase Exchange Mar 21, 2025 pm 05:48 PM

La version Web Coinbase Exchange est populaire pour sa commodité, mais l'accès sécurisé est crucial. Cet article vise à guider les utilisateurs à se connecter à la version Web officielle du Coinbase en toute sécurité et à éviter les sites Web et les pirates de phishing. Nous expliquerons en détail comment vérifier le portail officiel via les moteurs de recherche, les plateformes tierces de confiance et les médias sociaux officiels, et met l'accent sur les mesures de sécurité telles que la vérification du verrouillage de sécurité de la barre d'adresse, permettant une vérification à deux facteurs, en évitant le Wi-Fi public, en modifiant régulièrement les mots de passe et en étant alerté à la phishing pour assurer la sécurité de vos actifs numériques. L'accès correct au site officiel de Coinbase est la première étape pour protéger votre monnaie numérique.

La dernière entrée officielle du site officiel de Bitmex Exchange La dernière entrée officielle du site officiel de Bitmex Exchange Mar 21, 2025 pm 06:03 PM

En tant que plate-forme de trading de dérivés de crypto-monnaie vétéran, la précision de l'entrée officielle du site Web est cruciale. En raison de sites Web de phishing rampants, l'entrée de méchant dans de faux sites Web peut conduire à un vol de compte et à la perte de fonds. Cet article vise à guider les utilisateurs pour accéder en toute sécurité sur le site officiel de Bitmex, à fournir diverses méthodes telles que les plateformes d'information de crypto-monnaie de confiance (telles que CoinmarketCap, Coingecko), les médias sociaux officiels, la vérification des adresses existantes et les canaux de support officiels, et souligne l'utilisation de mesures de sécurité telles que la vérification à deux facteurs, les changements de mot de passe réguliers et l'utilisation des logiciels de sécurité pour aider les utilisateurs à éviter efficacement les RISK et à assurer la sécurité des comptes.

Comment résoudre le problème de l'interface tiers renvoyant 403 dans l'environnement Node.js? Comment résoudre le problème de l'interface tiers renvoyant 403 dans l'environnement Node.js? Mar 31, 2025 pm 11:27 PM

Résolvez le problème de l'interface tiers renvoyant 403 dans l'environnement Node.js. Lorsque nous utilisons Node.js pour appeler des interfaces tierces, nous rencontrons parfois une erreur de 403 à partir de l'interface renvoyant 403 ...

See all articles