返回：唐霜｜书

前端性能优化深入浅出

对前端性能优化的详细讲解，让你从入门到能够解决工作中遇到的大部分性能问题，做到遇到性能问题心中不慌，都能解决，实现“躺平”。本文为付费阅读，请到 https://wx.zsxq.com/dweb2/index/group/28851448151481 进行阅读。

前言

我在2021年接受慕课网要求制作前端性能【转载请注明来源】【原创不易，请尊重版权】优化课程，但由于个人原因，在年底的时候不本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。得不放弃教程的推进，当我打开已经制作好的原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。部分教程材料时，我意识到不能浪费这些材料【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。，于是现在将它们整理出来，并补全没有做完转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。的部分，使它成为一份完整的前端性能优化知本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】识体系提供给读者朋友作为参考。

转载请注明出处：www.tangshuang.net【转载请注明来源】原创内容，盗版必究。

本册的内容将会分为5个大的部分，第1部分著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net讲加载性能优化，其中大部分内容仅适用we【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。b平台，是其他很多讲前端性能优化的课程的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。主要内容，但我认为加载性能并非我们日常开【作者：唐霜】著作权归作者所有，禁止商业用途转载。发中常见的性能问题，不过这部分知识你又不未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。得不了解，因此，我把它作为第1部分；第2【本文受版权保护】【关注微信公众号：wwwtangshuangnet】部分讲渲染性能优化，其中大部分内容也仅适著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】合web平台，但是其中又有一些知识是通用本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net的，可以在其他平台上也如此去思考；第3部【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net分讲运行时性能优化，这一部分我认为是本册【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。的精华部分，是我们日常开发中最常面对和需【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。要了解使用的优化技巧或技术，这一部分的内【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net容我还会持续补充，你可以关注我的微信公众【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】号 wwwtangshuangnet 来【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】获得内容更新的消息；第4部分讲框架性能优著作权归作者所有，禁止商业用途转载。【转载请注明来源】化，主要针对我们基于react和vue进【未经授权禁止转载】本文作者：唐霜，转载请注明出处。行开发的工作中所遇到的性能问题进行分析和著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。优化，这部分知识实际上是不通用的，将来这转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】两个框架不再流行了，或者框架内部自己解决本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】了这些问题，这部分的内容就没有价值了，因【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。此，我也会在后续更新这部分的内容；第5部【未经授权禁止转载】本文作者：唐霜，转载请注明出处。分讲开发构建性能优化，主要目标是提升我们未经授权，禁止复制转载。【原创不易，请尊重版权】开发或CI/CD的执行速率，提升开发的幸未经授权，禁止复制转载。【本文首发于唐霜的博客】福感，不过这部分内容也如上一部分一样，不未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。是通用的，且不同场景下也不一样，我只能做著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】到把自己所了解的一些性能问题和优化技巧拿【原创内容，转载请注明出处】原创内容，盗版必究。出来讲解，帮助在工作中遇到相同问题的读者转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net朋友们解决这类问题。

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】本文版权归作者所有，未经授权不得转载。

性能优化是一项渐进式的工作，正像《重构》【版权所有，侵权必究】【未经授权禁止转载】一书中指出，“大多数情况下可以忽略性能问【原创内容，转载请注明出处】【本文首发于唐霜的博客】题，如果重构引入了性能损耗，先完成重构，【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net在做性能优化”，解决性能问题在我们的日常本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】开发工作中实际上占用的比例非常小，我们可【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net能在写了几个月代码之后，才会遇到一个严重【作者：唐霜】【版权所有】唐霜 www.tangshuang.net的性能问题，因此，我们没有必要为了性能问【未经授权禁止转载】本文作者：唐霜，转载请注明出处。题而在一开始就小题大做，但是我们必须掌握【原创不易，请尊重版权】未经授权，禁止复制转载。性能优化的能力，当我们遇到性能问题时，有转载请注明出处：www.tangshuang.net【本文受版权保护】武器去对付它解决它。当然，如果你阅读了本【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】册的第3部分，你就能掌握一些小的常见的可【本文受版权保护】本文作者：唐霜，转载请注明出处。以避免性能隐患的技巧，通过长期的习惯，让【版权所有】唐霜 www.tangshuang.net【作者：唐霜】你所写的代码在平均水平上就是高于别人写的【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net烂代码。从这个意义上讲，其实写出好的代码转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】本身就是写出高性能代码的一种体现，一般来原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。讲，写出好代码本身就包含了“这段代码是高著作权归作者所有，禁止商业用途转载。【转载请注明来源】性能的”这一意思在里面。

最后，我想，知识本身往往是比较枯燥的，为著作权归作者所有，禁止商业用途转载。【转载请注明来源】了在这个枯燥中增加一些趣味，我会在写作过未经授权，禁止复制转载。【原创内容，转载请注明出处】程中融入一些武侠小说的元素，你会看到一个【原创不易，请尊重版权】原创内容，盗版必究。初出茅庐的小伙出山学武，不畏艰难，逐渐成【本文受版权保护】本文作者：唐霜，转载请注明出处。长，最后成为一代大侠问鼎武林的冒险故事，【原创内容，转载请注明出处】【本文受版权保护】伴随着故事的进展，你也将掌握前端性能优化【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。的大部分内容。

【作者：唐霜】【作者：唐霜】

起始于终：一个列表的性能优化之路

飞阳如隙，回首我此生，楞过、苦过、狂过、本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】惨过、耀过，如今来看，都是命运。我之坚信【版权所有，侵权必究】【未经授权禁止转载】、动摇、坚持，铸就我今立于此封顶，纵乱世未经授权，禁止复制转载。【本文受版权保护】纷涌，于我乃清风拂发，俯览众生，有悲有喜【版权所有】唐霜 www.tangshuang.net【本文受版权保护】，一切皆历便可放下，或许能做些利众生的事【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。……
本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

我曾有次被加微信好友问到性能问题，当时那【转载请注明来源】【关注微信公众号：wwwtangshuangnet】位朋友问我“我有一个订票的模块，性能差，【本文受版权保护】【作者：唐霜】该怎么优化”，面对这样的提问，我是有些不【转载请注明来源】【关注微信公众号：wwwtangshuangnet】悦的，我认为这不符合提问的原则。但我意识【转载请注明来源】【作者：唐霜】到，并非每个人都懂如何优雅的提问，并非都【本文首发于唐霜的博客】原创内容，盗版必究。懂提问的技巧，他们只能抛出表面问题，需要【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】有人去对他们的问题进行拆解。于是，我让他原创内容，盗版必究。原创内容，盗版必究。打住，采用一问一答的形式，让我可以初步诊【本文受版权保护】【转载请注明来源】断他所面临的性能问题究竟是什么，并且对症【本文首发于唐霜的博客】【作者：唐霜】下药给出解决的思路。对的，我只能给到思路转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】，因为不同的应用所实施的具体方案是不一样【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】的，所以无法给出具体的实施步骤，只能给思【未经授权禁止转载】【版权所有，侵权必究】路，由开发者顺着思路自己去解决这些问题。

著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】

“是你的这一个页面打开之后一片空白的时间【作者：唐霜】本文作者：唐霜，转载请注明出处。比较长，还是可以很快打开但呈现不出来数据【转载请注明来源】【作者：唐霜】？”

本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【未经授权禁止转载】

“都不是，是在操作的时候会有卡顿。”

【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。原创内容，盗版必究。

“很好。卡顿是在什么情况下产生的？是点击【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。一个按钮之后卡住不动了，还是怎样？”

本文作者：唐霜，转载请注明出处。【未经授权禁止转载】转载请注明出处：www.tangshuang.net

“是在用户往下滑需要加载更多条目的时候卡【未经授权禁止转载】【转载请注明来源】死了。”

“你有查过是后端接口吐出数据慢吗？”

转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net

“一般来讲，加载一页会有多少条数据？”

“10条。”

此时，我们已经把这次性能问题的范围缩小了【作者：唐霜】【作者：唐霜】，可以肯定的是，这次问题是代码层面的问题【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】，只要我们通过修改代码，就能解决这次问题【本文首发于唐霜的博客】【本文受版权保护】。而且，这次性能问题，不是由于大数据量引【本文受版权保护】本文版权归作者所有，未经授权不得转载。起的，我们排除了大数据量性能优化的一些策【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net略。

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【作者：唐霜】

“你可以通过chrome的devtool【作者：唐霜】原创内容，盗版必究。来看下performance。”

原创内容，盗版必究。未经授权，禁止复制转载。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

“好的。”

【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【本文受版权保护】

【未经授权禁止转载】【原创不易，请尊重版权】【作者：唐霜】【原创内容，转载请注明出处】

我们看到，rendering占据了4秒多本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。。可以大概知道，这是一次由于对DOM的操著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。作不当引起的重新渲染性能损耗。

未经授权，禁止复制转载。【本文受版权保护】【原创内容，转载请注明出处】未经授权，禁止复制转载。

“你可以通过上面的火焰图找到执行时间最长转载请注明出处：www.tangshuang.net【作者：唐霜】的一条，并且鼠标放上去，找到对应的代码文转载请注明出处：www.tangshuang.net【本文受版权保护】件，并且找到对应的代码位置。”

“原来还有这样的操作？我看看……找到了，【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】xx函数的执行时间超过了2秒。但是我看代【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。码写的没有什么问题呀。”

【转载请注明来源】未经授权，禁止复制转载。

“可否把这段代码发给我看下呢？”

【原创不易，请尊重版权】【未经授权禁止转载】

“好的。”

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】

“这个函数都做了什么操作呢？”

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

“我把这个函数的代码也发给你。”

转载请注明出处：www.tangshuang.net【作者：唐霜】转载请注明出处：www.tangshuang.net【作者：唐霜】

在阅读代码之后，我终于找到了问题的所在，本文版权归作者所有，未经授权不得转载。【本文受版权保护】这个函数作为一个入口，里面会做大量的计算本文作者：唐霜，转载请注明出处。【未经授权禁止转载】，用来确定列表加载之后某个元素的位置，而本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】该计算又会读取渲染后DOM的信息，用来再转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】次计算，再次确定其位置，如此反复，最终达著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。到一个稳定的状态后才停止计算。正是因为这【作者：唐霜】【未经授权禁止转载】个设计，导致每次加载完数据后DOM会被持未经授权，禁止复制转载。【原创内容，转载请注明出处】续的修改，同时做一个复杂的计算过程。

【本文受版权保护】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。

针对这一问题，我给出了自己的建议。“你可著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net以提前预算好元素的位置，在完成渲染之后，【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】再做一次调整，这一只需要重复渲染一次。”

转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

“好的，我试试。”

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【原创内容，转载请注明出处】

过了大概半个小时。

“太棒了，不卡了，谢谢你。”

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【未经授权禁止转载】

前端性能问题的解决，非常大的一部分工作，转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】就是在锁定问题根源这个过程。有的时候，我本文版权归作者所有，未经授权不得转载。【作者：唐霜】们没有方法去找到问题根源，有的时候问题具【版权所有，侵权必究】原创内容，盗版必究。有迷惑性我们以为找到了问题根源，但是最终【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】发现没有效果。但是，往往我们锁定问题之后本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net，解决起来就比较容易。这也印证了我前文所未经授权，禁止复制转载。【未经授权禁止转载】讲的，性能问题是一个需要渐进式解决的问题【未经授权禁止转载】【未经授权禁止转载】，而非一系列完整的方案。

【转载请注明来源】未经授权，禁止复制转载。

缘起轻虚：性能问题的起点

我意识到自己不够强，那些恶人，怎能如此凶【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net残？只有变强，我才能对抗他们，让他们血债【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。血偿！可是，我要如何才能变强？对，我要练【转载请注明来源】【版权所有，侵权必究】武，我要学会世上最强的武功，无人能敌。于【作者：唐霜】转载请注明出处：www.tangshuang.net是我背起包袱，离开了生于此地十多年的山水【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。，迈上未知之途。
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】

我们要意识到，前端性能问题，和后端性能问原创内容，盗版必究。本文作者：唐霜，转载请注明出处。题不同，本质上，前端的性能问题都是渲染性未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。能问题，当然，引起渲染性能损耗的可能是对【未经授权禁止转载】【本文受版权保护】渲染原理的不懂，也可能是我们写了不好的代本文作者：唐霜，转载请注明出处。原创内容，盗版必究。码。但是归根结底，我们还是要掌握浏览器渲著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。染原理，才能写出符合起原理的好代码。

性能问题的分类

【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

加载性能问题

【本文首发于唐霜的博客】

【转载请注明来源】

渲染性能问题

【本文受版权保护】

转载请注明出处：www.tangshuang.net

内存性能问题

本文版权归作者所有，未经授权不得转载。

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

算法性能问题

【作者：唐霜】

本文版权归作者所有，未经授权不得转载。

设计性能问题

本文作者：唐霜，转载请注明出处。

【转载请注明来源】

【关注微信公众号：wwwtangshuangnet】

其中，内存性能问题指由于程序内存占用过多【未经授权禁止转载】【本文受版权保护】而被耗尽导致的性能问题，虽然从很多角度讲【原创不易，请尊重版权】未经授权，禁止复制转载。算法性能问题可能也是内存性能问题，但是我本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。们这里着重想指出由于代码使用不当导致内存本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。泄露的问题，而算法性能问题是指代码设计上【原创不易，请尊重版权】【原创内容，转载请注明出处】没有考虑到运算的复杂度，导致的计算资源占【本文受版权保护】未经授权，禁止复制转载。用过多（一般指CPU计算资源）带来的问题【本文受版权保护】【关注微信公众号：wwwtangshuangnet】。

原创内容，盗版必究。【原创内容，转载请注明出处】【原创不易，请尊重版权】【原创不易，请尊重版权】

设计性能问题其最终可能还是会落回内存或算著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net法的性能问题，但是这里着重强调，由于架构【作者：唐霜】【版权所有，侵权必究】、处理办法等的设计不足，带来的整体性的性【转载请注明来源】【版权所有】唐霜 www.tangshuang.net能问题，例如整体层面设计了缓存与未使用之著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。间的差异，例如模块代码分层组织与结构混乱未经授权，禁止复制转载。【原创不易，请尊重版权】之间的差异。通常来讲，设计性能问题是大面【本文首发于唐霜的博客】【版权所有，侵权必究】积代码整体起效果，而不是某一处局部代码本【作者：唐霜】未经授权，禁止复制转载。身的问题。甚至有可能是底层依赖的问题，而【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】换一个底层依赖，则需要对整个项目进行重构【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net。例如使用webpack和vite就是会【本文受版权保护】【版权所有，侵权必究】存在巨大的差异，但是如果想从webpac原创内容，盗版必究。【本文首发于唐霜的博客】k迁移到vite，则需要耗费一些精力进行本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】重构。

【原创不易，请尊重版权】【原创内容，转载请注明出处】

建立性能指标体系

建立性能指标体系，我们遵循“第一次原则”【转载请注明来源】【未经授权禁止转载】和“持续性原则”。第一次原则指用户在第一转载请注明出处：www.tangshuang.net【本文受版权保护】次打开应用时，以更快的速率获得自己想要的【作者：唐霜】著作权归作者所有，禁止商业用途转载。内容；持续性原则指在用户使用应用过程中，【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。没有卡顿的获得自己想要的内容。

以前我们在考虑如何让用户更快的获得内容时本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。，往往只关注加载和渲染的效率，但近几年开未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】始，关注用户体验逐渐取代了传统思维。如果【版权所有，侵权必究】原创内容，盗版必究。只关注效率，实际上我们无法获得准确的性能原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】指标数据，而关注用户体验，我们可以细化指转载请注明出处：www.tangshuang.net【转载请注明来源】标，从而排除那些其实不太重要的影响部分。

目前我们已知的一些公认指标有如下：FCP【原创不易，请尊重版权】未经授权，禁止复制转载。、LCP、FID、TTI、TBT、CLS本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。、FPS。接下来我就将对这些指标做详细介原创内容，盗版必究。原创内容，盗版必究。绍：

First Contentful Paint (FCP)

“第一次内容绘制”，也就是指用户从打开应【原创不易，请尊重版权】【原创不易，请尊重版权】用到肉眼可以看到界面上第一次呈现出内容的【本文受版权保护】【本文首发于唐霜的博客】时间。这里的内容可以上任何界面呈现，文本著作权归作者所有，禁止商业用途转载。【转载请注明来源】、图片、视频等等。

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。

上图中第二个界面为第一次出现内容，即FC【原创内容，转载请注明出处】未经授权，禁止复制转载。P

【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】

【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【本文受版权保护】

通过FCP这个指标，可以反映用户对应用打【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。开速度的感知程度。FCP越小，说明用户能【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。够感知你的应用打开速度更快，对你的应用竖【未经授权禁止转载】【原创不易，请尊重版权】起大拇指。

【本文受版权保护】本文作者：唐霜，转载请注明出处。

Largest Contentful Paint(LCP)

“最大块内容首次绘制”，也就是从你的应用著作权归作者所有，禁止商业用途转载。【本文受版权保护】打开，到全部内容加载完成之前，这一段时间原创内容，盗版必究。【版权所有，侵权必究】里面，界面上最大的一块内容在什么时间点上本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net被完整渲染出来。LCP是一个动态的评价过【作者：唐霜】本文版权归作者所有，未经授权不得转载。程，因为当界面没有加载完之前，你也说不准【原创内容，转载请注明出处】未经授权，禁止复制转载。到底哪一块才是界面上最大的一块内容。例如著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。下面这个例子：

不同时间点上界面上最大的内容块并不是一成原创内容，盗版必究。本文作者：唐霜，转载请注明出处。不变的，只有当界面加载完毕趋于稳定时，我【原创不易，请尊重版权】【本文首发于唐霜的博客】们才能确定LCP

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net

LCP从另外一个角度去评价了应用的打开速转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】度，因为即使FCP很快，但如果LCP慢的【作者：唐霜】【本文受版权保护】话，仍然意味着你的应用体验不佳。

First Input Delay(FID)

“第一次输入延迟”，即用户第一次在界面上【本文受版权保护】【版权所有】唐霜 www.tangshuang.net进行操作（例如点击某个链接）到程序对这个著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】操作做出回应的延迟。这是因为经常我们的应【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】用需要通过网络请求脚本或数据来进行渲染，【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】而在请求的过程中，我们的程序或者浏览器本【未经授权禁止转载】原创内容，盗版必究。身，无法响应用户的操作，这个无法响应的过【本文受版权保护】【关注微信公众号：wwwtangshuangnet】程，就是FID。例如某些点击我们通过脚本【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】中的事件监听来处理，但是此时脚本还在加载【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。过程中，所以点击就没有任何效果。

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

未经授权，禁止复制转载。【转载请注明来源】【本文首发于唐霜的博客】

【原创不易，请尊重版权】【作者：唐霜】【未经授权禁止转载】转载请注明出处：www.tangshuang.net

FID 只关注来自离散操作的输入事件，如未经授权，禁止复制转载。未经授权，禁止复制转载。单击事件、按键事件, 像滚动和缩放这样的未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。连续交互动作是不考虑的。

【作者：唐霜】著作权归作者所有，禁止商业用途转载。

用于应用的交互性非常重要，因此，FID实未经授权，禁止复制转载。【原创不易，请尊重版权】际上反映了你的应用从打开之后阻塞用户进行本文版权归作者所有，未经授权不得转载。【本文受版权保护】交互的时间，因此是一个非常重要的负面指标【本文受版权保护】【原创不易，请尊重版权】。

【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】本文作者：唐霜，转载请注明出处。

Time to Interactive(TTI)

“达到可稳定交互的时间”，假如你不做任何【转载请注明来源】【本文首发于唐霜的博客】输入，让应用自己打开，知道整个应用没有发【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】生任何动作（静默状态）持续5秒钟，那么在转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。这5秒钟之前的那一次长任务的结束时间，就【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】是TTI。

未经授权，禁止复制转载。【未经授权禁止转载】原创内容，盗版必究。

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

上图中黄条是长任务，和FID示意图中的黄著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】条意思相同。当加载达到稳定静默状态（没有【本文受版权保护】本文版权归作者所有，未经授权不得转载。黄条）5秒钟后，往前找到最后一个长任务的【转载请注明来源】【本文受版权保护】结束时间，这个时间就是TTI。由于静默状【原创内容，转载请注明出处】未经授权，禁止复制转载。态的存在，我们认为TTI之后的所有时刻，转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】都是可稳定交互的，不会出现FID中所指出【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。的不可交互的问题。

著作权归作者所有，禁止商业用途转载。【本文受版权保护】【未经授权禁止转载】

通过TTI和FID的结合，可以评判出你的【版权所有，侵权必究】原创内容，盗版必究。应用在什么的交互体验如何。比如，当你打开【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】一个网站之后，已经感觉整个渲染完成了，但【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】是怎么点链接都没有响应，这种用户体验明显【作者：唐霜】本文版权归作者所有，未经授权不得转载。不好。比如前两年流行的SSR技术，虽然用著作权归作者所有，禁止商业用途转载。【本文受版权保护】户看到的界面的时间变短，但是由于它消耗了本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】第一次渲染的过程时间，之后在去拉脚本下来【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。，才能交互，所以TTI可能并不够好。

未经授权，禁止复制转载。【未经授权禁止转载】转载请注明出处：www.tangshuang.net

Total Blocking Time(TBT)

“总阻塞时长”，长任务执行会阻塞界面的渲转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】染，有的卡顿明显，有的不明显，在FCP到【作者：唐霜】著作权归作者所有，禁止商业用途转载。TTI之间，这些长任务的阻塞时长的总和，原创内容，盗版必究。未经授权，禁止复制转载。就是TBT。

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】

图中黄红块就是长任务，红色就是阻塞时长（本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。超过50ms部分），红色部分的总和就是T【原创内容，转载请注明出处】【未经授权禁止转载】BT

我个人认为TBT是统计意义上的指标，它不著作权归作者所有，禁止商业用途转载。【转载请注明来源】像FID、TTI之类的指标那么直指本质，著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。但是一般来讲，统计意义上的指标更具有数学著作权归作者所有，禁止商业用途转载。【转载请注明来源】意义，包含的更多的内涵。

Cumulative Layout Shift(CLS)

“累计布局偏移”，它是一个比值。在应用界原创内容，盗版必究。转载请注明出处：www.tangshuang.net面加载过程中，可见元素在前后两帧之间存在本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net布局上的偏移，那么认为这个元素是不稳定的著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。，比如用户准备用鼠标去点这个元素，结果点本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。击点时候，这个元素被另外一个元素顶开了，原创内容，盗版必究。未经授权，禁止复制转载。导致点错了元素。CLS就是收集一段时间内本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。这些偏移的数据。它的计算公式是

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

layout shift score = impact fraction * distance fraction

本文作者：唐霜，转载请注明出处。【本文受版权保护】【作者：唐霜】【转载请注明来源】

在上面的示例中，左侧（也就是前一帧）图片【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】内的元素占据了视口的一半区域，右侧（也就未经授权，禁止复制转载。未经授权，禁止复制转载。是后一帧）图片内的元素向下移动了视口高度【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net的 25%。红色虚线框表示的就是这两帧中【版权所有，侵权必究】未经授权，禁止复制转载。元素可见区域的并集，也就是 75%, 所【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】以 impact fraction 就是未经授权，禁止复制转载。【原创不易，请尊重版权】 0.75。最大的视口尺寸是高度，不稳定本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。元素移动了视口高度的 25%，因此 di著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。stance fraction 就是 0【本文受版权保护】本文版权归作者所有，未经授权不得转载。.25。最后可以得到布局移位就是 0.75 * 0.25 = 0.1875。

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【作者：唐霜】

【未经授权禁止转载】【未经授权禁止转载】

我个人认为CLS是人为制造的一项指标，它转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。通过比较复杂的设计，来计算一个值作为衡量本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net标准。当然，它的初衷是衡量页面元素在布局转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net层面的稳定性，如果你的应用元素在布局上跑【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。来跑去，体验当然是不好的。

【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

Frame Per Second(FPS)

“每秒帧数”，它是一个速度指标“帧率”，转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net即在每秒内刷新了多少帧。我们都知道浏览器未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。会根据应用的变化来按照一定的帧率刷新页面【原创不易，请尊重版权】【原创不易，请尊重版权】，但是浏览器的刷新和电脑屏幕的刷新是两件【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】事，电脑屏幕按照固定的刷新率进行刷新，而转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】浏览器则是按照一定的（不稳定的）频率进行【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】整个可视窗口的绘制。浏览器的绘制受多方面【转载请注明来源】著作权归作者所有，禁止商业用途转载。的影响，理论上在没有任何影响下，浏览器的著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】帧率60Hz，即16.6ms左右一帧，但原创内容，盗版必究。【原创不易，请尊重版权】是由于浏览器执行时存在一些资源调度逻辑，【版权所有】唐霜 www.tangshuang.net【作者：唐霜】需要等某些执行任务完成之后，才能进入下一本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】帧刷新，这也就导致了丢帧现象，我们都知道【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】人肉眼可辨为0.1s每帧，超过这个时长就原创内容，盗版必究。原创内容，盗版必究。会感觉卡顿，所以通过FPS指标来衡量应用【原创内容，转载请注明出处】【原创内容，转载请注明出处】的性能也是非常重要的。

【本文首发于唐霜的博客】【作者：唐霜】

前面所有的指标，都是基于“第一次原则”建著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net立，只有FPS是基于“持续性原则”。虽然著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】前面的指标那么多，但是，实际上我们在日常【原创内容，转载请注明出处】【本文首发于唐霜的博客】开发中，更常见的是卡顿现象，而第一次加载【版权所有，侵权必究】【作者：唐霜】的性能问题，往往核心的问题都在于网络不够【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net好，但是卡顿，甚至死循环导致浏览器卡死，【版权所有】唐霜 www.tangshuang.net【本文受版权保护】却常常是我们写代码造成的。因此，FPS指【原创内容，转载请注明出处】【转载请注明来源】标我认为对我们日常开发更重要。

前端性能监控

在建立了性能指标体系之后，我们就可以基于【本文首发于唐霜的博客】【原创不易，请尊重版权】这些指标建立前端性能监控。前端监控相关文【转载请注明来源】【本文首发于唐霜的博客】章，可在我的博客其他地方找到，可以阅读相【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net关内容，这里不再赘述。我们可以通过不同的未经授权，禁止复制转载。【本文首发于唐霜的博客】工具来达到我们的监控目的，主要有两个方面本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net：

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

基于浏览器已经提供的工具，例如devto本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】ols

原创内容，盗版必究。

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

自建监控系统

【本文受版权保护】

【访问 www.tangshuang.net 获取更多精彩内容】

未经授权，禁止复制转载。

【原创不易，请尊重版权】

在开发测试阶段，我们主要依赖浏览器提供的【原创内容，转载请注明出处】【作者：唐霜】工具进行性能问题的诊断和排查，这部分将在未经授权，禁止复制转载。未经授权，禁止复制转载。下一节详细介绍。而当产品上线之后，我们需【未经授权禁止转载】转载请注明出处：www.tangshuang.net要将指标数据上报到监控平台，为后续做数据未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net分析做好准备。

【原创内容，转载请注明出处】【转载请注明来源】【未经授权禁止转载】

perfermance

【作者：唐霜】

【未经授权禁止转载】

PerformanceObserver

转载请注明出处：www.tangshuang.net

web-vitals

【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net

通过巧妙使用上面的对象、库，我们可以比较【本文首发于唐霜的博客】未经授权，禁止复制转载。便捷的收集到和性能相关的数据，并上报给监本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net控平台。我在腾讯参与建设了腾讯云RUM这【版权所有，侵权必究】未经授权，禁止复制转载。款产品，它可以帮助你进行前端应用性能监控【作者：唐霜】转载请注明出处：www.tangshuang.net，支持web、native、小程序多个平【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】台，目前还是免费的，如果你需要一个成熟的【转载请注明来源】原创内容，盗版必究。性能监控平台，可以试试腾讯云RUM。

诊断性能问题的方法

监控往往是对已经在生产环境运行的应用进行原创内容，盗版必究。未经授权，禁止复制转载。，而我们在开发、测试时发现性能问题，则需【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。要我们拥有顺藤摸瓜，找出性能问题根源的能【未经授权禁止转载】转载请注明出处：www.tangshuang.net力。当然，前文我们对性能问题进行分类的依【未经授权禁止转载】原创内容，盗版必究。据也是从造成性能损耗的原因出发进行分类的本文作者：唐霜，转载请注明出处。【转载请注明来源】，因此，其实我们可以有目的的对性能问题进本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】行排查，按照问题分类进行排除的方法，逐渐【未经授权禁止转载】原创内容，盗版必究。找到根源。但是，我认为排除法的效率比较低本文作者：唐霜，转载请注明出处。【本文受版权保护】下，我们应该找到更好的方法来解决。

【原创不易，请尊重版权】【原创不易，请尊重版权】

这一节，我们主要要讲的是如何诊断，而非如本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。何优化性能。如何诊断？我们可以对应到医生【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】如何诊断（诊断和分析病理、开药治病是两回本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】事）。中医诊断讲究望闻问切，西医诊断讲究著作权归作者所有，禁止商业用途转载。【转载请注明来源】数据。我们可以发现，中西医诊断都有一套自本文版权归作者所有，未经授权不得转载。【转载请注明来源】己的方法论。同样，我们最好在诊断性能问题【转载请注明来源】【版权所有，侵权必究】时也有一套方法论，可以让我们不慌不忙，从【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net容不迫。我认为主要有以下诊断方法。

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

可视工具诊断

我们可以借助chrome浏览器自带的de本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。vtool可视工具进行诊断。其中主要用到【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】Performance、Lighthou【转载请注明来源】未经授权，禁止复制转载。se两个面板工具。Performance【作者：唐霜】著作权归作者所有，禁止商业用途转载。面板提供应用运行过程中的时间切面，是动态【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net的实时的快照收集。Lighthouse则本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】是一个基于谷歌评价指标的全站评测工具，其【版权所有】唐霜 www.tangshuang.net【作者：唐霜】中不仅包含了性能指标，还包含了其他指标，【转载请注明来源】本文作者：唐霜，转载请注明出处。我们可以只关注其中的性能指标，通过lig【本文受版权保护】【本文受版权保护】hthouse，我们可以获得对自己网站的未经授权，禁止复制转载。【原创内容，转载请注明出处】一份评测报告。

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

Performance面板基于时间线ti【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netmeline对应用运行过程进行了切面汇总【本文受版权保护】原创内容，盗版必究。，创造性的绘制了一张火焰图，通过这张火焰转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。图，可以直接定位到哪一段代码运行了特别长本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】时间

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【未经授权禁止转载】

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【转载请注明来源】原创内容，盗版必究。

【原创不易，请尊重版权】原创内容，盗版必究。【转载请注明来源】

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

其中Lighthouse覆盖了很多我们上【原创内容，转载请注明出处】未经授权，禁止复制转载。文提到的指标，还有SEO的指标评价。但是【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。对于我个人而言，更推荐用会、用懂、用熟、【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。用精Performance面板，因为我们未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net日常开发中更多的时候并不需要在意上面的F著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】CP、TTI等等指标，我们往往更关心的是【本文首发于唐霜的博客】原创内容，盗版必究。代码运行性能，而Performance面【本文受版权保护】本文版权归作者所有，未经授权不得转载。板就可以为我们提供非常有帮助的信息。

埋点诊断

在代码中通过代码记录一段代码的起始和结束转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。时间，来评估这段代码所消耗的性能。埋点诊未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。断不仅适用于同步执行代码，也适用于异步执【本文首发于唐霜的博客】【版权所有，侵权必究】行代码。Performance面板往往只著作权归作者所有，禁止商业用途转载。【转载请注明来源】能反馈给我们同步执行代码的情况，而例如r【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】eact这样的框架基于fiber运行代码【作者：唐霜】【版权所有】唐霜 www.tangshuang.net，它独特的时间切片让我们很难直接用Per【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netformance提供的火焰图收集到组件的本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】渲染性能。而通过在代码中使用performance API方法，就可以很好的测量一段代码的大致性能【版权所有】唐霜 www.tangshuang.net【本文受版权保护】（当然，由于机器、环境不同，我们是无法准【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net确测量的）。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】

Benchmark诊断

和手动埋点不同，Benchmark不需要未经授权，禁止复制转载。【原创不易，请尊重版权】你手动埋点，但需要你把一段需要被评测的代【本文受版权保护】本文版权归作者所有，未经授权不得转载。码交给benchmark库，由它来进行运行。它会在内部多次运行，通【未经授权禁止转载】【本文首发于唐霜的博客】过benchmark算法进行统计，取到一【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】个相对来说还比较公平的比值。

注入诊断

你可能遇到过这样的场景，当你打开页面时，转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net页面永远处于加载状态，打开devtool转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net也一片空白。遇到这种情况，多半是遇到了死本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】循环。这种情况下，我们根本无法通过上述工本文版权归作者所有，未经授权不得转载。【作者：唐霜】具进行诊断，浏览器已经被玩坏了，无法再提【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】供给你有效的信息。

当无法正面获得反馈时，我们就需要用到一些【版权所有，侵权必究】【本文首发于唐霜的博客】技巧。死循环出现的原因无非3种：whil【转载请注明来源】本文版权归作者所有，未经授权不得转载。e, for, 递归。无论是哪一种，我们【作者：唐霜】【作者：唐霜】都没有办法通过上面的诊断手法实现诊断。此【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。时，我们可以在while, for, 递【本文受版权保护】【原创内容，转载请注明出处】归函数内，假如一个特殊的函数，这个函数可【本文受版权保护】【原创内容，转载请注明出处】以收集当前这个块循环执行的次数，如果一个原创内容，盗版必究。【作者：唐霜】块被循环执行了1000次，即使不是死循环原创内容，盗版必究。原创内容，盗版必究。，我们也认为它出了大问题。但是，我们总不【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】能在我们庞大的代码库里面，为每一个代码块本文作者：唐霜，转载请注明出处。【转载请注明来源】都去加这个标记函数吧。没关系，我们有基于转载请注明出处：www.tangshuang.net【版权所有，侵权必究】AST的工具，例如babel，或者我们用本文版权归作者所有，未经授权不得转载。【作者：唐霜】webpack进行构建时，可以使用bab【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。el-loader，通过AST的分析，在著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。每一个块内打上标记，让最终运行的代码带上【作者：唐霜】【作者：唐霜】这些标记。而标记函数在记录了大量次数之后本文作者：唐霜，转载请注明出处。【作者：唐霜】，自动throw打断执行，这样就可以避免未经授权，禁止复制转载。【本文受版权保护】死循环无法进入应用，同时我们还可以顺藤摸【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net瓜找到问题代码。这种通过工具往代码里面注本文版权归作者所有，未经授权不得转载。【作者：唐霜】入标记的方法，就是注入诊断。

本文版权归作者所有，未经授权不得转载。【本文受版权保护】【原创不易，请尊重版权】

这里留一个思考题：为什么浏览器不在Per【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。formance中提供用以检测死循环的功【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】能？

复杂度诊断

有经验的程序员，可以通过对代码分析，基于【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】O记法来对代码的性能进行大致评估。复杂度原创内容，盗版必究。【原创内容，转载请注明出处】分为时间复杂度和空间复杂度，时间复杂度表著作权归作者所有，禁止商业用途转载。【本文受版权保护】达的是“在最坏的情况下，会做多少次内存操未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net作”，空间复杂度表达的是“在最坏的情况下原创内容，盗版必究。本文作者：唐霜，转载请注明出处。，会占用多大的内存空间”。

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

O记法并不是准确的指出次数或大小，而是指转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net一个量级，O1和On和Ologⁿ和On²这些记法，仅仅表达的是算法在最坏情况下将【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。会达到这个量级，但在实际运行时，可能根本【原创内容，转载请注明出处】【本文首发于唐霜的博客】到不了这个量级，因此，实际运行过程中On原创内容，盗版必究。【版权所有，侵权必究】的算法不一定比O1的算法慢。

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】

但是复杂度对我们评估性能有非常重要的参考【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。，越是有经验的老程序员，越是喜欢通过O记【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】法来表达一段代码是否拥有更高的性能。如果【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。你在诊断代码性能时遇到困难，不妨找一个资【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】深的老程序员帮你看看，然后他给你一个O，著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net你就大概知道自己的代码性能处于怎样的一个本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】量级。

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

心理建设

性能问题对于很多初级开发者而言，其实是很【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】难的，它所涉及到的领域比较深，解决的办法【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】也不属于逻辑处理，因此对初级开发者而言，本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】是一块难啃但最好要啃下的骨头，不啃下这块【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。硬骨头，就无法进一步去探索前端开发领域的【未经授权禁止转载】【本文首发于唐霜的博客】其他高阶技术。在腾讯技术雷达中，前端性能【未经授权禁止转载】本文作者：唐霜，转载请注明出处。是从初级工程师走向中高级工程师的一项硬性【本文首发于唐霜的博客】【作者：唐霜】评价指标，在晋级答辩中，如果这一部分不如【转载请注明来源】著作权归作者所有，禁止商业用途转载。人意，那么通过的几率非常低。

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。

但是，性能问题又是很容易的。因为通读本册【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。，你会发现它的知识也就这么一些，掌握性能原创内容，盗版必究。【本文首发于唐霜的博客】优化方法，可以说是一劳永逸的。而且，当你转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】掌握这些方法之后，你就不会在遇到性能问题【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】时手足无措了，因为问题无非就那些，方法无本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net非就那些，只要多经历几次，就可以很好的去【转载请注明来源】著作权归作者所有，禁止商业用途转载。定位问题。

【本文受版权保护】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

心法如炼：浏览器资源加载原理

师傅叫我扎马步、臂提桶、念心经，非是不传【版权所有，侵权必究】【转载请注明来源】授招式，一年已过，却未学得半招一式，大仇本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net未报，我今竟不知自己终究在干甚，莫不是如未经授权，禁止复制转载。【转载请注明来源】此天天挑水砍柴？翌日夜里，趁师傅睡着，我【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】悄悄收了包袱，想下山算了。正踏出院门半步【作者：唐霜】【未经授权禁止转载】，噌嗖一声一个黑影劈我而来，迟快间要夺我【未经授权禁止转载】【本文受版权保护】命去，不知哪里来的劲儿，我竟一跃在空中翻【作者：唐霜】本文作者：唐霜，转载请注明出处。了两个筋斗躲闪过去。等我定下来，抬头一看【作者：唐霜】【本文受版权保护】，站在面前竟是熟睡的师傅。“当日你求我收【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】你为徒，我看你心浮气躁，怒念升眉，便不适本文版权归作者所有，未经授权不得转载。【本文受版权保护】练武的混人，故让你担水劈柴，磨你心性，今【本文受版权保护】转载请注明出处：www.tangshuang.net你已熟诵本门心法，下了山去，往后切勿告人【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net我乃你师傅。走吧！”乎嗖一声，师傅便没了【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。影踪，此时我才觉悟，原来师傅从始至终都在未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。传我心法。扑通三个响头，一日为师终身为父【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。，弟子我去了。
【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net原创内容，盗版必究。【作者：唐霜】

浏览器如何假装资源的？这个问题将决定我们【作者：唐霜】转载请注明出处：www.tangshuang.net如何认知我们的页面打开时都发生了什么，以【原创内容，转载请注明出处】【本文受版权保护】至于在这个阶段出现了性能损耗，最终导致应【本文受版权保护】未经授权，禁止复制转载。用打开慢。本章将详细的阐述浏览器资源加载著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net的原理，让你修炼好性能优化的第一个心法。

【原创不易，请尊重版权】【未经授权禁止转载】

一道面试题：从你输入url开始……

未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

这道面试题似乎都有标准答案了，为什么面试【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。官们还是乐此不疲的问面试者呢？因为即使你【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。是死记硬背下来答案，也能帮助你理解浏览器未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net加载资源到渲染界面这个过程中所做的事情。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。这道题的答案可以分为4个部分，接下来我们【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】将会回答这道面试题的2/4部分。

【作者：唐霜】原创内容，盗版必究。

浏览器加载资源的流程

当浏览器与被请求的服务器建立http连接【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】之后（被请求资源类型基于http头信息进本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net行协商），被请求页面的html字符串被服【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】务器端以字节流的形式向浏览器发送，浏览器【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】在接受到字节流之后，会将其根据编码转换为【作者：唐霜】未经授权，禁止复制转载。字符串，接着根据W3C的HTML标准对字未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。符串进行解析（生产tokens），经过此【转载请注明来源】【版权所有】唐霜 www.tangshuang.net法分析后将tokens转化为有命名、属性著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】及属性值的嵌套对象结构，并根据结构关系连【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】接处属性结构，最终生成DOM树。

未经授权，禁止复制转载。原创内容，盗版必究。

于此同时，在生成DOM树的过程中，浏览器【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】会对一些特殊的对象进行特殊的处理，其中遇【原创内容，转载请注明出处】【作者：唐霜】到link[rel=stylesheet【转载请注明来源】原创内容，盗版必究。], script[src], img[【作者：唐霜】【原创内容，转载请注明出处】src]等指向其他资源的对象时，会采用策本文版权归作者所有，未经授权不得转载。【作者：唐霜】略再次请求对应资源。其中，link cs未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。s的加载过程和html的加载过程很像，也【本文首发于唐霜的博客】【版权所有，侵权必究】会进行令牌->CSSOM的类编译过【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。程，而且其中遇到@import, url【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】()等还会再次分出支流去请求资源。

未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

这些分出的支流资源请求行为模式并不相同，【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】其中script大部分都是同步加载的，会【原创内容，转载请注明出处】【版权所有，侵权必究】阻塞渲染（哦，我们还没有讲到渲染），一边本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net加载一边执行，而其他资源常常是异步的，只【关注微信公众号：wwwtangshuangnet】【作者：唐霜】有当他们都加载完毕之后才会使自己生效。另【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】外，iframe是一个特例，你不能用引用本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。资源来解释它。我们可以为script设置著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netdelay或defer属性来让scrip【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。t延迟加载，这一就不会阻塞DOM的第一次【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。渲染动作。

原创内容，盗版必究。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

由于网络请求不属于浏览器当前页面的渲染任【作者：唐霜】本文版权归作者所有，未经授权不得转载。务，所以它们被放在另外一个线程中运行，当【本文受版权保护】【本文受版权保护】请求结束后才会把请求到的资源交还给主线程【转载请注明来源】【本文受版权保护】去使用。（下文我们会详细阐述浏览器的渲染【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】线程、JS引擎等。）而以前的浏览器，对这【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net些正在发送的请求总数有一个限制，不同浏览【本文受版权保护】【本文受版权保护】器限制不同，通常我们说6个是它的最高配额【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，也就是说如果我们的页面上有10张图，它本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】们会被分两批进行请求，所以当页面里面的图未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。片多的时候，我们需要考虑一些策略来决定怎著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】么加载，比如采用懒加载策略，避免图片请求原创内容，盗版必究。【原创内容，转载请注明出处】撑爆了请求配额，导致用户点击动作出发的数【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net据请求无法即时响应。

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。原创内容，盗版必究。

当DOM树被加载完成时（包含同步执行的s【未经授权禁止转载】本文作者：唐霜，转载请注明出处。cript），DOMContentLoa【作者：唐霜】【未经授权禁止转载】ded事件会被触发。当其他被依赖的资源（本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】如css、图片）加载完成时，load事件转载请注明出处：www.tangshuang.net【未经授权禁止转载】被触发。这里需要注意“被依赖”，如果cs【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。s、img是通过script延迟异步创建本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net加载的，那么是不被包含在load事件所指【版权所有，侵权必究】【作者：唐霜】代的过程里面的。但css引入了其他资源，本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。则会被包含在这个过程中。

【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

理论上，构建DOM树和渲染应该是分开的，【原创不易，请尊重版权】【原创不易，请尊重版权】我们思考时可能想应该先有DOM树，然后把转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】DOM+CSSOM放在一起，才能做渲染，未经授权，禁止复制转载。【版权所有，侵权必究】但是浏览器偏偏没有这样做，而是在DOM树转载请注明出处：www.tangshuang.net【版权所有，侵权必究】的加载过程中，就一边加载一边渲染。这也是转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。为什么有些网站css加载完之前和加载完之本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net后会有明显的差异的原因。还有一些老的技术【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net，基于流的特性，让html永远处于加载状【未经授权禁止转载】【未经授权禁止转载】态，这样就可以让服务器端异步的吐出内容来本文作者：唐霜，转载请注明出处。【转载请注明来源】进行页面加载，比如一些古老的聊天室就是基原创内容，盗版必究。【作者：唐霜】于这样的技术实现实时聊天的，要知道那个时本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】代还没有ajax技术。

原创内容，盗版必究。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

哪些加载会阻塞渲染？

正如上文所说，阻塞渲染并不是一定的，例如【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。script理论上会阻塞，但是我们可以通未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】过delay或defer属性来延迟它的加本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net载，从而避免阻塞，但是一些场景下，又不能【版权所有】唐霜 www.tangshuang.net【本文受版权保护】延迟其加载，否则会使得TTI、CLS数据转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】很不好看。异步加载的img理论上不会阻塞【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】渲染，但是当页面里面图片多了，也可能由于未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。请求过多导致服务器瞬间承担了较强的压力，【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】而让html的流吐出变慢。

Css加载不会阻塞DOM树的解析，但cs著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。s加载会阻塞渲染，在下文我们会详细讲解浏原创内容，盗版必究。未经授权，禁止复制转载。览器的渲染原理。其实我们可以很容易理解这【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。一点，因为渲染不单单只有DOM树，而是D著作权归作者所有，禁止商业用途转载。【本文受版权保护】OM+CSSOM一起，而加载css会让C本文版权归作者所有，未经授权不得转载。【本文受版权保护】SSOM的加载和计算都延长。这是怎么发生【本文受版权保护】本文版权归作者所有，未经授权不得转载。的呢？下文讲到浏览器渲染原理时，我们会详【原创不易，请尊重版权】【本文首发于唐霜的博客】细阐述。

原创内容，盗版必究。【本文受版权保护】【本文首发于唐霜的博客】

加载优化技巧

加载优化的目标，是让用户打开我们的应用更【原创不易，请尊重版权】原创内容，盗版必究。快，减少TTI。也就是说，这一优化针对的【原创内容，转载请注明出处】【本文首发于唐霜的博客】是“第一次原则”，及减少用户打开应用到开著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】始使用应用提供的功能之间的时间消耗，让用原创内容，盗版必究。本文作者：唐霜，转载请注明出处。户更快的使用应用实现自己的目的。当然，我【版权所有，侵权必究】【原创不易，请尊重版权】们业界有这样一句口号，“追求极致体验”，【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。很多厂商强调0.1s级别的应用打开，但我本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net认为这是没有必要的，过于追求极致是有代价【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】的，代价就是浪费丰富的服务资源来支撑这一本文版权归作者所有，未经授权不得转载。【转载请注明来源】0.1s的性能，摩尔定律会让我们在这种追【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】求极致的过程，没提升一点点的成本都极高。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】我认为只要不慢，就是我们的目标。因此，我著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】们虽然在下文会提供一些技巧，但是这些技巧【本文受版权保护】原创内容，盗版必究。可能你并不一定非得都用上，因为有的时候，【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。即使你把这些技巧全部都用上，或许也看不到未经授权，禁止复制转载。【未经授权禁止转载】任何的性能提升，最后还不如加几台服务器，转载请注明出处：www.tangshuang.net【作者：唐霜】购买更高级别的宽带来的快。这里只是提供一【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。些技巧作为参考，你可以从中掌握一些成本较原创内容，盗版必究。【未经授权禁止转载】低的方案，但最终还是需要整体来考虑。

【原创不易，请尊重版权】原创内容，盗版必究。【本文受版权保护】未经授权，禁止复制转载。

优先级加载顺序

我们既然知道浏览器的加载流程了，那么我们【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】就应该设计我们的加载顺序，以更好的把最早【本文受版权保护】著作权归作者所有，禁止商业用途转载。需要的部分加载出来，让暂时不需要的部分在本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。空闲的时候加载。一般来讲，我们会推荐如下未经授权，禁止复制转载。原创内容，盗版必究。的加载顺序：

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。

在head中加载css文件，因为css是转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。异步加载的，不会阻塞渲染，同时把它放在顶未经授权，禁止复制转载。【原创内容，转载请注明出处】部，是希望它可以尽早发出请求，当DOM加【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net载完时，我们希望CSSOM也同时加载好，【转载请注明来源】【版权所有，侵权必究】两者再reflow一回

【未经授权禁止转载】

【原创不易，请尊重版权】

【访问 www.tangshuang.net 获取更多精彩内容】

在body结束位置加载script文件，【版权所有】唐霜 www.tangshuang.net【作者：唐霜】因为script会阻塞渲染，如果在前面加【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。载，就会让网页渲染到一半停滞，等scri著作权归作者所有，禁止商业用途转载。【作者：唐霜】pt执行完毕之后才会继续渲染

【原创内容，转载请注明出处】

【访问 www.tangshuang.net 获取更多精彩内容】

【本文首发于唐霜的博客】

【原创内容，转载请注明出处】

浏览器会对资源的重要性进行判断来划分加载原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。优先级，通常有Lowest, Low, 本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】High, Highest四个等级，一般本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】在<head>中的css具有【版权所有，侵权必究】原创内容，盗版必究。Highest最高优先级，其次是<【原创不易，请尊重版权】【本文受版权保护】script>，但当<scr原创内容，盗版必究。未经授权，禁止复制转载。ipt>拥有defer或delay转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。属性时，其优先级会降低为Low。这也就意未经授权，禁止复制转载。【本文首发于唐霜的博客】味着，在浏览器中，不同资源出现在同一位置原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。的时候，其加载的顺序并不一定按照其出现的【未经授权禁止转载】【作者：唐霜】先后顺序决定，而受到资源类型的优先级影响【原创内容，转载请注明出处】【原创不易，请尊重版权】。有些优先级规则比较隐蔽，比如图片处于可本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。视区域和非可视区域的优先级，明显是处于可本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。视区域的优先级更高。

【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

预加载

当有些资源的加载优先级不符合你的预期时，未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】可以通过预加载preload来提升其优先转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】级，让它尽快加载。比如某些css文件，在【原创内容，转载请注明出处】未经授权，禁止复制转载。首屏渲染时可能并不会用到，但是当鼠标滚动【本文首发于唐霜的博客】未经授权，禁止复制转载。下滑时，会被加载到页面中，但是我们知道请转载请注明出处：www.tangshuang.net原创内容，盗版必究。求过程是需要时间的，此时，往往我们已经通【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。过脚本修改了DOM，但是对应的css还处本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net于加载状态，页面上的元素就并没有被应用样转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】式，等到css加载完毕之后，才会重新渲染【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net。这样的体验明显不够好，于是，我们可以在未经授权，禁止复制转载。【本文首发于唐霜的博客】<head>中使用预加载来让未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。浏览器提前准备好对应的css资源，等到需【转载请注明来源】【原创不易，请尊重版权】要它的时候，我们就不需要再次请求它。

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【转载请注明来源】著作权归作者所有，禁止商业用途转载。

<link rel="preload" as="sytyle" href="some.css" />

除了css，图片、视频等也经常被预加载。【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。被预加载的资源，会被浏览器提前下载到本地本文作者：唐霜，转载请注明出处。【作者：唐霜】，当下一次请求该资源时，就直接使用请求好本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net的资源。从这一描述中你会发现，这类资源一【原创不易，请尊重版权】【本文首发于唐霜的博客】定是固定的，幂等的，多半是静态资源，例如本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。脚本文件、css文件、图片等等。像数据接【本文受版权保护】【版权所有，侵权必究】口之类的资源，是不应该使用预加载的。

预请求

预请求prefetch相当于在实际发生请著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net求之前，让浏览器提前帮你做一次相同的请求【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。，而这些请求往往是静默的，不被察觉的。例原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】如，你的网站有两个页面，用户进入第一个页【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net面之后，一定会通过点击进入第二个页面。但【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net是假如每次都需要进入的时候再来加载这个页【转载请注明来源】【作者：唐霜】面，那么就会消耗掉请求这个过程时间，通过本文作者：唐霜，转载请注明出处。【未经授权禁止转载】prefetch我们就可以让浏览器悄悄先本文作者：唐霜，转载请注明出处。原创内容，盗版必究。请求一次第二个页面，并通过缓存机制，将第转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。二个页面缓存起来，这样当用户点击进入第二本文版权归作者所有，未经授权不得转载。【作者：唐霜】个页面时，就可以做到秒开。

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

<link rel="prefetch" href="page2.html" />

和preload有很大不同，一是pref【版权所有，侵权必究】【版权所有，侵权必究】etch可以预请求任意资源，而非仅仅静态【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】资源；二是prefetch的效果和人为手【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。动请求效果一致，所以当你的页面再次请求对【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net应资源的时候，请求还会再发出，也就是说，【本文受版权保护】【版权所有】唐霜 www.tangshuang.net同一个资源，prefetch一次，人为请未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net求一次，有两次。有两次请求显然又有它的缺【原创内容，转载请注明出处】原创内容，盗版必究。点，因此，一般来说，可被预加载的资源，我原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。们都需要服务器端配合设定浏览器缓存（在后本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】文会详细阐述），这样才能在下次请求时瞬间【原创不易，请尊重版权】【转载请注明来源】获得资源结果。

一个技巧是，我们可以通过JS脚本动态插入未经授权，禁止复制转载。【本文受版权保护】<link rel=”【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。prefetch” />【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】;来实现预加载，例如当我们鼠标移动带某个本文作者：唐霜，转载请注明出处。【本文受版权保护】链接时，就对该链接指向的资源进行预请求，原创内容，盗版必究。【转载请注明来源】当用户点击时，实际上我们对该链接对应资源本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】的请求早都发出去了，可能此刻已经被缓存起【作者：唐霜】【版权所有】唐霜 www.tangshuang.net来了，等到点击发生时，就可以瞬间打开该链本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。接了。

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

懒加载

和预加载相反，懒加载是降低请求优先级的技著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。术。不过除了<script>本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】的defer, delay之外，<【原创不易，请尊重版权】【作者：唐霜】img><iframe>原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。;等支持loading属性，把loadi【本文受版权保护】【本文首发于唐霜的博客】ng值设置为lazy，其效果和<s【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。cript>的delay就非常接近【未经授权禁止转载】【未经授权禁止转载】。虽然原生支持lazy loading，【原创不易，请尊重版权】原创内容，盗版必究。但是我们必须考虑浏览器请求数限制问题，假本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】如一篇文章有几十张图片，那么这些图片的请【原创内容，转载请注明出处】未经授权，禁止复制转载。求就会在文档加载完之后被发出，这也就意味【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。着如果用户点击某个按钮需要发出一个请求时【作者：唐霜】【版权所有】唐霜 www.tangshuang.net，这个请求就会被前面几十张图片的请求给拦【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。住，必须排队等着。因此，我们常常需要自己【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net设计懒加载策略。

【原创不易，请尊重版权】【原创内容，转载请注明出处】未经授权，禁止复制转载。

以图片为例，我们往往会用一张placeh【原创内容，转载请注明出处】【未经授权禁止转载】older图作为占位符，多张图都是用占位【关注微信公众号：wwwtangshuangnet】【本文受版权保护】图，配合上缓存，就会直接展示在界面上，当【作者：唐霜】【原创内容，转载请注明出处】该图片实际进入可视区域时，再将<i原创内容，盗版必究。原创内容，盗版必究。mg>的src属性替换为真正要加载【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net的图片的地址，此时图片才会被加载。有两种【转载请注明来源】著作权归作者所有，禁止商业用途转载。方案可以知道图片是否在可视区域，一种是通【未经授权禁止转载】【转载请注明来源】过监听scroll事件，实时去计算每张图【转载请注明来源】未经授权，禁止复制转载。片当前的位置；另一种是利用Interse【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】ctionObserver来对图片进行监转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】听。

乾坤挪移：代码打包与分包

这厮力道万斤，看是拼不过，但见那姑娘好是本文作者：唐霜，转载请注明出处。原创内容，盗版必究。可怜，不救不行。平生最恨这恶霸凶歹，我必【作者：唐霜】著作权归作者所有，禁止商业用途转载。须想个破他的办法。在山上的时候，我每日担【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】水，起初一桶水东晃西晃，到了不剩半桶，后【本文受版权保护】本文版权归作者所有，未经授权不得转载。来渐熟了水的力道，便能随之运动，不溅半点【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。，想必这世间力道也是相同的，水之力道能治【转载请注明来源】【关注微信公众号：wwwtangshuangnet】，这泼人的力道必然也能治。他一拳打来，我【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。便拆他为两拳，一百斤变五十斤，五十斤变廿【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】五斤，如此化了他的力道，让他只留一通废力著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net。“呆你个混帐东西，有本事就不要在那里摆【本文受版权保护】【原创内容，转载请注明出处】绣花拳，过来让爷爷给你松松皮。”“咦咦咦【本文首发于唐霜的博客】【本文受版权保护】，气死俺大爷，瞧拳！”那厮抡起胡拳就要杀著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。来，我是先用掌力收下这破拳，再运气揣裹他【未经授权禁止转载】【版权所有，侵权必究】的手臂，改变他出拳的方向，“轰”的一响，【本文首发于唐霜的博客】【版权所有，侵权必究】只见他是猛的把拳给到自己脸上，被自己锤翻【本文受版权保护】【作者：唐霜】在地，两眼一黑，昏死过去。
【原创内容，转载请注明出处】【版权所有，侵权必究】【版权所有，侵权必究】【转载请注明来源】

著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】

既然代码的加载影响了应用的打开速度，那么【原创不易，请尊重版权】【未经授权禁止转载】我们就要想办法让代码的加载变快。我们的策【作者：唐霜】本文版权归作者所有，未经授权不得转载。略是把需要的代码合并尽早加载，把不需要的【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。代码延迟加载。

构建打包

我们前文提到，浏览器的请求数量有上限，因本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。此，我们就可以想办法把多个请求合并为一个【版权所有，侵权必究】【作者：唐霜】，虽然单个请求的时长会增加，但是相比于分未经授权，禁止复制转载。未经授权，禁止复制转载。批请求所带来的网络性能损耗，反而会获得更【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。好的表现。因此，把原本分散在多个文件中的【关注微信公众号：wwwtangshuangnet】【本文受版权保护】代码合并到一个文件中。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net

最早的土办法就是手动把代码拷贝到一起；之【作者：唐霜】本文版权归作者所有，未经授权不得转载。后出现了一些工具，不仅可以自动把代码粘接本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。在一起，还能增加一些包装代码，例如当年j本文作者：唐霜，转载请注明出处。【未经授权禁止转载】Query所做的一样；再到后来出现了we【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netbpack, rollup等构建打包工具本文作者：唐霜，转载请注明出处。【转载请注明来源】，把打包抽象到了一个非常高的高度，它们内【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】部基于AST去处理代码，不仅可以把原本分【本文受版权保护】未经授权，禁止复制转载。散在多个文件的代码打包在一起，还能做一些【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。代码层面的检查和优化。

【转载请注明来源】【原创内容，转载请注明出处】原创内容，盗版必究。

如今，代码构建已经成为前端项目工程化的一【原创内容，转载请注明出处】【原创不易，请尊重版权】部分。各类前端框架也都必须在构建工具的加【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】持下才能使用。

【本文受版权保护】【本文首发于唐霜的博客】未经授权，禁止复制转载。【作者：唐霜】

分包

但随着前端代码量的越来越大，在打包成为主【作者：唐霜】【版权所有，侵权必究】流之后，我们又开始发现，如果一个项目的代【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。码必须全部打包到一个文件，那么这个文件可【作者：唐霜】本文作者：唐霜，转载请注明出处。能撑到很大很大，其下载的时长突破了通过打【原创内容，转载请注明出处】【转载请注明来源】包减少请求数量所带来的收益，导致应用打开原创内容，盗版必究。【转载请注明来源】速度变慢，而且由于我们现在的应用都是基于【转载请注明来源】【未经授权禁止转载】脚本实现的界面渲染，所以，用户会有更长的原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。时间无法看到界面无法进行交互。但由于构建【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net所带来一些好处，我们无法再回到以前那种纯原创内容，盗版必究。【作者：唐霜】粹通过粘连代码在一起的方案来实现打包了。【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】于是，基于webpack等构建工具等ch【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】unk机制应运而生。

原创内容，盗版必究。【作者：唐霜】【未经授权禁止转载】【本文受版权保护】

这种chunk机制可以让开发者自己定义哪【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】些代码需要被从主包中提取出来放到一个ch【版权所有，侵权必究】【原创内容，转载请注明出处】unk中，这样，应用在加载时，就能利用并【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net行加载的特点，同时加载两个文件，把脚本的著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】加载时间缩短。等下我们会讲到模块化加载，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。chunk机制的加载其实也是模块化的加载【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net原理，但和纯粹的模块化开发存在巨大差别，【作者：唐霜】【作者：唐霜】后续了解完模块化演进之路后你就能有一个比【作者：唐霜】【版权所有】唐霜 www.tangshuang.net较清晰的认识。

【作者：唐霜】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

按需加载

和前文提到的懒加载一样，js脚本的加载也【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】可以实现懒加载，即需要的时候，才加载进来【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。执行，不需要的时候按兵不动。这一设想在浏【原创内容，转载请注明出处】【版权所有，侵权必究】览器端最早被AMD模块化加载机制实现，其【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】对应的实现库叫requrejs，现在已经本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。很少有人在用了，但是在ES5和webpa本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netck等工具出现之前，是前端架构中的一个主【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】流。

AMD模块化规范要求开发者们按照一定的结【本文首发于唐霜的博客】未经授权，禁止复制转载。构撰写代码，每个要实现的功能放在一个模块转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】中，通常情况下，一个模块放在一个文件中，【本文受版权保护】本文版权归作者所有，未经授权不得转载。这个文件被称为模块文件，基于文件路径加载未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。该模块。有了这些前置规范之后，开发者们使【版权所有，侵权必究】【本文首发于唐霜的博客】用requirejs作为AMD的驱动框架本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，在主应用中加载入口文件，只有当前界面所【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】需要的模块会被加载，当前界面不需要的模块著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】文件按兵不动，等到新界面出现时，被需要的【作者：唐霜】【未经授权禁止转载】模块文件会被请求并加载。

【本文首发于唐霜的博客】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

虽然按需加载确实可以减少首次加载的代码量【本文首发于唐霜的博客】【本文受版权保护】，但是这里有一个陷阱，假如我们把模块切分本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。的很细（以方便复用），那么应用打开时就有原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】可能依赖非常多的模块，导致突破请求数量上著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】限，降低了加载的性能。因此，我们仍然需要著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】webpack来实现打包，通过打包分包，【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】来避免首次需要加载过多文件数量的问题。

【转载请注明来源】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】

同时，随着新版本的ES的发布，impor【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.nett()可以帮助我们在原有import模块【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。化标准的基础上，按需加载。同时webpa【作者：唐霜】【版权所有】唐霜 www.tangshuang.netck也支持将import()的目标脚本作【版权所有，侵权必究】转载请注明出处：www.tangshuang.net为一个chunk独立出来。这样，我们不仅本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】能享受打包带来的减少加载文件数量的优化效著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。果，还能享受通过chunk分包实现按需加原创内容，盗版必究。本文作者：唐霜，转载请注明出处。载的效果。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

至无化有：优化资源体积

“道长，我已身中剧毒，恐命休矣。只是这婴原创内容，盗版必究。【作者：唐霜】孩，父母惨遭恶人杀害，望你能收留他，待其【未经授权禁止转载】【原创不易，请尊重版权】成年传道于他。”“年轻人，人间世道百轮回【作者：唐霜】【原创不易，请尊重版权】，无为即空万重生，丢弃该丢弃的，你未曾需【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。要它，道即是道，命不可违，我看你命数未尽转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】，现去一条胳膊救你一命……”话未落下，只【本文首发于唐霜的博客】原创内容，盗版必究。见那道人两指抱胸，胡乱画了一个通，戳在我【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net左手肩臂，一时之间，疼痛如万蚁啄食，从头【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。顶直穿脚底的碎裂，一时两眼一黑，昏厥过去【未经授权禁止转载】本文作者：唐霜，转载请注明出处。。等我醒来，躺在一处废弃的牧屋破草堆里，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。早已没了那道人和婴孩的身影。等我直立起来【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。，才发现，我那中了剧毒已经烂化的左手早已【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。不知去向，只剩光溜溜的一只残臂。但即使如本文作者：唐霜，转载请注明出处。【作者：唐霜】此，我却觉得全身气运神通，浑身如被注入了【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。某种力量般，丹田处一股清凉的命气在缓缓缠【原创内容，转载请注明出处】【原创不易，请尊重版权】绕，任督六脉全已打通。有一种力量在身体里转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】聚集，我来到屋外，朝那山头来了一掌，一股【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】强烈的气脉从我掌心射出，将那山头轰的乱石【原创不易，请尊重版权】【本文受版权保护】横飞。此刻我才反应过来，原来这道人才是真【关注微信公众号：wwwtangshuangnet】【转载请注明来源】正的世外高人，竟有如此修为。
【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【作者：唐霜】

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【原创不易，请尊重版权】

代码压缩

我们使用webpack时，可以通过mod原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】e为production配置来让webp【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ack自动压缩我们的js代码，但是由于w原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netebpack并不能处理我们的css，所以未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。我们必须通过其他插件来压缩css、svg原创内容，盗版必究。【转载请注明来源】、json等等其他可以作为代码的资源。

未经授权，禁止复制转载。【未经授权禁止转载】

除了对代码进行压缩，我们还可以通过工具链著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】移除、优化代码，从而获得更小体积的结果。【本文受版权保护】【转载请注明来源】例如，通过tree shaking的特性本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】，移除哪些没有被调用的js函数，移除那些【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net没有被引用的css类，移除那些用来注解的【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。svg标签等等。作为一本提供优化思路的册【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。子，我不会在这里把具体的代码提供给你，因【本文首发于唐霜的博客】【版权所有，侵权必究】为不同版本的工具，总是会有不一样的配置选【本文首发于唐霜的博客】【原创内容，转载请注明出处】项。你只要知道，我们可以使用这样的优化手【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net段来达到这样的目的，就可以顺藤摸瓜，找到【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。具有该功能的工具，怕的就是你不知道还能这本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。样处理，也就不会去使用对应的工具了。

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

图片资源优化

前文我们讲过图片的懒加载，那是从加载的角【本文首发于唐霜的博客】【作者：唐霜】度去讲，现在，我们从图片体积的角度去进行【原创不易，请尊重版权】【作者：唐霜】优化。

原创内容，盗版必究。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

用css绘制图片

其实有些图片是不需要的，比如我们以前喜欢【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。用一个图片作为分割线，但是现在不会再有人转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。这么干了，我们会使用css来绘制出效果差本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】不多的分割线。类似的效果还有圆角、阴影、【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】斜边等等。随着css能力的增强，我们现在【本文受版权保护】转载请注明出处：www.tangshuang.net可以用css绘制出非常多的效果，例如渐变未经授权，禁止复制转载。【转载请注明来源】、散漫、裁切等等。当然，有些css能力需原创内容，盗版必究。转载请注明出处：www.tangshuang.net要消耗比较多的计算资源，又会从另外一个角【原创不易，请尊重版权】【转载请注明来源】度降低性能，因此我们要避免使用这种属性来【转载请注明来源】【本文受版权保护】替代图片。

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。

善用srcset属性

不同显示屏分辨率不同，2倍高清图自然需要【本文受版权保护】【作者：唐霜】更大的体积，因此，我们可以通过srcse【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】t来确保在低分率屏下使用1倍图，避免不必【本文首发于唐霜的博客】【本文受版权保护】要的浪费。

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【原创内容，转载请注明出处】

<img src="some.jpg" srcset="some@2x.jpg 2x,some@3x.jpg 3x">

除了img，picture标签也是支持s【原创内容，转载请注明出处】【作者：唐霜】rcset的。

<picture>
  <source media="(min-width:800px)" srcset="some@2x.jpg 2x,some@3x.jpg 3x">
  <img src="some.jpg" />
</picture>

挑选适合的图片格式

图片格式是几乎所有和前端相关的材料都会讲著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。的。我这里就长话短说。

【未经授权禁止转载】未经授权，禁止复制转载。

jpg 压缩率高的同时，还能保证较好的图原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net片质量，但是无法透明

【转载请注明来源】

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

gif 色域窄，体积大，但支持透明

本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。

【本文首发于唐霜的博客】

【关注微信公众号：wwwtangshuangnet】

png 压缩率最差，体积大，支持透明，但【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net无法像gif一样有动画效果

【本文受版权保护】

【未经授权禁止转载】

【本文首发于唐霜的博客】

【原创内容，转载请注明出处】

webp 体积小，支持透明，压缩率还很好著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net，除了无法支持动画，苹果设备上兼容性差

【转载请注明来源】

著作权归作者所有，禁止商业用途转载。

svg 矢量图，但是渲染性能最差，涉及比【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。较底层的svg渲染逻辑

【原创不易，请尊重版权】

【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有，未经授权不得转载。

【访问 www.tangshuang.net 获取更多精彩内容】

jpg的压缩模式有两种，一种是基线模式，【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。一种是渐进模式。基线模式的图加载的时候就本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】像放下来的投影幕布一样，一点点给你看。渐【本文受版权保护】【未经授权禁止转载】进模式的图则像迷雾中走来的美女，一开始模本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net糊，逐渐清晰起来。如何选择使用哪种图片格本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net式呢？有一张图可以参考：

转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

来源田佳奇《Web前端性能优化》

【未经授权禁止转载】【未经授权禁止转载】【原创内容，转载请注明出处】

当然，选择图片格式的前提是，在相同一张图本文作者：唐霜，转载请注明出处。【本文受版权保护】的情况下，但是很显然，比如gif可以动画【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。，svg可以矢量，这种是没有得选的。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net

图片压缩

除了图片格式，我们还可以自己对图片进行压未经授权，禁止复制转载。【原创内容，转载请注明出处】缩，比如某些cdn提供的压缩功能，一张几本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。M的图片经过压缩后只有100多k，而且你本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】揉眼还不大能分辨的出来它们的差异。

如果自己对图片进行压缩呢？又一个imag未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。emin插件可以帮你实现，在你写代码时，【转载请注明来源】【版权所有】唐霜 www.tangshuang.net拿到一张图片，可以在node环境下用gu【原创内容，转载请注明出处】【作者：唐霜】lp等工具统一对图片进行压缩。当然，如果著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】是在线的图片，就使用cdn好了。

【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。

尺寸缩放

有些图片存在一些操作上的逻辑，我们都见过原创内容，盗版必究。本文作者：唐霜，转载请注明出处。百度地图，通过滚动来缩放地图的时候，难道本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】真的是把一张图片进行缩放了吗？不是的，它未经授权，禁止复制转载。【转载请注明来源】是按照比例尺，取了对应比例尺下面的新图片【本文首发于唐霜的博客】【本文首发于唐霜的博客】进行展示。比如我们应用中有些图片需要点击【转载请注明来源】【关注微信公众号：wwwtangshuangnet】之后放大查看原图。这些场景下面，我们可以【未经授权禁止转载】【本文首发于唐霜的博客】先用小尺寸作为预览图，然后在点击之后，根【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。据当前屏幕的大小再提供对应尺寸的照片。抑本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。或，在通过鼠标缩放图片的时候，根据缩放到本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】的尺寸大小，再去加载对应尺寸的图片来替换【本文受版权保护】【转载请注明来源】当前图片。基于这一方案，我们可以在大部分【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。情况下，使用尺寸较小的图片，从而加快加载【作者：唐霜】【作者：唐霜】速度。

使用base64地址

在我们应用中如果存在一些尺寸比较小的图片本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。，可以讲该图片转化为base64的字符串本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。来直接使用，从而把图片转化为代码形式，就【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】无需避免请求加载了。

本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

<img src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....">

或者在css中作为背景

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net

background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....")

虽然我们可以在对图片进行压缩之后再bas【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。e64，但是它仅适合哪种尺寸很小的碎碎图未经授权，禁止复制转载。【本文受版权保护】，而不适合稍大尺寸的图，我们常用的照片也著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。不适合。这是因为base64地址形式会大著作权归作者所有，禁止商业用途转载。【作者：唐霜】大增加我们宿主的代码量，反而降低宿主文件【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】的加载速度。当你把文件转化为base64转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net之后，如果超过两行代码，就应该止损不用。

未经授权，禁止复制转载。【原创内容，转载请注明出处】未经授权，禁止复制转载。

使用视频替换gif图

对于简单、尺寸小、动画时长短暂的gif，【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。使用时没有什么问题。但是当gif图尺寸大【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。、帧数多、色彩复杂，则会遇到非常大的加载著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】和解码性能损耗，而且由于解码会占用资源，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。还会阻塞渲染。相比之下，将gif转换为m未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netpeg-4或webm格式的视频来替代，可本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】能是一个更好的选择，虽然听上去视频好像会【本文首发于唐霜的博客】【本文受版权保护】更耗性能，但是在替代体积很大gif，不仅【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net在体积上大大缩小，而且播放质量上也有比较【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net大的提升。

转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

Sprite雪碧图

我们老一代的前端程序员必备的一项技能，就本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】是把我们的icon图片集合到一张图片中，原创内容，盗版必究。【原创不易，请尊重版权】通过background-positio【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。n来控制需要展示的位置，从而实现图标。为【作者：唐霜】【原创内容，转载请注明出处】什么要把一些碎碎图合并为一张图呢？因为我未经授权，禁止复制转载。【作者：唐霜】们都知道图片的加载是损耗性能的，从网络传【作者：唐霜】转载请注明出处：www.tangshuang.net输和图片加载的角度都会让这个小图片在一开【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。始不出来，一片白色，等到传输加载完之后才【原创不易，请尊重版权】【本文首发于唐霜的博客】突然出现。举个场景的例子，我们希望用户鼠【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net标放到某个位置的时候，图标从向上箭头变为著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】向下箭头，但是由于我们用一张小图片进行替【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】换，这就会导致用户第一次把鼠标放到上面时未经授权，禁止复制转载。【本文受版权保护】，箭头消失了，等了一下之后才突然出现新箭未经授权，禁止复制转载。【版权所有，侵权必究】头。而如果把这些碎碎图合并到一张图片内，【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。通过background-positio【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。n来展示想要的某个区域，就可以用加载一张【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】图的消耗一次性加载所有需要的图标。

未经授权，禁止复制转载。【本文受版权保护】转载请注明出处：www.tangshuang.net

由于这项技术都是依赖css backgr原创内容，盗版必究。【未经授权禁止转载】ound-position，所以它的使用转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】条件有限。一些插件，在构建过程中，自动把【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netbackground url替换为雪碧图未经授权，禁止复制转载。【本文受版权保护】，并自动加入background-pos【原创不易，请尊重版权】【版权所有，侵权必究】ition。

【作者：唐霜】【原创不易，请尊重版权】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

字体资源优化

其实字体资源没有太多的建议，主要有两点：

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

裁掉不需要的字，把包做到最小，需要加字的本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。时候再加进去

【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net

【本文受版权保护】

预加载字体文件

本文作者：唐霜，转载请注明出处。

【访问 www.tangshuang.net 获取更多精彩内容】

【关注微信公众号：wwwtangshuangnet】

字体格式虽然和图片格式一样，有大小区别，【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】但是不同的浏览器支持的字体格式又不一样，【作者：唐霜】未经授权，禁止复制转载。导致我们无法只使用一种格式，所以大部分还转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。会把所有格式都放一个在项目里面，通过fo原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netnt-face来使用。

未经授权，禁止复制转载。【原创内容，转载请注明出处】【原创内容，转载请注明出处】

压缩上传

我们提交表单也好，文件也好，上传速度也受【转载请注明来源】本文作者：唐霜，转载请注明出处。到提交内容的体积影响。首先想到的是压缩，原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net如果我们想要实现压缩，就必须前后端一起做【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】，而且由于算法需要引擎，不同情况下压缩效本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。率还不一样，相同的算法有的压缩率能到惊人著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。的50%，有的则只有可怜的90%，有的甚转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】至比原始数据还大，气死人。我们要掌握不同【未经授权禁止转载】原创内容，盗版必究。压缩算法的规律。

普通字符串，或者JSON数据转化为字符串著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。，可以使用LZ算法进行压缩，LZ算法是目【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】前主流的压缩率最高的字符串压缩算法。前端著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】可以通过lz-string等库进行压缩提转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】交，后端可以使用LZ算法解压工具对提交的【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】数据进行解压。

【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【作者：唐霜】

图片则可以使用canvas转化为base著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。64字符串后再进行LZ算法压缩上传。当然【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。，已经有库实现了这个过程，在github本文作者：唐霜，转载请注明出处。原创内容，盗版必究。上搜索js image compress未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ion就能找到需要的资源。当然，除了走字【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。符串压缩之外，还可以走图片本身的压缩路径本文版权归作者所有，未经授权不得转载。【转载请注明来源】，通过读取图片转化为arraybuffe转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。r之后，利用色域色相等原理，降低图片的质【未经授权禁止转载】【原创不易，请尊重版权】量和尺寸，处理完之后再从arraybuf著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。fer转化为blob在实例化为File对【未经授权禁止转载】【作者：唐霜】象进行提交。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。未经授权，禁止复制转载。

分片上传

对于比较大的文件、图片，可以采取分片上传【版权所有，侵权必究】【原创不易，请尊重版权】的技术方案。单个文件比较大，上传的耗时就【本文受版权保护】本文作者：唐霜，转载请注明出处。比较长。我们把一个文件拆分为多个小chu本文作者：唐霜，转载请注明出处。【转载请注明来源】nk，一起并行上传，利用浏览器可以同时发未经授权，禁止复制转载。未经授权，禁止复制转载。出多条请求的特点，减少上传的总体时间。分原创内容，盗版必究。原创内容，盗版必究。片上传的技术要点就是要建立一个索引，能够【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net让服务端知道这些小块之间的链接顺序，在接【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】收到所有小块之后，按照这个索引又把它们组原创内容，盗版必究。【原创内容，转载请注明出处】合在一起复原为一个完整的文件。在技术上，【版权所有，侵权必究】【本文受版权保护】我们可以将文件转化为arraybuffe本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】r，在进行切片和索引建立，再以流的形式直【本文首发于唐霜的博客】【原创不易，请尊重版权】接上传buffer，当然，我们需要手动操【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net作arraybuffer在分片开头64位著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。用来记录索引。另外，分片上传还要有一定的本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】冗余和重试，否则一旦某一个小块上传失败，本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。就无法复原整个文件，反而得不偿失。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】

M3U8视频格式

我们都知道视频一般都比较大，有些网页打开【本文受版权保护】【关注微信公众号：wwwtangshuangnet】自动播放一个视频，做出非常不错的效果，但【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。是苦于视频要加载很长的时间，这种效果的惊著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。喜被降低了。但是其实MP4是支持流式加载【未经授权禁止转载】未经授权，禁止复制转载。的，也就是一边播放一边加载，当然，如果在【原创内容，转载请注明出处】【本文首发于唐霜的博客】中途播放完了还没有加载出新的chunk，著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】就会卡顿，不过如果能够尽快开始播放也是不【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。错的，这就需要对视频做更细微的处理，在视【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。频头中给出更多信息，才能帮助视频播放器正【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】确解码。

【作者：唐霜】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

而M3U8格式则是像分片上传一样，对视频未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。进行分片播放，M3U8格式的视频文件本身【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net并不存储视频的内容，而是一个文本文件，用【版权所有，侵权必究】未经授权，禁止复制转载。于索引一个视频从第几分钟到第几分钟到块对本文版权归作者所有，未经授权不得转载。【本文受版权保护】应的地址。当播放器播放M3U8格式文件时本文作者：唐霜，转载请注明出处。原创内容，盗版必究。，它首先读取一些元数据信息，然后就直接下著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】载第一段视频进行播放，被下载的视频段一般【原创不易，请尊重版权】【本文首发于唐霜的博客】是.ts后缀的视频块（有些播放器甚至可以未经授权，禁止复制转载。原创内容，盗版必究。单独播放一个.ts文件），由于M3U8中著作权归作者所有，禁止商业用途转载。【转载请注明来源】提供了更多信息，当这个块被播放完之后，就【作者：唐霜】本文版权归作者所有，未经授权不得转载。会去读取下一个.ts文件来进行播放。这样【未经授权禁止转载】【原创不易，请尊重版权】当用户在看到一半退出时，没有播放到的视频【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net块就不会被请求。切分为块之后，视频加载的本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】速度也大大提升。当然，我们前端自己其实也本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。是可以去做视频解码器的，我们可以在原有的【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】视频解码器基础上封装一些能力，比如我们可【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。以封装为一次加载3段，播放器播放到第2段【本文受版权保护】【版权所有】唐霜 www.tangshuang.net的时候就去下载下一批，这样可以保证有足够著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】的时间去重试可能请求的错误，保证播放的连原创内容，盗版必究。转载请注明出处：www.tangshuang.net续性。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。

寒阳三式：网络优化

我追随绝世高手西无一三月同行，行侠仗义，【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net劫富济贫，惩奸除恶，未有败绩。日，西无一未经授权，禁止复制转载。【未经授权禁止转载】说到，“君子之交，终须一别，我即日就起身原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。去往西域，完成未兑现之诺言。”我回到，“未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net这些时日追随于你，学到无数，日后必坚守正本文版权归作者所有，未经授权不得转载。【转载请注明来源】义，扶弱惩强。”他说，“你行事有些冲动，【转载请注明来源】【原创不易，请尊重版权】今后定要三思后行，既不能伤及无辜，亦要保【未经授权禁止转载】【原创不易，请尊重版权】全自己。”酒过三巡，微醉轻风，“我将绝学【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】寒阳三式传授于你，看招。”只见他腾空而起【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。，风尘飞绝，气运逼人，天地震摇，引得众人【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】围观惊叹。三式过后，他醉意至极斜躺在枯木【未经授权禁止转载】【未经授权禁止转载】旁，只留的众人在那里复炼那些招式，只有我转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net知晓，招式为虚，意脉为实。我让酒馆小二找【作者：唐霜】【版权所有，侵权必究】来蓑衣棉布为他盖上。次日，一骑绝尘，我将【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。踏上自己孤身闯荡之路。
【本文受版权保护】【转载请注明来源】【作者：唐霜】原创内容，盗版必究。

【原创内容，转载请注明出处】【转载请注明来源】

我以前专门写过《http协议学习札记》记录了有关http相关的知识。做前端，【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。网络知识不可或缺，而在性能优化领域，对网原创内容，盗版必究。【未经授权禁止转载】络的优化也是重要一环。接下来，我们将对网【本文受版权保护】【本文受版权保护】络优化的三大招（CDN、缓存、http2【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】）进行介绍。

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【本文首发于唐霜的博客】

网络请求优化

让我们回到那个“当你在浏览器中输入url【原创不易，请尊重版权】【本文受版权保护】之后……”的面试题。我们需要确定一点，浏转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net览器首先是一个网络请求器，然后才是一个渲【作者：唐霜】【版权所有】唐霜 www.tangshuang.net染器。当浏览器准备开始按照你想要的开始工【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】作的时候，首先它会拿着域名，去DNS服务【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】器查询这个域名对应的是哪台服务器，这服务【关注微信公众号：wwwtangshuangnet】【转载请注明来源】器的IP地址是啥。我们知道，IP是一台服【作者：唐霜】未经授权，禁止复制转载。务器的门牌号。拿到IP之后，还没法获得服【未经授权禁止转载】【原创内容，转载请注明出处】务，得想办法从服务端拿资源。怎么办？我们【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】用http协议来实现呀。不过不好意思，想原创内容，盗版必究。【本文首发于唐霜的博客】要http，还得先TCP，http是基于本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netTCP的协议，所以得先基于IP进行TCP【本文首发于唐霜的博客】原创内容，盗版必究。连接（说到这里，前面DNS解析不也是为了未经授权，禁止复制转载。【原创内容，转载请注明出处】拿IP嘛），三次握手。TCP连接好了，接本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】下来就是http请求啦。

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

这里有3个步骤：DNS，TCP，HTTP转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】。所以，每一步都有优化空间。首先是DNS原创内容，盗版必究。转载请注明出处：www.tangshuang.net，额，怎么说呢？通用域名是没有机会优化了【本文首发于唐霜的博客】未经授权，禁止复制转载。，但是特殊环境下又可以优化，比如公司内统【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】一网络出口的情况下，公司自建DNS，从而【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。可以更快的获得IP。而TCP也没有什么优【作者：唐霜】未经授权，禁止复制转载。化空间，当然，如果是自建客户端，就有机会未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】，比如用UDP取代TCP。

【原创不易，请尊重版权】【原创不易，请尊重版权】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。

HTTP层面，我们可以和后端、运维同学一【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net起，做一些优化。

【原创内容，转载请注明出处】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【转载请注明来源】

避免重定向

【本文首发于唐霜的博客】

未经授权，禁止复制转载。

【转载请注明来源】

减小cookie体积

【未经授权禁止转载】

【本文首发于唐霜的博客】

【访问 www.tangshuang.net 获取更多精彩内容】

Gzip压缩

【转载请注明来源】

【作者：唐霜】

【关注微信公众号：wwwtangshuangnet】

【访问 www.tangshuang.net 获取更多精彩内容】

HTTP2（下下下节讲）

【原创不易，请尊重版权】

【未经授权禁止转载】

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

HTTP缓存

【原创内容，转载请注明出处】原创内容，盗版必究。【转载请注明来源】【作者：唐霜】

Cache-Control + Expi本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netres

【原创内容，转载请注明出处】

【原创不易，请尊重版权】

【原创内容，转载请注明出处】

304 + Last-Modified

【关注微信公众号：wwwtangshuangnet】

【未经授权禁止转载】

未经授权，禁止复制转载。

304 + Etag

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net

【作者：唐霜】

另外，我们还能把这三种中的两种混用在一起【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】，起到更可控的缓存。

实现HTTP缓存也得后端来做，一种是对静未经授权，禁止复制转载。【未经授权禁止转载】态资源，可以通过配置nginx或apac原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】he配置中做到，还有一种是通过后端程序来本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。做，特别是Etag，只能通过后端程序按一【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net定算法来实现。

未经授权，禁止复制转载。【作者：唐霜】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】

CDN

前面我们讲到我们没法优化DNS，但是有些【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。人却可以，那就是DNS服务商。我们把域名本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】托管给他们，他们就可以根据用户访问的情况未经授权，禁止复制转载。【未经授权禁止转载】来把域名解析到不同的地方，比如你有一台服【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。务器就在用户所在的城市，那么就让DNS服【转载请注明来源】未经授权，禁止复制转载。务商（或者自建的DNS服务器）把这个用户本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。解析到这台服务器，那么此时建立TCP也好【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】，网络传输也好，都会快很多。CDN就是基【未经授权禁止转载】【本文首发于唐霜的博客】于这样的想法，把我的资源和数据存到离用户未经授权，禁止复制转载。【本文受版权保护】更近的服务器上面，这样通过DNS解析，就转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】能让用户访问离自己最近的服务，提供最近的【原创内容，转载请注明出处】【未经授权禁止转载】资源，建立从数据库提供最近的数据资源。至原创内容，盗版必究。【原创内容，转载请注明出处】于数据的写，就没有办法，只能往统一的数据原创内容，盗版必究。【本文首发于唐霜的博客】库去写，不过我们可以在架构上进行设计，比原创内容，盗版必究。【原创内容，转载请注明出处】如设计多层阶梯的写逻辑，或者在主备服务器【本文受版权保护】【本文受版权保护】之间拉一条100T的超大光纤。总而言之，转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】通过使用CDN服务，我们让我们的用户可以著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。更快下载应用资源和数据。

HTTP2

首先，http2建立在https基础上，著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】所以实际上，单次连接其实性能有所损耗，但未经授权，禁止复制转载。【本文受版权保护】是从整体规划看，它具备更高效的传输机制，【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。比如它通过二进制分帧传输，没有前文所讲的著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。并行请求数量的限制，那么也就可以不再依赖【转载请注明来源】著作权归作者所有，禁止商业用途转载。webpack之类的打包工具了，一次性直转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】接下拉100个体积更小的文件，可以更快。【本文首发于唐霜的博客】【版权所有，侵权必究】另外，以前我们有keep-alive，但【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。是http2更厉害，还可以实现serve【原创内容，转载请注明出处】【未经授权禁止转载】r push，牛皮了。不过http2仍然未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】依赖于TCP，所以最后的性能瓶颈都在TC本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netP上去了，所以现在又在研究基于UDP的h【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netttp3，可以把这事也解决了。

要支持http2，不仅后端程序层面要改造原创内容，盗版必究。转载请注明出处：www.tangshuang.net，nginx服务器配置也要调整。但是，跟【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】前端，好像没啥关系。

WebSocket/WebRTC

除了http，我们还有其他武器，它们都可【本文受版权保护】著作权归作者所有，禁止商业用途转载。以从其他侧面解决我们使用http过程中遇【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。到的一些性能损耗的问题。WebSocke【原创不易，请尊重版权】原创内容，盗版必究。t可以做到服务端向客户端推送消息，建立持原创内容，盗版必究。转载请注明出处：www.tangshuang.net续性的连接，这样我们就不需要每次都通过h【作者：唐霜】未经授权，禁止复制转载。ttp去请求数据，而是可以让服务器直接推转载请注明出处：www.tangshuang.net【本文受版权保护】送给我们，省去了中间各种网络连接，而且还【版权所有】唐霜 www.tangshuang.net【转载请注明来源】能无感更新界面。WebRTC可以做到客户原创内容，盗版必究。转载请注明出处：www.tangshuang.net端之间直接通信，比如你的应用需要在用户之【版权所有】唐霜 www.tangshuang.net【作者：唐霜】间交互数据，就可以使用webrtc，不需【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】要经过服务器。

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

世外桃源：应用分发机制优化

五年来，我一直寻不见仇人，只闻江湖上流传【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。着一伙叫“鬼窍”的团伙，很可能便是当年屠本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】村的罪魁祸首。游历至一镇，名叫石瀑镇，此【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net镇飞斜于一大河瀑布旁，镇一边便是落下瀑布本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】的翻滚河水，另一边是大河分流出来的十来条【本文受版权保护】【原创内容，转载请注明出处】支流浅滩，镇里房屋错落紧致，巷子仅可二人【本文首发于唐霜的博客】【原创不易，请尊重版权】并走，瀑布声如洪钟，日复一日未曾停歇，镇【本文受版权保护】【转载请注明来源】上之人笑饮茶，玩闹逐，把这瀑布的轰鸣做了【版权所有】唐霜 www.tangshuang.net【作者：唐霜】生活的背景。镇内落差又大，最高一处便是瀑转载请注明出处：www.tangshuang.net【本文受版权保护】布一侧的花石悬崖，最低一处就是浅滩。我在本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。此住留半月之久，甚觉世外桃源般无拘无束，本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。唯独这落差叫人吃劲，每每从浅滩客栈去到悬转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。崖旁的钟寺，都让人累如魂飞，却见那些小孩原创内容，盗版必究。本文作者：唐霜，转载请注明出处。嬉闹来回不见累，果是一方人情一方水土。
【原创不易，请尊重版权】【作者：唐霜】未经授权，禁止复制转载。【原创不易，请尊重版权】

通过对应用架构的重新设计，我们可以从分发著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】机制的角度去优化应用的加载速度，提升其打【转载请注明来源】【版权所有】唐霜 www.tangshuang.net开的速率，从而提高用户体验。什么事应用分【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。发呢？就是客户端以何种形式启动应用，基于著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】这种形式，需要我们怎么安排代码的部署、下著作权归作者所有，禁止商业用途转载。【作者：唐霜】载和调用。

【本文首发于唐霜的博客】【转载请注明来源】

PWA

渐进式web应用（Progressive【本文受版权保护】【作者：唐霜】 Web Apps）是一套技术的集合，而【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】不是指单一技术。简单讲，PWA通过各类缓【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net存机制和控制机制，将应用加载时需要的资源【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。缓存在本地，从而让下一次加载该资源直接从【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。本地加载，进而提升性能。除了性能，它还提【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。供窗口优化、通知推送等其他方面的能力，提转载请注明出处：www.tangshuang.net原创内容，盗版必究。升用户体验。不过就我个人而言，并不看好P著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】WA，因为我们大部分应用都是需要从服务端【作者：唐霜】【版权所有】唐霜 www.tangshuang.net拉取数据才能使用的，而且PWA并没有提供著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。超出浏览器能力的功能，比如读取本地文件系【未经授权禁止转载】转载请注明出处：www.tangshuang.net统的能力等等，所以在国内我很少见到专门的著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】PWA应用，不过也有不少应用使用了PWA【本文首发于唐霜的博客】【原创内容，转载请注明出处】部分能力，来提升应用的加载性能。性能方面未经授权，禁止复制转载。【本文受版权保护】主要涉及ServiceWorker的内容【版权所有，侵权必究】【版权所有，侵权必究】。

【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】

ServiceWorker

ServiceWorker是一种特殊的W【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netebWorker，从线程工作的模式看，和【版权所有，侵权必究】【版权所有，侵权必究】WebWorker是一致的，但是不同的地转载请注明出处：www.tangshuang.net【转载请注明来源】方在于，它是全局只会有一条Service【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】Worker线程，而且ServiceWo【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。rker中提供了比普通webworker【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net更多的接口，以实现特殊的能力。其中一项重【未经授权禁止转载】【转载请注明来源】要的能力，就是缓存资源。

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

在serviceworker中，提供了c【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。aches接口，通过该接口可以实现缓存的著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。读取、写入、删除。再利用servicew【原创不易，请尊重版权】【原创内容，转载请注明出处】orker中拦截请求的能力，当当前应用去【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】请求某一个资源时，会被servicewo【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】rker拦截，我们可以在worker脚本【作者：唐霜】【未经授权禁止转载】中监听fetch事件，通过缓存的判断，直【转载请注明来源】本文作者：唐霜，转载请注明出处。接respondWith缓存内容，而不需著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。要再往服务器发送请求拉取资源。

【本文首发于唐霜的博客】原创内容，盗版必究。

不过ServiceWorker有一点，即转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。它需要一个注册的过程，也就是用户第一次打本文作者：唐霜，转载请注明出处。原创内容，盗版必究。开应用的时候，我们只能做到注册，而注册之著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。后serviceworker内的逻辑并不【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】能马上生效，只有我们重新打开应用（或刷新【本文受版权保护】本文作者：唐霜，转载请注明出处。浏览器）后，才能享受其提供的服务。

利用serviceworker，我们还能未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】做很多事情，它不单单可以缓存，还可以实现原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。常驻后台拉取，这样的话，我们就可以在后台本文作者：唐霜，转载请注明出处。【未经授权禁止转载】自己去更新一些资源，或者提取拉取一些资源【版权所有，侵权必究】【原创内容，转载请注明出处】，从而做到让用户在无感的情况下，获得应用【原创不易，请尊重版权】【未经授权禁止转载】的加速。

Workbox

Workbox是谷歌基于自己的场景封装的本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】ServiceWorker库，它提供了我著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】们常见的一些场景下，快速实现servic本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】eworker中某些能力的方法，就像jq【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】uery精简了DOM的操作一样，work【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】box也是精简了我们使用servicew【转载请注明来源】【转载请注明来源】orker的操作。

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

微前端

这两年微前端度过了巅峰，今年开始微前端就【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】不那么热了。但是，微前端到底是怎么回事呢【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】？对于刚接触的同学，我还是有必要简单介绍本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。一下。1年多以前，我撰写了自己的微前端框本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。架mfy（麦饭），提供了一种独特、酷炫、简易的微前端框架【原创不易，请尊重版权】【作者：唐霜】。基于已有的经验，我来讲讲自己的一些建议本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。。

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文受版权保护】

通过微前端，我们可以做到类似按需加载的效未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net果，从而提升应用的加载性能。微前端由基座【关注微信公众号：wwwtangshuangnet】【转载请注明来源】应用和子应用构成，应用打开时，需要首先加【本文受版权保护】著作权归作者所有，禁止商业用途转载。载基座应用，当然，我们会同时并行的根据路【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net由去加载对应的子应用。不同的应用同屏的子【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】应用数量不同，如果一屏只有一个子应用，那著作权归作者所有，禁止商业用途转载。【本文受版权保护】么只有当切换路由，需要加载另外一个子应用本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net时，才会去加载新的代码。当然，我们也可以【未经授权禁止转载】原创内容，盗版必究。做一些预加载的工作。

【本文受版权保护】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】

不同的微前端框架实现模式不同，知名框架q【原创内容，转载请注明出处】【转载请注明来源】iankun基于沙箱模式加载子应用，实际著作权归作者所有，禁止商业用途转载。【作者：唐霜】上会严重降低子应用运行时的性能，并不适合【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。需要大规模计算和交互的应用，只适合一些不转载请注明出处：www.tangshuang.net【版权所有，侵权必究】复杂交互不频繁的应用。但是另外还有一些微【转载请注明来源】未经授权，禁止复制转载。前端架构，并不依赖沙箱，不过一般会统一技【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】术栈，比如基于angular或react转载请注明出处：www.tangshuang.net【作者：唐霜】的微前端框架，就要求子应用必须是对应技术原创内容，盗版必究。【原创不易，请尊重版权】栈的，但是这类微前端框架的运行性能就好很著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net多，和普通的单体应用差别不大，所以也可以原创内容，盗版必究。【转载请注明来源】用来运行有计算，且交互复杂的应用。

微前端作为前端的一种架构方式，已经改变了原创内容，盗版必究。未经授权，禁止复制转载。前端项目代码组织的方式。在前端性能方面，【原创不易，请尊重版权】【原创内容，转载请注明出处】基于微前端架构，以及强制性做到了按需加载【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】，子应用分包。对于前端项目而言，很多项目【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】到最后都会考虑采用微前端架构，但是由于架本文作者：唐霜，转载请注明出处。原创内容，盗版必究。构变化带来的破坏性非常大，所以一些已经持【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】续了几年的巨无霸应用想转微前端，就异常艰【本文受版权保护】原创内容，盗版必究。难。所以，我建议当一个项目运行了1年左右本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net，负责人发现未来该项目还会持续迭代时，就著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。应该赶紧考虑采用微前端架构进行重构。这样转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】就可以避免应用打包变大后加载更慢，也可以【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】将庞大的应用分开治理，从而做到更优秀的代著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。码治理。

小程序

小程序是微信的创新，我觉得它是PWA+微本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。前端的强强组合。首先，它在微信这个大应用未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net下，基于类似微前端的架构模式，按需的拉取【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。单个小程序的代码，实时的渲染，从而降低整【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】个应用的代码储量和内存占用，让一个微信拥【原创内容，转载请注明出处】【本文首发于唐霜的博客】有无限可能。其次，它的每一个应用就类似P未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。WA一样，有自己的独立空间，而且每次运行【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】只能运行一个小程序，代码被按照版本缓存在未经授权，禁止复制转载。【本文首发于唐霜的博客】本地（定期清理），从而在第二次打开的时候【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net做到秒开。

除此之外，小程序还基于双线程的架构设计，【作者：唐霜】【版权所有】唐霜 www.tangshuang.net保障了小程序界面渲染的安全性和流畅性。你【版权所有，侵权必究】【未经授权禁止转载】可以把小程序的两个线程对应到web里面的【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。一个渲染线程加上一个worker线程，所【转载请注明来源】原创内容，盗版必究。有的渲染工作都是在渲染线程中完成，其他所【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。有的脚本处理都是在worker线程中处理原创内容，盗版必究。【原创内容，转载请注明出处】，两个线程的工作模式是在数据处理线程中计本文作者：唐霜，转载请注明出处。原创内容，盗版必究。算出用于渲染的数据，通过setData传原创内容，盗版必究。【未经授权禁止转载】给渲染线程，渲染线程无法通过编程控制，但【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。是会自己按照既定的模版逻辑和接收到的数据转载请注明出处：www.tangshuang.net原创内容，盗版必究。进行渲染。这种架构设计染渲染卡顿的情况大本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。大减少，只要手机内存充足，理论上就不会出【原创不易，请尊重版权】【原创不易，请尊重版权】现渲染卡顿的现象。

这一设计其实对web应用的借鉴意义也很大【本文受版权保护】著作权归作者所有，禁止商业用途转载。，在下文我还会讲到webworker的使【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net用。我们可以把一些逻辑计算转移到work【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。er中进行，从而避免渲染线程由于前文讲到本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net长任务所引起的卡顿现象。随着此类思想的普【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net及，现在出现了在webworker中运行本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net的视图驱动框架。比如我写的sfcjs框架，就是一款利用webworker进行未经授权，禁止复制转载。【未经授权禁止转载】实时编译（无限webpack等构建工具）【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。的前端框架。

坐井观天：浏览器渲染原理

“你们这群畜生，尽将手无寸铁的镇民屠杀殆【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】尽，石瀑镇与你们何怨何仇，你们尽能下如此【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。毒手！”“哪里来的单臂杂脆，敢挡我们鬼窍原创内容，盗版必究。本文作者：唐霜，转载请注明出处。团的去路，今天就是你的死期！”“鬼窍团！【原创不易，请尊重版权】【作者：唐霜】！就是你们！！今日就是新仇旧恨一起算，拿【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】命来！！”未曾想这群畜生竟然就是我追寻多【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】年的鬼窍团，屠村的悲剧场景瞬间浮现眼前，著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。父母不共戴天之仇如喷涌而出的火山，燃爆了【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】我的心脏，今日誓要和这些人间败类拼的你死著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。我活。拔出我的斜阳剑，运足十二分的气脉，【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】使出凌云微步，便冲将到那十人里面。先是用【未经授权禁止转载】【原创不易，请尊重版权】剑刺穿一人的胸口，再用一招击晕一人的脑袋【转载请注明来源】著作权归作者所有，禁止商业用途转载。，轰轰轰，虽然身子中几刀，但对方已经被我著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。打的七零八落，只剩两人。那两人见打我不过【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net，从口袋掏出一个什么东西，吞了进去，瞬间著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】脸色变红，面目狰狞，变得力大无比，我被打未经授权，禁止复制转载。【本文受版权保护】的上下齐痛，使出寒阳三式也无济于事，瘫倒【版权所有，侵权必究】【原创不易，请尊重版权】在地，动弹不得。“去死吧！！”一人持剑向【转载请注明来源】【版权所有】唐霜 www.tangshuang.net我杀来，情急之下，我抓起旁边的一把刀挡住著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】了来剑，突然那两人瘫软在地，我用尽全力，【转载请注明来源】本文版权归作者所有，未经授权不得转载。将持剑那人击杀，要去杀掉另外一人，那人去转载请注明出处：www.tangshuang.net【本文受版权保护】突然一改之前的神态，瘫跪在地，“求大侠饶未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】命”“你可曾记得有个叫溪水村的村子？”“【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】记得记得！那个村子被我们另外一个团屠杀，【版权所有，侵权必究】未经授权，禁止复制转载。不关我事啊！”“你们刚才吃的是什么东西？【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。为什么变大力？”“那是我们鬼窍团的秘密武原创内容，盗版必究。原创内容，盗版必究。器，可以增强功力，就是只能维持一炷香，一【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net炷香后就没有力气了，要等半个时辰才能恢复【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net正常。”“你可以死了！”五年了，我终于知未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】道了杀父母的仇人，愤怒与仇恨之下，一剑解【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。决了这个畜生。
【原创不易，请尊重版权】【版权所有，侵权必究】

加载对性能的损耗有很多都需要后端、运维的【本文受版权保护】本文版权归作者所有，未经授权不得转载。同学参与，而接下来，我们将不再需要后端。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】渲染是前端更古不变的一个话题。浏览器的渲【本文首发于唐霜的博客】【本文首发于唐霜的博客】染有其特殊性，正因这种特殊性，导致我们不未经授权，禁止复制转载。原创内容，盗版必究。得不在写代码的时候格外小心。

【本文首发于唐霜的博客】原创内容，盗版必究。【原创不易，请尊重版权】【原创不易，请尊重版权】

浏览器渲染流程

让我们接着回答“当你在浏览器中输入一个u【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】rl……”的面试题。完成网络请求、资源加【作者：唐霜】著作权归作者所有，禁止商业用途转载。载之后，浏览器就进入到了渲染阶段。在加载【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】资源结束时，浏览器会解析html, cs【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。s, js，产生DOM和CSSOM，其中【未经授权禁止转载】未经授权，禁止复制转载。js会在加载时立即执行，js的执行过程可转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net能对已有的DOM和CSSOM进行修改，但未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net当这些加载过程完成形成稳定态之后，浏览器未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net就正式进入渲染阶段。

它首先会基于DOM和CSSOM构建渲染树【转载请注明来源】著作权归作者所有，禁止商业用途转载。/帧树。所谓渲染树（Redner树），你未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。可以理解为一个数据结构，一个多叉树，每个【本文首发于唐霜的博客】原创内容，盗版必究。节点包含对应的元素和样式信息，遍历渲染树本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。就可以得到整个界面所有渲染信息。在得到渲未经授权，禁止复制转载。【本文受版权保护】染树的过程中，浏览器会根据渲染树实时的进【本文首发于唐霜的博客】【版权所有，侵权必究】行布局（Layout），用以在其内部计算【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。好屏幕上的每一个点位应该显示什么内容，确本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net定每个节点在页面中的确切大小位置等。由于未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。这个过程是实时的，所以构建渲染树本身就是【作者：唐霜】著作权归作者所有，禁止商业用途转载。一个挺好性能的事儿。布局时它会基于“盒模【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】型”精确的捕获每个元素在窗口内的确切位置原创内容，盗版必究。【原创不易，请尊重版权】和尺寸，转化为屏幕上的绝对像素。

【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

浏览器就能根据渲染树进行绘制(Paint著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。)，绘制就是按照布局时计算的所有详细信息【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。传给绘制引起，在屏幕上，一个像素一个像素著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】的进行显示，这个过程也被称为“光栅化”。绘制的过程中，绘制可以将布局树中的元素分原创内容，盗版必究。【原创内容，转载请注明出处】解为多个层。浏览器还可能采取一些分层绘制【作者：唐霜】【本文首发于唐霜的博客】的策略，有些绘制会转移到GPU中进行计算【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。，而不是在CPU中，例如<vide本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.neto>, <canvas>【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】;以及opactiy和3d transf【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】orm等。由于CPU承担了大量系统级、应用级、程本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。序级的计算，如果能够让闲置的GPU参与绘【未经授权禁止转载】【原创不易，请尊重版权】制计算，就可以大大提升性能。但是由于GP【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netU和CPU计算由不同线程来做，所以又必须【作者：唐霜】【作者：唐霜】考虑到线程间交互所带来的性能损耗，所以，【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】并不是任何情况下开启GPU计算都更快，这【本文首发于唐霜的博客】【转载请注明来源】在下文讲GPU部分再详细阐述。总之，Pa本文作者：唐霜，转载请注明出处。【作者：唐霜】int的结果，就是浏览器显示在屏幕上的依【本文受版权保护】著作权归作者所有，禁止商业用途转载。据。

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【原创不易，请尊重版权】

【转载请注明来源】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】

以上是浏览器加载完应用到你能看见界面的过著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。程。

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

在应用运行过程中，我们通过js，或者cs【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。s，通过用户的某些操作，可能会改变应用界【转载请注明来源】未经授权，禁止复制转载。面的呈现。比如基于js的轮播图，比如基于原创内容，盗版必究。原创内容，盗版必究。css的鼠标hover效果等等。随着资源【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】的继续加载、用户的操作，以及代码层面，我本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】们可以能重新操作DOM，修改DOM元素的未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】样式等等，这些动作中的部分内容会引起浏览【本文受版权保护】转载请注明出处：www.tangshuang.net器重新创建Render树、重新绘制，这也本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。就是reflow（重排/回流）和repa【本文受版权保护】本文作者：唐霜，转载请注明出处。int（重绘）。

但凡出现了上述情况，repaint就一定【版权所有，侵权必究】【未经授权禁止转载】会发生，说白了就是屏幕得重新刷新一下，不【本文首发于唐霜的博客】【转载请注明来源】然你怎么看到界面上的变化呢。但是refl转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ow是可选的，因为有些操作并不会引起布局转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。的变化，比如某个元素只是颜色发生了变化，原创内容，盗版必究。【未经授权禁止转载】那么就不会发生布局变化，也就不会有ref【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】low。

【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net

一般来说，reflow和repaint是【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net无时无刻不在发生着的，只是这个过程是不是【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。需要比较大的计算量。相对来说reflow【关注微信公众号：wwwtangshuangnet】【作者：唐霜】更消耗性能，因为repaint更接近系统【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】底层，几乎是按照相同的逻辑执行的，但是r著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。eflow则每次都要进行非常复杂的多叉树【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。遍历，而且在短时间里面可能会多次触发重新原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。计算，所以比较消耗性能。浏览器按照16.转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】67ms/帧的速率刷新绘制的内容，如果在【未经授权禁止转载】【原创内容，转载请注明出处】这16.67ms内，reflow和rep著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】aint没有计算完，那就得等到下一个16【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。.67ms才能进行新内容的显示。也就是卡【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。顿。

【作者：唐霜】【本文受版权保护】

【转载请注明来源】【原创内容，转载请注明出处】【本文首发于唐霜的博客】

上图中横轴是时间轴，每16.67ms浏览【版权所有，侵权必究】【作者：唐霜】器就会执行一次渲染动作，但是前提是浏览器【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】执行任务已经结束，交给了浏览器进程，如果本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】JS引擎中还有任务在执行，就会导致没有把本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net执行权交还给浏览器，浏览器就认为当前界面【版权所有，侵权必究】【未经授权禁止转载】不需要刷新，上图中红色的块代表长任务，一【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】个任务的执行时长超过了浏览器刷新一帧需要本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。的时间，就会导致浏览器不会在该刷新的时候【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】使用新的渲染树进行渲染，直到长任务执行完本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。毕，在下一个刷新周期，浏览器才会一次性按【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net照最新的渲染树进行渲染，这就导致在之前的【原创不易，请尊重版权】原创内容，盗版必究。刷新周期内原本应该展示新内容而没有展示，【作者：唐霜】【关注微信公众号：wwwtangshuangnet】界面出现了瞬间比较大的变化，也就出现了卡【本文受版权保护】【版权所有】唐霜 www.tangshuang.net顿现象。

本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。

现在，我们可以完整的回答上面的面试题了。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。我用一张图来表达：

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

上图没有表达出来的是，如果我们的应用按照本文版权归作者所有，未经授权不得转载。【转载请注明来源】按需加载的方式加载模块或子应用，那么还会本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net有一些链路，但是我们统一把这些链路隐藏在【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。上面的最底下，即“导航->请求加载【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net->JS执行-操作DOM或CSSO【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】M->重排->重绘->【作者：唐霜】【转载请注明来源】显示”这样的一个链路。不过因为没有解析阶【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。段，其实和我们完整的链路而言没有必要去深原创内容，盗版必究。本文作者：唐霜，转载请注明出处。究。

未经授权，禁止复制转载。原创内容，盗版必究。

浏览器线程详解

首先咱们不免俗的介绍一下“进程”和“线程【未经授权禁止转载】【作者：唐霜】”的区别。

原创内容，盗版必究。【原创不易，请尊重版权】

“进程”（Process）是系统资源分配【未经授权禁止转载】【本文受版权保护】最小单位，浏览器打开之后会有多个进程，包【本文首发于唐霜的博客】【本文首发于唐霜的博客】括：

【转载请注明来源】未经授权，禁止复制转载。

Browser进程：也就是浏览器作为一个【本文首发于唐霜的博客】【未经授权禁止转载】客户端应用程序的进程，可以理解为浏览器窗【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net口的进程，比如浏览器的历史记录、代理等功未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。能，都属于浏览器层面的功能

原创内容，盗版必究。

转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】

【未经授权禁止转载】

第三方插件进程

本文作者：唐霜，转载请注明出处。

GPU进程：调用GPU的进程，无论打开多【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】少个tab，只会有一个，用于和GPU调用【原创不易，请尊重版权】【版权所有，侵权必究】、通信

未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。

浏览器渲染进程：浏览器实现作为浏览器价值本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】的核心进程，加载、渲染、解析，一般来讲，【本文受版权保护】未经授权，禁止复制转载。每一个tab会启用一个新渲染进程，所以一【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。个tab挂掉，不会影响其他tab，也是最原创内容，盗版必究。转载请注明出处：www.tangshuang.net消耗资源的进程

著作权归作者所有，禁止商业用途转载。

【原创内容，转载请注明出处】

“线程”（Thread）是CPU的执行某本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。个任务的基本单位，也就是要执行某种特定特著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】性的任务，我们就开一个线程，专门做这类事【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。。一个进程里面可以有多个线程（当然也可以【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】只有一个），进程为多个线程提供了统一的一【作者：唐霜】转载请注明出处：www.tangshuang.net些东西，例如内存、其他一些资源等。也就是【本文首发于唐霜的博客】【版权所有，侵权必究】说，单个线程挂掉，很可能影响整个进程的正原创内容，盗版必究。【未经授权禁止转载】常工作，甚至让进程挂掉。对于浏览器来讲，【转载请注明来源】【转载请注明来源】我们主要关注浏览器渲染进程里面的线程，主原创内容，盗版必究。【原创不易，请尊重版权】要包括：

本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。

GUI线程：负责渲染界面，所以也叫“渲染【本文受版权保护】【版权所有，侵权必究】线程”

【本文受版权保护】

JS引擎线程：负责解析和执行js，例如把【作者：唐霜】转载请注明出处：www.tangshuang.netv8引擎拿过来倒腾一下开出一个线程，因为原创内容，盗版必究。【原创内容，转载请注明出处】被我们经常使用，所以也被称为“主线程”

原创内容，盗版必究。

事件触发线程：用来处理各类事件，比如用户本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】的点击、鼠标移动等等

著作权归作者所有，禁止商业用途转载。

【本文首发于唐霜的博客】

转载请注明出处：www.tangshuang.net

定时触发器线程：用来处理定时触发器，例如【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】setTimeout, setInter【原创内容，转载请注明出处】原创内容，盗版必究。val的调用函数，什么时候执行呢？靠本线原创内容，盗版必究。【作者：唐霜】程

【原创内容，转载请注明出处】

本文版权归作者所有，未经授权不得转载。

异步http请求线程：用来处理http请本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。求的线程

著作权归作者所有，禁止商业用途转载。

本文版权归作者所有，未经授权不得转载。

其他线程：serviceworker和我著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】们自己new Worker起来的线程，w【本文受版权保护】本文作者：唐霜，转载请注明出处。ebassembly的执行线程等等

【访问 www.tangshuang.net 获取更多精彩内容】

【原创内容，转载请注明出处】

其中，JS引擎线程和GUI线程是最重要的【版权所有】唐霜 www.tangshuang.net【本文受版权保护】线程，其中JS引擎线程在我们前端编程中起【本文首发于唐霜的博客】原创内容，盗版必究。到最重要的作用，所以才被称为“主线程”。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netJS引擎线程和GUI线程都只能有一个，也【本文受版权保护】【关注微信公众号：wwwtangshuangnet】就是单线程。单线程意味着要执行下一个任务未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。，得等到上一个任务执行才能执行。

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

不过，比较惨的是，JS引擎承接了所有JS【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。的执行，事件触发了，把回调函数丢到JS引【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net擎执行，定时器到点了丢到JS引擎执行，h【未经授权禁止转载】本文作者：唐霜，转载请注明出处。ttp请求结束了丢到JS引擎执行，太累了【原创不易，请尊重版权】【本文首发于唐霜的博客】。这也就是为什么JS慢的原因。（这里插一【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】句，JS的执行有浏览器的事件循环机制，即未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netEvent Loop，这个事件循环机制不【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】是单个线程的事，是浏览器应用层面的设计和著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。调度，而其中调度的过程就是在这些线程之间【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。进行协调。）

【本文受版权保护】未经授权，禁止复制转载。

【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

正是因为JS引擎线程和GUI线程做牛做马【本文受版权保护】【版权所有，侵权必究】，完成着所有任务的最终运行和渲染，所以才未经授权，禁止复制转载。【未经授权禁止转载】让我们的界面老是卡！卡！卡！那怎么办呢？原创内容，盗版必究。【本文受版权保护】当然是需要我们有非常清晰的大脑，让它们不【作者：唐霜】著作权归作者所有，禁止商业用途转载。要那么累。减少程序运行过程中的任务堆积，本文作者：唐霜，转载请注明出处。【本文受版权保护】通过时间切片等策略，让长任务不那么长，后【本文受版权保护】【本文首发于唐霜的博客】面还会介绍worker线程，worker【本文受版权保护】【版权所有】唐霜 www.tangshuang.net线程有自己独立的JS引擎，所以不会占用主【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】线程的资源，可以和主线程并行运行，比如一【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。些计算，丢给worker线程去算，算完之著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。后再丢回给主线程，这样主线程就不用那么累【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。，把省下来的精力用来执行一些其他的渲染逻【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net辑，也就不用那么卡了。

本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】

初出茅庐：页面结构优化

初到长安，繁华如锦，到处是从未见过的东西【原创内容，转载请注明出处】【原创不易，请尊重版权】，带画的灯笼、会飞的鸭子、五颜六色的石头【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。、穿短衣服的女人，我最不明白，那个一根线原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net牵着就能飞上天的东西，有什么用呢？穿过层【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】层人流，我来到了悦来客栈，因为有西无一的本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】信物，而西大侠是这客栈老板的恩人，故就让【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】我免费住两晚。我去找小二打听，可曾听过鬼【版权所有，侵权必究】【版权所有，侵权必究】窍团的事，小二满不在乎的讲，你该去城西的【本文首发于唐霜的博客】【本文首发于唐霜的博客】合胡堂转转，那里可以买到任何消息。我便起【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net身往城西赶。这个合胡堂就是一个集市，但集【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。市里却并没有东西卖，所有人都鬼鬼祟祟，诡【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。笑连连，却都无话。我来一个挂着“天下往往【本文首发于唐霜的博客】未经授权，禁止复制转载。”的铺前，那人笑脸相迎，我问到“有没有鬼【本文受版权保护】【作者：唐霜】窍团的消息？”那人瞬间黑下脸来，左顾右盼本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net，见无人注意便拉我进到帐后，严声厉色的说【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net道，“此事可不便宜！”“多少钱我都可以付【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。！”“不是钱多钱少的事情，走漏风声，可是原创内容，盗版必究。转载请注明出处：www.tangshuang.net性命不保。”“那你今天不卖这消息！也是性【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】命不保！”我见此人知晓一二，抽出宝剑，抹未经授权，禁止复制转载。【未经授权禁止转载】在他脖子上。“大侠饶命，大侠饶命，你随我【原创内容，转载请注明出处】未经授权，禁止复制转载。来。”他带我进入一堂内，里坐着一拄杖的盲【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】人，那铺主指指这人，便转身回了去。“年轻【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】人，我劝你不做无畏的努力，那群人你惹不起本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】，最后怕是会丢了命。”“前辈，血海深仇，著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。不可不报，请前辈悉数告知。”“东海往东两【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net日船程，有一座鬼耧岛，鬼窍团常年盘踞于上【原创内容，转载请注明出处】原创内容，盗版必究。，尽是穷凶极恶之徒，与官商勾结，支流众多本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】，到处流窜，官府赖之不何。鬼耧岛地势险要【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net，周围全是绝壁，只在其东北有一处浅湾可停【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。靠船只，进出全在彼，有几十人把守。其团首【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。人称鬼王，未曾有人见得，据称只有四大护法未经授权，禁止复制转载。【本文首发于唐霜的博客】知其真人，其团众尽不知晓。”“感谢前辈，转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】后会有期。”五年了，终于让我知道仇人的老本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。巢！
未经授权，禁止复制转载。
【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【未经授权禁止转载】【原创内容，转载请注明出处】

HTML结构优化

浏览器首先基于HTML结构解析出DOM树本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。，然后在过程中会执行JS代码，DOM树可未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net能被修改，但基于HTML的DOM树是基础【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】，包括我们通过JS产生的DOM结构，在渲著作权归作者所有，禁止商业用途转载。【本文受版权保护】染时都应该注意，把需要尽快展示的内容放在著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net页面的前面。我们来举个例子：

本文作者：唐霜，转载请注明出处。【未经授权禁止转载】

【本文首发于唐霜的博客】【未经授权禁止转载】

上图是一位博主博客的截图，博客分左右两栏【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。，右边为主内容区，我们希望读者更先看到右【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。边的内容，但是它左边栏的高度也特别高，如【转载请注明来源】本文作者：唐霜，转载请注明出处。果按照我们正常的思路，左边的html写在【转载请注明来源】原创内容，盗版必究。前面，那么就可能由于加载慢，导致内容很长【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。时间加载不出来，但是，我们把右侧主内容区【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。域的html写在前面，左边写在后面，那么【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。在加载时就可以更快加载出内容区域。但是这【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net个过程中我们必须注意一点，当左侧边栏还没【原创内容，转载请注明出处】【本文受版权保护】有加载时，我们需要让右边靠右，而不是等左著作权归作者所有，禁止商业用途转载。【作者：唐霜】边出来之后，再被顶到右边去。

虽然HTML中的很多细节都可能影响性能，【原创不易，请尊重版权】【原创内容，转载请注明出处】但是我们应该尝试养成良好的习惯，有些问题【作者：唐霜】著作权归作者所有，禁止商业用途转载。不可避免，但是在大部分情况下，这些问题并【本文受版权保护】原创内容，盗版必究。不会引起性能损耗，所以只要我们按照一定的【原创不易，请尊重版权】【本文受版权保护】习惯来撰写HTML结构，就可以规避大部分【转载请注明来源】本文版权归作者所有，未经授权不得转载。问题。我总结出以下你应该养成的习惯：

【原创不易，请尊重版权】【作者：唐霜】

使用HTML5，而非HTML4及其以前的未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】版本

本文作者：唐霜，转载请注明出处。

【本文受版权保护】

【关注微信公众号：wwwtangshuangnet】

原创内容，盗版必究。

使用语义化标签，而非全部都是div

原创内容，盗版必究。

【原创内容，转载请注明出处】

【本文受版权保护】

【关注微信公众号：wwwtangshuangnet】

按照内容的重要性安排内容块出现的顺序，但转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】是不能过度优化，例如你不能直接把<未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。main>放在<nav>未经授权，禁止复制转载。【作者：唐霜】;之前，虽然这样做是可以的，但不符合我们未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net阅读代码的习惯

本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。

能用HTML处理的，不用JS处理

本文版权归作者所有，未经授权不得转载。

【本文首发于唐霜的博客】

能用CSS处理的，不多加一个div来作为【版权所有，侵权必究】【作者：唐霜】工具

【转载请注明来源】

【未经授权禁止转载】

HTML属性中的data-, aria-【本文首发于唐霜的博客】【作者：唐霜】属性应该被广泛使用

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

【关注微信公众号：wwwtangshuangnet】

减少HTML的层级

原创内容，盗版必究。

未经授权，禁止复制转载。

【原创不易，请尊重版权】

【本文首发于唐霜的博客】

在JS中适当移除不需要的节点，较小的DO转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。M树可以获得更快的渲染过程

【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。

【本文受版权保护】

【关注微信公众号：wwwtangshuangnet】

对HTML进行压缩

【原创不易，请尊重版权】

【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有，未经授权不得转载。

【关注微信公众号：wwwtangshuangnet】

【原创不易，请尊重版权】原创内容，盗版必究。【转载请注明来源】【本文受版权保护】

SVG渲染原理与优化

SVG作为类似方案的最终胜出者，具有自己【转载请注明来源】【版权所有】唐霜 www.tangshuang.net的优势，它实现了DOM接口，比Canva未经授权，禁止复制转载。未经授权，禁止复制转载。s方便的多，比如通过监听某个节点就可以做【本文受版权保护】【原创不易，请尊重版权】到SVG节点的交互，而Canvas要实现【转载请注明来源】本文版权归作者所有，未经授权不得转载。该功能，却要做大量计算才能做到。而且，我【本文受版权保护】【转载请注明来源】们可以直接在SVG中使用css，利用cs本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】s做到动画效果，替代部分gif的功能。但【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。是SVG的一个大缺点，就是加载、渲染慢。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。加载慢主要是指解析的过程慢。对于SVG的转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net使用，我总结了自己的一些优化建议：

【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】

内联inline会比直接使用img[sr未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】c]引用消耗更多的性能，因为需要在当前D【本文首发于唐霜的博客】【本文首发于唐霜的博客】OM树中建立SVG的DOM子树，因此如果原创内容，盗版必究。【本文首发于唐霜的博客】仅仅是展示图片，而无需进行交互，最好使用本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】img[src]

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

本文版权归作者所有，未经授权不得转载。

使用基本图形，如方形、圆形、直线等，而非【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。用path来画这些图形

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

著作权归作者所有，禁止商业用途转载。

在构建时，清除svg中用于注解的部分

本文版权归作者所有，未经授权不得转载。

【未经授权禁止转载】

对svg代码进行压缩

【访问 www.tangshuang.net 获取更多精彩内容】

著作权归作者所有，禁止商业用途转载。

【访问 www.tangshuang.net 获取更多精彩内容】

本文作者：唐霜，转载请注明出处。

由于SVG的渲染是独立的，以viewbo本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】x为渲染视口，而同时，它又要兼顾DOM的【版权所有，侵权必究】【本文受版权保护】生成，因此性能比较差。自己构造svg时，本文作者：唐霜，转载请注明出处。【未经授权禁止转载】应该尽可能避免把不展示在视口中的内容也生本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】成到svg代码中。另外也可以在外部使用c转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ss来控制svg内部的元素，在svg内使【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。用css需要svg渲染引擎一并工作，而在【本文首发于唐霜的博客】原创内容，盗版必究。外部使用css则同一走浏览器渲染引擎，可【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net以节省渲染消耗的性能。

亮剑出窍：浏览器渲染优化

这狠毒的女人，竟然连老人和小孩都不放过。原创内容，盗版必究。【转载请注明来源】“哟，那里来的残废小子，敢挡妾身的事。”【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。那女人搔首弄姿的，露着细长白皙的大腿，一本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。副瘦肩在日光下泛着白光，朱唇厚眉，盘发插【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net簪，轻衫薄缕，脚不沾地。“歹毒的女人，你原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】竟连小孩都弄下杀手，今日我要替天行道！”【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。愤怒使我气脉喷涌，一道银白的光从我剑鞘飞未经授权，禁止复制转载。【本文首发于唐霜的博客】出，划过长空，直刺那恶女的心脏而去。只见【作者：唐霜】【版权所有】唐霜 www.tangshuang.net她翻身躲避，轻快如飞，我使出一招气宗归一【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。，强大的剑气任其再灵活，亦无法躲避。被我本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。气宗所伤，那恶女摔滚在地，吐了一口鲜血，【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net动弹不得。我把剑横在她脖颈之上，问到“你【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。知青龙铜圆在何处？”她却不答，我便要运剑【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net杀她。她忙站起身来，趁着伤，倾倒我这边来【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。。一缕沁人的香气袭来一脸，“妾身实为苦命【版权所有，侵权必究】【转载请注明来源】人，加入鬼窍团也是迫不得已，侠士若愿收留著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】，妾身甘愿终身陪伴服侍。”轻人声中，我似【版权所有】唐霜 www.tangshuang.net【转载请注明来源】乎真的感受到她身不由己的人生，松了戒心。【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】正值这一档口，她突然一个起跃，将我环抱住【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。，柔软嫩滑的肌肤在我胸前摩蹭，不知怎有这【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net样的柔劲，让我全身动弹不得。“侠士不知妾转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】身所炼为蛇身功，凡被我缠住了，就逃不出我【转载请注明来源】【版权所有，侵权必究】的手心，哈哈哈……瞧你生的如此俊俏，可惜著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。是个残臂，若当了我的压寨相公，也是不错，【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net可惜可惜。”“妖女，莫得意太早。”我气定【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】神闲，想起在断崖谷曾练就的脱骨功，便静下【本文受版权保护】【版权所有】唐霜 www.tangshuang.net心来，气从丹田运至脊髓，冲破期门穴，全身本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net骨头瞬间全部脱落，但确仍可得劲。待我慢悠【版权所有，侵权必究】【本文受版权保护】悠从她的缠绕中滑落，反倒过来将她腰死死箍原创内容，盗版必究。【版权所有，侵权必究】住。“怎么可能，怎么可能，我的蛇身功不可【未经授权禁止转载】原创内容，盗版必究。能被逃脱……”，待我再一用气脉一勒，她便【本文受版权保护】【本文受版权保护】身吐黑血，五脏六腑已废，经脉尽失，成了废著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】人。等我再冲破章门穴，便又恢复了骨头。“【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】自作孽，不可活，我不杀女流，今你已成废人【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。，不能再为非作歹，我便留你生路。”待我埋【原创内容，转载请注明出处】未经授权，禁止复制转载。葬老婆婆和小狗子，烧了满地鬼窍尸体，便继未经授权，禁止复制转载。【原创不易，请尊重版权】续东行。
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net

【本文首发于唐霜的博客】【本文受版权保护】

前文，我们已经掌握比较多浏览器的渲染原理著作权归作者所有，禁止商业用途转载。【转载请注明来源】了，现在我们来尝试找出一些技巧，优化浏览本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】器的渲染效率，避免出现卡顿现象。其实，我本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。们无法调节浏览器的渲染能力，除非我们加大【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。自己电脑的硬件投入。我们能做的，主要是去【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net避免一些常见的劣质代码，避免由于这些代码【原创内容，转载请注明出处】【本文受版权保护】导致浏览器渲染过程中有较长的执行任务，从未经授权，禁止复制转载。【版权所有，侵权必究】而导致渲染卡顿。

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

避免引起不必要的重新渲染

【本文首发于唐霜的博客】【转载请注明来源】

DOM树的变更引起的reflow+rep【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。aint

著作权归作者所有，禁止商业用途转载。

本文作者：唐霜，转载请注明出处。

样式变化引起的reflow+repain【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。t

原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。

原创内容，盗版必究。

需要跨线程处理的渲染过程，例如复杂的GP转载请注明出处：www.tangshuang.net【版权所有，侵权必究】U渲染

【本文受版权保护】

本文版权归作者所有，未经授权不得转载。

本文作者：唐霜，转载请注明出处。

需要跨引擎处理的渲染过程，例如svg的变【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。化

【本文受版权保护】

【访问 www.tangshuang.net 获取更多精彩内容】

可以看到，最常见的问题是我们的某些操作引【作者：唐霜】【版权所有，侵权必究】起了reflow。实际上repaint的【版权所有，侵权必究】未经授权，禁止复制转载。效率其实还是比较高的，一般不会有性能问题本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。，因为paint的本质就是遍历渲染树，然本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。后光栅化。而reflow的本质是重新计算【版权所有】唐霜 www.tangshuang.net【本文受版权保护】要在屏幕中展示的内容的尺寸、位置等，虽然著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】在paint的时候只需要绘制视口范围内的【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。内容，但是如果不完整计算整个渲染树，浏览【本文受版权保护】本文版权归作者所有，未经授权不得转载。器也不知道哪些内容要在视口渲染，所以这个本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】计算过程是非常耗性能的，即使你的界面上只本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】有一根头发丝的位置移动，它也需要去计算整【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net个渲染树，因为它也不知道这一根头发丝的变【本文受版权保护】【作者：唐霜】化是横向的纵向的，只有计算完它才知道原来【本文受版权保护】转载请注明出处：www.tangshuang.net只是一个细微的变化，可是这个时候已经计算著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】完了，性能已经损耗掉了。

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

那哪些是会引起reflow的操作呢？你只【原创内容，转载请注明出处】原创内容，盗版必究。要记住，但凡会引起尺寸、位置变化的，都会原创内容，盗版必究。【本文受版权保护】引起reflow。（当然，会有例外。）比【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。如你加入了新的DOM节点，虽然它disp【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。lay:none是隐藏的，但是浏览器不计本文作者：唐霜，转载请注明出处。【本文受版权保护】算怎么知道它不需要显示呢？比如你通过st未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netyle.marginTop进行了样式调整【版权所有，侵权必究】【作者：唐霜】。

那么哪些操作是不会引起reflow，只会著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。repaint呢？比如纯粹的颜色变化，例【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】如style.color操作。另外，tr原创内容，盗版必究。【未经授权禁止转载】anslate所带来的偏移也不会引起re著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。flow，这个就是前面说的“例外”，它会本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】调用GPU来计算对应元素应该放到哪个位置【作者：唐霜】【版权所有】唐霜 www.tangshuang.net，并且使用新图层来渲染当前节点（新图层在转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】前面讲布局Layout的时候提到了一下，著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net没有深入），使得这个节点的渲染具有复合（本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】compose）性质，基于和原始DOM不【转载请注明来源】未经授权，禁止复制转载。同的渲染逻辑，新图层会基于GPU来计算和未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。独立渲染，所以不影响原始布局，因此也不会本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】引起reflow。当然，其实使用tran未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netslate也好，其他的transform【版权所有，侵权必究】【转载请注明来源】属性也好，前提是你的电脑GPU的调用比较【版权所有，侵权必究】【作者：唐霜】流畅，如果电脑本身的软硬件环境让浏览器使未经授权，禁止复制转载。【转载请注明来源】用GPU加速时更慢，那么使用GPU加速反著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】而会降低界面渲染的性能。这也就是我提到的【本文受版权保护】【原创内容，转载请注明出处】4点中应该注意点第3点。

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。

节流防抖

这是常见的避免卡顿的技术。节流是按照一定本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】的时间周期执行调用，在单一周期中，调用只未经授权，禁止复制转载。【版权所有，侵权必究】会被执行一次。防抖是按照一定的时间延迟调【转载请注明来源】【版权所有】唐霜 www.tangshuang.net用，如果在时间内再次调用，那么前一次调用【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】将会被弃用，只有最后一次调用会被执行。之【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。所以存在这样的技术，是因为我们常常反复的【原创内容，转载请注明出处】原创内容，盗版必究。进行某些操作，这些操作引起reflow，转载请注明出处：www.tangshuang.net【未经授权禁止转载】就会导致长任务的存在，引起卡顿。而通过这【作者：唐霜】未经授权，禁止复制转载。两项技术，就可以让这种反复进行的操作在短【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。期内只执行一次，这样就可以让reflow【转载请注明来源】本文版权归作者所有，未经授权不得转载。过程中执行更少的动作，从而避免卡顿。

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

此外，防抖还常常用在一些要发出ajax请【原创不易，请尊重版权】【本文首发于唐霜的博客】求的场景，因为向服务端发起请求是比较慢的【本文受版权保护】转载请注明出处：www.tangshuang.net操作，而且网络请求异步特性，我们不知道请【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】求什么时候回来。所以这种情况下使用防抖技转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。术，可以保障我们只请求一次，而且是最后一【版权所有】唐霜 www.tangshuang.net【作者：唐霜】次。比如在某些输入关键字进行请求的时候。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net但是有的时候，如果我们持续输入，导致请求原创内容，盗版必究。未经授权，禁止复制转载。无限延迟，又很不合理，此时我们要把节流和转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net防抖结合起来，在防抖的同时，又能按一定周【本文首发于唐霜的博客】【原创内容，转载请注明出处】期发出ajax请求。

【本文受版权保护】【原创内容，转载请注明出处】

当然，节流防抖不是万能的，有些情况下我们原创内容，盗版必究。原创内容，盗版必究。使用节流防抖会导致业务逻辑执行错误，在这著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。种时候，我认为只要没有严重的卡顿，就不要【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】使用。

虚拟视口技术

原创内容，盗版必究。【原创内容，转载请注明出处】

我们知道，对于用户而言，他不关心你这个列【作者：唐霜】未经授权，禁止复制转载。表或表格全部长什么样，他只关心出现在浏览【转载请注明来源】【作者：唐霜】器屏幕中的这个可视区域的内容，这个可视区【原创不易，请尊重版权】未经授权，禁止复制转载。域就是我们讲的“视口”，我们开发者遇到的【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。问题就是，当列表或表格的行数非常多时，产本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】生了非常大的DOM树，每一次滚动都会导致本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netreflow，从而导致很慢的重新渲染。解【作者：唐霜】原创内容，盗版必究。决的方案，就是，我们减少DOM节点的数量转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，把那些不需要展示在视口内的DOM节点移本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】除掉，把那些需要展示的DOM节点动态的加本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net入到DOM树中。虽然看上去我们在不断的修【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】改DOM树，听上去很耗性能，然而相比于一【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】棵巨大的DOM树的遍历和计算而言，修改D【转载请注明来源】【未经授权禁止转载】OM树的操作虽然也耗性能，却相对而言更节【本文受版权保护】【版权所有，侵权必究】省。

原创内容，盗版必究。【本文首发于唐霜的博客】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

普通滚动和虚拟滚动

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】

【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【本文受版权保护】

基于这一思路，我们可以对列表或表格进行初未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。始的计算，通过滚动条的位置算出当前视口应【转载请注明来源】原创内容，盗版必究。该展示哪些条目。当滚动条发生变化的时候，【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。把这些算出来的条目构建新的DOM插入到原未经授权，禁止复制转载。原创内容，盗版必究。来视口内的DOM树中，再把不需要展示的部著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。分移除掉。而且为了优化用户体验，我们可以【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】算出比视口内应该展示条目数量稍微多一些的【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】条目，它们虽然不会展示在视口内，但是当用【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】户缓慢滚动滚动条时，可以不需要再去创建D【本文受版权保护】【版权所有】唐霜 www.tangshuang.netOM，而是直接显示出来，当然在这个过程中本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。，会有新的DOM被创建并插入到列表中，不【本文受版权保护】原创内容，盗版必究。过由于这些新的节点并不在视口内，所以你也原创内容，盗版必究。本文作者：唐霜，转载请注明出处。看不到，因此最后给人的感受就是似乎这些条【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】目从来都在界面上，没有被移除过。为了应对未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。用户非常快的滚动滚动条，我们还可以做一些转载请注明出处：www.tangshuang.net【作者：唐霜】效果，给用户数据在刷刷飞的感觉，实际上可【作者：唐霜】转载请注明出处：www.tangshuang.net能只是一个装模作样的骨架屏而已。另外，滚本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】动条的位置实际上也不需要那么精确，没有必【原创不易，请尊重版权】【本文受版权保护】要动态的去计算滚动条必须在哪个位置，实际【转载请注明来源】本文作者：唐霜，转载请注明出处。上对于用户而言，你只要让他上下滚动的时候【作者：唐霜】【转载请注明来源】能够大致定位就可以了。

【未经授权禁止转载】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

requestIdleCallback

React16开始探索了一种时间切片机制本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】，取了一个流行的名字fiber。其灵感来转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net源于浏览器提供的新接口requestId【作者：唐霜】【未经授权禁止转载】leCallback。Idle在浏览器中【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】大意是“空闲时长”的意思，如下图：

转载请注明出处：www.tangshuang.net【本文受版权保护】

在Performance统计面板中你可以著作权归作者所有，禁止商业用途转载。【本文受版权保护】看到Idle这一项。什么是“空闲”呢，就本文作者：唐霜，转载请注明出处。原创内容，盗版必究。是在前文提到的16.67ms内，执行完任【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。务后剩下的那段时间，如下图：

未经授权，禁止复制转载。【作者：唐霜】【关注微信公众号：wwwtangshuangnet】

也就意味着，很有可能每一个刷新周期都会存未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。在空闲时长。但是，也有一些情况下，不存在【作者：唐霜】本文作者：唐霜，转载请注明出处。空闲时长，比如前文图片中红色块超越了一个本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】16.67ms的间隔。那么，我们能否把这【作者：唐霜】原创内容，盗版必究。些超越了16.67ms的长任务进行拆分，原创内容，盗版必究。【转载请注明来源】把长任务拆成一段一段的短任务，同时把一些【转载请注明来源】【版权所有，侵权必究】优先级比较低的任务放到空闲时长中去执行呢未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。？只要功夫深，长任务变短任务，短任务变不【版权所有，侵权必究】转载请注明出处：www.tangshuang.net消化渲染的空闲任务。

有些任务与渲染没有任何关系，比如我们会在【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】前端上报日志，但是上报日志前会对日志进行【转载请注明来源】【本文首发于唐霜的博客】处理。而这个处理过程如果在主线任务中，就原创内容，盗版必究。未经授权，禁止复制转载。会加长主线任务的执行时间，可能就会阻塞渲【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net染。那么我们能否把日志处理任务放到空闲时【本文首发于唐霜的博客】【原创内容，转载请注明出处】长中去呢？使用requestIdleCa著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。llback就可以，比如下面这段代码：

【作者：唐霜】著作权归作者所有，禁止商业用途转载。

a()
requestIdleCallback(() => {
  b()
})

那么，在执行完a()之后，浏览器就会把J【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netS引擎的任务结束，把控制权交还给浏览器，未经授权，禁止复制转载。【版权所有，侵权必究】浏览器就会调用GUI线程开始渲染，等渲染著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。结束后，发现有一个b()任务被加到了id原创内容，盗版必究。【本文受版权保护】le队列中，于是执行了它。

【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

当然，如果渲染完之后发现马上又要进行下一【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。帧渲染了，那么这个时候b()就只能继续等原创内容，盗版必究。本文作者：唐霜，转载请注明出处。，一直等到浏览器有空闲时才会被执行。这个本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】一直等有可能会导致该任务丢失，所以在re著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。act实现的时候考虑到你总不能一直不渲染【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。某些变更，所以自己设计实现了一套任务优先【原创内容，转载请注明出处】原创内容，盗版必究。级策略，随着时间的推移，越老的任务优先级【版权所有，侵权必究】【原创内容，转载请注明出处】越高，甚至有可能从空闲任务中拿到主线任务【作者：唐霜】本文版权归作者所有，未经授权不得转载。中被执行。

【转载请注明来源】【原创不易，请尊重版权】【本文受版权保护】

除了requestIdleCallbac【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】k之外，还有一个叫requestAnim【转载请注明来源】本文版权归作者所有，未经授权不得转载。ationFrame的接口，可以让一个任原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。务放到下一帧的主线任务中去做，比如你有一本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。个函数不需要被马上执行，但是必须在下一帧【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net渲染前完成处理，就可以使用它。

这种利用浏览器能力的性能优化策略需要我们【原创内容，转载请注明出处】原创内容，盗版必究。多学习，多了解浏览器的接口。

【转载请注明来源】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

出神入化：前端多线程编程

“前辈，我是不会放弃的，我知道此次进入鬼【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】耧岛凶多吉少，但我必须去，人之生可重，人转载请注明出处：www.tangshuang.net【本文受版权保护】之死亦可重，上岛若回不来，忘能将此物交至本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net长安悦来客栈，自会有需要的人取它。”我将【原创不易，请尊重版权】【作者：唐霜】一枚青色铜圆递与白眉翁，做告辞。“留步，本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net既然你去意已决，我便传你我之绝学混元气功本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。，助你一臂之力。”说罢，他便一掌拍我坐下本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net，两掌推我后背，一股强烈的气脉冲进我的体转载请注明出处：www.tangshuang.net【本文受版权保护】内，与我原有的气脉拼命碰撞，很快，我原有本文作者：唐霜，转载请注明出处。原创内容，盗版必究。的气脉就退了下来，那股强烈的气脉逐渐占据【作者：唐霜】【未经授权禁止转载】了我的身体，似要把我身躯撑开，一种强烈的【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net撕裂感在皮肉里串动，感觉人已经快被这热血【原创不易，请尊重版权】【作者：唐霜】冲爆……“啊！！！”我实在难以控制，将这本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】股气脉释放出来，它就像从我裂开的血肉里喷【未经授权禁止转载】【转载请注明来源】涌而出一样，瞬时间将周围的树石轰的一干二未经授权，禁止复制转载。原创内容，盗版必究。净。白眉翁被震开，仍然端坐收功，而我则一【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。时间瘫软倒地。“我已经毕生功力传授与你，【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net混元气功无招无式，你可用这它融合已学武功【本文首发于唐霜的博客】【转载请注明来源】，让你所学之功出神入化。”“前辈，在下不【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net值你如此厚爱。”“如你所言，人之生可重，未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。老朽修行百年，亦无牵挂，见你可塑之才，不未经授权，禁止复制转载。【未经授权禁止转载】愿你就此没了性命。”
【作者：唐霜】【转载请注明来源】著作权归作者所有，禁止商业用途转载。

我们通常讲JS是单线程，是从JS引擎线程【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】的角度出发去看，但自从浏览器提供了Wor本文作者：唐霜，转载请注明出处。【本文受版权保护】ker标准库接口，就让我们拥有了让JS在著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。另外一个线程运行的能力。JS引擎线程被称原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net为主线程，其他worker线程则依赖于主本文版权归作者所有，未经授权不得转载。【转载请注明来源】线程工作，另外有一个特殊的worker是【转载请注明来源】【版权所有，侵权必究】serviceworker，它具有更高的转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。权限，即使主线程停止工作，它仍然能持续生著作权归作者所有，禁止商业用途转载。【作者：唐霜】存。

【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

基于WebWorker完成大计算

你可能很难想象，前端能有什么大计算呢？我【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。举几个例子，比如遍历一个10万+行的数据【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】，并算出一个指标进行显示；比如对用户将要【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。打印的pdf进行水印处理；比如对图片或视【作者：唐霜】【作者：唐霜】频进行转换，等等。当然，有的时候一些用于本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】处理业务的算法也可能存在较大的计算量。我本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net们就可以讲这些大计算迁移到webwork未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】er中。

【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

我们需要理解，把大计算迁移到webwor本文作者：唐霜，转载请注明出处。【转载请注明来源】ker，并不意味着不需要消耗资源，相反，原创内容，盗版必究。原创内容，盗版必究。线程间通信和延迟，浏览器对多开线程的限制本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。等等，实际上都会降低浏览器（或者说CPU转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】）的处理能力。最主要的原因在于，当我们把【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】这种可能需要长时间进行计算的运算迁移出主本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。线程之后，就可以让主线程不阻塞渲染，可以本文作者：唐霜，转载请注明出处。【转载请注明来源】给用户一个loading效果等待计算结果转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。，而如果放在主线程，那么这个loadin原创内容，盗版必究。【本文首发于唐霜的博客】g都是无法被执行的。

【转载请注明来源】【转载请注明来源】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

基于WebAssembly处理计算

WebAssembly是前两年才开始被广本文版权归作者所有，未经授权不得转载。【本文受版权保护】泛应用于正式环境的技术，它通过把C、C+【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net+、python、rust等语言的程序编【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。译为webassembly程序，加载到浏【原创内容，转载请注明出处】【转载请注明来源】览器中使用，通过一些框架向JS程序暴露接【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】口，在JS代码层面调用这些接口，就可以绕未经授权，禁止复制转载。【未经授权禁止转载】开JS引擎，使用webassembly虚本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】拟机执行由更底层的原生语言编译的程序，从【本文首发于唐霜的博客】未经授权，禁止复制转载。而获得更高效的性能。例如知名的视频处理软转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。件ffmpeg、知名图像处理软件open本文作者：唐霜，转载请注明出处。【未经授权禁止转载】cv，都有对应的wasm版本，通过加载这【本文受版权保护】【原创不易，请尊重版权】些程序，就可以在前端调用它们的接口，对视【本文受版权保护】转载请注明出处：www.tangshuang.net频、图片进行处理。

【本文首发于唐霜的博客】【原创不易，请尊重版权】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

当然，wasm同样面临着通信上的性能瓶颈【原创不易，请尊重版权】【未经授权禁止转载】。从主线程将需要进行处理的数据传输给wa【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。sm虚拟机，处理完之后又把结果数据传回主【转载请注明来源】【关注微信公众号：wwwtangshuangnet】线程，这个过程实际上效率不高，处理不好反【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】而由于这个过程，导致性能的急剧下降。

原创内容，盗版必究。【作者：唐霜】本文版权归作者所有，未经授权不得转载。

基于GPU处理计算

这里我可不是在讲css的GPU加速，而是转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。指将一些大计算交给GPU来处理，从而释放本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】CPU的占用，CPU+GPU实现双工。知转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。名机器学习框架tensorflow的js未经授权，禁止复制转载。原创内容，盗版必究。实现，在浏览器端就可以采用GPU模式进行本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。运行。我们知道机器学习本质上就是通过拼命未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。计算的苦力活，来在大量的尝试中找到最优解未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net。除了机器学习外，区块链挖矿也可以采用G转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netPU模式进行计算，从而释放CPU的资源占本文作者：唐霜，转载请注明出处。【转载请注明来源】用。当然，如果你需要同时使用photos【作者：唐霜】【本文首发于唐霜的博客】hop等大型图片处理软件或视频处理软件，本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。那么就不能再去抠GPU的份额，因为GPU【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。的成本是很贵的，我们普通电脑上，独立显卡著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】往往都非常贵，想要达到和CPU的运行效率本文作者：唐霜，转载请注明出处。原创内容，盗版必究。一致的GPU，那是天价才能做到。因此，实著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。际上我们把计算交给GPU，前提是在GPU【本文首发于唐霜的博客】【未经授权禁止转载】空闲的情况下才能如此去做。

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【原创不易，请尊重版权】【原创不易，请尊重版权】

未来，浏览器将开放完整、稳定的webgp【未经授权禁止转载】【本文首发于唐霜的博客】u能力给到前端开发者，届时，我们就可以采【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】用一定的策略，将一些可以从CPU中剖离开【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】的计算放到GPU中进行，依赖一些gpu框【本文受版权保护】原创内容，盗版必究。架，我们可以用一种比较优雅的语言去进行一【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。些图形处理的计算，gpu在图形图像处理上未经授权，禁止复制转载。【转载请注明来源】有明显的优势。

转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【作者：唐霜】

优化线程间消息传递

前文多次提到，两个线程间通信是比较慢的。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】那么有没有什么办法可以优化呢？实际上真没【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】有，线程间通信慢是目前来讲无法逃避的。我著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。的个人建议如下：

传递更小的数据量，把不需要的进行剔除，有【转载请注明来源】【版权所有】唐霜 www.tangshuang.net些东西其实可以合并起来用一个符号来表示，【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net没有必要非得把数据细节表现得那么丰富

【本文受版权保护】

本文版权归作者所有，未经授权不得转载。

著作权归作者所有，禁止商业用途转载。

使用序列化的字符串作为传递的消息体，两边原创内容，盗版必究。【版权所有，侵权必究】各自进行序列化和解析，虽然序列化和解析的【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】过程会消耗性能，但是字符串传递更快呀

原创内容，盗版必究。

【转载请注明来源】

当然，还有一些其他策略，例如通过切割bu原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ffer分片传递的形式等等，操作起来比较【原创内容，转载请注明出处】未经授权，禁止复制转载。复杂，可能等到你开始去在项目中实践类似的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。场景时才会用到。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

跌落低谷：V8简介与性能陷阱

天空宛如狂夜，黑色卷浪嘶鸣，鬼耧岛四壁断【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net绝，高百丈，我使尽力气，在岩壁上寻找落脚本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。借力处，不慎便会坠落没命。用了四个时辰，【本文受版权保护】著作权归作者所有，禁止商业用途转载。方翻越了绝壁。岛上一派混乱景象，很多着装著作权归作者所有，禁止商业用途转载。【本文受版权保护】丑陋之人，各种物品乱堆如山，我只能伪装见本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。机行事。“鬼王要摆庆宴你可知？”“那还能【本文首发于唐霜的博客】原创内容，盗版必究。不知？听说那媳妇，可是美的让人浑身发畜呢【作者：唐霜】本文作者：唐霜，转载请注明出处。。”只听得两个丑鬼交谈，这下有了计谋了。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。……过了七日，岛上亦无什么红挂，只多了些【版权所有，侵权必究】原创内容，盗版必究。喜庆的氛围。“今日鬼王大婚，大赏一金。”【本文受版权保护】著作权归作者所有，禁止商业用途转载。一个人敲着锣边喊，我便尾随之。到一院落，本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net空无一人，却闻熙熙攘攘，百般查找，竟在一【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】丛落后面有个暗口，悄然进入，却是别有洞天著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】。此处光亮明艳，绿树红花，百方宽，一侧是未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。悬崖，出去便是海，可谓风景秀美，可惜竟落【本文首发于唐霜的博客】【作者：唐霜】在一帮无恶不作的鬼畜手里。一众人站在那院【版权所有，侵权必究】【本文首发于唐霜的博客】落里，声高气喝，酒肉横飞。“良辰吉时已到本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。，新郎新娘拜天地。”其中一人面带铁盔，全转载请注明出处：www.tangshuang.net【转载请注明来源】身黑皮，另一人纤弱温良，白皙如玉，两人着本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。红装，女的头盖红巾。“一拜天地，拜……”【原创不易，请尊重版权】原创内容，盗版必究。正值那黑鬼低头拜天地，我一个凌空踏步，冲【作者：唐霜】本文版权归作者所有，未经授权不得转载。到其前，用短刺刺像其侧腰，那人毫无防备，【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。短刺扎在腰处，使劲全力用气功将我震开。一【版权所有，侵权必究】【本文受版权保护】时间，下面围观的人尚无反应过来，我便腾空著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】而起，准备一剑结果了这鬼。顿时，有四人飞【本文首发于唐霜的博客】原创内容，盗版必究。跃上来，一人持斧，一人耍枪，一人舞剑，一【转载请注明来源】【版权所有，侵权必究】人弄镖，皆是非凡身手。这一击被挡下了。那【版权所有，侵权必究】【作者：唐霜】四人合围我来，然我左右应付无碍，十个回合【原创内容，转载请注明出处】未经授权，禁止复制转载。下来，我便知其弱点，各个将其击破。话不多【未经授权禁止转载】【未经授权禁止转载】说，我便飞身举剑，刺向刚才已重伤的鬼王。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。下面站着那些人那里反应的过来，各各呆若木【作者：唐霜】本文作者：唐霜，转载请注明出处。鸡，眼看我就要讲其鬼首斩杀，有的气急攻心本文版权归作者所有，未经授权不得转载。【本文受版权保护】，有的吓出疯来，迟快间，剑已经来到鬼王面【本文受版权保护】转载请注明出处：www.tangshuang.net前。就值此时，那鬼王一把抓住一旁新娘的脖【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】颈，挡在我剑前，红盖头从新娘头上滑落，漏【转载请注明来源】【关注微信公众号：wwwtangshuangnet】出了一张白皙清秀的脸，眉宇间露着紧张和不本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】安。她什么话都说不出，幽怨的眼神里，透露【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。着无奈与不甘，一阵风过，天上的云被吹散，转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net一束阳光照来，正落在她的脸庞，一抹清泪从【本文受版权保护】未经授权，禁止复制转载。眼角滑落，犹如我曾经亲眼看着父母惨死时落【版权所有，侵权必究】【本文首发于唐霜的博客】下的恨泪。我心软了，避开了，可就是这一回【未经授权禁止转载】原创内容，盗版必究。避，却被鬼王偷袭，他使尽全力，将我一掌推【本文受版权保护】【版权所有】唐霜 www.tangshuang.net开，四大护法一起五人组了一个什么阵，用尽【作者：唐霜】【版权所有】唐霜 www.tangshuang.net全力发出一阵气功，将我全身经脉震断，一时原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】间，我上下无力，动弹不得，眼前漆黑，一口【版权所有，侵权必究】原创内容，盗版必究。鲜血喷出。“二十年了，你是第一个能伤到老【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。夫的，可惜你太自大了，老夫行走江湖40年著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】，岂能在你小子身上丢了性命。”“现在你全未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net身经脉已断，是个废人，还是个残臂的废人，【未经授权禁止转载】【未经授权禁止转载】跟死人没什么两样，哈哈哈……”“杀了他！【转载请注明来源】本文版权归作者所有，未经授权不得转载。杀了他！杀了他！”“不可！”一个白发老人著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。从后堂出来，“今日大喜，不可能杀生，冲了【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net大喜。”“丢下海去喂鱼。”一些喽啰扛起我【原创内容，转载请注明出处】【原创不易，请尊重版权】便扔下悬崖。空气突然安宁，就这样结束了吗本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。？
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。

作为最知名的JS引擎，V8在PC端具有绝转载请注明出处：www.tangshuang.net原创内容，盗版必究。对的统治地位。首先需要区分JS引擎和JS【转载请注明来源】转载请注明出处：www.tangshuang.net运行时平台的概念，JS引擎用于运行JS代【本文受版权保护】转载请注明出处：www.tangshuang.net码，例如V8、quickjs、Herme未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.nets、JSCore等，JS运行时平台用于提未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。供可用于生产环境的软件基础平台，例如ch未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netrome、nodejs等等。不过随着各类【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。场景的出现，新出现的JS引擎也附赠了一些本文版权归作者所有，未经授权不得转载。【转载请注明来源】超出ES标准之外的能力或接口，例如qui【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netckjs、Hermes都提供了比ES标准原创内容，盗版必究。【未经授权禁止转载】多出那么一些些的接口，用于方便开发者快速【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。启用。不过和运行时平台相比起来，JS引擎【原创内容，转载请注明出处】【原创内容，转载请注明出处】只是一个引擎，是被平台调用的部件之一。在原创内容，盗版必究。【转载请注明来源】有了这个概念基础上，我们在下文的探讨中，著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】就不会分不清到底是在聊V8，还是在聊Ch【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netrome。在接下来的几章，我们会去探讨运【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】行时性能优化，但在本章，我们只会探讨JS著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。引擎，因此，在阅读接下来的内容时，脑海中【本文首发于唐霜的博客】【版权所有，侵权必究】要先抛开Chrome，把眼光投到更底层的原创内容，盗版必究。【版权所有，侵权必究】V8上。

【原创不易，请尊重版权】未经授权，禁止复制转载。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

关于V8

V8实现了ECMAScript和WebA转载请注明出处：www.tangshuang.net【转载请注明来源】ssembly，可以独立运行，也可以嵌入原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net到任何c++应用中。独立运行可能你还不了【转载请注明来源】【关注微信公众号：wwwtangshuangnet】解，加入我们现在有一个v8的命令行工具，著作权归作者所有，禁止商业用途转载。【作者：唐霜】同时有一个用ES标准写的js文件，我们可本文作者：唐霜，转载请注明出处。【未经授权禁止转载】以通过运行 v8 test.js 来运行这个js脚本程序。当然，由于V8转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。只是引擎，它只能对js进行运行得到运行结【转载请注明来源】【作者：唐霜】果，而无法进行浏览器中的绝大部分操作（前本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。面我们讲过浏览器渲染进行中有众多线程，类【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】似我们常见的DOM、canvas、网络请著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。求等等，都是JS引擎之外的由浏览器提供的【转载请注明来源】本文作者：唐霜，转载请注明出处。能力）。

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

V8编译并执行JavaScript源代码【作者：唐霜】转载请注明出处：www.tangshuang.net，处理对象的内存分配，并负责回收不再需要转载请注明出处：www.tangshuang.net【未经授权禁止转载】的对象。在V8之前有很多其他的JS引擎，【转载请注明来源】【本文受版权保护】例如曾经的IE、firefox所使用的引本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】擎，V8具有良好的性能让chrome一举【本文受版权保护】【原创内容，转载请注明出处】击败了这些浏览器，逐渐V8和chrome【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net具备了统治地位。它的良好性能主要体现在如原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net下几个方面：

【本文受版权保护】本文版权归作者所有，未经授权不得转载。

编译（JIT）而非解释执行JS，并且在编著作权归作者所有，禁止商业用途转载。【本文受版权保护】译时进行优化，从而提升运行时性能

本文版权归作者所有，未经授权不得转载。

一站式、分代的、精确的垃圾收集器

【访问 www.tangshuang.net 获取更多精彩内容】

【关注微信公众号：wwwtangshuangnet】

【本文首发于唐霜的博客】

原创内容，盗版必究。

内嵌缓存

本文版权归作者所有，未经授权不得转载。

【作者：唐霜】

本文版权归作者所有，未经授权不得转载。

隐藏类

未经授权，禁止复制转载。

【转载请注明来源】

以前我们经常挂在嘴边讲“JS是一门解释型【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】语言”，但是V8出现之后，这个说法变得不【版权所有，侵权必究】原创内容，盗版必究。那么正确。诚然还有很多引擎是解释执行JS【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net的，但是对于V8而言，它采用了运行时编译【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net生成机器语言，然而这里非常有意思的一点是未经授权，禁止复制转载。【未经授权禁止转载】，由于JS执行环境的特殊性，一般我们都是转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】下载代码，然后马上就要执行它，所以它没有【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】生成字节码，而是完成编译后立即运行。不过【本文首发于唐霜的博客】【转载请注明来源】随着webassembly的发布，这个规著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。律又被再次打破。wasm文件可以被认为就【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】是字节码文件，且可以被V8提供的wasm未经授权，禁止复制转载。【本文受版权保护】虚拟机执行。当然，我们很少，或者说不可能【本文受版权保护】本文版权归作者所有，未经授权不得转载。把js编译为wasm。如果阅读过我的公众【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】号文章《用AST实现简易的中文编程》一文本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】，就肯定了解编译的一般原理。我们知道编译【本文受版权保护】转载请注明出处：www.tangshuang.net要经历tokenize->pars转载请注明出处：www.tangshuang.net原创内容，盗版必究。e to AST->travers【本文受版权保护】著作权归作者所有，禁止商业用途转载。e to modify AST->【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。generate new code这几个著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。大的步骤，然后生成的代码就是中间代码或常本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】被称为字节码，如果要运行，就拿着字节码到【版权所有】唐霜 www.tangshuang.net【本文受版权保护】虚拟机中运行，但是V8没有这么干，它没有【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】生成字节码，而是直接生成机器语言，拿着生【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net成好的机器语言丢给底层的处理器进行处理。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】虽然它也就把编译的整个过程走一遍，但是它【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。不会生成字节码文件，也没有虚拟机，所以这【转载请注明来源】【版权所有】唐霜 www.tangshuang.net种形式被称为JIT。

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】

独特的垃圾回收机制也是V8的拿手绝活，它本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。通过精妙的GC（Garbage Coll【版权所有，侵权必究】【未经授权禁止转载】ection 垃圾回收管理）实现，自动侦【转载请注明来源】【本文受版权保护】测和释放内存，而且V8采用了GC中较为激【未经授权禁止转载】【版权所有，侵权必究】进的Generational GC模式，【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net这种模式实现起来难度更大，但是性能上的收【未经授权禁止转载】【未经授权禁止转载】益也很明显。有兴趣的读者，可以专门搜讲V【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。8 GC的文章来深入了解。

未经授权，禁止复制转载。【未经授权禁止转载】【作者：唐霜】

内嵌缓存则是V8的一个高招，因为我们写的【版权所有，侵权必究】【原创内容，转载请注明出处】大部分代码中，一个变量的类型往往是可以被未经授权，禁止复制转载。【转载请注明来源】推断的，一旦可以确定变量的类型，那么在某【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。些具体操作时，我们就可以快速决策使用什么本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】算法。比如a和b两个变量，我们执行代码 a + b 时，如果我们事先知道它们都是数值，那么【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】就可以使用数学层面的加法，通过直接操作内著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】存完成相加，如果我们事先知道它们都是字符【本文首发于唐霜的博客】【原创不易，请尊重版权】串，那么久可以使用字符串的连接算法。V8【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】做了一个取巧的设计，在编译阶段对变量类型转载请注明出处：www.tangshuang.net【作者：唐霜】做推断，如果变量的值在整个程序生命周期过【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net程中都是相同类型，那么就在后续的计算中采【版权所有】唐霜 www.tangshuang.net【作者：唐霜】用相同算法，这样就可以更快的执行部分代码未经授权，禁止复制转载。【未经授权禁止转载】。这使得JS作为一门动态类型语言，却可以【原创不易，请尊重版权】【版权所有，侵权必究】在某些细节上拥有静态类型语言的表现。

隐藏类则是V8针对JS作为动态类型语言，【版权所有，侵权必究】【本文受版权保护】“一切皆对象（Object）”的一种策略本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net优化。从对象上读取属性、修改对象属性，都本文版权归作者所有，未经授权不得转载。【本文受版权保护】需要依赖hash算法，这是作为对象存储的【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net数据结构所决定的。而V8做的优化，就是在转载请注明出处：www.tangshuang.net原创内容，盗版必究。一个对象的背后用一个类对它进行描述，当然【作者：唐霜】未经授权，禁止复制转载。，这个类对于我们写JS代码的人而言是不可【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】见的，所以它是“隐藏类”，如果对象的描述【作者：唐霜】【作者：唐霜】是相同的，那么在读取其属性时，就可以直接未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】通过该类获得信息，而无需对对象进行遍历。【作者：唐霜】本文版权归作者所有，未经授权不得转载。要知道，在JS里面，几乎所有的东西都是对【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】象，比如函数、字符串、数字，有了隐藏类，本文版权归作者所有，未经授权不得转载。【转载请注明来源】在其属性读取时就多了一层性能上的提升。

著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【本文受版权保护】本文版权归作者所有，未经授权不得转载。

当然，这些知识远不止这么简单，我在这里的【转载请注明来源】【原创不易，请尊重版权】描述是按自己的理解来表达的，方便读者有个原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】初步的映像。如果存在出入，欢迎指出。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【原创内容，转载请注明出处】

V8性能陷阱

虽然通过上文，你会觉得V8非常牛X，但是原创内容，盗版必究。【版权所有，侵权必究】我不得不提醒你，凡事都有两面性。我们写代未经授权，禁止复制转载。原创内容，盗版必究。码过程中如果做了某些特别的操作，那么不仅【原创不易，请尊重版权】【原创内容，转载请注明出处】不被优化，甚至有可能会由于V8的这些机制【本文受版权保护】【原创内容，转载请注明出处】，反而降低其性能，所以实际上V8也保留了【原创不易，请尊重版权】原创内容，盗版必究。解释运行的能力，在一些特例下面，解释运行【本文首发于唐霜的博客】【版权所有，侵权必究】比JIT更快。以下是我总结的一些性能陷阱【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。，你应该尽可能的避免：

使用eval来运行代码。注意，这种代码不【作者：唐霜】【版权所有，侵权必究】会被优化，而且还不够安全。

【访问 www.tangshuang.net 获取更多精彩内容】

原创内容，盗版必究。

【原创内容，转载请注明出处】

本文版权归作者所有，未经授权不得转载。

使用debugger来调试代码。注意，含【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】有debugger的函数整个函数都不会被原创内容，盗版必究。原创内容，盗版必究。优化。

转载请注明出处：www.tangshuang.net

【作者：唐霜】

使用with语法的语句。注意，with语【原创不易，请尊重版权】【本文首发于唐霜的博客】法整个语句块都不会被优化，大部分微前端框原创内容，盗版必究。【版权所有，侵权必究】架都是用with将整个子应用代码进行包裹原创内容，盗版必究。【本文受版权保护】，所以存在性能坑，需要我们自己注意。

【本文受版权保护】

转载请注明出处：www.tangshuang.net

【原创不易，请尊重版权】

使用__proto__作为对象属性。注意本文作者：唐霜，转载请注明出处。【转载请注明来源】，生命对象字面量或class时，含有__本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。proto__属性的，整个对象都无法被优【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】化。通过Object.setProtot本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netype重置原型链的对象也不会被优化。

转载请注明出处：www.tangshuang.net

在代码运行过程中，赋值为初始类型之外的其【本文受版权保护】原创内容，盗版必究。他值。注意，变量被赋值为非初始类型值，优【原创内容，转载请注明出处】未经授权，禁止复制转载。化将被取消。解决办法是，当需要切换类型赋【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】值时，使用一个新变量代替。多用const原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。。

未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net

在函数中使用arguments。注意，函转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。数体内使用arguments读取参数的函【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net数整个函数都不会被优化。使用…转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net;args代替（当然，使用babel又回【作者：唐霜】【版权所有】唐霜 www.tangshuang.net去了）。

【未经授权禁止转载】

【作者：唐霜】

【原创不易，请尊重版权】

for…in，整个函数不会被【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net优化

本文版权归作者所有，未经授权不得转载。

【本文受版权保护】

当然，还有一些针对V8策略的优化建议，比转载请注明出处：www.tangshuang.net【转载请注明来源】如使用尾递归啦，上面提到的变量赋值换一个转载请注明出处：www.tangshuang.net【未经授权禁止转载】新变量啦等等，这些都是针对V8的建议，其【原创不易，请尊重版权】【版权所有，侵权必究】实不算是任何条件下都应该考虑的，因为我们【转载请注明来源】著作权归作者所有，禁止商业用途转载。在手机端开发的时候，手机应用往往内置了一原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】个其他JS引擎，这个时候，你的这些针对性【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net优化就会失效，所以，关于此类针对性建议，原创内容，盗版必究。【转载请注明来源】了解一二即可。不够并不是说上面的这些陷阱著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】可以随便用哦，这些陷阱可以说在哪个JS引著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】擎中，都同样有借鉴意义。

从头再来：深入理解JS堆栈与作用域

“你不是鬼新娘么？”“我若不嫁给那恶魔，原创内容，盗版必究。【未经授权禁止转载】我们整村人都会被杀的！”鬼王竟以整村人命本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】胁迫一个弱女子。“我在哪里？”“镇海村。【本文受版权保护】【未经授权禁止转载】”我想起来，却全身痛的刺骨，才想起自己以【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】经脉尽断，未曾想费尽心机，10年来的努力【本文受版权保护】【未经授权禁止转载】终究化为泡影。“是我爹爹把你从海里捡回来本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。的。”“谢谢救命之恩。”“我叫秀若，那个【作者：唐霜】本文版权归作者所有，未经授权不得转载。恶魔在我们这里烧杀抢掠，无恶不作，没人敢【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net反抗，你让我爹爹看到了一丝希望。只可惜…转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】…”说这她竟滑落一滴泪来。“人各有命，今转载请注明出处：www.tangshuang.net【未经授权禁止转载】日报不了仇，待我再过三十年。”“真的有那原创内容，盗版必究。原创内容，盗版必究。么重要吗？甚至丢了性命？”“人之生可重。【转载请注明来源】【版权所有】唐霜 www.tangshuang.net”“村里的人都想见你呢，这么多年，你是第本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】一个登上鬼耧岛对鬼王造成伤害的人。也正因【作者：唐霜】【本文受版权保护】为你，我才没有成为鬼王的女人。”“血海深未经授权，禁止复制转载。原创内容，盗版必究。仇，不可不报。”……翌日，众里八亲皆来赠原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。礼，熙熙攘攘，好不热闹。“大英雄啊！”…未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。…白眉翁混元气功，已打通我认督六脉，虽我经【作者：唐霜】转载请注明出处：www.tangshuang.net脉尽断，却仍有修为。此后所有武功，皆不可【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net练，形不至，却神功成。我在镇海村修养了三【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。月，便离开，游历一年，云行四方。行至天云未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。山，白云邈邈，青山幽幽，上有飞禽野鹿，下【原创内容，转载请注明出处】未经授权，禁止复制转载。有虫鱼鲜草，如此境界，神仙亦求之。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【转载请注明来源】本文版权归作者所有，未经授权不得转载。

如果我们仅仅满足于表面的性能优化工作，那【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】么前面的知识已经足够你在工作中应对很多问未经授权，禁止复制转载。【作者：唐霜】题，然而到了具体的一些有难度的代码层面的【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】性能问题，则难以解决。想要能够让我们写出著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。高性能的代码，或者说合理的代码架构来提升【本文受版权保护】本文版权归作者所有，未经授权不得转载。性能，就需要我们深入理解JS的运行机制，著作权归作者所有，禁止商业用途转载。【作者：唐霜】而想要掌握JS运行机制，就需要更深入的理【本文首发于唐霜的博客】原创内容，盗版必究。解JS堆栈和作用域这两块知识，虽然这两块转载请注明出处：www.tangshuang.net【版权所有，侵权必究】知识不是性能问题知识本身，但却是性能优化【版权所有】唐霜 www.tangshuang.net【转载请注明来源】的底层依据。

【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】

深入理解JS堆栈

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【原创不易，请尊重版权】

虽然我们很少在编程中提到JS的内存空间，【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。但是它真实存在，必要的时候，你必须理解它【转载请注明来源】【原创内容，转载请注明出处】才能解决工作中遇到的问题。JS中，内存空【版权所有，侵权必究】原创内容，盗版必究。间分为“堆内存”（heep）和“栈内存”【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。（stack）。其中“栈”直接存值，因此【原创不易，请尊重版权】【本文首发于唐霜的博客】读取更快，而“堆”是将值存在一块更大的无【版权所有，侵权必究】转载请注明出处：www.tangshuang.net序内存上，以键值对的形式存储，再以“指针【转载请注明来源】未经授权，禁止复制转载。”（或叫“引用”）的方式把该值所代表的堆【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net内存空间交给其他变量的，所以用“堆”存储【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。的变量在读取时，实际上先拿到“指针”，从【原创不易，请尊重版权】原创内容，盗版必究。内存空间中去找出该指针所引用的那一段堆内【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。存空间，再将该内存空间中的值读取出来。而本文作者：唐霜，转载请注明出处。【未经授权禁止转载】由于这种键值对的形式，只传递“指针”，因原创内容，盗版必究。【版权所有，侵权必究】此，当我们对存储在堆内存中的一个值进行修【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。改时，常常只是把一个变量的引用指向另外一原创内容，盗版必究。原创内容，盗版必究。个值，也就是把这个变量从一个“指针”替换本文作者：唐霜，转载请注明出处。【作者：唐霜】为另外一个“指针”，而对象所在的内存空间本文作者：唐霜，转载请注明出处。【转载请注明来源】并没有发生变化，这就导致我们在修改对象的【本文受版权保护】著作权归作者所有，禁止商业用途转载。属性值时，该对象并没有发生任何的变化，只【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】是属性（作为堆内存变量）从引用一个值变成【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。引用另外一个值。在JS语言中，绝大部分的【原创不易，请尊重版权】原创内容，盗版必究。存储都是堆存储，因此我们讲“JS中一切都【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】是对象”，同时我们也讲“JS中大多是引用【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】型变量”。

【本文首发于唐霜的博客】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】

var a1 = 0;   // 栈 
var a2 = 'this is string'; // 栈
var a3 = null; // 栈

var b = { m: 20 }; // 变量b存在于栈中，{m: 20} 作为对象存在于堆内存中
var c = [1, 2, 3]; // 变量c存在于栈中，[1, 2, 3] 作为对象存在于堆内存中

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【转载请注明来源】

上图可以看到，b和c的值实际上是两个指针【作者：唐霜】本文作者：唐霜，转载请注明出处。，它们分别指向堆内存中的两块空间。我们知【版权所有，侵权必究】【转载请注明来源】道，JS中目前有7种基本数据类型，除了这【原创内容，转载请注明出处】原创内容，盗版必究。些基本数据类型外，其他所有值都是对象，如【本文受版权保护】【本文受版权保护】果变量的值为基本数据类型，就可以直接存在本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net栈上。栈的速度比堆快，但为什么快这一点大【本文首发于唐霜的博客】【本文首发于唐霜的博客】部分教材都不会讲。我们都知道栈是后进先出【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】的特性，但是这个特性在读写内存时根本帮不【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】上忙。但在理解堆为什么慢之后，或许栈的优原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net势才能体现出来。当我们读取对象的属性值时【转载请注明来源】【本文受版权保护】，首先通过对象变量读取它所引用的堆内存地【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。址（开头地址），然后获得该属性名的has转载请注明出处：www.tangshuang.net【作者：唐霜】h（hash算法又用到一定的性能），遍历【作者：唐霜】【版权所有，侵权必究】该块空间，找到该hash所对应的值，返回【版权所有，侵权必究】原创内容，盗版必究。该值。如果该值是另外一个对象，那么上面这【转载请注明来源】本文版权归作者所有，未经授权不得转载。套过程还要再走一遍。所以在堆内存中找到一【未经授权禁止转载】原创内容，盗版必究。个值，要比直接在栈中找到一个值，可能花掉【版权所有，侵权必究】【版权所有，侵权必究】的步数会多很多。

但是，在JS中使用对象又有一些特别的性质【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。。让我们看一道面试题：

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

var a = { n: 1 }
var b = a
a.x = a = { n: 2 }

请问此时a.x和b.x的值各是多少？

这道面试题在大部分刚入行的小伙伴脑海中完【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。全没有概念，他们会想“你想表达什么？”但【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】是，如果我们积累了JS堆栈相关的知识，就【作者：唐霜】【关注微信公众号：wwwtangshuangnet】可以很容易答出。b = a这一句看上去是赋值，但实际上a变量在内存本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。中仅仅是引用了一个“指针”，b变量仅仅是本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】获得了a变量所引用的这个“指针”，因此，转载请注明出处：www.tangshuang.net【版权所有，侵权必究】我们可以发现a和b是的值是完全相同的，这本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。和 x = y = 1 还不一样，x 和 y 的值都是1，但它【本文首发于唐霜的博客】【转载请注明来源】们被存在栈内存中，所以实际上它们消耗了两【版权所有，侵权必究】【版权所有，侵权必究】块内存空间，但是 a 和 b 只消耗了一【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】块内存空间，这块内存空间的“指针”被 a转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】和 b 同时引用，所以我们可以说 a 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】和 b 的相等比 x 和 y 的相等更相原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。等。

当我们使 b = a 之后b就引用了和a相同的堆内存空间，所著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。以，当修改a的x属性时，对于b来说x属性【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net值也随之变化。这种引用特性在很多场合非常【版权所有，侵权必究】【原创内容，转载请注明出处】有用，它甚至可以节省内存占用空间。这听上【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net去非常简单，而且我们在JS中司空见惯，但【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。是实际上在其他语言中就不一定是这种设定，【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】比如在php中 b = a 代表着会把a的内存整个复制一份后再给b【版权所有，侵权必究】未经授权，禁止复制转载。，这意味着修改a跟b没有任何关系。

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。

置于为什么在上面这道面试题结尾a.x的值【原创内容，转载请注明出处】【原创内容，转载请注明出处】是undefined而非{ n: 2 }【本文首发于唐霜的博客】未经授权，禁止复制转载。，我们需要知道js中的运算符优先级的知识，不是本册的内容。

【本文首发于唐霜的博客】【未经授权禁止转载】

由于读取存在堆中值的过程比较慢，因此对我未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。们的性能会产生影响。可能此刻你并不会觉得【未经授权禁止转载】未经授权，禁止复制转载。它很重要，但是有一天你把一个对象映射为字【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。符串来解决检索问题时，自然会再次想到曾经本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】读过本册。

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】

执行上下文

“上下文”对应的英文context实际上【转载请注明来源】本文版权归作者所有，未经授权不得转载。比较难翻译，这使得我们对“上下文”的理解本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】比较模糊。实际上，我们可以用“环境”来替著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】代“上下文”的概念，这里的环境，即用于为【转载请注明来源】【关注微信公众号：wwwtangshuangnet】执行程序提供所需要的资源的环境，环境资源【转载请注明来源】【本文首发于唐霜的博客】包含内存、CPU、网络等，在这些资源基础【转载请注明来源】本文版权归作者所有，未经授权不得转载。上，环境基于引擎机制去调动、读取、写入、【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】管理计算资源，从而让程序跑起来。

执行上下文主要有三种：全局执行上下文、函转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net数执行上下文、eval执行上下文。实际上未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net全局执行上下文也可以被认为是一种特殊的函【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。数执行上下文，可以认为是java里面的m【转载请注明来源】【版权所有】唐霜 www.tangshuang.netain函数，即入口函数。在这三种上下文中本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。，都包含如下三个重要内容：

变量对象

【未经授权禁止转载】

著作权归作者所有，禁止商业用途转载。

作用域链

【原创内容，转载请注明出处】

【关注微信公众号：wwwtangshuangnet】

【未经授权禁止转载】

this

【作者：唐霜】

【关注微信公众号：wwwtangshuangnet】

你可以把它们也认作是资源，但是这些资源是【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。临时创建的，是软件性质的，等程序执行完就【本文首发于唐霜的博客】【作者：唐霜】会销毁的。

【未经授权禁止转载】【原创内容，转载请注明出处】

一个执行上下文的生命周期包括：

【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

创建：变量声明、函数声明、初始化函数参数本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。arguments；创建作用域链；确定t著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。his指向

【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。

【原创不易，请尊重版权】

执行

【转载请注明来源】

【未经授权禁止转载】

原创内容，盗版必究。

回收

转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。

一个执行上下文总是为一个函数（我们把全局未经授权，禁止复制转载。原创内容，盗版必究。global当作main函数）服务的（在本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】函数执行之前被创建），所以当需要执行一个本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。新函数（或子函数）时，就会创建一个新的执【本文受版权保护】【关注微信公众号：wwwtangshuangnet】行上下文。这些执行上下文以栈的形式被管理原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net起来，被称为“执行上下文栈”，或更常听到转载请注明出处：www.tangshuang.net原创内容，盗版必究。的“调用栈”。全局global总是在栈底【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】，当有新的函数需要被执行时，为该函数服务【本文受版权保护】未经授权，禁止复制转载。的执行上下文被压入栈顶，在这个执行上下文【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net中有各种变量或函数参数，它们被分配了内存【原创不易，请尊重版权】未经授权，禁止复制转载。。当函数执行完毕，这个执行上下文就会被从本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net栈顶弹出，弹出之后其内部的变量就会被放入【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】垃圾回收任务中，等待被回收（当然，还有特本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】例，下文讲）。

【原创不易，请尊重版权】【本文首发于唐霜的博客】

调用栈还涉及事件循环、宏任务、微任务、异【原创不易，请尊重版权】【原创内容，转载请注明出处】步等知识，这些知识串联在一起，组成了我们【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】对“JS代码所代表的程序是如何被执行的”【作者：唐霜】【转载请注明来源】的完整知识体系。

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【本文首发于唐霜的博客】

深入理解作用域

作用域是JS里面非常难理解的部分，我试图转载请注明出处：www.tangshuang.net【未经授权禁止转载】说的简单些，不想教条的重复某些难以理解的转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net话术。简单讲，作用域是指“当前程序的可访著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。问变量的集合”，它包含三层意思：

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】

当前程序：全局、函数、块级代码

著作权归作者所有，禁止商业用途转载。

【关注微信公众号：wwwtangshuangnet】

著作权归作者所有，禁止商业用途转载。

变量集合：变量名（标识符）有哪些？

【作者：唐霜】

【本文首发于唐霜的博客】

可访问：并不是所有变量在当前程序都是可以未经授权，禁止复制转载。【本文首发于唐霜的博客】访问的，当前作用域只提供当前程序可访问的原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】变量集合

【关注微信公众号：wwwtangshuangnet】

本文作者：唐霜，转载请注明出处。

和执行上下文不同，作用域是在函数定义时就原创内容，盗版必究。转载请注明出处：www.tangshuang.net已经确定了的，而不是等到函数执行时才确定【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】。你可能会问，那么为什么我调用函数的时候【本文受版权保护】【未经授权禁止转载】，读取变量的值不一样呢？因为变量的值不属【原创内容，转载请注明出处】【转载请注明来源】于作用域管理的范畴，作用域只管理变量（标未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】识符）的可访问性，而不管这个变量具体被赋【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net予什么值。比如下面这段代码：

let a = 1
function add() {
  let b = 2
  a += b
}
function minus() {
  let c = 3
  a -= c
}
add()

这段代码里面，函数add在定义时就确定了本文版权归作者所有，未经授权不得转载。【作者：唐霜】其作用域，该作用域包含了两个可访问变量a【未经授权禁止转载】【未经授权禁止转载】,b，但在执行add函数之前，它并不关心【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。a,b到底是什么值，它只关心“在add函本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】数执行时，其内部只能访问a,b两个变量，【作者：唐霜】著作权归作者所有，禁止商业用途转载。无法访问c变量”。这里的访问包含多层意思未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。，即读取、写入等操作。

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net

一个函数的作用域可以被多个执行上下文使用本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。，作用域类似一个地图，让执行上下文从中正【转载请注明来源】未经授权，禁止复制转载。确读取变量。

前文我们讲到JS实际上现在也是一个半编译【本文首发于唐霜的博客】【转载请注明来源】的语言，一段JS程序要经历“编译->【作者：唐霜】【转载请注明来源】;执行”两个阶段，而作用域的确定就是在编【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net译阶段，JS引擎通过解析JS脚本，便能梳未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。理出一段程序的作用域，不需要等到执行该段本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net程序时才能确定作用域。从这里我们可以发现【转载请注明来源】【版权所有】唐霜 www.tangshuang.net，JS引擎必须把所遇到的全部变量（标识符原创内容，盗版必究。【转载请注明来源】）记录下来，才能准确创建作用域，由此可见【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。，JS这门语言在这个点上是比较消耗资源的本文作者：唐霜，转载请注明出处。【转载请注明来源】，这都是由该死的全局作用域的设计导致的，转载请注明出处：www.tangshuang.net原创内容，盗版必究。在很多其他语言中，函数内是无法读到函数外原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】定义的变量的，没有全局和局部变量之分，作【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】用域仅限于函数内部，但是在JS中，从最顶著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】层的全局到最底层的函数，中间即便是有无数【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。层，引擎都需要在作用域中把这些变量收集起【原创不易，请尊重版权】【未经授权禁止转载】来，提供给当前程序使用，为了节省，它又搞【关注微信公众号：wwwtangshuangnet】【作者：唐霜】出了一个“作用域链”的概念，当前作用域处【版权所有】唐霜 www.tangshuang.net【转载请注明来源】于一个作用域链中，访问一个变量时，会从当未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net前作用域不断往链的上游查询，直至查完顶层【版权所有】唐霜 www.tangshuang.net【作者：唐霜】的全局作用域还没有找到该变量（标识符），【本文受版权保护】【本文受版权保护】才会报错说变量未定义，抛出一个Refer【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】enceError: ${var} is本文版权归作者所有，未经授权不得转载。【转载请注明来源】 not defined错误，可见这种设转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。计效率非常慢。可是很无奈，这一糟糕的设计【版权所有，侵权必究】原创内容，盗版必究。已经成为JS语言最基础的特性，不可能再被【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】修正，我们只能接受它。

关于作用域，我们还需要了解：

【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。

全局作用域

著作权归作者所有，禁止商业用途转载。

原创内容，盗版必究。

函数作用域

本文作者：唐霜，转载请注明出处。

本文版权归作者所有，未经授权不得转载。

块级作用域

【本文首发于唐霜的博客】

著作权归作者所有，禁止商业用途转载。

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

变量提升

著作权归作者所有，禁止商业用途转载。

【原创内容，转载请注明出处】

作用域链

转载请注明出处：www.tangshuang.net

【访问 www.tangshuang.net 获取更多精彩内容】

这些知识构成了我们对作用域的全部理解。需【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。要注意的是，前面我们讲作用域是在函数定义【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。时就已经确定好的，但是作用域链不，它是在【转载请注明来源】【原创内容，转载请注明出处】执行上下文被创建时创建的，并被挂在一个特【未经授权禁止转载】【版权所有，侵权必究】殊的属性[[Scope]]上面。

本文版权归作者所有，未经授权不得转载。【转载请注明来源】转载请注明出处：www.tangshuang.net

垃圾回收

“垃圾回收”英文是 Garbage Co【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。llection，即我们常说的GC，中文本文版权归作者所有，未经授权不得转载。【转载请注明来源】翻译我认为非常精确且巧妙。GC不是JS独【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。有的特性，很多现代编程语言都有GC，比如【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。rust，而且不同编程语言的GC机制不一【原创不易，请尊重版权】【作者：唐霜】样，不过在我看来，JS的垃圾回收做的非常【版权所有，侵权必究】未经授权，禁止复制转载。优秀，虽然有的时候也会遇到内存被拉满，但【版权所有】唐霜 www.tangshuang.net【本文受版权保护】是对于编程而言，我们可以做到写代码随心所【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。欲不逾矩。

前文提到，JS引擎在执行程序时，经历了执【转载请注明来源】原创内容，盗版必究。行上下文的“创建->执行->原创内容，盗版必究。【本文受版权保护】回收”三个阶段，当程序执行完毕，JS引擎本文作者：唐霜，转载请注明出处。【转载请注明来源】就会开始对已经使用过的执行上下文进行回收【作者：唐霜】【作者：唐霜】。这里要回收的“垃圾”只要是指“不需要再原创内容，盗版必究。【版权所有，侵权必究】被使用的变量或函数”。那么引擎怎么知道变著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net量或函数不再被需要了呢？它需要通过一些策【转载请注明来源】著作权归作者所有，禁止商业用途转载。略来做到。这些策略包括：

标记清理：分代收集、增量收集、闲时收集

本文作者：唐霜，转载请注明出处。

引用计数

原创内容，盗版必究。

【转载请注明来源】

【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。

当使用完非自己所在作用域的任何变量时，都未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。要将它交还

未经授权，禁止复制转载。

【本文受版权保护】

【本文首发于唐霜的博客】

这条铁律的意思是，在你的函数中使用了一个【版权所有，侵权必究】原创内容，盗版必究。外部变量时，无论什么情况下，你都要考虑在【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net函数结束时，对这个外部变量进行处理，如果本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】这个外部变量引用了一个对象，此时，你需要转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。考虑是不是要把它置为null。当然，并不【原创不易，请尊重版权】【版权所有，侵权必究】是说每一次都要置为null，而是你需要考著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】虑这件事。无论是标记清理，还是引用计数，【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。垃圾回收都需要去确认我的所有变量中，哪些原创内容，盗版必究。本文作者：唐霜，转载请注明出处。是不在需要被使用的。这里不再需要被使用，【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】并不意味着变量绝对不能被其他变量引用，例【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。如下图中右侧的三个对象相互引用了，但是通【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net过标记，引擎发现它们不会被当前程序再次使未经授权，禁止复制转载。【原创不易，请尊重版权】用，所以就认为它们需要被回收。
【版权所有，侵权必究】
原创内容，盗版必究。用同样的定律，我们可以解决引用计数中循著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。环引用的问题，假如a.b = b同时b.本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。a = a，那么，我们在程序结束时，要同原创内容，盗版必究。未经授权，禁止复制转载。时对a和b进行操作，a.b = null; b.a = null 而不能只操作其中一个。这些原则性的编程【版权所有】唐霜 www.tangshuang.net【转载请注明来源】习惯需要我们在长期实践中养成。

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

闭包

在有了前面的知识之后再来聊闭包（clos【原创不易，请尊重版权】【原创内容，转载请注明出处】ure），我们就可以很好的回答面试题目“本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。什么是闭包”了。很多初学者由于没有建立完【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】整的知识体系，所以无法用比较明确的词汇来转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。表达闭包的概念，当然，其实并不表示他一定【转载请注明来源】【本文首发于唐霜的博客】不懂什么是闭包，只是由于术语缺乏而已。我未经授权，禁止复制转载。原创内容，盗版必究。们简而言之，“闭包是指有权访问另外一个函数作用域中的变【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net量的且交由其他执行上下文执行的函数。”首先，闭包是一个函数，其次它有两个要点【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。：

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

有权访问其他函数作用域中的变量（其实大部转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。分情况是作用域链上游的变量）

【原创内容，转载请注明出处】

【作者：唐霜】

本文作者：唐霜，转载请注明出处。

交由其他执行上下文执行（不交给其他执行上【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。下文的无所谓闭包）

原创内容，盗版必究。

【访问 www.tangshuang.net 获取更多精彩内容】

原创内容，盗版必究。

我们来举个常见的例子：

转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】

function plus() {
  let a = 0
  function add() {
    a ++
    return a
  }
  return add()
}

plus() // 1

上面这个例子中，add函数引用了plus本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。函数中的a变量（有权访问），但在调用pl【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。us()时，add函数被plus执行上下【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。文执行了，虽然我们说它引用了其他函数作用【本文受版权保护】原创内容，盗版必究。域中的变量，但是它没有产生实际的效用，因著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。为它没有交给其他执行上下文执行，而是在当未经授权，禁止复制转载。未经授权，禁止复制转载。前执行上下文中被执行了，所以，我们可以称【作者：唐霜】未经授权，禁止复制转载。它为闭包，但是没有实际意义。

【本文受版权保护】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】

function increase(a) {
  a.count ++
}

function plus() {
  let a = { count: 0 }
  function add() {
    increase(a)
    return a.count
  }
  return add()
}

你看，这个例子里面，我们在add函数中引【作者：唐霜】【作者：唐霜】用了来自其他函数plus所在作用域的变量【本文受版权保护】【版权所有，侵权必究】a，甚至还交给了另外一个函数increa本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】se去修改，但是在整个执行过程中，它仍然转载请注明出处：www.tangshuang.net【未经授权禁止转载】没有产生实际的效用，我们可以把incre著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ase函数称为副作用函数，也可以把add未经授权，禁止复制转载。未经授权，禁止复制转载。函数称为闭包，但是没有实际意义。

【原创内容，转载请注明出处】【原创不易，请尊重版权】

function plus() {
  let base = 0
  function add(x) {
    return x + base
  }
  return add
}

const add = plus()
add(3) // 3
add(4) // 7

上面这个add函数引用了来自plus函数【作者：唐霜】【原创不易，请尊重版权】作用域的a变量，同时交给plus函数作用原创内容，盗版必究。【本文受版权保护】域的上一级执行上下文去执行，所以这是一个【转载请注明来源】未经授权，禁止复制转载。正宗的有实际意义的闭包。

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

闭包有很多应用场景。我们前文讲，函数执行【原创内容，转载请注明出处】未经授权，禁止复制转载。完进入回收阶段，执行上下文被销毁，其内变转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。量被回收，但对于闭包所引用的其他函数作用【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】域内的变量，由于垃圾回收机制取决于该变量【转载请注明来源】著作权归作者所有，禁止商业用途转载。是否还需要被使用到，很明显，这些变量还会未经授权，禁止复制转载。原创内容，盗版必究。被使用到，因此无法被垃圾回收。如果闭包被原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】交给全局，那么闭包所引用的变量就永远无法本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】被回收了，就会导致严重的内存泄露。如果在【原创内容，转载请注明出处】原创内容，盗版必究。我们的程序中，存在巨大的内存泄露，就会严【未经授权禁止转载】【作者：唐霜】重影响性能。

【原创不易，请尊重版权】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

千锤百炼：算法

人之气脉，由神而下，过五官，抚五脏，若万【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】里冲江，似溪水宁凝。天云山几近仙气，每日未经授权，禁止复制转载。【作者：唐霜】晨我从山顶逐步寻路而下，行间过乐虫鸣，清【转载请注明来源】【关注微信公众号：wwwtangshuangnet】风缓游，时常因无路或险路而变体鳞伤，却由本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】这心境而气血平和。午至日头，在山下村里求原创内容，盗版必究。【本文首发于唐霜的博客】口饭足，又便寻路回去。如此过了两年。天下【原创内容，转载请注明出处】【本文受版权保护】武功，猛、快、准，隐匿、飞逐、斩杀，兵器【作者：唐霜】转载请注明出处：www.tangshuang.net、招式、气功，于我而言，都不能再修了，人未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net之经脉断尽，即不可再神形俱运，便达不到武【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】功之境界。但两年已过，我却似悟道些东西。原创内容，盗版必究。【原创内容，转载请注明出处】武功乃内外统一之术，然尽在不同门派不同宗转载请注明出处：www.tangshuang.net原创内容，盗版必究。派，或遵一门而至出神入化，如剑宗至出神入未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net化乃人剑合一，或合多门以贯通，皆以派、宗【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net之心法，驱各式招式，不断修进，以匹及前人【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。之功。然在所有门派宗别之外，有另外一种可转载请注明出处：www.tangshuang.net【转载请注明来源】敌万人之道，其非武功之本却有武功之效，甚转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。有逾者。天地自然，混沌犹初，汲取其精气，【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。而运其于体内，再由喷出，此一之精力可抵常【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。人十之精力，更甚者，一可抵百抵千。我不知未经授权，禁止复制转载。【版权所有，侵权必究】此乃为何，称之“元脉”。今元脉已开，是了【作者：唐霜】未经授权，禁止复制转载。结的时候了。
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。

算法有两种，一种是为了实现之前无法实现的【版权所有】唐霜 www.tangshuang.net【本文受版权保护】算法，一种是为了优化之前不够好的算法。本【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net册只在乎第二种，即通过算法来提升前端代码转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。的性能。所以我们接下来讲的算法，对你的面原创内容，盗版必究。未经授权，禁止复制转载。试毫无帮助。我们这里其实是试图用算法来降【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net低代码复杂度，从而提升性能，同时在实际工【原创不易，请尊重版权】未经授权，禁止复制转载。作中，面对一个问题，我们可以采用更合适的本文作者：唐霜，转载请注明出处。原创内容，盗版必究。算法，而不可能用一种算法解决一类问题，算本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。法有无数种，每种场景下解法不同，所以本册转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】只讲一些前端基础的算法，这些算法来自《高【作者：唐霜】本文作者：唐霜，转载请注明出处。性能Javascript》《Web前端性原创内容，盗版必究。【版权所有，侵权必究】能优化》等书籍，我自己稍有发挥，是一些比著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。较通用的比较基础的算法，可以在日常开发中【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net经常使用。

优化循环迭代

日常开发中，我们100%会用到循环迭代。未经授权，禁止复制转载。未经授权，禁止复制转载。但凡用到，我们就会不经意的问自己，它会被未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。运行多少次，会不会因为反复运行而造成性能原创内容，盗版必究。未经授权，禁止复制转载。问题。造成循环迭代性能问题的决定因素有两著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】个：迭代次数，单次迭代的复杂度。我们可以【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。用公式“循环迭代性能=单次迭代复杂度x迭转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。代次数”来表达它们之间的关系。其实这非常【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net容易理解，迭代的次数越多，性能越差，单次【原创不易，请尊重版权】【版权所有，侵权必究】迭代运行消耗性能越多，总体消耗性能越多。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。因此，我们的优化方案就围绕这两个因素展开本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】。

首先，降低单词迭代的复杂度。

我们可以用到两个技巧：事务提升；倒序迭代未经授权，禁止复制转载。原创内容，盗版必究。。

事务提升是指把一些事情提升到循环体之外进【未经授权禁止转载】原创内容，盗版必究。行，而不要在循环体内去做这些吃力不讨好的转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。事情。比如我们常见的写法：

【原创不易，请尊重版权】【未经授权禁止转载】

for (let i = 0, len = items.length; i < len; i ++)

其中我们把获得items长度的动作前置到转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】循环开始，而非每次判断循环是否需要结束时【未经授权禁止转载】【未经授权禁止转载】再去读取长度。当然，对于现代浏览器而言，著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】此处的优化所带来的性能提升微乎其微，但是原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。思路上就是希望你能过把一些固定的事务，从转载请注明出处：www.tangshuang.net【作者：唐霜】循环体中脱离出来，有的可以提升到前面，有【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】的可以在循环体中只拿到一些信息，等循环结【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。束之后再利用这些信息进行计算，而不是在循【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】环体内实时进行计算。

【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

倒序迭代是指从后往前迭代，在一些特定的查【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。找场景下非常有用且高效。它的大致写法如下【转载请注明来源】未经授权，禁止复制转载。：

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【作者：唐霜】

for (let i = items.length; i --;) {
  const item = items[i]
  ...
}

这里使用了非常有意思的技巧，我们没有给f【原创不易，请尊重版权】【作者：唐霜】or第3段，而是在第2段中使用了后置自减著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。操作，前置自减和后置自减的区别在于，前置【作者：唐霜】【本文受版权保护】是返回运算后的值，后置是返回运算前的值，著作权归作者所有，禁止商业用途转载。【本文受版权保护】所以我们这里用返回运算前的值作为判断循环本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】是否要继续的依据，当i为0时会自动跳出循未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。环，而在循环体内的i则是已经完成自减运算【版权所有】唐霜 www.tangshuang.net【转载请注明来源】的值，所以items[i]中的i值其实比【转载请注明来源】未经授权，禁止复制转载。i–的值小1.

未经授权，禁止复制转载。原创内容，盗版必究。【本文受版权保护】

倒序迭代在进行某些查找时，可以从末尾进行【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。查找，在找到之后可以尽快break，从而转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。避免遍历整个列表。

【作者：唐霜】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

其次，减少迭代的次数。

【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

我们可以用到三个技巧：增加步幅以减少迭代本文版权归作者所有，未经授权不得转载。【转载请注明来源】次数；循环体展开技术；提前结束遍历。

增加步幅比较好理解，我们来看一个优化的例【本文首发于唐霜的博客】【原创不易，请尊重版权】子。

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

for (let i = 0, len = items.length; i < len; i ++) {
  if (i % 2 === 1) {
    ...
  }
}

这段代码中，我们通过一个 i % 2 来著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。处理一些内容。但是对于for而言，它会迭本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。代items的长度。我们如下优化：

本文版权归作者所有，未经授权不得转载。【本文受版权保护】

for (let i = 0, len = items.length; i < len; i += 2) {
  ...
}

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】

循环体展开技术是一种分批执行的技术，当我【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】们要需要对很多元素进行遍历的时候，可以把【本文受版权保护】著作权归作者所有，禁止商业用途转载。一个复杂的循环体，拆分为多个简单的循环体未经授权，禁止复制转载。【本文首发于唐霜的博客】，从而让单个循环体的复杂度降低进而降低整本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。个循环的消耗。实际上，它一方面通过分批次【版权所有，侵权必究】原创内容，盗版必究。的方式减少迭代次数，另一方面也是降低了单本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】次迭代的复杂度。

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

items.some((item) => {
  if (item.price < 13) {
    process(item)
    return true
  }
})

上面这段代码并没有将items.some原创内容，盗版必究。【原创内容，转载请注明出处】()作为if的条件进行判断，而是利用它可【作者：唐霜】未经授权，禁止复制转载。以通过return true来提前结束遍【原创不易，请尊重版权】原创内容，盗版必究。历的特性，只在第一次找到某个元素时执行p原创内容，盗版必究。原创内容，盗版必究。rocess函数。

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

条件语句优化

if…else在我们日常开发本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】中用的极多，可以说是我们最常用的语句。它著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。的问题在于，如果我们没有一定的策略，会导【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。致全部的条件都去判断一遍，如果每次判断的【关注微信公众号：wwwtangshuangnet】【本文受版权保护】逻辑比较复杂，就会消耗掉比较多的性能。我原创内容，盗版必究。本文作者：唐霜，转载请注明出处。们有一些策略对条件语句进行优化，主要有：【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】优先判断高频条件；二分法思想；用策略模式【转载请注明来源】【关注微信公众号：wwwtangshuangnet】干掉判断。

在一些条件需要进行计算的情况下，如果有多【作者：唐霜】本文作者：唐霜，转载请注明出处。组条件都需要执行，就会消耗比较多性能，这【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。种情况下，我们应该尽可能避免执行过多的条【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net件判断。我们需要根据实际情况，将可能性更【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。大的条件放在前面，这样，在大部分情况下，【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。只需要执行前面几条判断就可以退出这一组条【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】件语句，从而减少被执行的条件条数，减少性著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。能消耗。例如：

if (condi(1)) {}
else if (condi(2)) {}
else if (condi(3)) {}
else if (condi(4)) {}
else {}

假如上面的代码中，condi(1)发生的本文作者：唐霜，转载请注明出处。【未经授权禁止转载】概率并不大，那么上面的代码每次在被执行时原创内容，盗版必究。转载请注明出处：www.tangshuang.net，都会走到这一条判断，而大部分情况下都做本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】了无用功。因此，我们可以把最常用的con【转载请注明来源】原创内容，盗版必究。di(4)调整到前面：

if (condi(4)) {}
else if (condi(3)) {}
else if (condi(2)) {}
else if (condi(1)) {}
else {}

在条件具有连续性，且条目很多的时候，它的未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net复杂度是O(n)，通过二分法的思维可以将【未经授权禁止转载】原创内容，盗版必究。复杂度降低到O(logⁿ)。在大部分情况下，条件判断都是非此即彼原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。的，因此二分法在这种场景下可以起作用。如【作者：唐霜】本文版权归作者所有，未经授权不得转载。：

if (x > 10) {
  if (x > 15) {
    if (x > 18) {}
    else {}
  }
  else {
     if (x > 13) {}
     else {}
  }
}
else {
  if (x > 5) {
    if (x > 8) {}
    else {}
  }
  else {
    if (x > 3) {}
    else {}
  }
}

通过这种二分法思维，在一些情况下可以使得【本文受版权保护】本文作者：唐霜，转载请注明出处。判断次数减少。但是也要注意，这也意味着它转载请注明出处：www.tangshuang.net【版权所有，侵权必究】的判断数量是一定的，也就是说用正常的条件著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】判断可能只需要判断2条，而这种判断方法不【原创内容，转载请注明出处】未经授权，禁止复制转载。得不判断5条后才得出结论。

原创内容，盗版必究。【未经授权禁止转载】

【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。未经授权，禁止复制转载。

switch (a) {
  case 1: do1(); break;
  case 2: do2(); break;
  case 3: do3(); break;
  case 4: do4(); break;
}

未经授权，禁止复制转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。

const dos = {
  1: do1,
  2: do2,
  3: do3,
  4: do4,
}
const dofn = dos[a]
dofn?.()

则不需要任何条件判断，而是通过读取map本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ping上的函数来执行。这种技巧适合a的【本文受版权保护】【原创内容，转载请注明出处】取值是固定的，其形成的条件是离散的。这种原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。方案直接干掉了条件判断，这样就可以大大提【版权所有】唐霜 www.tangshuang.net【作者：唐霜】升程序的执行效率。

使用递归

简单讲，递归就是在函数内部调用函数自身的【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。行为。前面我们讲过，执行上下文是在函数开转载请注明出处：www.tangshuang.net原创内容，盗版必究。始执行前创建的，我们通常会在递归中通过判【未经授权禁止转载】【本文首发于唐霜的博客】断条件跳出递归，但是由于递归函数的执行意本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】味着执行上下文的复制，在执行栈中不断入栈【原创内容，转载请注明出处】【版权所有，侵权必究】新内容，从而占用大量资源。它对内存的开销【本文受版权保护】原创内容，盗版必究。与递归函数的执行次数成正比。而如果处理不【转载请注明来源】本文作者：唐霜，转载请注明出处。当，没有跳出递归，就会导致“死循环”。现转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。代浏览器对“尾递归”进行了优化，所谓尾递【版权所有，侵权必究】【原创内容，转载请注明出处】归就是在函数的末尾把递归进行返回，例如下【未经授权禁止转载】【本文首发于唐霜的博客】面这段代码：

【转载请注明来源】【原创内容，转载请注明出处】未经授权，禁止复制转载。

function a() {
  if (!x) {
    return
  }
  return a()
}

我们前面讲到作用域和执行上下文的关系，浏【本文受版权保护】原创内容，盗版必究。览器正确识别这是尾递归后，可以不需要反复转载请注明出处：www.tangshuang.net【作者：唐霜】的去确认其执行上下文。

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

优化字符串处理

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。

使用索引

著作权归作者所有，禁止商业用途转载。

【关注微信公众号：wwwtangshuangnet】

【原创内容，转载请注明出处】

转载请注明出处：www.tangshuang.net

【作者：唐霜】

搜索时从字符串中间开始，采用二分法

本文版权归作者所有，未经授权不得转载。

【作者：唐霜】

原创内容，盗版必究。

优化正则表达式

正则表达式是非常复杂的一套知识体系，要掌本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。握它的细枝末节，我们可能需要读一本书。坏【作者：唐霜】本文作者：唐霜，转载请注明出处。的正则表达式，在运行时很消耗性能，当然，【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。为什么消耗性能，需要我们去理解正则表达式【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】的查找实现的算法，本册无法提供完整的解释【本文首发于唐霜的博客】【原创内容，转载请注明出处】，因此，这部分内容需要你作为课外知识去补【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】充。我们提供一些优化正则表达式的建议：

【作者：唐霜】

未经授权，禁止复制转载。

本文版权归作者所有，未经授权不得转载。

本文作者：唐霜，转载请注明出处。

【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有，未经授权不得转载。

【转载请注明来源】

减少分支数量

【作者：唐霜】

未经授权，禁止复制转载。

【未经授权禁止转载】

尽量具体

本文版权归作者所有，未经授权不得转载。

【本文首发于唐霜的博客】

【未经授权禁止转载】

【原创不易，请尊重版权】

【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

独门绝技：缓存

西无一从西域回来，寻我不得，在江湖发下悬【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。赏令，称能带我见者赏千金。十二年间游历天原创内容，盗版必究。转载请注明出处：www.tangshuang.net下，行侠仗义之理念为忘，亦结交豪杰繁多。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。我听闻西无一消息，便赶了一个月到长安。正著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net值七月，繁花似锦，商队如流。除与西无一汇未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】合之外，江南剑无宗李赋、山东绝圣拳宗师笑【本文受版权保护】【关注微信公众号：wwwtangshuangnet】为来、荆州通刀门韩式、幽州归元神功郑极吾【原创内容，转载请注明出处】【原创不易，请尊重版权】，这些曾经结交的友人，都一一在长安俱首。【转载请注明来源】本文作者：唐霜，转载请注明出处。八月正是出海之选，故我向他们阐明了自己的【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net打算。西无一劝我不去，如今经脉尽断的独臂转载请注明出处：www.tangshuang.net【未经授权禁止转载】废人，何必不放下，享受这天下凡美。也有人【转载请注明来源】【本文首发于唐霜的博客】愿随我赴汤蹈火在所不惜。我告之“人之生可【版权所有，侵权必究】【版权所有，侵权必究】重，若不报仇血恨，愧于立这天地。”西无一本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。见说我不服，便刀一横“想要报仇，先胜我再著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】说。”说完，将半壶好酒摔了一地，拔剑便飞【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。来。曾叱诧风云的西无一，如今在我看着，却本文作者：唐霜，转载请注明出处。原创内容，盗版必究。并无锋利，其剑法随行云流水，却在我眼里每【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。招每式都极为清楚，也不见得很快。“无一兄【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。，人之强大，除了武功之外，还有一种，你可【原创不易，请尊重版权】【未经授权禁止转载】知不？”“废话少说，吃住我这招。……啊！原创内容，盗版必究。【未经授权禁止转载】！！”他虽使出了毕生的功力，却只见着我两【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net指夹住他的剑锋，他却动弹不得，吃惊的一动本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net不动。“我练剑三十年，虽不讲天下无敌，亦【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。可称绝世奇存，没曾想在你这里却如此轻轻松【作者：唐霜】本文版权归作者所有，未经授权不得转载。松，便破了我这一招绝外回魂，老了还是……本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。”“哎，无一兄无需自惭，在场的各位在这天【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。下都是绝顶的豪杰，只是这方世之间，除了武转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。功之外，还有超出其范畴的存在，我称其为元【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net脉，无需招式或心法，便可运用自然之力，破转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。一切招式。”“没曾想你断了经脉，还少一个原创内容，盗版必究。转载请注明出处：www.tangshuang.net胳膊，竟能超越我们，我韩式兄弟追随意已决著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】，愿随你赴汤蹈火，去剿平那鬼窍团。”“既转载请注明出处：www.tangshuang.net【作者：唐霜】然如此，我们八月初二出发。”
【原创内容，转载请注明出处】【未经授权禁止转载】

和网络缓存不同，我们在客户端甚至代码层面【原创不易，请尊重版权】【转载请注明来源】会用到一些缓存技术，这些缓存技术让我们可未经授权，禁止复制转载。【转载请注明来源】以更高效的去执行某些动作，从而让使用我们【原创不易，请尊重版权】【本文首发于唐霜的博客】应用的用户感受不到该技术的存在，但却认为【转载请注明来源】【作者：唐霜】应用变快了。当然，缓存也存在一些缺点，因本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。此，我们在实施缓存技术时，要有选择的优化【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】缓存策略。

运行时缓存技术

在代码中，我们会反复的执行某些技术，但如【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。果基于相同的技术，且内容相同的话，就会导【转载请注明来源】未经授权，禁止复制转载。致重复计算，这些计算其实是没有必要的，因【本文首发于唐霜的博客】未经授权，禁止复制转载。此我们可以把它们缓存起来，在第二次计算时未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net直接使用缓存。例如：

【本文受版权保护】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

const items = [1, 2, 2, 5, 3, 2, 4, 1]
const results = items.map(processor)

在上面的代码中，items中有重复的2和转载请注明出处：www.tangshuang.net【转载请注明来源】1，假如processor是一个计算量庞本文作者：唐霜，转载请注明出处。【未经授权禁止转载】大的计算过程，那么，这些重复的计算，就可【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net以使用缓存。我们可以采用一种基于参数的缓【作者：唐霜】【版权所有】唐霜 www.tangshuang.net存方案：

let cache = {}
function processor(num) {
  if (Object.prototype.hasOwnProperty.call(cache, `${num}`)) {
    return cache[num]
  } 
  const result = ...
  cache[num] = result
  return result
}
processor.clear = () => cache = {}

const items = [1, 2, 2, 5, 3, 2, 4, 1]
const results = items.map(processor)

processor.clear()

我们使用了一个cache来保存每一个参数著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net对应的计算结果。但是需要注意，我们应该提【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】供一个clear方法，因为如果我们长期不【转载请注明来源】【版权所有】唐霜 www.tangshuang.net清理cache，就会导致内存溢出。通过这著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。样的改造，就可以让我们的程序避免重复的计本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net算。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【本文受版权保护】

运行时缓存策略非常多，且很难一一举例，我【原创内容，转载请注明出处】【版权所有，侵权必究】们应该在开发中不断去尝试和优化，而不是限【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net于上面这一种场景。例如react提供的u【本文受版权保护】【版权所有】唐霜 www.tangshuang.netseMemo，就是一种非常有意思的缓存方【作者：唐霜】未经授权，禁止复制转载。案，在react退出hooks之前，社区著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。提供了一种叫reselector的方案，原创内容，盗版必究。【原创内容，转载请注明出处】它的效果和useMemo或者memo很像【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net，但是用法上却没有useMemo那么简洁【转载请注明来源】【版权所有】唐霜 www.tangshuang.net。这说明在我们的开发中，我们可以去优化缓【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net存方案，使它既能提供高效的运行性能，又有【本文受版权保护】【原创内容，转载请注明出处】更好的开发体验。

前端持久化存储

所谓持久化，就是当应用被卸载时，其存储仍【转载请注明来源】【本文受版权保护】然还存储。这里的卸载包括刷新页面、关闭t【转载请注明来源】【版权所有，侵权必究】ab、关闭浏览器等操作。我们常见的持久化【作者：唐霜】本文版权归作者所有，未经授权不得转载。存储有cookie、sessionSto原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。rage/localStorage等，另【本文受版权保护】本文版权归作者所有，未经授权不得转载。外我还比较推荐indexedDB，我有专门出过一系列教程介绍indexed【原创不易，请尊重版权】【本文受版权保护】DB，并且开发出了非常简易的indexedDB封装库，你可以在我博客中阅读。持久化存储的好处转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net是帮助我们避免不必要的重复计算，它和上面未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。的运行时缓存异曲同工，只不过它的缓存更加【转载请注明来源】【版权所有，侵权必究】持久。基于这两者的特点，我们可以得出结论著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】，持久化存储是用于哪些可以一直保存起来，原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net在可预见的范围内不会自己发生任何变化的值著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。。

【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】

你应该如何选择使用哪一种作为持久化缓存呢【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。？

【原创不易，请尊重版权】【转载请注明来源】未经授权，禁止复制转载。

cookie: 不用，除非在涉及前后端交【本文受版权保护】【作者：唐霜】互时不得不用的情况下

本文版权归作者所有，未经授权不得转载。

【原创不易，请尊重版权】

sessionStorage: 当你希望著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。用户刷新页面保持存储，但关闭页面后清空存原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。储时使用

转载请注明出处：www.tangshuang.net

【访问 www.tangshuang.net 获取更多精彩内容】

indexedDB: 当你希望存储比较多转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。的数据，有条理的管理它们时，使用inde【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。xedDB，它像一个真正的前端数据库一样【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net，具有记录的性质，可以创建便捷的条件查询

本文作者：唐霜，转载请注明出处。

我在腾讯内开发ShadowLog时，就采【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net用了indexedDB，它把用户在应用中【版权所有】唐霜 www.tangshuang.net【本文受版权保护】操作产生的日志存储在indexedDB中转载请注明出处：www.tangshuang.net【未经授权禁止转载】，然后我在一个webworker中去读取【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net出来，进行处理后上报这些日志。注意，在w【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】ebworker中我们是不能使用loca【本文首发于唐霜的博客】【本文受版权保护】lStorage的，而且从数据量上讲，l【原创内容，转载请注明出处】【本文受版权保护】ocalStorage存到5M就是极限了【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。，而indexedDB可以存到500M，转载请注明出处：www.tangshuang.net【版权所有，侵权必究】可以存很多数据。

【转载请注明来源】【转载请注明来源】著作权归作者所有，禁止商业用途转载。

利用前端持久化存储，我开发了databa【关注微信公众号：wwwtangshuangnet】【转载请注明来源】xe这个库（当然它有多种缓存模式），它的本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】核心思想是把从后端请求回来的数据存在in【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】dexedDB中，这样在下一次请求相同数未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】据时，就不需要从后端去读取，而是直接从i未经授权，禁止复制转载。【转载请注明来源】ndexedDB中读取。这样我们可以极快【作者：唐霜】未经授权，禁止复制转载。的对界面进行渲染，减少等待请求的时间。

登峰造极：高性能架构

“我等今日已久，自上次被你重伤，我便知你未经授权，禁止复制转载。【未经授权禁止转载】定会再来寻仇，只可惜，我已练成鬼魉神功九【转载请注明来源】【未经授权禁止转载】重天，今日便是你的死期。”只见的那鬼王全【本文首发于唐霜的博客】【本文首发于唐霜的博客】是包裹一团黑气，四大护法皆如兽样似人非人著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。。“你作恶多端，世间早已容不下你，或许只原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。有地狱能容的下你，今日就是了断。”直见那【版权所有，侵权必究】【本文首发于唐霜的博客】四大护法冲飞而来，韩式兄弟迎将而去，然四【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】手难敌八爪，很快落了下风。那四大护法才两本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】年有余，武功却飞进大截，似有什么秘密。天原创内容，盗版必究。【版权所有，侵权必究】地之间，火、气、水、光，物与物皆可变换。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net韩式兄弟被打的飞落过来，我慢步上前，将他原创内容，盗版必究。本文作者：唐霜，转载请注明出处。们接住，韩大口中吐血，中了内伤。我运动元【原创内容，转载请注明出处】【转载请注明来源】脉，从掌心过其肩臂注入其体内，不过一瞬，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。他便站起来，“这是怎事？适才还胸痛气闷，【转载请注明来源】【原创不易，请尊重版权】现在便极有精神，像是没有打斗过般。看来我【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】兄弟二人就算再修炼一百年，也不能及你一二【原创不易，请尊重版权】未经授权，禁止复制转载。了。”“你先歇着。”……那四大护法各自都著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】服下一颗手指般大小的药丸，一时间，他们青【本文受版权保护】原创内容，盗版必究。筋暴起，头发脱落，衣服裂开，各自生出些莫转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】名的器官来，有露出肉翅，有甩出毛尾。“太原创内容，盗版必究。【原创不易，请尊重版权】诡异了，原来这鬼耧岛勾结东瀛，靠这断魂丸著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】营生，这便是这个鬼窍团的秘密，如此下去，本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。天下将尽数毁在他们手中。”韩二道。那四大【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。护法变身之后，各个凶神恶煞，兽畜难辩，以【未经授权禁止转载】【未经授权禁止转载】极速飞来。世间之物，除光以外，皆有速，唯【本文受版权保护】【作者：唐霜】独光无速，却无人能比光更快，而我已超了光【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。之速。“是了断的时候了”我心想。便拾起地【原创不易，请尊重版权】【原创内容，转载请注明出处】上被打落的瓦片。当我腾空跃起时，时空已经【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net凝固，瓦片锋利的一侧足以割破其喉咙，待我【本文受版权保护】【版权所有，侵权必究】轻薄落地，早已将那四畜断了气。就在那鬼王【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】诧异而慌忙使用绝招时，我躲过了他是尽全力【本文受版权保护】【本文首发于唐霜的博客】轰出的气道，出现在他眼前，他已目瞪口呆，【未经授权禁止转载】【未经授权禁止转载】不敢相信自己的眼睛。“此乃天道！”我一掌【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net从他的天玄穴拍下，见他七窍流血，跪倒在地【本文受版权保护】本文版权归作者所有，未经授权不得转载。，世间再无鬼窍团。我不知他倒地一刻再想什转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】么，儿时母亲给我做饭，父亲砍柴归来的画面【版权所有，侵权必究】【版权所有，侵权必究】涌现眼前。二十多年，今终大仇得报。
转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

当我们使用某些细节的技术仍然无法解决卡顿【原创不易，请尊重版权】【未经授权禁止转载】、慢等问题时，我们就应该考虑，是否是因为未经授权，禁止复制转载。原创内容，盗版必究。我们所设计的整套技术实现本身就存在问题，【本文受版权保护】【版权所有，侵权必究】或者说我们的架构不够高性能。在react【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net推出16版本之前，它使用了经典的virt本文作者：唐霜，转载请注明出处。【作者：唐霜】ual dom架构，通过diff和pat原创内容，盗版必究。【原创内容，转载请注明出处】ch两套动作实现DOM的更新，然而随着r著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】eact应用暴露出越来越多的性能问题后，【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net核心团队成员发现diff和patch占用未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net了长时间的计算，导致diff和patch【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。这两个过程，浏览器都处于等待状态，也就是未经授权，禁止复制转载。【转载请注明来源】卡顿。为了解决这一问题，react推出了【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net新的fiber架构，对diff进行大刀阔转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】斧的重构，实现了时间分片等特性，让dif未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】f和patch两个阶段分开调度，从而释放【原创不易，请尊重版权】【本文受版权保护】了长任务，除了操作DOM本身可能带来的卡【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。顿，基本上就不存在长任务，因此，拥有更高著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。的性能。我认为，从应用整体层面去规划，实【版权所有，侵权必究】【本文受版权保护】施高性能架构，是让应用拥有性能底线的基础【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net，如果应用架构本身就是低性能的，那么再怎本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】么优化，都无法突破架构性能的下线，架构本【原创内容，转载请注明出处】【版权所有，侵权必究】身就已经让性能的瓶颈卡在那里了，你无法获【未经授权禁止转载】本文作者：唐霜，转载请注明出处。得更高的性能。因此，在应用架构设计阶段，【转载请注明来源】原创内容，盗版必究。有判别高性能架构的思维，是非常重要的，因本文作者：唐霜，转载请注明出处。【转载请注明来源】为架构一旦确定，就会永远影响应用的性能。

【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

我们无法断定哪一种架构性能更好，同时，不【作者：唐霜】【原创不易，请尊重版权】同的场景下设计不同的架构来实现我们的目标未经授权，禁止复制转载。未经授权，禁止复制转载。，所带来的副作用也各不相同。例如同样是面【原创内容，转载请注明出处】原创内容，盗版必究。对整个应用代码结构庞大复杂的问题，我们可本文版权归作者所有，未经授权不得转载。【转载请注明来源】以采用分层架构，也可以采用微前端架构，或著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】者组件-应用架构，即使都采用微前端架构，【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】我们所选型的微前端框架也会影响我们的代码转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。结构，最终所表现出来就是性能不同。一般而【转载请注明来源】【转载请注明来源】言，越接近原生，性能越好，但是编写过程越【未经授权禁止转载】【未经授权禁止转载】头疼，而抽象度越高，往往性能劣势更明显，【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。此时，常常需要做一些巧妙的设计，来让开发本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net者可以自己实现性能的提升，例如从框架内部【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。提供一些方法，开发者一旦使用这些方法，就【版权所有，侵权必究】【本文首发于唐霜的博客】会让框架运行时采用缓存策略，从而加速性能本文作者：唐霜，转载请注明出处。【本文受版权保护】。

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【转载请注明来源】

接下来，我将简单介绍几种架构设计的思路，【转载请注明来源】【未经授权禁止转载】这些思路都是从性能角度出发提供建议。

本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【作者：唐霜】

无状态化架构

前端也开始流行函数式编程，其中的重要思想【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。之一就是无状态化。这里的无状态化并非指整【原创不易，请尊重版权】原创内容，盗版必究。个应用中不存在状态，而是将状态统一交给一未经授权，禁止复制转载。未经授权，禁止复制转载。个状态管理器去管理，而此外的其他部分全部【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。按照函数式的思维，驱动整个应用的不断流转转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。。

无状态化架构之所以有较高的性能，原因在于【未经授权禁止转载】【本文受版权保护】编写程序时，我们会刻意的控制内存占用，由转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】于状态交给统一的状态管理器管理，也就意味本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。着当前程序本身在运行过程中，并不积累内存【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net，运行完之后，内存就会被释放掉，所以总体【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】而言，就不会出现内存溢出等情况。

【作者：唐霜】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

异步化架构

前端开发是接触异步最多的开发领域，因为我原创内容，盗版必究。【本文受版权保护】们通常需要使用ajax或其他形式从服务端【本文受版权保护】原创内容，盗版必究。加载资源，而所有的这些逻辑，往往都会放在【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】异步任务中运行。

异步化架构之所以有较高的性能，原因在于它本文作者：唐霜，转载请注明出处。【本文受版权保护】对任务进行拆分，从而避免在同一帧执行过长原创内容，盗版必究。【原创内容，转载请注明出处】的任务，进而避免的卡顿现象。

但是，异步化也会让我们的代码难以理解，因著作权归作者所有，禁止商业用途转载。【本文受版权保护】为同一任务的代码往往会被分为好几段，甚至本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。散落在不同地方，这就会导致我们在阅读某一原创内容，盗版必究。原创内容，盗版必究。逻辑时，无法有一个完整的思路。

【转载请注明来源】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】

队列

前端很少讲队列，但是我认为队列是解决异步原创内容，盗版必究。原创内容，盗版必究。化架构问题的重要手段。简单讲，我们会在前著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】端应用中构建一套队列服务，当我们需要按照本文作者：唐霜，转载请注明出处。原创内容，盗版必究。队列的形式执行任务时，就将任务丢给队列服著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】务，当任务执行完时，又会回到原始的位置继【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。续执行。队列具有先进先出的特点，因此，在本文作者：唐霜，转载请注明出处。【本文受版权保护】一些需要按照顺序进行执行的场景非常有用。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。同时，我们还可以基于参数对任务进行分类，本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】假如同一任务被再次push进队列时，我们【作者：唐霜】未经授权，禁止复制转载。可以采用提升上一个任务的优先级的策略，让【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。上一个未完成的任务马上执行，然后再把当前转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。这个任务push进队列；当然，我们也可以原创内容，盗版必究。【转载请注明来源】把上一个任务直接丢弃，使用新任务的结果。

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【未经授权禁止转载】【转载请注明来源】

协程

协程在前端场景下是指在多个任务之间调度，原创内容，盗版必究。【原创内容，转载请注明出处】以实现类似并发的效果。我们知道js执行是原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】单线程的，这也就意味着如果不加处理，一个【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。任务就必须从头到尾执行，导致其他任务排队【本文首发于唐霜的博客】未经授权，禁止复制转载。等待，出现页面卡顿。而通过协程的架构，我【原创不易，请尊重版权】【未经授权禁止转载】们就可以设计出基于时间分片的多任务切换，【本文受版权保护】【版权所有，侵权必究】达到类似并发的效果。这也就是react 转载请注明出处：www.tangshuang.net【未经授权禁止转载】fiber的设计思路，以及新版本reac转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。t中suspense的由来。

虽然ES本身有yield来实现这种简单的【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。协程，随后又发布了await，但是从上文转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】我们可以看到，协程架构的核心不是在实现任著作权归作者所有，禁止商业用途转载。【本文受版权保护】务的中断与上下文的保留，而在于调度。我们【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】做架构设计的目标，不是让开发者去刻意使用本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net协程，而是在框架内自动集成调度，让开发者【转载请注明来源】未经授权，禁止复制转载。感受不到协程的存在。

协程架构之所以具有较好的性能，和上面的异未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。步化架构、队列其实大同小异，不同的地方在著作权归作者所有，禁止商业用途转载。【转载请注明来源】于，协程架构把这种任务拆分进行了重组，让本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】开发者感受不到其拆分的过程，同时又有并发未经授权，禁止复制转载。原创内容，盗版必究。的感受。

【转载请注明来源】【原创不易，请尊重版权】

华山论剑：React性能优化

“荫哥，天下若大，你想去何处？”“秀若，未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net你我一起闯荡江湖如何？”“只要跟着荫哥，著作权归作者所有，禁止商业用途转载。【本文受版权保护】天涯海角我皆无怨悔。”……夕阳甚红，镇海【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net村的海唱着悠扬的乐，夜慢慢醒来。……“人【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。不在江湖，名号却远播天下，你若再不出山，【版权所有，侵权必究】未经授权，禁止复制转载。天下都要把你当神了。”“无一兄从长安千里【原创不易，请尊重版权】【本文首发于唐霜的博客】赶来，不知何事？”“你斩杀鬼王一事已惊动原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。了当今皇帝，他欲请你入京，封官加爵，我看【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。你还是和我赶快回京，享受荣华富贵。”“无原创内容，盗版必究。【版权所有，侵权必究】一兄说笑了，你我相识一场，定知我不是贪图【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。富贵之人，倒是快讲真话来。”“你斩杀鬼王【原创内容，转载请注明出处】【本文受版权保护】为天下苍生除了一大患，本是天大的好事，但【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。鬼窍团余孽未尽，鬼王卒，这些余孽各自为王【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。，如今反而搞得天下混乱。”“我只为自己报【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。仇，并未考虑此后果。”“虽然你是自己复仇【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】，但天下尽人皆知，你有正义之心。”“……【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】可我也无办法啊，双手难扫天下。”“办法倒【未经授权禁止转载】【原创不易，请尊重版权】不是没有，四月十五，华山推选武林盟主，届原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net时你若坐上盟主之位，集结天下正义侠士，号【原创不易，请尊重版权】【转载请注明来源】令各地门派共同剿匪，必能尽快将这些余孽清【本文首发于唐霜的博客】原创内容，盗版必究。剿。”“无一兄，心怀天下，我甚不如你！既【版权所有】唐霜 www.tangshuang.net【转载请注明来源】然你已出山，那我岂能袖手旁观。”
【版权所有，侵权必究】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】

作为当下最流行的前端视图层驱动框架，re【版权所有，侵权必究】【转载请注明来源】act提供了一套把UI视图抽象化的解决方著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】案。由于其高度的抽象性，导致开发者在使用未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。过程中，常常触发一些意料之外的逻辑，从而【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。带来不必要的性能问题。本章将总结笔者过去本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。几年中使用react遇到的性能问题，即提本文作者：唐霜，转载请注明出处。原创内容，盗版必究。供一些解决方案。

本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

React渲染机制

【未经授权禁止转载】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。

著作权归作者所有，禁止商业用途转载。

【原创不易，请尊重版权】

react生命周期

【访问 www.tangshuang.net 获取更多精彩内容】

未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。

【访问 www.tangshuang.net 获取更多精彩内容】

从Virtual DOM到真实DOM

【本文首发于唐霜的博客】

【作者：唐霜】

原创内容，盗版必究。

fiber，reconciler，sch【未经授权禁止转载】转载请注明出处：www.tangshuang.neteduler

【未经授权禁止转载】

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

作为一个视图层驱动框架，react本身的【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net架构可以分为3层：Virtual DOM【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】层；Reconciler层；Render转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.neter层。其中，Virtual DOM是r【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】eact最原始最核心的概念，它用于描述一【转载请注明来源】未经授权，禁止复制转载。套跨平台的UI结构，注意，这里的结构包含转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net其逻辑和事件。Reconciler层是r【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】eact中最重要的，区别于其他任何基于V【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】irtual DOM的框架（例如vue、【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。avalon、preact等）的关键，该未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。层用于对Virtual DOM进行处理、原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net对比、计算，对用户事件进行调度，推动组件本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】生命周期等等工作。Renderer层用于【未经授权禁止转载】转载请注明出处：www.tangshuang.net把Virtual DOM映射到具体的某个【本文受版权保护】本文版权归作者所有，未经授权不得转载。平台上，表现出具体的UI和人机交互逻辑，【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net比较常见的有ReactDOM和React本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】Native。

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

React现在的版本基于fiber架构完【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。成reconciler层所有工作。Rec本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】onciler的主要工作是调用组件生命周原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net期，这里可不指组件生命周期函数，reac著作权归作者所有，禁止商业用途转载。【作者：唐霜】t官方开源了react-reconciler这个库，你可以基于它了解react组件真【本文受版权保护】【本文受版权保护】正的生命周期。在生命周期的基础上，fib【作者：唐霜】【本文受版权保护】er构建了一套非常巧妙的时间切片算法，让著作权归作者所有，禁止商业用途转载。【转载请注明来源】reconciler处于一种更加灵活且掌著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】控性更强的调度中，整个调度交由scheduler来进行任务分配，实现了任务的优先级，这些【关注微信公众号：wwwtangshuangnet】【作者：唐霜】优先级可划分为：

未经授权，禁止复制转载。原创内容，盗版必究。

原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

task，在next tick之前执行

原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。

animation，下一帧之前执行

【关注微信公众号：wwwtangshuangnet】

【访问 www.tangshuang.net 获取更多精彩内容】

high，在不久的将来立即执行

转载请注明出处：www.tangshuang.net

low，稍微延迟执行也没关系

原创内容，盗版必究。

未经授权，禁止复制转载。

【转载请注明来源】

offscreen，下一次render时【转载请注明来源】本文作者：唐霜，转载请注明出处。或scroll时才执行

著作权归作者所有，禁止商业用途转载。

【关注微信公众号：wwwtangshuangnet】

【本文受版权保护】

基于fiber的reconciler分为转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。两个阶段：reconciliation阶未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】段和commit阶段。其中commit阶【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。段的主要工作是把计算后的变更实施到真实的【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netDOM或native环境中，影响UI界面未经授权，禁止复制转载。【转载请注明来源】的变化，因此，这个阶段是不可以中断的。而【原创不易，请尊重版权】【原创内容，转载请注明出处】reconciliation阶段主要工作【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。是计算、diff、找出变更（副作用），这【版权所有，侵权必究】原创内容，盗版必究。些计算大体上还是基于virtual DO本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。M的，由于它属于计算层面，所以是可以中断【本文受版权保护】未经授权，禁止复制转载。的，react实现了巧妙的时间切片算法，原创内容，盗版必究。【未经授权禁止转载】可以在计算时根据任务的优先级来中断当前的转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。计算，等到有空闲时间时再重新开启之前的计本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】算。基于该时间切片算法，计算被合理的划分【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】到不同时间切片，从而大幅避免了长任务所带转载请注明出处：www.tangshuang.net【版权所有，侵权必究】来的卡顿现象（当然，有的情况下还是不可避原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net免，但总体而言比较少）。

著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

在reconciliation阶段进行计【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net算时，react也巧妙的采用了双缓冲池算著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】法，简单讲就是通过快照来减少内存占用。在【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】fiber架构下，react会在第一次渲本文作者：唐霜，转载请注明出处。原创内容，盗版必究。染完成时，建立一棵fiber树，reco【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netnciliation阶段会基于该fibe本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。r tree建立一个workInProg原创内容，盗版必究。【原创不易，请尊重版权】ress tree（实际上就是fiber【转载请注明来源】【版权所有】唐霜 www.tangshuang.net tree的快照），然后在workInP未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】rogress tree上做修改，而这个【原创不易，请尊重版权】【作者：唐霜】修改不会影响原来的fiber tree，【作者：唐霜】【原创内容，转载请注明出处】当任务暂停后继续时，workInProg未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】ress tree保存了计算信息，所以，【版权所有】唐霜 www.tangshuang.net【作者：唐霜】react知道应该从哪里继续计算；当被更【本文首发于唐霜的博客】【作者：唐霜】高优先级的任务打断时，该workInPr【作者：唐霜】本文版权归作者所有，未经授权不得转载。ogress tree被直接丢掉，fib【转载请注明来源】【版权所有】唐霜 www.tangshuang.neter tree不会发生任何变化；而如果计【本文首发于唐霜的博客】原创内容，盗版必究。算顺利完成，workInProgress本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net tree会直接替换fiber tree未经授权，禁止复制转载。【原创内容，转载请注明出处】，从而让整个界面有新的描述，让下一次re本文作者：唐霜，转载请注明出处。【未经授权禁止转载】concile计算有快照可依。commi【版权所有，侵权必究】原创内容，盗版必究。t阶段就会基于找到的更新，对UI进行变更【作者：唐霜】【版权所有，侵权必究】。

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net

以上就是react渲染的大致情况，你会发【本文受版权保护】著作权归作者所有，禁止商业用途转载。现，在这个过程中，每一个细节，都有可能给本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。我们埋坑，因为它涉及很多设计上的实现，它转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。在代码上的实现是没有标准的，不同版本的r【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。eact想怎么去处理就怎么去处理，因此，【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net我们编写react组件，只能尽可能的避免【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。直接依赖底层的算法，而应该通过react【转载请注明来源】【本文首发于唐霜的博客】暴露出来的api来进行控制，否则一但版本【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】升级，我们以前做的很多建设都将付之一炬。

常见的React性能问题与优化对策

1. 接收相同的props，却还是被重新【未经授权禁止转载】【作者：唐霜】渲染

注意，这里的重新渲染仅仅是render生【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。命周期重新被调用，并非只真实UI被重新渲【本文受版权保护】原创内容，盗版必究。染。由于组件render时可能存在大量计【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。算，所以一旦被反复调用，就可能引起性能问【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。题。我们时常疑惑，为什么接收了相同的pr著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】ops，还是会重新渲染。注意，这里的相同转载请注明出处：www.tangshuang.net【未经授权禁止转载】props，不包含传入了看上去一样但实际【作者：唐霜】【未经授权禁止转载】上是两个独立的对象或函数的情况。例如：

<Some name="toniy" />

为什么Some组件的render会被反复转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】执行呢？明明name是个字符串，不会变化转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】。这是因为react在实现代码层面，仅对著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。前后两次props进行了全等对比，即==原创内容，盗版必究。【原创内容，转载请注明出处】=，而组件每次执行到该生命周期时，pro【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ps明显都是新创建的，虽然看上去是一样，【作者：唐霜】【关注微信公众号：wwwtangshuangnet】但实际上是两个对象。如果react内部实【本文受版权保护】【转载请注明来源】现时，采用了shallowEqual，那本文作者：唐霜，转载请注明出处。【未经授权禁止转载】就不存在这个问题了。

那么怎么解决呢？既然react自己没有处【原创内容，转载请注明出处】【转载请注明来源】理，我们自己来包一个shallowEqu【本文受版权保护】【本文受版权保护】al的实现：

【作者：唐霜】未经授权，禁止复制转载。

export const Some = React.memo(function(props) {
  ...
})

我们在原来的Some组件外面包了一个Re本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。act.memo，就可以让Some组件自本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。动具备props的shallowEqua本文版权归作者所有，未经授权不得转载。【作者：唐霜】l判断，当组件传入的props没有变化时未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。，组件就不需要再次渲染。

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

2. 接收属性都相同的prop对象，怎么【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net避免重新渲染？

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

很多情况下，我们使用组件时会直接传入一个本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】对象，例如：

【作者：唐霜】【作者：唐霜】原创内容，盗版必究。【本文受版权保护】

<Some info={{ name: 'toniy' }} />

这种用法会导致info每次都是一个新对象未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。，组件每次都会重新渲染，有没有什么办法避【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。免呢？

【本文首发于唐霜的博客】【原创不易，请尊重版权】

export const Some = React.memo(function(props) { ... }, (nextProps, prevProps) => {
  return nextProps.info.name === prevProps.info.name
})

React.memo的第二个参数返回bo【作者：唐霜】本文版权归作者所有，未经授权不得转载。olean，如果为true表示前后两次是著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。相等的，相当于告诉react，这次组件不原创内容，盗版必究。【原创不易，请尊重版权】需要被重新渲染。

【作者：唐霜】【原创不易，请尊重版权】【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】

3. 避免回调函数引起重新渲染

未经授权，禁止复制转载。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

对于onClick等事件回调，如果直接传【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net入函数，也是被认为是一个全新的值，因此，本文版权归作者所有，未经授权不得转载。【作者：唐霜】用memo也无济于事。很多建议是通过us【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】eCallback或useEvent包裹【未经授权禁止转载】原创内容，盗版必究。回调函数，但我认为可以在组件内自己消化。

【关注微信公众号：wwwtangshuangnet】【转载请注明来源】【本文首发于唐霜的博客】

export const Some = React.memo(function(props) { ... }, (nextProps, prevProps) => {
  return nextProps.onClick === prevProps.onClick || nextProps.onClick + '' === prevProps.onClick + ''
})

我们自己在组件内做好了优化，对于用该组件本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】的人而言也是省心省力的。

本文作者：唐霜，转载请注明出处。【转载请注明来源】

4. 为什么组件的渲染似乎进入了死循环？

未经授权，禁止复制转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。

组件渲染开始后，浏览器假死，一直无法显示【作者：唐霜】【关注微信公众号：wwwtangshuangnet】界面。很有可能是因为变更state导致的【原创不易，请尊重版权】【本文首发于唐霜的博客】无限触发更新导致的死循环问题。可能的两种【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。情况，一是在componentDidMo未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】unt/componentDidUpda本文作者：唐霜，转载请注明出处。原创内容，盗版必究。te中调用setState，二是在use转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】Effect中调用setState。当组未经授权，禁止复制转载。【原创内容，转载请注明出处】件完成渲染之后，你随即马上又调用setS【原创内容，转载请注明出处】【未经授权禁止转载】tate来触发了组件的更新，而由于没有控【版权所有，侵权必究】未经授权，禁止复制转载。制好，导致这一更新动作不断的被触发。

【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】

此时，你要检查setState是在什么情【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。况下被调用。一方面可以通过shouldC【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。omponentUpdate来控制，再什本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】么状态下可以更新组件，另一方面在setS【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】tate之前做好if判断。

【本文受版权保护】【本文首发于唐霜的博客】

基于依赖收集的最小化更新技术

这是我独家总结的一种react组件优化技【转载请注明来源】【原创内容，转载请注明出处】术，你可以在《一种基于依赖收集的最小化更新组件技术》一文中阅读详细的思考过程。简单讲，我们【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。的组件往往并不需要在每次更新时被更新。这本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】话可能有点绕，让我们回去了解一下reac【转载请注明来源】未经授权，禁止复制转载。t的渲染机制，你会发现，react组件是【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】否需要被重新渲染，是由react作为驱动本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】程序，内部reconciler调配的，而著作权归作者所有，禁止商业用途转载。【作者：唐霜】react在实现时，无论组件内部怎么设计【转载请注明来源】本文版权归作者所有，未经授权不得转载。，它都会按照自己的设计来重新运行组件的r【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ender。这就导致组件其实根本不需要r【转载请注明来源】【作者：唐霜】ender，但是还是被render了。此【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net时，我们可以把组件从这种机制中脱离出来。【作者：唐霜】【版权所有，侵权必究】通过最小化更新技术，我们可以让组件在默认【未经授权禁止转载】【未经授权禁止转载】状态下不更新，只在内部使用到的值发生变化转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】的时候更新，从而做到定点靶向更新，实现最本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。小化更新。

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】本文版权归作者所有，未经授权不得转载。

React SSR

SSR技术主要针对首屏渲染，我们大部分前【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】端应用都是通过构建大包进行发布，这就会导【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】致应用首屏必须等到加载完对应的脚本，并执【作者：唐霜】【原创不易，请尊重版权】行之后，才会由react生成对应的DOM本文版权归作者所有，未经授权不得转载。【作者：唐霜】结构，并挂载到页面上。SSR技术则主要解【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】决这一问题，简单讲，react的Virt【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】ual DOM可以在服务端运算出用于渲染【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。的HTML字符串，从而让页面打开时，就已【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。经具备了可渲染的html内容，用户也就能【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。立即看到页面的内容。在这同时，页面还会继【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。续加载对应的脚本，脚本完成之后，页面就恢本文版权归作者所有，未经授权不得转载。【作者：唐霜】复了正常的SPA效果。

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

不过SSR受限于后端运维的条件限制，并不【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】适合所有前端场景。大部分情况下，我们可以著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net结合serverless来运行ssr程序未经授权，禁止复制转载。【本文受版权保护】，同时在策略上做一些降级方案，保证ssr【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。运行出错或后端机器卡顿时，可以退回到普通本文作者：唐霜，转载请注明出处。【未经授权禁止转载】的CSR（客户端渲染）模式。

原创内容，盗版必究。未经授权，禁止复制转载。【作者：唐霜】【原创内容，转载请注明出处】

问鼎中原：Vue性能优化

“我不服，这个荫世年纪轻轻，论辈分，给我【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】提鞋都不够，有什么资格担任武林盟主？”“【本文受版权保护】【本文首发于唐霜的博客】对！我关山派也不同意”……西无一的推荐，【作者：唐霜】未经授权，禁止复制转载。反倒引来不少反对之声。“各位，请听我西某转载请注明出处：www.tangshuang.net原创内容，盗版必究。一言。如今世道混乱，中原武林若不齐心协力本文作者：唐霜，转载请注明出处。原创内容，盗版必究。，铲除鬼窍团余孽，就会让武林威信扫地，其【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。他恶势力蠢蠢欲动，届时天下混战，天下百姓【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。受苦，各位所在门派也必然将受到威胁，只有本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。结盟共济，才能度过此间乱局，还天下太平，【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】而如今乱世，皆因这位英侠而起，正因其心怀【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net天下，才能数十年意志不变，最终斩杀恶贼，未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。天下若他做不了盟主，便无人做得了这盟主。【版权所有，侵权必究】转载请注明出处：www.tangshuang.net”……看来，还是得由功夫来决定盟主之位。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。“无一兄，虽然我无意盟主之名，但今日必要【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。拿下这盟主之位，结束这世间纷争，望无一兄【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。承让。”“荫兄自当有这能力，昔日一招便可【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】接我绝学，望整个江湖，唯有你能做到。”“【版权所有，侵权必究】转载请注明出处：www.tangshuang.net好，那就看我如何去争这盟主位。”说罢，我【转载请注明来源】【原创不易，请尊重版权】便快步走上擂台，说到“今日在下无意盟主之原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。名，但天下己任，望众位大侠成全，若有不服【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net，可上台挑战。”“嗖！呼！”一声飞来，不【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。知哪个门派上来一人，“我乃四川青城派掌门转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。，今日向这位少侠挑战。”说罢，一个作揖，【本文受版权保护】本文作者：唐霜，转载请注明出处。便携一股热气飞涌而来。这位掌门虽功力深厚未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】，但并无杀气，我只用两招，便化解了他的夺转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net命索喉，令得他有些气急败坏，不得不抱拳认本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net输。……“既有如此不满，在场门派皆可同时著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】上来，在下可一人敌。”一时间，十余人便冲【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。上来，各个狠辣不留情面，但在我看来，其境【转载请注明来源】本文版权归作者所有，未经授权不得转载。界亦不过如此。若在缠斗下去，怕是紧都分不【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。出胜负来。“轰！”只闻得空气中一阵闷响，著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。在场之人，全都被镇住，动弹不得。“各位，著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net世间武功再高，亦有界限，今日，让众位开开【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。眼界。”说罢，我集自然神气，向空中发出一未经授权，禁止复制转载。【版权所有，侵权必究】束气脉，身体与宇宙联通。被镇住之人动弹不著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】得，只可看见。天地间若静止，白云消散，蓝【本文首发于唐霜的博客】【原创内容，转载请注明出处】天被拨开一到裂口，缓缓展开来，漏出宇宙的本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本来面目。黑色的背景深邃如幕，繁星若璀璨【作者：唐霜】转载请注明出处：www.tangshuang.net宝石散发着耀眼光辉……带我收回气脉，停止【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】运气，一切恢复如初，众人却仍伫立原地，对转载请注明出处：www.tangshuang.net【作者：唐霜】适才所见惊得目瞪口呆，若有所思，忘却了当【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。下。……“荫少侠无愧盟主！荫少侠无愧盟主本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。！”……
【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【转载请注明来源】

Vue作为国人喜爱的一款前端框架，应用范未经授权，禁止复制转载。未经授权，禁止复制转载。围也很广泛。同时，与react相比，vu本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】e原生做了一些性能优化方面的工作，避免大【作者：唐霜】【未经授权禁止转载】部分开发者反复的去处理某些性能问题。但在【转载请注明来源】未经授权，禁止复制转载。vue使用过程中，偶尔我们也会遇到一些情本文作者：唐霜，转载请注明出处。【作者：唐霜】况。

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

Vue响应式原理

和react等框架不同，vue的编程特点【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net是通过直接修改数据来触发界面的重新渲染。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。这一思想来源于angularjs，但是却本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】比angularjs更加优秀，因为它采用【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】了数据拦截的响应式原理，而抛弃了angu【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。larjs的脏检查机制。在vue2版本中转载请注明出处：www.tangshuang.net【版权所有，侵权必究】，它通过Object.definePro【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。perty来拦截数据，当在代码中直接修改【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。数据（属性）时，会通过该属性的sette【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】r修改其值，在setter中，vue内置原创内容，盗版必究。未经授权，禁止复制转载。了一个触发界面更新的任务，等到下一帧时，本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。这些更新任务就会被执行，从而带来界面的更未经授权，禁止复制转载。【本文首发于唐霜的博客】新。在vue3版本中，它用Proxy替代本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】了Object.defineProper【本文首发于唐霜的博客】【本文首发于唐霜的博客】ty，因为Proxy可以更好的处理del原创内容，盗版必究。【原创内容，转载请注明出处】ete操作和数组的各种操作的拦截，但在拦原创内容，盗版必究。未经授权，禁止复制转载。截中插入重新渲染的任务仍然是其底层逻辑。

【原创内容，转载请注明出处】原创内容，盗版必究。

也正是因为这种拦截的机制，让vue在性能【原创不易，请尊重版权】【原创内容，转载请注明出处】上，如果不做任何优化，会有比react性【未经授权禁止转载】【原创内容，转载请注明出处】能更好的表现。因为这种拦截具有依赖收集的本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net可能性（vue内部也是这么做的），也就意本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net味着，只需要对依赖的变化进行响应即可，其【原创不易，请尊重版权】【未经授权禁止转载】他变化，即使是被拦截的数据，也无需对它进著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net行响应。和react相比，react的重本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】新渲染是全量的，一旦触发了更新，那么就是原创内容，盗版必究。【原创内容，转载请注明出处】整个组件连带其子组件一起更新，而vue因【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】为是根据哪一个数据变化来进行更新，所以在【未经授权禁止转载】【原创不易，请尊重版权】更新时具有更细粒度的把控，结合编译工具，【本文受版权保护】未经授权，禁止复制转载。可以做到只更新对数据有依赖的节点，这就使【原创内容，转载请注明出处】未经授权，禁止复制转载。得其性能有不错的表现。但是，也正是由于它未经授权，禁止复制转载。【原创内容，转载请注明出处】基于数据拦截机制，也带来了一些问题，一个【作者：唐霜】【版权所有】唐霜 www.tangshuang.net问题是，当遇到一些无法被拦截的数据，例如【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。一些类的实例对象，就无法正确响应其修改。

【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【本文受版权保护】

常见的Vue性能问题

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。

由于数据拦截机制，会导致有些情况下，一些原创内容，盗版必究。【本文受版权保护】细节的修改我本不想带来重新渲染，但是由于【本文受版权保护】【原创不易，请尊重版权】其内部任务的存在，会出现大量的计算，占用【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】CPU，而且vue不像react实现了时【转载请注明来源】【版权所有】唐霜 www.tangshuang.net间切片，它就没有办法处理这种常见的CPU【未经授权禁止转载】【本文首发于唐霜的博客】被大量占用的情况。针对这种情况，我们只需【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net要让vue不要去拦截这类数据，即让这个数【作者：唐霜】【转载请注明来源】据不要具备响应式能力。我们可以用Obje原创内容，盗版必究。原创内容，盗版必究。ct.defineProperty对数据【本文受版权保护】未经授权，禁止复制转载。提前进行定义，将其configurabl未经授权，禁止复制转载。【未经授权禁止转载】e设置为false，那么vue就无法通过【版权所有，侵权必究】未经授权，禁止复制转载。Object.definePropert【未经授权禁止转载】原创内容，盗版必究。y来拦截该数据。

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【作者：唐霜】本文版权归作者所有，未经授权不得转载。

因为可能是你的后端接口返回了一个巨大的数本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】据，而你在往vue里面塞入该数据时，vu【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。e会对该数据进行初始化拦截处理，而由于数本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net据太大，导致该过程消耗了大量的计算。解决【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。办法是用Object.freeze把该数著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。据进行冻结，经过冻结后的数据不会被vue未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net拦截，这样就直接跳过了这个初始化拦截处理【作者：唐霜】【原创内容，转载请注明出处】阶段，可以快速展示你的数据。

3. 大列表、大表格卡顿？

这个不是vue的问题，参见前面“虚拟视口【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。技术”一节。

笑傲江湖：其他框架性能亮点

追到峡谷，两岸峭壁如岸，抬头只见的一线天【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。，视线昏暗，风寒如沁。“轰！”闻的一声巨【版权所有，侵权必究】【版权所有，侵权必究】响，“报！！盟主，我们中埋伏了，前路夹谷原创内容，盗版必究。原创内容，盗版必究。被这帮恶人炸毁堵住，刚才后路也被炸，如今著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。我们被困在这峡谷内，瓮中之鳖了。”没曾想【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】，这帮余孽竟然还会如此设计。“哈哈哈！！【转载请注明来源】【原创内容，转载请注明出处】！中原武林，今日半数在此，今日之后，就没【转载请注明来源】本文作者：唐霜，转载请注明出处。有中原武林了。”正直众人纳闷时，峡谷顶上本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net出现了黑压压的一群丑陋的余孽鬼，各个手中【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】持弓箭，另有石药车。“啊！！这可如何是好【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。！！我嵋山派莫非今日要灭门于此？”人群里【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】开始轰动，有的慌乱，有的后悔，有的惧怕…【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。…“秋山若有仙人在，明月新霜宁如嫦。”我本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。拿出秀若送我的长箫，吹一曲《明月清风》安著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】然凝神。“大家莫慌，待我半柱香。”顷刻之【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。间，我已飞冲到峡谷顶崖，擒住那团伙的首领【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。。哪些恶兽冲涌上来，我只挥一阵衣袖，便将转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。所有反抗者震晕倒下。未等那些石药开始被倒【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】出，那些人就已经倒下了。
原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

【本文受版权保护】【作者：唐霜】【作者：唐霜】【原创内容，转载请注明出处】

Svelte为什么快？

2021年，svelte被评为react【版权所有，侵权必究】【原创内容，转载请注明出处】、vue、angular之后的第四大前端本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】框架，主要原因在于它打破了react、v【作者：唐霜】本文作者：唐霜，转载请注明出处。ue一类框架的范式，没有一点和这些框架有未经授权，禁止复制转载。【作者：唐霜】相似的地方，相反，svelte大火之后，【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】vue马上跟进，开始抄作业。在一些评测中【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】，我们也可以看到svelte在性能上有不【本文首发于唐霜的博客】【原创不易，请尊重版权】错的表现，它之所以快，主要有两个原因：

著作权归作者所有，禁止商业用途转载。【作者：唐霜】

svelte完全基于编译，它没有自己的运【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。行时，虽然在编译结果中也存在一些运行时代【转载请注明来源】【版权所有，侵权必究】码，但这些代码不足以称为一个框架，它完全【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。通过编译来理解代码要做什么操作，并编译为著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。执行该操作的代码，因此，svelte程序著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】在运行的时候，不像vue或react，会原创内容，盗版必究。本文作者：唐霜，转载请注明出处。有那么复杂的生命周期，也没有复杂的dif【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netf->patch等过程，因此就更快

【作者：唐霜】

【访问 www.tangshuang.net 获取更多精彩内容】

svelte抛弃了Virtual DOM【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net，转而直接对DOM进行操作，基于上面一条【原创不易，请尊重版权】【未经授权禁止转载】原因，svelte没有像vue或reac【转载请注明来源】【本文受版权保护】t一样，构建一套virtual dom，著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】由于构建virtual dom需要占用大【转载请注明来源】【未经授权禁止转载】量内存，同时还要基于virtual do【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。m做大量运算，所以实际上是比较低性能的，【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net由于没有virtual dom这一整套机未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net制，svelte直接操作DOM，而且是一【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net针见血的操作依赖变量的DOM节点，所以直未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net捣黄龙搬的效率带来更高的性能

未经授权，禁止复制转载。

【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

Solid为什么快？

solidjs是2021年火的一个框架，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。它身上集合了svelte的编译和无Vir【原创内容，转载请注明出处】【版权所有，侵权必究】tual DOM、react的语法、vu【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】e的响应式原理等特点，这让它在前端框架届转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。独树一帜。它之所以快，其实和svelte【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】有相同的原因，虽然写solid程序有点像【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】写react，但是实际上它和react在【原创内容，转载请注明出处】【本文受版权保护】思想上完全不同，可以说是只借鉴了reac【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。t的语法，其他的全部是svelte和vu本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。e，例如它的通过类似vue一样的reac【版权所有，侵权必究】未经授权，禁止复制转载。tive机制来实现界面的重新渲染，它采用本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。了svelte的编译时策略，以及无Vir【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netutal DOM直接定点更新DOM节点的原创内容，盗版必究。【本文受版权保护】优化等等。

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】

sfcjs为什么快？

sfcjs是我写的一个非常小的框架，在大【原创不易，请尊重版权】【原创内容，转载请注明出处】部分情况下，你无需用nodejs来搭建一【未经授权禁止转载】本文作者：唐霜，转载请注明出处。套编译环境，它直接在浏览器端启动了一个w【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。orker线程来进行编译，通过这个策略，【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net它充分利用了客户端的资源，以及worke原创内容，盗版必究。原创内容，盗版必究。r线程不干扰主线程的计算，同时基于AMD【本文受版权保护】【版权所有，侵权必究】的加载策略，在必要的时候才拉取组件代码进【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net行编译，从而让整个体验非常友好（起码在加【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。载、编译时不会出现卡顿现象）。而且sfc著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】js也走了抛弃virtual DOM的路本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】，通过对DOM节点的定点更新，通过依赖收本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。集，只有当DOM节点所依赖的变量发生变化原创内容，盗版必究。【原创不易，请尊重版权】时才会更新节点，这样当然就比基于virt【未经授权禁止转载】未经授权，禁止复制转载。ual DOM的复杂计算效率更高。

行侠仗义：Webpack构建性能优化

“荫哥，如今天下已经太平，你想做什么？”【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。“云游天下，行侠仗义。”“好，我陪你。”转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】飞阳如隙，回首我此生，楞过、苦过、狂过、【原创内容，转载请注明出处】【本文首发于唐霜的博客】惨过、耀过，如今来看，都是命运。我之坚信【转载请注明来源】【转载请注明来源】、动摇、坚持，铸就我今立于此封顶，纵乱世转载请注明出处：www.tangshuang.net原创内容，盗版必究。纷涌，于我乃清风拂发，俯览众生，有悲有喜【本文首发于唐霜的博客】【转载请注明来源】，一切皆历便可放下，或许能做些利众生的事转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。。
【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】【转载请注明来源】

Webpack作为现代前端重要的基础设施转载请注明出处：www.tangshuang.net【作者：唐霜】，对于打包构建有非常好的支持。但是，作为【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net开发构建工具，它在性能上却并不如新出现的原创内容，盗版必究。【原创内容，转载请注明出处】一些工具，这使得它饱受诟病。我们可以通过【原创不易，请尊重版权】【作者：唐霜】有些手段来优化webpack构建性能，从【原创内容，转载请注明出处】【原创内容，转载请注明出处】而在开发或构建时拥有更好的开发体验。

【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

Webpack构建原理

虽然webpack的功能目标很单一，即把【版权所有】唐霜 www.tangshuang.net【转载请注明来源】一堆代码打包后产生出一个可用的代码（或几【原创不易，请尊重版权】【本文受版权保护】个代码文件），但是，它的架构却极为复杂，本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】不是一般初学者可以掌握的。简单讲，web未经授权，禁止复制转载。【版权所有，侵权必究】pack是通过3个方面的体系实现其构建目【作者：唐霜】原创内容，盗版必究。标的，分别是：Compilition、L【转载请注明来源】转载请注明出处：www.tangshuang.netoader、Plugin。

其中Compilition是其最核心的部【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】分，它完成了一个机器的核心设计，即完成内【作者：唐霜】【版权所有】唐霜 www.tangshuang.net容转换+资源合并的能力，包含三个阶段：初未经授权，禁止复制转载。【本文首发于唐霜的博客】始化阶段，构建阶段，生成阶段。其中，构建【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】阶段又是重中之重，这个过程在我看来，本质未经授权，禁止复制转载。【本文受版权保护】上就是一个编译过程，只不过它的编译不是把本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。一份代码转化为另一份，而是把一组代码转化【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】为另外一组。它的构建大致如下：

创建Module

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

本文版权归作者所有，未经授权不得转载。

runLoaders

本文作者：唐霜，转载请注明出处。

用acorn讲js解析为AST

【转载请注明来源】

本文版权归作者所有，未经授权不得转载。

遍历AST，过程中还会收集依赖

本文作者：唐霜，转载请注明出处。

处理依赖，创建依赖树

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

本文版权归作者所有，未经授权不得转载。

著作权归作者所有，禁止商业用途转载。

如果过程中通过插件等Module中新增了本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】依赖，回流到第一步

【转载请注明来源】

【未经授权禁止转载】

转载请注明出处：www.tangshuang.net

如此循环往复，知道所有依赖都解析完毕

【本文首发于唐霜的博客】

【原创不易，请尊重版权】

【访问 www.tangshuang.net 获取更多精彩内容】

依赖树是webpack构建阶段的目标，后【版权所有】唐霜 www.tangshuang.net【本文受版权保护】面的生成阶段则是基于该依赖树生成最终的c本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。hunks。而在生成依赖树之前或过程中，著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】它会执行整个构建中的无数（200多个）钩转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net子，这些钩子可以被插件挂载，从而影响整个【转载请注明来源】本文版权归作者所有，未经授权不得转载。构建流，比如插件可以加入新的依赖、替换依原创内容，盗版必究。本文作者：唐霜，转载请注明出处。赖等等。在构建过程中，webpack会把未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】每一个import/require认为是【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】在引入一个Module，至于这个Modu【作者：唐霜】【原创内容，转载请注明出处】le真正的文件类型它并不关心，因为它会把转载请注明出处：www.tangshuang.net【版权所有，侵权必究】这个Module的识别交给Loaders未经授权，禁止复制转载。【本文首发于唐霜的博客】去处理（当然，它默认可以识别js这种mo本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。dule），而一个loader也可以在返【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net回的结果中增加依赖，这就导致webpac【本文受版权保护】【版权所有】唐霜 www.tangshuang.netk的构建过程会出现循环往复的过程，当然，著作权归作者所有，禁止商业用途转载。【作者：唐霜】你也可以说这是它先进的地方。

由于篇幅限制，我们只要掌握webpack【本文受版权保护】未经授权，禁止复制转载。三大体系是如何协作的，就可以大致了解we【作者：唐霜】转载请注明出处：www.tangshuang.netbpack的构建原理。你也可以阅读这篇文章，了解更加详细的webpack构建原理。

【本文受版权保护】【本文受版权保护】本文版权归作者所有，未经授权不得转载。

Webpack常见性能问题与优化技巧

通过上述原理，你可以发现，webpack【原创不易，请尊重版权】【原创不易，请尊重版权】的整个构建链路是很长的，而且它每一个阶段原创内容，盗版必究。转载请注明出处：www.tangshuang.net都需要执行大量计算，甚至还会循环往复的执【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net行，所以性能上肯定好不到哪里去。但是，C著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】ompilition是我们无法修改的，它【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】是webpack的核心，除非我们自己fo【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netrk一份webpack的源码，定制一个自【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。己的webpack。那么，能够优化的，就原创内容，盗版必究。【原创内容，转载请注明出处】是通过插件、Loader的优化来提升性能本文版权归作者所有，未经授权不得转载。【转载请注明来源】了。

合理优化Loaders

我们知道webpack把每一个文件都当做本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】Module对待，这也意味着，每一种文件转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。类型，都需要一个（或多个）Loader来【本文受版权保护】本文版权归作者所有，未经授权不得转载。识别，并转化为ESModule的形式，比本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。如图片要转化为 export default 'http://xxx/a.jpg' 这样的形式。但是，有些loader却会【未经授权禁止转载】【未经授权禁止转载】做多余的事，比如我们只是想得到一个url原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。，但是它却去计算尺寸大小颜色等，浪费大量原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。计算资源。一个典型的例子就是，不少开发者转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。不管什么情况下，管他三七二十一，都把ba【转载请注明来源】著作权归作者所有，禁止商业用途转载。bel-loader加上，而且给babe【本文受版权保护】【原创内容，转载请注明出处】l配置了一大堆presets，这就导致j【原创不易，请尊重版权】【未经授权禁止转载】s文件不仅要过babel的编译，还要过w【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ebpack的解析，当然更消耗性能。其实著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】，在某些场景下，我们可以不需要babel原创内容，盗版必究。【本文受版权保护】-preset-env之类的babel插【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】件或preset，只需要加几个用于识别特【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。定的webpack无法识别的语法的插件即未经授权，禁止复制转载。【原创内容，转载请注明出处】可，甚至一些情况下，如果我们写的代码是标【原创不易，请尊重版权】【原创内容，转载请注明出处】准代码，不包含ESNext，那么不使用b原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netabel-loader也完全没有问题，毕著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】竟标准ES是浏览器支持的。

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

启用多线程

我们知道webpack是基于js开发的，【原创不易，请尊重版权】【转载请注明来源】js是单线程的，所以即使两个毫不相干的l【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】oader也只能前后排队等待处理。我们可本文版权归作者所有，未经授权不得转载。【作者：唐霜】以利用happypack插件来启用多线程本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。，让某些不需要串行的任务可以并行执行，这【版权所有，侵权必究】【原创内容，转载请注明出处】样就可以让某些loader可以同时运行，转载请注明出处：www.tangshuang.net【转载请注明来源】进而提升其性能。

【关注微信公众号：wwwtangshuangnet】【转载请注明来源】原创内容，盗版必究。

使用DLL

动态链接库（DLL）是windows系统【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。的一种方案，你可以利用webpack内置著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】的DllPlugin插件，把一些固定不变【未经授权禁止转载】【原创内容，转载请注明出处】的依赖，如放在node_modules目著作权归作者所有，禁止商业用途转载。【作者：唐霜】录下的模块文件的代码，打包的dll文件中转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net，然后在编译时，基于dll的生成结果，w转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ebpack就不会再去打包这些依赖，由于【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net减少了对这些依赖代码的整套构建流，所以整【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net体的工作量就少了很多，性能也就提升了上来【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】。

启用缓存

webpack5提高了更高水平的缓存机制原创内容，盗版必究。【作者：唐霜】，新版本的webpack为了在性能上有所【关注微信公众号：wwwtangshuangnet】【作者：唐霜】突破，设计了一种复杂的缓存策略，它把一个转载请注明出处：www.tangshuang.net原创内容，盗版必究。Compilition整条链路都给分任务【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】的缓存起来，每一个loader或plug著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。in的执行，在每一个阶段的结果，都给缓存未经授权，禁止复制转载。【转载请注明来源】了一遍，当第二次进行编译的时候，如果它基【原创内容，转载请注明出处】【未经授权禁止转载】于缓存检查到某个文件发生了变化，那么它不本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net会去管其他文件的所有编译过程，而只会动当【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】前文件的编译链，其他文件的所有编译结果将【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。被直接使用。这一策略从理论上，显得非常高【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】效，可以说是我所见过的缓存策略里面做的最【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。彻底的。但是由于它要缓存的内容太多了，导【本文首发于唐霜的博客】【转载请注明来源】致它的缓存文件特别大，动不动就上G了。而【转载请注明来源】原创内容，盗版必究。且另外一个方面，它的Compilitio【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】n链路实在是太长了，即使其他所有文件的编【原创不易，请尊重版权】原创内容，盗版必究。译过程结果都无需重新生成，但是当前文件的【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】编译链路也很长，这就导致即使使用了这么高【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】级的缓存策略，webpack仍然无法做到【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。秒级构建响应。

原创内容，盗版必究。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】

让webpack打出更小的包

随着项目增长，webpack打包的体积也原创内容，盗版必究。【原创不易，请尊重版权】越来越大。此时，我们要考虑用户打开页面时【原创不易，请尊重版权】原创内容，盗版必究。，下载代码文件所花掉的时间，因此，我们要【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。想办法，让打包体积变小，让用户更快看到界转载请注明出处：www.tangshuang.net【版权所有，侵权必究】面。基于webpack，我们有如下的方案【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。：

使用dll

著作权归作者所有，禁止商业用途转载。

【关注微信公众号：wwwtangshuangnet】

【本文首发于唐霜的博客】

自己定制策略进行chunks拆分

【本文受版权保护】

【未经授权禁止转载】

使用动态引入import()

转载请注明出处：www.tangshuang.net

本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。

使用tree shaking能力

【原创内容，转载请注明出处】

本文版权归作者所有，未经授权不得转载。

使用公共utils库，减少重复代码

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

【关注微信公众号：wwwtangshuangnet】

本文版权归作者所有，未经授权不得转载。

避免同一依赖的多个版本被同时打包（当然，原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】必要的情况下不得不依赖多个版本）

著作权归作者所有，禁止商业用途转载。

原创内容，盗版必究。

未经授权，禁止复制转载。

天外飞仙：热重载

云月轻过，黑风清凉，“秀若，你可曾在天上【版权所有，侵权必究】未经授权，禁止复制转载。看过世界？”“没有。”“来我带你。”我们原创内容，盗版必究。【版权所有，侵权必究】乘着夜风，飞上千尺深空，向下望来，长安整【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。城的美景尽在眼底。若这天下太平，这盛世，【未经授权禁止转载】本文作者：唐霜，转载请注明出处。不正是我所愿。
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【作者：唐霜】

著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】转载请注明出处：www.tangshuang.net

HMR的原理

热更新的本质，就是一个函数的执行效果被这【转载请注明来源】【本文受版权保护】个函数的拷贝的执行效果覆盖。比如我们现在【版权所有，侵权必究】未经授权，禁止复制转载。有一个函数 a() 在页面上输出R【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】21;a”，然后我们重新定义原创内容，盗版必究。本文作者：唐霜，转载请注明出处。了函数 a() 在页面上输出”【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】;b”，那么怎么做到页面不刷【作者：唐霜】【版权所有】唐霜 www.tangshuang.net新而界面变化呢？运行新的 a() 就可以【本文受版权保护】【版权所有，侵权必究】了。

【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】

HMR的本质思路也是这样。只不过它重载的原创内容，盗版必究。【原创内容，转载请注明出处】不是函数，而是模块，当然，在webpac本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。k中，一个模块实际上也被包在一个函数中。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。但是如果我们脱离webpack聊HMR，【未经授权禁止转载】【作者：唐霜】那么其本质大致相同。一般来讲，HMR需要本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。按照如下的原理来进行：

【转载请注明来源】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

【本文首发于唐霜的博客】

著作权归作者所有，禁止商业用途转载。

本文作者：唐霜，转载请注明出处。

【关注微信公众号：wwwtangshuangnet】

著作权归作者所有，禁止商业用途转载。

【本文受版权保护】

【未经授权禁止转载】

【访问 www.tangshuang.net 获取更多精彩内容】

本文作者：唐霜，转载请注明出处。

客户端：接收到服务端端websocket著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】消息之后，通过jsonp获得新Modul本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。e

【作者：唐霜】

本文版权归作者所有，未经授权不得转载。

【作者：唐霜】

【未经授权禁止转载】

客户端：从原来的模块依赖关系中，删除原始本文作者：唐霜，转载请注明出处。【本文受版权保护】的模块引用，把新的Module作为替换，转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。放到原始引用的位置

【本文首发于唐霜的博客】

【作者：唐霜】

客户端：模块间的引用是一种软引用，从而能【转载请注明来源】转载请注明出处：www.tangshuang.net够保证模块引用发生变化时，其他模块再次获【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】得该模块的接口时，获得的是新模块的接口

【作者：唐霜】

【转载请注明来源】

【原创内容，转载请注明出处】

【本文首发于唐霜的博客】

客户端：调用update方法，重新执行引原创内容，盗版必究。【原创不易，请尊重版权】用新Module的代码，从而使界面更新。【本文首发于唐霜的博客】【原创内容，转载请注明出处】这个update过程，可能需要开发者自己【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。写代码来确定自己要调用哪个方法来更新界面本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net。

【关注微信公众号：wwwtangshuangnet】

【原创不易，请尊重版权】

【访问 www.tangshuang.net 获取更多精彩内容】

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【作者：唐霜】

HMR状态丢失问题

如果你理解了 a() 被重载后执行来覆盖【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】界面的本质，那么也就会发现，假如某些东西【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。我们依赖的是 a() 内部的状态，那么本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】a() 被重载执行之后，原来的状态就会丢【本文受版权保护】【未经授权禁止转载】失。我们来举个例子：

原创内容，盗版必究。原创内容，盗版必究。

function a() {
  let state = { value: 1 }
  html`
    <span>${state}</span>
    <input :bind=${state} />
  `
}

上面的代码是基于一种html标签函数实现【版权所有，侵权必究】未经授权，禁止复制转载。的前端渲染能力，当在输入框中输入数据时，未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net它会更新state，并且带来界面的变化。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】可是现在如果我们重载了 a() 并重新运著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】行它：

function a() {
  let state = { value: 1 }
  html`
    <span>now: ${state}</span>
    <input :bind=${state} />
  `
}

我们就会发现，a() 运行后，state【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】回到了1，这也就导致now: 后面是1原创内容，盗版必究。【本文首发于唐霜的博客】，但实际上我们希望它保持我们上一次输入的【原创不易，请尊重版权】未经授权，禁止复制转载。值，这也就是状态丢失了。怎么办呢？我们只未经授权，禁止复制转载。【未经授权禁止转载】要确保 state 是在 a() 外面定原创内容，盗版必究。【本文首发于唐霜的博客】义即可解决这个问题。

【本文首发于唐霜的博客】【本文受版权保护】

在HMR的实际案例中，这种情况非常常见，本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】因为作为HMR的提供者，是无法确保状态被未经授权，禁止复制转载。【原创不易，请尊重版权】用在什么地方的。因此，我们很少在实际生产未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。环境使用HMR，更多是在开发环境中使用它【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。

超俗释然：esbuild、vite等新事物

人世间事，或重如泰山，或若有若无。不以物【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】喜，为己所为，行万里路，秉初始心。
【本文受版权保护】未经授权，禁止复制转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】

其他原生语言开发前端工具链

2020年开始，前端社区出现了用其他语言原创内容，盗版必究。未经授权，禁止复制转载。开发前端工具链工具的现象，到2021-2转载请注明出处：www.tangshuang.net【未经授权禁止转载】022这一现象骤然火爆，并引发了新一代前原创内容，盗版必究。【转载请注明来源】端工具链都是由其他语言，甚至更低层的ru【版权所有，侵权必究】【版权所有，侵权必究】st等系统级语言来开发的讨论。在这些讨论转载请注明出处：www.tangshuang.net【转载请注明来源】之下，总有一种前端快失业的错觉。用其他原【未经授权禁止转载】【作者：唐霜】生语言来编写前端工具链主要有两个点：1.未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】现代前端开发非常依赖工具链，随着这些工【原创不易，请尊重版权】【作者：唐霜】具越来越臃肿，作为工具，运行越来越慢，已【本文受版权保护】转载请注明出处：www.tangshuang.net经无法适应前端开发的快节奏；2. 此前所【原创不易，请尊重版权】【原创不易，请尊重版权】有前端工具都是由js写成，部分通过nod本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ejs调用c/c++模块，这导致了这些工本文作者：唐霜，转载请注明出处。【转载请注明来源】具慢，而使用其他更低层的语言来编写，可以【关注微信公众号：wwwtangshuangnet】【作者：唐霜】成百倍的提升其运行性能。

其中，esbuild和SWC就是典型代表【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。。ESBuild是Figma前CTO E【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netvan Wallace基于GO语言开发，【转载请注明来源】著作权归作者所有，禁止商业用途转载。用于实现类似webpack一样的打包工具【版权所有，侵权必究】【作者：唐霜】。由于GO语言原生支持高并发，因此，es【版权所有，侵权必究】未经授权，禁止复制转载。build中的任务可以被拆分并行，同时，【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。由于完全摒弃了JS社区，没有任何历史包袱转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】，因此，其整体设计和架构都更加现代化，更【原创不易，请尊重版权】【本文首发于唐霜的博客】不会出现webpack工具链中多个ast【本文首发于唐霜的博客】未经授权，禁止复制转载。串来串去的情况。SWC是由Rust语言实本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】现的类似babel的编译器，不过它的官方【原创不易，请尊重版权】未经授权，禁止复制转载。网站上并没有详细阐述其内部实现，只提到了【版权所有，侵权必究】未经授权，禁止复制转载。比JS的单线程而言，它具有并发优势。

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

由此可见，通过其他语言来开发前端工具链，著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。最主要的一点，是绕开了JS单线程的缺点，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。同时原生语言更接近底层，不需要一个运行时本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。，减少了额外的开销，因此性能上更优。但是著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。不可否认的一点是，这些其他语言写就的工具著作权归作者所有，禁止商业用途转载。【作者：唐霜】，由于缺乏JS社区的支持，未来如何发展还原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。很难讲，因为JS社区是非常活跃的，要让这【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net些前端开发者切换语言去为其他语言的工具贡原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。献，可能并不是一件容易的事。

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net原创内容，盗版必究。原创内容，盗版必究。

bundless

2021年，vue的作者尤雨溪在状态中称【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。vite将超越webpack，而在202未经授权，禁止复制转载。【原创内容，转载请注明出处】2年它也确实做到了非常大的占有率，甚至它【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。的前辈snowpack都直接在自己的官网【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】上推荐自己的用户去使用vite，要知道n【作者：唐霜】本文作者：唐霜，转载请注明出处。owpack可以说是bundless的先本文作者：唐霜，转载请注明出处。【未经授权禁止转载】驱，vite就是受其启发而创建的。

【原创内容，转载请注明出处】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

所谓bundless，简单讲，就是我们尽未经授权，禁止复制转载。未经授权，禁止复制转载。量不要去做类似webpack一样的打包，【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。让我们的代码直接运行起来。没有了打包这个著作权归作者所有，禁止商业用途转载。【本文受版权保护】过程，其速度自然就快了很多。vite作为【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】今年最热门的工具项目，它有自己的一些优势【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net。vite是如何做到比webpack快的【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。呢？对于webpack-dev-serv【本文受版权保护】【转载请注明来源】er而言，要在本地启动一个服务作为开发的【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】预览服务，它必须进行一次webpack的【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】打包过程，我们前文已经讲过，webpac【作者：唐霜】【版权所有】唐霜 www.tangshuang.netk其实是很慢的，虽然webpack-de未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】v-server采用了内存文件系统，但是著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。架不住其计算过程控制流太长太不可控，所以【原创不易，请尊重版权】【版权所有，侵权必究】仍然会比较慢，开发者修改完代码之后，无法【版权所有，侵权必究】【原创内容，转载请注明出处】尽快看到修改后的效果。而vite则在本地【作者：唐霜】本文作者：唐霜，转载请注明出处。服务中不执行打包过程，它基于ES原生的M【转载请注明来源】【作者：唐霜】odule系统，也就是import fr【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】om语法在浏览器中的原生支持，让浏览器自未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。己去请求一个依赖，而请求的依赖实际上是向原创内容，盗版必究。【版权所有，侵权必究】vite本地服务的一个url地址发起请求【版权所有，侵权必究】原创内容，盗版必究。，vite本地服务在接收到这个请求之后，著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。立马对该请求所对应的文件进行编译和输出，【版权所有，侵权必究】转载请注明出处：www.tangshuang.net这个效率和我们经常提到的SSR差不多，这本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】也就让vite在第一次打开时比webpa【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】ck快了n倍，因为对于vite而言，第一【本文受版权保护】转载请注明出处：www.tangshuang.net次打开时，要做的事情非常少，只需要起一个未经授权，禁止复制转载。【原创内容，转载请注明出处】服务，把被访问的脚本编译完吐出就可以了，【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】在页面发生变化的时候，新的请求过来，才会著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】执行新的编译。

【作者：唐霜】【转载请注明来源】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

虽然vite在开发时效率极高，但是并不代转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。表它就是前端工具的终极形态，bundle本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ss在浏览器原生支持import的今天，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。其实是非常尴尬的，我们很难预判在不久的将原创内容，盗版必究。原创内容，盗版必究。来，我们还需要bundless，我们可能【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】只需要浏览器就可以了。

转载请注明出处：www.tangshuang.net原创内容，盗版必究。

结语

行文至此，我已经把自己在前端开发领域所积【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】累的大部分有关性能的知识都讲了一遍，有些【原创不易，请尊重版权】【原创不易，请尊重版权】部分细，有的部分点到为止，有些内容没有讲【本文受版权保护】【本文受版权保护】（如使用nodejs进行后端开发时遇到的著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net性能问题），不过对于完整阅读完本册的朋友【作者：唐霜】【关注微信公众号：wwwtangshuangnet】而言，我想你应该能隐约感受到，万变不离其【作者：唐霜】未经授权，禁止复制转载。宗，前端的性能问题主要是加载、渲染、内存【作者：唐霜】【版权所有】唐霜 www.tangshuang.net占用、算法（本质是内存和CPU占用）、架【未经授权禁止转载】未经授权，禁止复制转载。构设计等方面的知识，慢慢理顺之后，无非如【原创内容，转载请注明出处】原创内容，盗版必究。此。虽然本册提供了非常多的优化建议，但是本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】它们都不是一尘不变的，有的会随着浏览器、【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】运行环境的发展逐渐没用，有的则需要在日常【本文受版权保护】本文作者：唐霜，转载请注明出处。开发中根据自己的情况进行策略调整。我仍然【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。认为，虽然前端性能问题涉及的内容很多，但【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】是，在真正的工作中被用到的其实不多，因为【原创不易，请尊重版权】【转载请注明来源】我们在完成业务时，往往需要先实现业务本身本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。的目标，然后再来考虑性能，甚至大部分情况【关注微信公众号：wwwtangshuangnet】【作者：唐霜】下，根本不会考虑性能，直到用户使用过程中【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。出现了卡顿时，才会回头去关注，而性能问题原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。又没有安全问题那么致命，即使我们应该为了【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】性能进行重构，但在大部分情况下，我们也只【转载请注明来源】【本文首发于唐霜的博客】会通过补丁的形式优化局部的性能问题。基于【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。这样的现实，我还是希望读者朋友能够养成良【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net好的习惯，能够在写代码时时刻记住性能问题【本文首发于唐霜的博客】【本文首发于唐霜的博客】，有些高性能的代码就是随手写的，但是如果著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。你此刻忽视了，等回头再来优化时，就不得不著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】费非常大的力气。我比较推荐阅读《高性能J著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netavascript》一书，原因是它非常薄【本文首发于唐霜的博客】【本文首发于唐霜的博客】，利用闲暇时间很快就能读完，通过不断实践本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】，就能养成比较不错的性能优先的写码习惯。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】当然，这本书已经比较老了，有些东西不适用转载请注明出处：www.tangshuang.net【版权所有，侵权必究】，但是就像我前面所讲的，万变不离其宗，只【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】要我们经常且善于思考如何提升性能，就会在本文版权归作者所有，未经授权不得转载。【作者：唐霜】工作中不断积累出自己的性能优化知识体系。【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】最后，如果你在阅读过程中发现了什么纰漏，本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。请立即反馈给我，你可以通过扫描下方二维码【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】通过微信和我沟通，就像本册中武侠主人公荫【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net世一般，让我们一起成长。<完>【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】;

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net原创内容，盗版必究。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】原创内容，盗版必究。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【本文受版权保护】原创内容，盗版必究。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】

如果你觉得本书对你有帮助，通过下方的二维码向我打赏吧，帮助我写出更多有用的内容。

2022-08-18