前言

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

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

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

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

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

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

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

飞阳如隙，回首我此生，楞过、苦过、狂过、原创内容，盗版必究。【本文受版权保护】惨过、耀过，如今来看，都是命运。我之坚信未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。、动摇、坚持，铸就我今立于此封顶，纵乱世【转载请注明来源】【本文受版权保护】纷涌，于我乃清风拂发，俯览众生，有悲有喜【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。，一切皆历便可放下，或许能做些利众生的事未经授权，禁止复制转载。【本文受版权保护】……
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】

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

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

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

“是你的这一个页面打开之后一片空白的时间【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】比较长，还是可以很快打开但呈现不出来数据【本文受版权保护】转载请注明出处：www.tangshuang.net？”

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

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

“很好。卡顿是在什么情况下产生的？是点击【原创不易，请尊重版权】【本文首发于唐霜的博客】一个按钮之后卡住不动了，还是怎样？”

“是在用户往下滑需要加载更多条目的时候卡本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。死了。”

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

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

【作者：唐霜】【本文受版权保护】【原创不易，请尊重版权】

“没有，我手动打开那个接口，发现打开是瞬【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。间的。”

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

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

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

“10条。”

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

此时，我们已经把这次性能问题的范围缩小了本文作者：唐霜，转载请注明出处。【转载请注明来源】，可以肯定的是，这次问题是代码层面的问题著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】，只要我们通过修改代码，就能解决这次问题【版权所有，侵权必究】【未经授权禁止转载】。而且，这次性能问题，不是由于大数据量引【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】起的，我们排除了大数据量性能优化的一些策【转载请注明来源】原创内容，盗版必究。略。

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

“好的。”

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

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

我们看到，rendering占据了4秒多【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】。可以大概知道，这是一次由于对DOM的操【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。作不当引起的重新渲染性能损耗。

“你可以通过上面的火焰图找到执行时间最长【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】的一条，并且鼠标放上去，找到对应的代码文【转载请注明来源】本文作者：唐霜，转载请注明出处。件，并且找到对应的代码位置。”

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

“原来还有这样的操作？我看看……找到了，未经授权，禁止复制转载。【本文受版权保护】xx函数的执行时间超过了2秒。但是我看代转载请注明出处：www.tangshuang.net【转载请注明来源】码写的没有什么问题呀。”

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

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

“好的。”

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

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

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

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

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

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

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

针对这一问题，我给出了自己的建议。“你可【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】以提前预算好元素的位置，在完成渲染之后，著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。再做一次调整，这一只需要重复渲染一次。”

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

“好的，我试试。”

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

过了大概半个小时。

【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】【访问 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 获取更多精彩内容】泄露的问题，而算法性能问题是指代码设计上【本文首发于唐霜的博客】【版权所有，侵权必究】没有考虑到运算的复杂度，导致的计算资源占著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。用过多（一般指CPU计算资源）带来的问题原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。。

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

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

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

建立性能指标体系

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

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

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

First Contentful Paint (FCP)

【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】

上图中第二个界面为第一次出现内容，即FC【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。P

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

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

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

Largest Contentful Paint(LCP)

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

不同时间点上界面上最大的内容块并不是一成【未经授权禁止转载】【本文首发于唐霜的博客】不变的，只有当界面加载完毕趋于稳定时，我【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net们才能确定LCP

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

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

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

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

First Input Delay(FID)

“第一次输入延迟”，即用户第一次在界面上本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net进行操作（例如点击某个链接）到程序对这个【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】操作做出回应的延迟。这是因为经常我们的应原创内容，盗版必究。本文作者：唐霜，转载请注明出处。用需要通过网络请求脚本或数据来进行渲染，【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】而在请求的过程中，我们的程序或者浏览器本转载请注明出处：www.tangshuang.net原创内容，盗版必究。身，无法响应用户的操作，这个无法响应的过【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。程，就是FID。例如某些点击我们通过脚本【关注微信公众号：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

FID 只关注来自离散操作的输入事件，如本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】单击事件、按键事件, 像滚动和缩放这样的【作者：唐霜】【转载请注明来源】连续交互动作是不考虑的。

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

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

用于应用的交互性非常重要，因此，FID实【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net际上反映了你的应用从打开之后阻塞用户进行【转载请注明来源】本文作者：唐霜，转载请注明出处。交互的时间，因此是一个非常重要的负面指标【转载请注明来源】【未经授权禁止转载】。

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

Time to Interactive(TTI)

“达到可稳定交互的时间”，假如你不做任何原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】输入，让应用自己打开，知道整个应用没有发【转载请注明来源】【版权所有】唐霜 www.tangshuang.net生任何动作（静默状态）持续5秒钟，那么在本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。这5秒钟之前的那一次长任务的结束时间，就本文版权归作者所有，未经授权不得转载。【本文受版权保护】是TTI。

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

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

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

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

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

未经授权，禁止复制转载。原创内容，盗版必究。【本文首发于唐霜的博客】

Total Blocking Time(TBT)

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

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

我个人认为TBT是统计意义上的指标，它不【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】像FID、TTI之类的指标那么直指本质，【转载请注明来源】【本文受版权保护】但是一般来讲，统计意义上的指标更具有数学【原创不易，请尊重版权】【转载请注明来源】意义，包含的更多的内涵。

Cumulative Layout Shift(CLS)

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

layout shift score = impact fraction * distance fraction

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

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

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

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

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

Frame Per Second(FPS)

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

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

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

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

前端性能监控

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

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

基于浏览器已经提供的工具，例如devto【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ols

【本文受版权保护】

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

自建监控系统

【本文受版权保护】

【关注微信公众号：wwwtangshuangnet】

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

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

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

perfermance

【本文受版权保护】

PerformanceObserver

【关注微信公众号：wwwtangshuangnet】

原创内容，盗版必究。

【转载请注明来源】

web-vitals

原创内容，盗版必究。

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

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

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

诊断性能问题的方法

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

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

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

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

可视工具诊断

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

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

Chrome60直接内置了Lightho著作权归作者所有，禁止商业用途转载。【作者：唐霜】use到devtool面板中，它基于谷歌本文作者：唐霜，转载请注明出处。原创内容，盗版必究。指标直接对站点整体进行打分，不需要我们自【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。己去建立指标

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

埋点诊断

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

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

Benchmark诊断

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

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

注入诊断

你可能遇到过这样的场景，当你打开页面时，【版权所有，侵权必究】【未经授权禁止转载】页面永远处于加载状态，打开devtool【版权所有，侵权必究】未经授权，禁止复制转载。也一片空白。遇到这种情况，多半是遇到了死本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。循环。这种情况下，我们根本无法通过上述工【转载请注明来源】【本文首发于唐霜的博客】具进行诊断，浏览器已经被玩坏了，无法再提【作者：唐霜】本文作者：唐霜，转载请注明出处。供给你有效的信息。

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

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

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

这里留一个思考题：为什么浏览器不在Per【作者：唐霜】【未经授权禁止转载】formance中提供用以检测死循环的功未经授权，禁止复制转载。【转载请注明来源】能？

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

复杂度诊断

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

O记法并不是准确的指出次数或大小，而是指【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。一个量级，O1和On和Ologⁿ和On²这些记法，仅仅表达的是算法在最坏情况下将【原创内容，转载请注明出处】【作者：唐霜】会达到这个量级，但在实际运行时，可能根本本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net到不了这个量级，因此，实际运行过程中On转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net的算法不一定比O1的算法慢。

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

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

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

心理建设

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

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

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

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

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

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

浏览器如何假装资源的？这个问题将决定我们著作权归作者所有，禁止商业用途转载。【本文受版权保护】如何认知我们的页面打开时都发生了什么，以转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】至于在这个阶段出现了性能损耗，最终导致应【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。用打开慢。本章将详细的阐述浏览器资源加载【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】的原理，让你修炼好性能优化的第一个心法。

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

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

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

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

浏览器加载资源的流程

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

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

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

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

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

未经授权，禁止复制转载。【原创不易，请尊重版权】【作者：唐霜】

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

当DOM树被加载完成时（包含同步执行的s【转载请注明来源】原创内容，盗版必究。cript），DOMContentLoa【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ded事件会被触发。当其他被依赖的资源（本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】如css、图片）加载完成时，load事件【版权所有，侵权必究】【原创内容，转载请注明出处】被触发。这里需要注意“被依赖”，如果cs未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。s、img是通过script延迟异步创建著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。加载的，那么是不被包含在load事件所指原创内容，盗版必究。【未经授权禁止转载】代的过程里面的。但css引入了其他资源，【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。则会被包含在这个过程中。

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

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

【作者：唐霜】【转载请注明来源】【原创不易，请尊重版权】

哪些加载会阻塞渲染？

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

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

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

加载优化技巧

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

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

优先级加载顺序

我们既然知道浏览器的加载流程了，那么我们本文作者：唐霜，转载请注明出处。【作者：唐霜】就应该设计我们的加载顺序，以更好的把最早原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】需要的部分加载出来，让暂时不需要的部分在【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。空闲的时候加载。一般来讲，我们会推荐如下【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。的加载顺序：

在head中加载css文件，因为css是转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net异步加载的，不会阻塞渲染，同时把它放在顶【未经授权禁止转载】【本文首发于唐霜的博客】部，是希望它可以尽早发出请求，当DOM加【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】载完时，我们希望CSSOM也同时加载好，【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。两者再reflow一回

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

【关注微信公众号：wwwtangshuangnet】

在body结束位置加载script文件，【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。因为script会阻塞渲染，如果在前面加【本文首发于唐霜的博客】【本文受版权保护】载，就会让网页渲染到一半停滞，等scri未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。pt执行完毕之后才会继续渲染

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

【本文受版权保护】

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

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

预加载

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

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

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

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

预请求

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

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

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

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

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

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

【本文受版权保护】【未经授权禁止转载】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】

懒加载

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

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

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

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

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

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

构建打包

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

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

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

如今，代码构建已经成为前端项目工程化的一著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】部分。各类前端框架也都必须在构建工具的加【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。持下才能使用。

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

分包

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

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

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

按需加载

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

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【本文受版权保护】

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

随着ES6的发布，以及浏览器的支持，原生【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net的import可以在浏览器中直接使用了。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。我们不再需要requirejs等第三方库【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】，就可以方便的实现模块化开发。

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

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

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

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

未经授权，禁止复制转载。【关注微信公众号：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不知去向，只剩光溜溜的一只残臂。但即使如【关注微信公众号：wwwtangshuangnet】【本文受版权保护】此，我却觉得全身气运神通，浑身如被注入了未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。某种力量般，丹田处一股清凉的命气在缓缓缠未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。绕，任督六脉全已打通。有一种力量在身体里【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。聚集，我来到屋外，朝那山头来了一掌，一股著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】强烈的气脉从我掌心射出，将那山头轰的乱石【关注微信公众号：wwwtangshuangnet】【作者：唐霜】横飞。此刻我才反应过来，原来这道人才是真【作者：唐霜】本文版权归作者所有，未经授权不得转载。正的世外高人，竟有如此修为。
【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【本文首发于唐霜的博客】

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

既然我们已经知道，网络传输会影响应用的打著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】开速度，降低用户体验，那么，我们为何不想著作权归作者所有，禁止商业用途转载。【作者：唐霜】办法减少传输的过程呢？怎么办到呢？我们可本文作者：唐霜，转载请注明出处。原创内容，盗版必究。以想办法减小资源的体积，从而可以减少传输本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。量，减少传输的时间呀。

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

代码压缩

我们使用webpack时，可以通过mod未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】e为production配置来让webp【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netack自动压缩我们的js代码，但是由于w原创内容，盗版必究。【原创内容，转载请注明出处】ebpack并不能处理我们的css，所以转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】我们必须通过其他插件来压缩css、svg原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。、json等等其他可以作为代码的资源。

【本文首发于唐霜的博客】未经授权，禁止复制转载。原创内容，盗版必究。

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

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

图片资源优化

前文我们讲过图片的懒加载，那是从加载的角【作者：唐霜】【原创内容，转载请注明出处】度去讲，现在，我们从图片体积的角度去进行【转载请注明来源】【本文首发于唐霜的博客】优化。

【转载请注明来源】【作者：唐霜】【未经授权禁止转载】

用css绘制图片

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

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

善用srcset属性

不同显示屏分辨率不同，2倍高清图自然需要【转载请注明来源】转载请注明出处：www.tangshuang.net更大的体积，因此，我们可以通过srcse【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】t来确保在低分率屏下使用1倍图，避免不必本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】要的浪费。

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

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

除了img，picture标签也是支持s【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】rcset的。

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

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

挑选适合的图片格式

图片格式是几乎所有和前端相关的材料都会讲【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。的。我这里就长话短说。

jpg 压缩率高的同时，还能保证较好的图【转载请注明来源】著作权归作者所有，禁止商业用途转载。片质量，但是无法透明

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

【本文受版权保护】

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

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

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

【本文受版权保护】

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

【关注微信公众号：wwwtangshuangnet】

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

png 压缩率最差，体积大，支持透明，但【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】无法像gif一样有动画效果

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

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

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

webp 体积小，支持透明，压缩率还很好【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。，除了无法支持动画，苹果设备上兼容性差

原创内容，盗版必究。

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

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

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

svg 矢量图，但是渲染性能最差，涉及比【关注微信公众号：wwwtangshuangnet】【本文受版权保护】较底层的svg渲染逻辑

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

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

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

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

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

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

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

当然，选择图片格式的前提是，在相同一张图【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。的情况下，但是很显然，比如gif可以动画【转载请注明来源】【原创内容，转载请注明出处】，svg可以矢量，这种是没有得选的。

图片压缩

除了图片格式，我们还可以自己对图片进行压【原创内容，转载请注明出处】【未经授权禁止转载】缩，比如某些cdn提供的压缩功能，一张几【本文受版权保护】【转载请注明来源】M的图片经过压缩后只有100多k，而且你【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】揉眼还不大能分辨的出来它们的差异。

如果自己对图片进行压缩呢？又一个imag【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。emin插件可以帮你实现，在你写代码时，【关注微信公众号：wwwtangshuangnet】【转载请注明来源】拿到一张图片，可以在node环境下用gu【版权所有，侵权必究】原创内容，盗版必究。lp等工具统一对图片进行压缩。当然，如果【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。是在线的图片，就使用cdn好了。

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

尺寸缩放

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

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

使用base64地址

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

或者在css中作为背景

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

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

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

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

使用视频替换gif图

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

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

Sprite雪碧图

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

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

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

字体资源优化

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

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

裁掉不需要的字，把包做到最小，需要加字的著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net时候再加进去

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

【本文受版权保护】

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

预加载字体文件

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

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

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

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

压缩上传

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

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

普通字符串，或者JSON数据转化为字符串本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。，可以使用LZ算法进行压缩，LZ算法是目原创内容，盗版必究。本文作者：唐霜，转载请注明出处。前主流的压缩率最高的字符串压缩算法。前端未经授权，禁止复制转载。【原创不易，请尊重版权】可以通过lz-string等库进行压缩提【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。交，后端可以使用LZ算法解压工具对提交的【转载请注明来源】著作权归作者所有，禁止商业用途转载。数据进行解压。

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

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

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

分片上传

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

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

M3U8视频格式

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

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

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

寒阳三式：网络优化

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

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

我以前专门写过《http协议学习札记》记录了有关http相关的知识。做前端，著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】网络知识不可或缺，而在性能优化领域，对网本文版权归作者所有，未经授权不得转载。【本文受版权保护】络的优化也是重要一环。接下来，我们将对网原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net络优化的三大招（CDN、缓存、http2【转载请注明来源】【本文受版权保护】）进行介绍。

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

网络请求优化

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

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

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

HTTP层面，我们可以和后端、运维同学一【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net起，做一些优化。

避免重定向

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

【本文受版权保护】

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

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

减小cookie体积

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

【作者：唐霜】

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

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

Gzip压缩

【转载请注明来源】

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

【未经授权禁止转载】

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

HTTP2（下下下节讲）

原创内容，盗版必究。

【未经授权禁止转载】

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

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

当然，实际上，这些网络层面的优化，其实前【本文首发于唐霜的博客】【转载请注明来源】提是访问者的宽带。假如别人是100G光纤【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。，和另一个是256k的电话线，那能一样嘛本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。。

HTTP缓存

在前面提到的文章一样，HTTP缓存有三种【本文受版权保护】转载请注明出处：www.tangshuang.net模式。

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

【本文受版权保护】

原创内容，盗版必究。

【转载请注明来源】

304 + Last-Modified

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

304 + Etag

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

【关注微信公众号：wwwtangshuangnet】

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

另外，我们还能把这三种中的两种混用在一起【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】，起到更可控的缓存。

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

实现HTTP缓存也得后端来做，一种是对静【作者：唐霜】本文作者：唐霜，转载请注明出处。态资源，可以通过配置nginx或apac【本文受版权保护】【原创内容，转载请注明出处】he配置中做到，还有一种是通过后端程序来【未经授权禁止转载】本文作者：唐霜，转载请注明出处。做，特别是Etag，只能通过后端程序按一转载请注明出处：www.tangshuang.net【作者：唐霜】定算法来实现。

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

CDN

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

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

HTTP2

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

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

要支持http2，不仅后端程序层面要改造著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。，nginx服务器配置也要调整。但是，跟未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。前端，好像没啥关系。

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

WebSocket/WebRTC

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

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

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

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

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

通过对应用架构的重新设计，我们可以从分发【作者：唐霜】【本文受版权保护】机制的角度去优化应用的加载速度，提升其打【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net开的速率，从而提高用户体验。什么事应用分【版权所有，侵权必究】【未经授权禁止转载】发呢？就是客户端以何种形式启动应用，基于【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。这种形式，需要我们怎么安排代码的部署、下本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】载和调用。

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

PWA

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

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

ServiceWorker

ServiceWorker是一种特殊的W本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ebWorker，从线程工作的模式看，和转载请注明出处：www.tangshuang.net【未经授权禁止转载】WebWorker是一致的，但是不同的地【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。方在于，它是全局只会有一条Service本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。Worker线程，而且ServiceWo转载请注明出处：www.tangshuang.net【未经授权禁止转载】rker中提供了比普通webworker未经授权，禁止复制转载。【原创不易，请尊重版权】更多的接口，以实现特殊的能力。其中一项重【作者：唐霜】原创内容，盗版必究。要的能力，就是缓存资源。

【未经授权禁止转载】【本文受版权保护】【原创不易，请尊重版权】

在serviceworker中，提供了c【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】aches接口，通过该接口可以实现缓存的【转载请注明来源】原创内容，盗版必究。读取、写入、删除。再利用servicew未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】orker中拦截请求的能力，当当前应用去【转载请注明来源】【本文首发于唐霜的博客】请求某一个资源时，会被servicewo未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netrker拦截，我们可以在worker脚本未经授权，禁止复制转载。【作者：唐霜】中监听fetch事件，通过缓存的判断，直【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。接respondWith缓存内容，而不需【版权所有】唐霜 www.tangshuang.net【本文受版权保护】要再往服务器发送请求拉取资源。

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

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

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

Workbox

Workbox是谷歌基于自己的场景封装的【本文首发于唐霜的博客】【本文受版权保护】ServiceWorker库，它提供了我【本文受版权保护】【作者：唐霜】们常见的一些场景下，快速实现servic【未经授权禁止转载】【原创内容，转载请注明出处】eworker中某些能力的方法，就像jq【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netuery精简了DOM的操作一样，work【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。box也是精简了我们使用servicew转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netorker的操作。

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

微前端

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

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【未经授权禁止转载】【转载请注明来源】

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

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

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

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

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

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

小程序

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

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【本文受版权保护】

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

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

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

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

“你们这群畜生，尽将手无寸铁的镇民屠杀殆【本文首发于唐霜的博客】原创内容，盗版必究。尽，石瀑镇与你们何怨何仇，你们尽能下如此转载请注明出处：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 获取更多精彩内容】【未经授权禁止转载】，轰轰轰，虽然身子中几刀，但对方已经被我【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】打的七零八落，只剩两人。那两人见打我不过本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。，从口袋掏出一个什么东西，吞了进去，瞬间转载请注明出处：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决了这个畜生。
【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。

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

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

浏览器渲染流程

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

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

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

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

当文档的各个部分以不同的层绘制，相互重叠本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。时，必须进行合成，以确保它们以正确的顺序【转载请注明来源】转载请注明出处：www.tangshuang.net绘制到屏幕上，并正确显示内容。

以上是浏览器加载完应用到你能看见界面的过【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】程。

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

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

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

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

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

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

上图中横轴是时间轴，每16.67ms浏览【未经授权禁止转载】【版权所有，侵权必究】器就会执行一次渲染动作，但是前提是浏览器【未经授权禁止转载】【作者：唐霜】执行任务已经结束，交给了浏览器进程，如果【原创内容，转载请注明出处】原创内容，盗版必究。JS引擎中还有任务在执行，就会导致没有把【作者：唐霜】【原创不易，请尊重版权】执行权交还给浏览器，浏览器就认为当前界面著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。不需要刷新，上图中红色的块代表长任务，一【版权所有】唐霜 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执行-操作DOM或CSSO【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。M->重排->重绘->著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net显示”这样的一个链路。不过因为没有解析阶原创内容，盗版必究。本文作者：唐霜，转载请注明出处。段，其实和我们完整的链路而言没有必要去深本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net究。

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

浏览器线程详解

首先咱们不免俗的介绍一下“进程”和“线程【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】”的区别。

【转载请注明来源】本文版权归作者所有，未经授权不得转载。【本文受版权保护】未经授权，禁止复制转载。

Browser进程：也就是浏览器作为一个【原创内容，转载请注明出处】【本文首发于唐霜的博客】客户端应用程序的进程，可以理解为浏览器窗【原创内容，转载请注明出处】【原创内容，转载请注明出处】口的进程，比如浏览器的历史记录、代理等功【原创内容，转载请注明出处】【版权所有，侵权必究】能，都属于浏览器层面的功能

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

原创内容，盗版必究。

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

第三方插件进程

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

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

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

GPU进程：调用GPU的进程，无论打开多【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】少个tab，只会有一个，用于和GPU调用【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net、通信

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

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

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

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

原创内容，盗版必究。

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

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

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

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

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

GUI线程：负责渲染界面，所以也叫“渲染著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。线程”

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

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

JS引擎线程：负责解析和执行js，例如把【本文受版权保护】原创内容，盗版必究。v8引擎拿过来倒腾一下开出一个线程，因为【转载请注明来源】本文版权归作者所有，未经授权不得转载。被我们经常使用，所以也被称为“主线程”

原创内容，盗版必究。

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

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

事件触发线程：用来处理各类事件，比如用户【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】的点击、鼠标移动等等

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

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

定时触发器线程：用来处理定时触发器，例如【本文受版权保护】【作者：唐霜】setTimeout, setInter【本文受版权保护】【本文受版权保护】val的调用函数，什么时候执行呢？靠本线【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。程

原创内容，盗版必究。

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

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

异步http请求线程：用来处理http请转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】求的线程

【未经授权禁止转载】

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

其他线程：serviceworker和我【版权所有，侵权必究】【作者：唐霜】们自己new Worker起来的线程，w著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ebassembly的执行线程等等

【作者：唐霜】

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

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

其中，JS引擎线程和GUI线程是最重要的【原创不易，请尊重版权】【原创内容，转载请注明出处】线程，其中JS引擎线程在我们前端编程中起【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。到最重要的作用，所以才被称为“主线程”。【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。JS引擎线程和GUI线程都只能有一个，也原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】就是单线程。单线程意味着要执行下一个任务【作者：唐霜】原创内容，盗版必究。，得等到上一个任务执行才能执行。

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

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

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

JS还可能操作DOM和CSSOM，修改完原创内容，盗版必究。转载请注明出处：www.tangshuang.net之后，GUI线程拿着渲染树去渲染，所以也本文版权归作者所有，未经授权不得转载。【本文受版权保护】是比较辛苦。

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

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

初出茅庐：页面结构优化

初到长安，繁华如锦，到处是从未见过的东西本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。，带画的灯笼、会飞的鸭子、五颜六色的石头转载请注明出处：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 获取更多精彩内容】人，我劝你不做无畏的努力，那群人你惹不起未经授权，禁止复制转载。未经授权，禁止复制转载。，最后怕是会丢了命。”“前辈，血海深仇，本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】不可不报，请前辈悉数告知。”“东海往东两原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】日船程，有一座鬼耧岛，鬼窍团常年盘踞于上著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。，尽是穷凶极恶之徒，与官商勾结，支流众多【版权所有，侵权必究】【本文受版权保护】，到处流窜，官府赖之不何。鬼耧岛地势险要著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】，周围全是绝壁，只在其东北有一处浅湾可停【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net靠船只，进出全在彼，有几十人把守。其团首本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。人称鬼王，未曾有人见得，据称只有四大护法【作者：唐霜】【转载请注明来源】知其真人，其团众尽不知晓。”“感谢前辈，【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】后会有期。”五年了，终于让我知道仇人的老【未经授权禁止转载】【转载请注明来源】巢！
【版权所有】唐霜 www.tangshuang.net
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

页面是由代码构成的，渲染是基于渲染树而来【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】，在我们构造页面时，其结构对渲染的顺序、【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】效果，都有影响。通过优化页面结构，有利于未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。渲染引擎更快的渲染出我们需要看到的内容（【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net不是渲染更少内容），从而提升用户体验。

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

HTML结构优化

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

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

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

【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】

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

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

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

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

使用HTML5，而非HTML4及其以前的本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。版本

【未经授权禁止转载】

【本文受版权保护】

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

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

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

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

【未经授权禁止转载】

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

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

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

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

能用CSS处理的，不多加一个div来作为【原创内容，转载请注明出处】【转载请注明来源】工具

【作者：唐霜】

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

HTML属性中的data-, aria-【转载请注明来源】【转载请注明来源】属性应该被广泛使用

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

【转载请注明来源】

减少HTML的层级

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

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

在JS中适当移除不需要的节点，较小的DO【本文受版权保护】【版权所有，侵权必究】M树可以获得更快的渲染过程

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

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

对HTML进行压缩

【转载请注明来源】

【未经授权禁止转载】

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

但寄希望于通过优化HTML结构能够获得飞【原创内容，转载请注明出处】【版权所有，侵权必究】速的提升，并不现实，但能够有更好的细节表本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。现，比如先加载重要部分、交互的时候更流畅【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。的展示内容，就已经达到我们优化性能的目标本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。了。

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【转载请注明来源】【未经授权禁止转载】

SVG渲染原理与优化

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

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

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

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

【关注微信公众号：wwwtangshuangnet】

【作者：唐霜】

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

使用基本图形，如方形、圆形、直线等，而非【本文受版权保护】转载请注明出处：www.tangshuang.net用path来画这些图形

原创内容，盗版必究。

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

原创内容，盗版必究。

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

【转载请注明来源】

【关注微信公众号：wwwtangshuangnet】

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

【关注微信公众号：wwwtangshuangnet】

对svg代码进行压缩

【本文受版权保护】

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

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

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

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

这狠毒的女人，竟然连老人和小孩都不放过。转载请注明出处：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 获取更多精彩内容】转载请注明出处：www.tangshuang.net能被逃脱……”，待我再一用气脉一勒，她便【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。身吐黑血，五脏六腑已废，经脉尽失，成了废【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。人。等我再冲破章门穴，便又恢复了骨头。“【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net自作孽，不可活，我不杀女流，今你已成废人【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net，不能再为非作歹，我便留你生路。”待我埋【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】葬老婆婆和小狗子，烧了满地鬼窍尸体，便继【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】续东行。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】

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

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

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

DOM树的变更引起的reflow+rep【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】aint

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

【本文受版权保护】

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

样式变化引起的reflow+repain本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】t

【未经授权禁止转载】

【转载请注明来源】

需要跨线程处理的渲染过程，例如复杂的GP本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。U渲染

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

【未经授权禁止转载】

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

需要跨引擎处理的渲染过程，例如svg的变【本文受版权保护】【未经授权禁止转载】化

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

【未经授权禁止转载】

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

【转载请注明来源】

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

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

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

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

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

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

节流防抖

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

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

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

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

当然，节流防抖不是万能的，有些情况下我们【转载请注明来源】著作权归作者所有，禁止商业用途转载。使用节流防抖会导致业务逻辑执行错误，在这著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net种时候，我认为只要没有严重的卡顿，就不要【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】使用。

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

虚拟视口技术

我们经常遇到一些长列表、大表格的场景，而【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】如果你有所接触，都会阅读到一些被称为“虚原创内容，盗版必究。本文作者：唐霜，转载请注明出处。拟列表”“虚拟表格”等解决方案。这些方案本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。统称为“虚拟视口技术”。

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

普通滚动和虚拟滚动

【作者：唐霜】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】

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

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

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

requestIdleCallback

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

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

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

在Performance统计面板中你可以【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。看到Idle这一项。什么是“空闲”呢，就本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。是在前文提到的16.67ms内，执行完任【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。务后剩下的那段时间，如下图：

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

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

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

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

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

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

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

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

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

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

这种利用浏览器能力的性能优化策略需要我们【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】多学习，多了解浏览器的接口。

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

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

“前辈，我是不会放弃的，我知道此次进入鬼【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】耧岛凶多吉少，但我必须去，人之生可重，人本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】之死亦可重，上岛若回不来，忘能将此物交至【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。长安悦来客栈，自会有需要的人取它。”我将【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net一枚青色铜圆递与白眉翁，做告辞。“留步，【本文首发于唐霜的博客】未经授权，禁止复制转载。既然你去意已决，我便传你我之绝学混元气功【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。，助你一臂之力。”说罢，他便一掌拍我坐下本文作者：唐霜，转载请注明出处。原创内容，盗版必究。，两掌推我后背，一股强烈的气脉冲进我的体未经授权，禁止复制转载。原创内容，盗版必究。内，与我原有的气脉拼命碰撞，很快，我原有【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：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愿你就此没了性命。”
【转载请注明来源】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

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

基于WebWorker完成大计算

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

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

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

基于WebAssembly处理计算

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

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

当然，wasm同样面临着通信上的性能瓶颈【本文首发于唐霜的博客】【原创内容，转载请注明出处】。从主线程将需要进行处理的数据传输给wa本文作者：唐霜，转载请注明出处。【转载请注明来源】sm虚拟机，处理完之后又把结果数据传回主未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net线程，这个过程实际上效率不高，处理不好反本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】而由于这个过程，导致性能的急剧下降。

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

基于GPU处理计算

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

未来，浏览器将开放完整、稳定的webgp【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。u能力给到前端开发者，届时，我们就可以采原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。用一定的策略，将一些可以从CPU中剖离开【版权所有，侵权必究】转载请注明出处：www.tangshuang.net的计算放到GPU中进行，依赖一些gpu框本文版权归作者所有，未经授权不得转载。【转载请注明来源】架，我们可以用一种比较优雅的语言去进行一【版权所有，侵权必究】【转载请注明来源】些图形处理的计算，gpu在图形图像处理上【版权所有，侵权必究】【原创不易，请尊重版权】有明显的优势。

优化线程间消息传递

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

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

传递更小的数据量，把不需要的进行剔除，有【版权所有，侵权必究】【作者：唐霜】些东西其实可以合并起来用一个符号来表示，未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。没有必要非得把数据细节表现得那么丰富

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

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

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

使用序列化的字符串作为传递的消息体，两边未经授权，禁止复制转载。【未经授权禁止转载】各自进行序列化和解析，虽然序列化和解析的【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】过程会消耗性能，但是字符串传递更快呀

【转载请注明来源】

【本文受版权保护】

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

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

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

天空宛如狂夜，黑色卷浪嘶鸣，鬼耧岛四壁断【原创内容，转载请注明出处】【原创内容，转载请注明出处】绝，高百丈，我使尽力气，在岩壁上寻找落脚原创内容，盗版必究。【原创不易，请尊重版权】借力处，不慎便会坠落没命。用了四个时辰，【转载请注明来源】【版权所有，侵权必究】方翻越了绝壁。岛上一派混乱景象，很多着装【转载请注明来源】【访问 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着无奈与不甘，一阵风过，天上的云被吹散，本文版权归作者所有，未经授权不得转载。【本文受版权保护】一束阳光照来，正落在她的脸庞，一抹清泪从本文作者：唐霜，转载请注明出处。原创内容，盗版必究。眼角滑落，犹如我曾经亲眼看着父母惨死时落著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。下的恨泪。我心软了，避开了，可就是这一回【本文受版权保护】未经授权，禁止复制转载。避，却被鬼王偷袭，他使尽全力，将我一掌推【本文首发于唐霜的博客】【版权所有，侵权必究】开，四大护法一起五人组了一个什么阵，用尽【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】全力发出一阵气功，将我全身经脉震断，一时【原创内容，转载请注明出处】【转载请注明来源】间，我上下无力，动弹不得，眼前漆黑，一口本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】鲜血喷出。“二十年了，你是第一个能伤到老【转载请注明来源】【作者：唐霜】夫的，可惜你太自大了，老夫行走江湖40年【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。，岂能在你小子身上丢了性命。”“现在你全未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】身经脉已断，是个废人，还是个残臂的废人，【版权所有，侵权必究】【作者：唐霜】跟死人没什么两样，哈哈哈……”“杀了他！未经授权，禁止复制转载。【原创内容，转载请注明出处】杀了他！杀了他！”“不可！”一个白发老人【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。从后堂出来，“今日大喜，不可能杀生，冲了【本文受版权保护】【版权所有，侵权必究】大喜。”“丢下海去喂鱼。”一些喽啰扛起我【原创不易，请尊重版权】【作者：唐霜】便扔下悬崖。空气突然安宁，就这样结束了吗著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。？
【转载请注明来源】本文版权归作者所有，未经授权不得转载。【转载请注明来源】

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

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

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

关于V8

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

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

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

编译（JIT）而非解释执行JS，并且在编本文版权归作者所有，未经授权不得转载。【作者：唐霜】译时进行优化，从而提升运行时性能

【转载请注明来源】

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

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

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

【作者：唐霜】

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

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

内嵌缓存

【作者：唐霜】

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

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

隐藏类

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

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

【作者：唐霜】

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

以上都是V8有别于以前传统JS引擎的地方本文作者：唐霜，转载请注明出处。【未经授权禁止转载】，也是其性能胜出的关键要素，当然，每一项【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】都具有非常深的原理，对于前端同学而言，只著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】需要了解即可，毕竟我们都不是去做V8源码转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。开发的。

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

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

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

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

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

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

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

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

V8性能陷阱

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

使用eval来运行代码。注意，这种代码不【未经授权禁止转载】【原创内容，转载请注明出处】会被优化，而且还不够安全。

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

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

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

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

使用debugger来调试代码。注意，含未经授权，禁止复制转载。【未经授权禁止转载】有debugger的函数整个函数都不会被未经授权，禁止复制转载。未经授权，禁止复制转载。优化。

【未经授权禁止转载】

【转载请注明来源】

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

使用with语法的语句。注意，with语【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】法整个语句块都不会被优化，大部分微前端框【关注微信公众号：wwwtangshuangnet】【本文受版权保护】架都是用with将整个子应用代码进行包裹著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net，所以存在性能坑，需要我们自己注意。

【未经授权禁止转载】

【作者：唐霜】

原创内容，盗版必究。

使用__proto__作为对象属性。注意【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net，生命对象字面量或class时，含有__【本文受版权保护】转载请注明出处：www.tangshuang.netproto__属性的，整个对象都无法被优本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】化。通过Object.setProtot未经授权，禁止复制转载。【作者：唐霜】ype重置原型链的对象也不会被优化。

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

【关注微信公众号：wwwtangshuangnet】

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

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

【未经授权禁止转载】

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

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

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

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

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

【本文受版权保护】

for…in，整个函数不会被未经授权，禁止复制转载。【原创内容，转载请注明出处】优化

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

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

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

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

“你不是鬼新娘么？”“我若不嫁给那恶魔，未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net我们整村人都会被杀的！”鬼王竟以整村人命【转载请注明来源】【原创不易，请尊重版权】胁迫一个弱女子。“我在哪里？”“镇海村。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】”我想起来，却全身痛的刺骨，才想起自己以【原创不易，请尊重版权】【本文首发于唐霜的博客】经脉尽断，未曾想费尽心机，10年来的努力【转载请注明来源】【版权所有，侵权必究】终究化为泡影。“是我爹爹把你从海里捡回来著作权归作者所有，禁止商业用途转载。【本文受版权保护】的。”“谢谢救命之恩。”“我叫秀若，那个本文版权归作者所有，未经授权不得转载。【关注微信公众号：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【原创不易，请尊重版权】性能问题，则难以解决。想要能够让我们写出本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。高性能的代码，或者说合理的代码架构来提升【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。性能，就需要我们深入理解JS的运行机制，【本文受版权保护】著作权归作者所有，禁止商业用途转载。而想要掌握JS运行机制，就需要更深入的理转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。解JS堆栈和作用域这两块知识，虽然这两块【版权所有，侵权必究】【本文首发于唐霜的博客】知识不是性能问题知识本身，但却是性能优化本文作者：唐霜，转载请注明出处。【作者：唐霜】的底层依据。

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

深入理解JS堆栈

JS虽然是一门高级语言，开发者不需要像C【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。语言对内存进行控制，但是在写JS代码时，【转载请注明来源】【转载请注明来源】脑海中仍然应该有一张变量内存空间的图，以【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。避免过多内存消耗，甚至出现内存溢出等情况【未经授权禁止转载】【本文首发于唐霜的博客】。

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

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

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

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

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

但是，在JS中使用对象又有一些特别的性质【本文首发于唐霜的博客】【转载请注明来源】。让我们看一道面试题：

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

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

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

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

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

置于为什么在上面这道面试题结尾a.x的值著作权归作者所有，禁止商业用途转载。【转载请注明来源】是undefined而非{ n: 2 }【本文受版权保护】【原创不易，请尊重版权】，我们需要知道js中的运算符优先级的知识，不是本册的内容。

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

执行上下文

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

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

执行上下文主要有三种：全局执行上下文、函【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。数执行上下文、eval执行上下文。实际上本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】全局执行上下文也可以被认为是一种特殊的函【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。数执行上下文，可以认为是java里面的m转载请注明出处：www.tangshuang.net【版权所有，侵权必究】ain函数，即入口函数。在这三种上下文中【作者：唐霜】本文版权归作者所有，未经授权不得转载。，都包含如下三个重要内容：

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

变量对象

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

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

作用域链

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

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

this

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

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

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

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

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

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

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

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

创建：变量声明、函数声明、初始化函数参数【关注微信公众号：wwwtangshuangnet】【本文受版权保护】arguments；创建作用域链；确定t本文版权归作者所有，未经授权不得转载。【作者：唐霜】his指向

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

【未经授权禁止转载】

【转载请注明来源】

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

执行

【关注微信公众号：wwwtangshuangnet】

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

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

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

回收

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

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

【本文首发于唐霜的博客】【本文受版权保护】【原创内容，转载请注明出处】

调用栈还涉及事件循环、宏任务、微任务、异本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】步等知识，这些知识串联在一起，组成了我们原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】对“JS代码所代表的程序是如何被执行的”未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】的完整知识体系。

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

深入理解作用域

【本文受版权保护】转载请注明出处：www.tangshuang.net【访问 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【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。,b，但在执行add函数之前，它并不关心著作权归作者所有，禁止商业用途转载。【转载请注明来源】a,b到底是什么值，它只关心“在add函【本文受版权保护】本文作者：唐霜，转载请注明出处。数执行时，其内部只能访问a,b两个变量，未经授权，禁止复制转载。未经授权，禁止复制转载。无法访问c变量”。这里的访问包含多层意思未经授权，禁止复制转载。【本文首发于唐霜的博客】，即读取、写入等操作。

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

一个函数的作用域可以被多个执行上下文使用【转载请注明来源】转载请注明出处：www.tangshuang.net，作用域类似一个地图，让执行上下文从中正未经授权，禁止复制转载。【本文首发于唐霜的博客】确读取变量。

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

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

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

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

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

全局作用域

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

【转载请注明来源】

原创内容，盗版必究。

函数作用域

【作者：唐霜】

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

块级作用域

原创内容，盗版必究。

【本文受版权保护】

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

变量提升

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

作用域链

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

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

【未经授权禁止转载】

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

垃圾回收

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

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

前文提到，JS引擎在执行程序时，经历了执【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】行上下文的“创建->执行->【转载请注明来源】【作者：唐霜】回收”三个阶段，当程序执行完毕，JS引擎【原创内容，转载请注明出处】转载请注明出处：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本文作者：唐霜，转载请注明出处。考虑是不是要把它置为null。当然，并不【原创内容，转载请注明出处】【本文受版权保护】是说每一次都要置为null，而是你需要考本文版权归作者所有，未经授权不得转载。【作者：唐霜】虑这件事。无论是标记清理，还是引用计数，【未经授权禁止转载】本文作者：唐霜，转载请注明出处。垃圾回收都需要去确认我的所有变量中，哪些【作者：唐霜】【版权所有】唐霜 www.tangshuang.net是不在需要被使用的。这里不再需要被使用，本文作者：唐霜，转载请注明出处。【作者：唐霜】并不意味着变量绝对不能被其他变量引用，例【本文受版权保护】本文作者：唐霜，转载请注明出处。如下图中右侧的三个对象相互引用了，但是通【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】过标记，引擎发现它们不会被当前程序再次使【作者：唐霜】【版权所有】唐霜 www.tangshuang.net用，所以就认为它们需要被回收。
【版权所有，侵权必究】
【版权所有】唐霜 www.tangshuang.net 用同样的定律，我们可以解决引用计数中循本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。环引用的问题，假如a.b = b同时b.本文版权归作者所有，未经授权不得转载。【作者：唐霜】a = a，那么，我们在程序结束时，要同原创内容，盗版必究。本文作者：唐霜，转载请注明出处。时对a和b进行操作，a.b = null; b.a = null 而不能只操作其中一个。这些原则性的编程【未经授权禁止转载】未经授权，禁止复制转载。习惯需要我们在长期实践中养成。

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

闭包

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

未经授权，禁止复制转载。【本文首发于唐霜的博客】转载请注明出处：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【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】us()时，add函数被plus执行上下【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net文执行了，虽然我们说它引用了其他函数作用【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。域中的变量，但是它没有产生实际的效用，因本文作者：唐霜，转载请注明出处。【作者：唐霜】为它没有交给其他执行上下文执行，而是在当原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net前执行上下文中被执行了，所以，我们可以称【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 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转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】se去修改，但是在整个执行过程中，它仍然本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】没有产生实际的效用，我们可以把incre【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ase函数称为副作用函数，也可以把add【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net函数称为闭包，但是没有实际意义。

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

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

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

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

闭包有很多应用场景。我们前文讲，函数执行本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。完进入回收阶段，执行上下文被销毁，其内变【访问 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之心法，驱各式招式，不断修进，以匹及前人【转载请注明来源】本文版权归作者所有，未经授权不得转载。之功。然在所有门派宗别之外，有另外一种可本文版权归作者所有，未经授权不得转载。转载请注明出处：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法有无数种，每种场景下解法不同，所以本册原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。只讲一些前端基础的算法，这些算法来自《高原创内容，盗版必究。【本文受版权保护】性能Javascript》《Web前端性【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。能优化》等书籍，我自己稍有发挥，是一些比原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。较通用的比较基础的算法，可以在日常开发中本文作者：唐霜，转载请注明出处。原创内容，盗版必究。经常使用。

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

优化循环迭代

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

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

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

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

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

事务提升是指把一些事情提升到循环体之外进著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。行，而不要在循环体内去做这些吃力不讨好的著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。事情。比如我们常见的写法：

【未经授权禁止转载】【转载请注明来源】【作者：唐霜】

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

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

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

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

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

【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【转载请注明来源】转载请注明出处：www.tangshuang.net

倒序迭代在进行某些查找时，可以从末尾进行转载请注明出处：www.tangshuang.net【本文受版权保护】查找，在找到之后可以尽快break，从而未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net避免遍历整个列表。

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

其次，减少迭代的次数。

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

我们可以用到三个技巧：增加步幅以减少迭代著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。次数；循环体展开技术；提前结束遍历。

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

增加步幅比较好理解，我们来看一个优化的例转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。子。

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

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

这段代码中，我们通过一个 i % 2 来【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】处理一些内容。但是对于for而言，它会迭【本文首发于唐霜的博客】【原创不易，请尊重版权】代items的长度。我们如下优化：

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

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

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

循环体展开技术是一种分批执行的技术，当我【本文受版权保护】【版权所有，侵权必究】们要需要对很多元素进行遍历的时候，可以把著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】一个复杂的循环体，拆分为多个简单的循环体未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。，从而让单个循环体的复杂度降低进而降低整【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。个循环的消耗。实际上，它一方面通过分批次【关注微信公众号：wwwtangshuangnet】【本文受版权保护】的方式减少迭代次数，另一方面也是降低了单未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】次迭代的复杂度。

【作者：唐霜】未经授权，禁止复制转载。【本文受版权保护】本文版权归作者所有，未经授权不得转载。

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

上面这段代码并没有将items.some【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】()作为if的条件进行判断，而是利用它可【转载请注明来源】未经授权，禁止复制转载。以通过return true来提前结束遍本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net历的特性，只在第一次找到某个元素时执行p【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。rocess函数。

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

条件语句优化

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

在一些条件需要进行计算的情况下，如果有多【版权所有，侵权必究】【作者：唐霜】组条件都需要执行，就会消耗比较多性能，这【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。种情况下，我们应该尽可能避免执行过多的条【版权所有】唐霜 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转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】di(4)调整到前面：

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

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

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

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

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判断次数减少。但是也要注意，这也意味着它本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】的判断数量是一定的，也就是说用正常的条件【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】判断可能只需要判断2条，而这种判断方法不著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。得不判断5条后才得出结论。

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

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

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【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netping上的函数来执行。这种技巧适合a的【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】取值是固定的，其形成的条件是离散的。这种本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。方案直接干掉了条件判断，这样就可以大大提【原创不易，请尊重版权】未经授权，禁止复制转载。升程序的执行效率。

使用递归

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

【原创不易，请尊重版权】【作者：唐霜】原创内容，盗版必究。

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

优化字符串处理

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

使用索引

【未经授权禁止转载】

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

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

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

【本文受版权保护】

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

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

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

【未经授权禁止转载】

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

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

优化正则表达式

正则表达式是非常复杂的一套知识体系，要掌原创内容，盗版必究。【本文受版权保护】握它的细枝末节，我们可能需要读一本书。坏【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。的正则表达式，在运行时很消耗性能，当然，未经授权，禁止复制转载。未经授权，禁止复制转载。为什么消耗性能，需要我们去理解正则表达式【作者：唐霜】未经授权，禁止复制转载。的查找实现的算法，本册无法提供完整的解释著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。，因此，这部分内容需要你作为课外知识去补【未经授权禁止转载】【原创内容，转载请注明出处】充。我们提供一些优化正则表达式的建议：

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

【转载请注明来源】

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

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

更快结束匹配，就和前文优化if̷【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。0;else一样，如果你可以让正则表达更【原创不易，请尊重版权】【本文受版权保护】清楚，让它在匹配时尽快发现无法匹配，以结未经授权，禁止复制转载。原创内容，盗版必究。束匹配的话，就一定要这样去做

转载请注明出处：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【未经授权禁止转载】”“哎，无一兄无需自惭，在场的各位在这天【本文受版权保护】【转载请注明来源】下都是绝顶的豪杰，只是这方世之间，除了武著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】功之外，还有超出其范畴的存在，我称其为元【版权所有，侵权必究】未经授权，禁止复制转载。脉，无需招式或心法，便可运用自然之力，破转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】一切招式。”“没曾想你断了经脉，还少一个未经授权，禁止复制转载。【本文首发于唐霜的博客】胳膊，竟能超越我们，我韩式兄弟追随意已决著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。，愿随你赴汤蹈火，去剿平那鬼窍团。”“既【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net然如此，我们八月初二出发。”
原创内容，盗版必究。【作者：唐霜】

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

和网络缓存不同，我们在客户端甚至代码层面【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。会用到一些缓存技术，这些缓存技术让我们可【本文受版权保护】【版权所有，侵权必究】以更高效的去执行某些动作，从而让使用我们【作者：唐霜】【本文首发于唐霜的博客】应用的用户感受不到该技术的存在，但却认为【版权所有】唐霜 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)

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

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【本文受版权保护】供一个clear方法，因为如果我们长期不【原创不易，请尊重版权】【未经授权禁止转载】清理cache，就会导致内存溢出。通过这未经授权，禁止复制转载。【原创不易，请尊重版权】样的改造，就可以让我们的程序避免重复的计【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】算。

原创内容，盗版必究。【转载请注明来源】【本文首发于唐霜的博客】

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

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

前端持久化存储

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

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

cookie: 不用，除非在涉及前后端交原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。互时不得不用的情况下

【本文受版权保护】

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

sessionStorage: 当你希望【本文首发于唐霜的博客】【转载请注明来源】用户刷新页面保持存储，但关闭页面后清空存原创内容，盗版必究。【未经授权禁止转载】储时使用

【转载请注明来源】

【本文受版权保护】

localStorage: 当你希望用户【作者：唐霜】【本文首发于唐霜的博客】关闭后保持存储，再次打开时还存在的情况时【作者：唐霜】【未经授权禁止转载】使用

原创内容，盗版必究。

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

【未经授权禁止转载】

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

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

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

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

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

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

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

登峰造极：高性能架构

“我等今日已久，自上次被你重伤，我便知你著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】定会再来寻仇，只可惜，我已练成鬼魉神功九本文作者：唐霜，转载请注明出处。【作者：唐霜】重天，今日便是你的死期。”只见的那鬼王全未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net是包裹一团黑气，四大护法皆如兽样似人非人原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】。“你作恶多端，世间早已容不下你，或许只原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。有地狱能容的下你，今日就是了断。”直见那【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】四大护法冲飞而来，韩式兄弟迎将而去，然四【未经授权禁止转载】原创内容，盗版必究。手难敌八爪，很快落了下风。那四大护法才两原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。年有余，武功却飞进大截，似有什么秘密。天转载请注明出处：www.tangshuang.net【转载请注明来源】地之间，火、气、水、光，物与物皆可变换。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。韩式兄弟被打的飞落过来，我慢步上前，将他【作者：唐霜】著作权归作者所有，禁止商业用途转载。们接住，韩大口中吐血，中了内伤。我运动元转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。脉，从掌心过其肩臂注入其体内，不过一瞬，转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】他便站起来，“这是怎事？适才还胸痛气闷，【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。现在便极有精神，像是没有打斗过般。看来我未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。兄弟二人就算再修炼一百年，也不能及你一二【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net了。”“你先歇着。”……那四大护法各自都【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】服下一颗手指般大小的药丸，一时间，他们青本文版权归作者所有，未经授权不得转载。【转载请注明来源】筋暴起，头发脱落，衣服裂开，各自生出些莫【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。名的器官来，有露出肉翅，有甩出毛尾。“太【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。诡异了，原来这鬼耧岛勾结东瀛，靠这断魂丸【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】营生，这便是这个鬼窍团的秘密，如此下去，【未经授权禁止转载】【访问 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【本文首发于唐霜的博客】我们所设计的整套技术实现本身就存在问题，【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。或者说我们的架构不够高性能。在react【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net推出16版本之前，它使用了经典的virt本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netual dom架构，通过diff和pat【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ch两套动作实现DOM的更新，然而随着r原创内容，盗版必究。原创内容，盗版必究。eact应用暴露出越来越多的性能问题后，【作者：唐霜】【关注微信公众号：wwwtangshuangnet】核心团队成员发现diff和patch占用【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。了长时间的计算，导致diff和patch著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net这两个过程，浏览器都处于等待状态，也就是本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net卡顿。为了解决这一问题，react推出了原创内容，盗版必究。【版权所有，侵权必究】新的fiber架构，对diff进行大刀阔著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】斧的重构，实现了时间分片等特性，让dif【原创不易，请尊重版权】【未经授权禁止转载】f和patch两个阶段分开调度，从而释放【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。了长任务，除了操作DOM本身可能带来的卡著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。顿，基本上就不存在长任务，因此，拥有更高【关注微信公众号：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会让框架运行时采用缓存策略，从而加速性能【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net。

接下来，我将简单介绍几种架构设计的思路，【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。这些思路都是从性能角度出发提供建议。

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

无状态化架构

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

原创内容，盗版必究。【本文受版权保护】

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

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

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

异步化架构

前端开发是接触异步最多的开发领域，因为我本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】们通常需要使用ajax或其他形式从服务端转载请注明出处：www.tangshuang.net【未经授权禁止转载】加载资源，而所有的这些逻辑，往往都会放在【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。异步任务中运行。

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

异步化架构之所以有较高的性能，原因在于它【未经授权禁止转载】未经授权，禁止复制转载。对任务进行拆分，从而避免在同一帧执行过长【作者：唐霜】【转载请注明来源】的任务，进而避免的卡顿现象。

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

队列

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

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

队列之所以具有较高的性能，和异步化架构是原创内容，盗版必究。未经授权，禁止复制转载。一致的，都可以起到通过时间分片的方式，拆本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net分大任务，让一个可能占用长时间的任务，分本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】为几段来执行。

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

协程

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

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

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

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

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

华山论剑：React性能优化

“荫哥，天下若大，你想去何处？”“秀若，本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。你我一起闯荡江湖如何？”“只要跟着荫哥，【原创内容，转载请注明出处】原创内容，盗版必究。天涯海角我皆无怨悔。”……夕阳甚红，镇海本文作者：唐霜，转载请注明出处。转载请注明出处：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【本文首发于唐霜的博客】令各地门派共同剿匪，必能尽快将这些余孽清转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net剿。”“无一兄，心怀天下，我甚不如你！既【本文受版权保护】转载请注明出处：www.tangshuang.net然你已出山，那我岂能袖手旁观。”
本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】

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

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

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

React渲染机制

在开始之前，我们必须了解react的渲染原创内容，盗版必究。未经授权，禁止复制转载。机制，否则我们无法正确思考和处理工作中遇【本文受版权保护】【关注微信公众号：wwwtangshuangnet】到的性能问题。React的渲染，包含如下【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】知识：

原创内容，盗版必究。

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

【未经授权禁止转载】

react生命周期

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

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

从Virtual DOM到真实DOM

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

【本文受版权保护】

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

原创内容，盗版必究。

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

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

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

作为一个视图层驱动框架，react本身的【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net架构可以分为3层：Virtual DOM著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。层；Reconciler层；Render本文作者：唐霜，转载请注明出处。原创内容，盗版必究。er层。其中，Virtual DOM是r著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。eact最原始最核心的概念，它用于描述一【原创内容，转载请注明出处】【原创内容，转载请注明出处】套跨平台的UI结构，注意，这里的结构包含转载请注明出处：www.tangshuang.net【作者：唐霜】其逻辑和事件。Reconciler层是r【原创内容，转载请注明出处】【原创内容，转载请注明出处】eact中最重要的，区别于其他任何基于V转载请注明出处：www.tangshuang.net【未经授权禁止转载】irtual DOM的框架（例如vue、【本文首发于唐霜的博客】【未经授权禁止转载】avalon、preact等）的关键，该【未经授权禁止转载】【版权所有，侵权必究】层用于对Virtual DOM进行处理、【本文受版权保护】【转载请注明来源】对比、计算，对用户事件进行调度，推动组件未经授权，禁止复制转载。【原创内容，转载请注明出处】生命周期等等工作。Renderer层用于本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。把Virtual DOM映射到具体的某个【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。平台上，表现出具体的UI和人机交互逻辑，转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。比较常见的有ReactDOM和React转载请注明出处：www.tangshuang.net【未经授权禁止转载】Native。

React现在的版本基于fiber架构完【原创不易，请尊重版权】【转载请注明来源】成reconciler层所有工作。Rec转载请注明出处：www.tangshuang.net【作者：唐霜】onciler的主要工作是调用组件生命周【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。期，这里可不指组件生命周期函数，reac【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】t官方开源了react-reconciler这个库，你可以基于它了解react组件真本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】正的生命周期。在生命周期的基础上，fib本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】er构建了一套非常巧妙的时间切片算法，让未经授权，禁止复制转载。原创内容，盗版必究。reconciler处于一种更加灵活且掌【转载请注明来源】【本文受版权保护】控性更强的调度中，整个调度交由scheduler来进行任务分配，实现了任务的优先级，这些本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。优先级可划分为：

本文版权归作者所有，未经授权不得转载。【转载请注明来源】

synchronous，与之前的Stac原创内容，盗版必究。【本文首发于唐霜的博客】k Reconciler操作一样，同步执未经授权，禁止复制转载。【本文受版权保护】行

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

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

task，在next tick之前执行

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

animation，下一帧之前执行

【未经授权禁止转载】

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

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

【未经授权禁止转载】

high，在不久的将来立即执行

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

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

low，稍微延迟执行也没关系

【本文受版权保护】

【关注微信公众号：wwwtangshuangnet】

offscreen，下一次render时【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net或scroll时才执行

【转载请注明来源】

原创内容，盗版必究。

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

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

基于fiber的reconciler分为本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。两个阶段：reconciliation阶【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。段和commit阶段。其中commit阶【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】段的主要工作是把计算后的变更实施到真实的【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。DOM或native环境中，影响UI界面本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。的变化，因此，这个阶段是不可以中断的。而原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netreconciliation阶段主要工作转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net是计算、diff、找出变更（副作用），这【版权所有，侵权必究】转载请注明出处：www.tangshuang.net些计算大体上还是基于virtual DO【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。M的，由于它属于计算层面，所以是可以中断【原创内容，转载请注明出处】【原创内容，转载请注明出处】的，react实现了巧妙的时间切片算法，【版权所有，侵权必究】【转载请注明来源】可以在计算时根据任务的优先级来中断当前的【关注微信公众号：wwwtangshuangnet】【本文受版权保护】计算，等到有空闲时间时再重新开启之前的计本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】算。基于该时间切片算法，计算被合理的划分未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。到不同时间切片，从而大幅避免了长任务所带【转载请注明来源】【原创不易，请尊重版权】来的卡顿现象（当然，有的情况下还是不可避【版权所有，侵权必究】【本文首发于唐霜的博客】免，但总体而言比较少）。

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

在reconciliation阶段进行计本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net算时，react也巧妙的采用了双缓冲池算【本文受版权保护】未经授权，禁止复制转载。法，简单讲就是通过快照来减少内存占用。在本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】fiber架构下，react会在第一次渲【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。染完成时，建立一棵fiber树，reco【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。nciliation阶段会基于该fibe本文作者：唐霜，转载请注明出处。【未经授权禁止转载】r tree建立一个workInProg【本文首发于唐霜的博客】未经授权，禁止复制转载。ress tree（实际上就是fiber【本文受版权保护】【版权所有】唐霜 www.tangshuang.net tree的快照），然后在workInP【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】rogress tree上做修改，而这个著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】修改不会影响原来的fiber tree，【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】当任务暂停后继续时，workInProg【转载请注明来源】本文版权归作者所有，未经授权不得转载。ress tree保存了计算信息，所以，【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】react知道应该从哪里继续计算；当被更【转载请注明来源】【版权所有，侵权必究】高优先级的任务打断时，该workInPr转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ogress tree被直接丢掉，fib【转载请注明来源】著作权归作者所有，禁止商业用途转载。er tree不会发生任何变化；而如果计【转载请注明来源】【版权所有】唐霜 www.tangshuang.net算顺利完成，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组件，只能尽可能的避免【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net直接依赖底层的算法，而应该通过react本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net暴露出来的api来进行控制，否则一但版本【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net升级，我们以前做的很多建设都将付之一炬。

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

常见的React性能问题与优化对策

1. 接收相同的props，却还是被重新【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。渲染

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

注意，这里的重新渲染仅仅是render生原创内容，盗版必究。未经授权，禁止复制转载。命周期重新被调用，并非只真实UI被重新渲【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。染。由于组件render时可能存在大量计原创内容，盗版必究。【作者：唐霜】算，所以一旦被反复调用，就可能引起性能问【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】题。我们时常疑惑，为什么接收了相同的pr【原创内容，转载请注明出处】【转载请注明来源】ops，还是会重新渲染。注意，这里的相同本文作者：唐霜，转载请注明出处。【本文受版权保护】props，不包含传入了看上去一样但实际【原创内容，转载请注明出处】原创内容，盗版必究。上是两个独立的对象或函数的情况。例如：

<Some name="toniy" />

为什么Some组件的render会被反复【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。执行呢？明明name是个字符串，不会变化【未经授权禁止转载】【版权所有，侵权必究】。这是因为react在实现代码层面，仅对【作者：唐霜】著作权归作者所有，禁止商业用途转载。前后两次props进行了全等对比，即==【版权所有，侵权必究】【本文受版权保护】=，而组件每次执行到该生命周期时，pro【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】ps明显都是新创建的，虽然看上去是一样，【转载请注明来源】【本文首发于唐霜的博客】但实际上是两个对象。如果react内部实【作者：唐霜】【关注微信公众号：wwwtangshuangnet】现时，采用了shallowEqual，那本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。就不存在这个问题了。

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

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

export const Some = React.memo(function(props) {
  ...
})

我们在原来的Some组件外面包了一个Re【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】act.memo，就可以让Some组件自【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net动具备props的shallowEqua【作者：唐霜】【原创不易，请尊重版权】l判断，当组件传入的props没有变化时【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】，组件就不需要再次渲染。

2. 接收属性都相同的prop对象，怎么著作权归作者所有，禁止商业用途转载。【本文受版权保护】避免重新渲染？

很多情况下，我们使用组件时会直接传入一个【未经授权禁止转载】原创内容，盗版必究。对象，例如：

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

<Some info={{ name: 'toniy' }} />

这种用法会导致info每次都是一个新对象著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。，组件每次都会重新渲染，有没有什么办法避【作者：唐霜】【关注微信公众号：wwwtangshuangnet】免呢？

export const Some = React.memo(function(props) { ... }, (nextProps, prevProps) => {
  return nextProps.info.name === prevProps.info.name
})

React.memo的第二个参数返回bo【本文首发于唐霜的博客】【原创不易，请尊重版权】olean，如果为true表示前后两次是【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】相等的，相当于告诉react，这次组件不【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。需要被重新渲染。

3. 避免回调函数引起重新渲染

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

对于onClick等事件回调，如果直接传【本文首发于唐霜的博客】【原创内容，转载请注明出处】入函数，也是被认为是一个全新的值，因此，【转载请注明来源】【本文首发于唐霜的博客】用memo也无济于事。很多建议是通过us【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。eCallback或useEvent包裹转载请注明出处：www.tangshuang.net【本文受版权保护】回调函数，但我认为可以在组件内自己消化。

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

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 获取更多精彩内容】【未经授权禁止转载】界面。很有可能是因为变更state导致的本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】无限触发更新导致的死循环问题。可能的两种【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net情况，一是在componentDidMo【本文受版权保护】【作者：唐霜】unt/componentDidUpda【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。te中调用setState，二是在use【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netEffect中调用setState。当组【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】件完成渲染之后，你随即马上又调用setS【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.nettate来触发了组件的更新，而由于没有控【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net制好，导致这一更新动作不断的被触发。

此时，你要检查setState是在什么情本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】况下被调用。一方面可以通过shouldC【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】omponentUpdate来控制，再什未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net么状态下可以更新组件，另一方面在setS【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。tate之前做好if判断。

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

基于依赖收集的最小化更新技术

这是我独家总结的一种react组件优化技【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。术，你可以在《一种基于依赖收集的最小化更新组件技术》一文中阅读详细的思考过程。简单讲，我们原创内容，盗版必究。本文作者：唐霜，转载请注明出处。的组件往往并不需要在每次更新时被更新。这【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。话可能有点绕，让我们回去了解一下reac【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】t的渲染机制，你会发现，react组件是【转载请注明来源】本文版权归作者所有，未经授权不得转载。否需要被重新渲染，是由react作为驱动本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。程序，内部reconciler调配的，而【原创不易，请尊重版权】【版权所有，侵权必究】react在实现时，无论组件内部怎么设计原创内容，盗版必究。本文作者：唐霜，转载请注明出处。，它都会按照自己的设计来重新运行组件的r【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ender。这就导致组件其实根本不需要r未经授权，禁止复制转载。未经授权，禁止复制转载。ender，但是还是被render了。此【作者：唐霜】【作者：唐霜】时，我们可以把组件从这种机制中脱离出来。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。通过最小化更新技术，我们可以让组件在默认【本文受版权保护】原创内容，盗版必究。状态下不更新，只在内部使用到的值发生变化【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】的时候更新，从而做到定点靶向更新，实现最【本文首发于唐霜的博客】【作者：唐霜】小化更新。

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

React SSR

SSR技术主要针对首屏渲染，我们大部分前本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】端应用都是通过构建大包进行发布，这就会导【原创内容，转载请注明出处】【转载请注明来源】致应用首屏必须等到加载完对应的脚本，并执【本文受版权保护】【本文受版权保护】行之后，才会由react生成对应的DOM【本文受版权保护】【版权所有，侵权必究】结构，并挂载到页面上。SSR技术则主要解【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。决这一问题，简单讲，react的Virt【原创内容，转载请注明出处】【本文受版权保护】ual DOM可以在服务端运算出用于渲染【版权所有，侵权必究】【原创内容，转载请注明出处】的HTML字符串，从而让页面打开时，就已【本文受版权保护】未经授权，禁止复制转载。经具备了可渲染的html内容，用户也就能著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。立即看到页面的内容。在这同时，页面还会继【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net续加载对应的脚本，脚本完成之后，页面就恢【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net复了正常的SPA效果。

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

不过SSR受限于后端运维的条件限制，并不【原创不易，请尊重版权】【本文受版权保护】适合所有前端场景。大部分情况下，我们可以本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。结合serverless来运行ssr程序【转载请注明来源】【版权所有，侵权必究】，同时在策略上做一些降级方案，保证ssr著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net运行出错或后端机器卡顿时，可以退回到普通【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net的CSR（客户端渲染）模式。

问鼎中原：Vue性能优化

“我不服，这个荫世年纪轻轻，论辈分，给我著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 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承让。”“荫兄自当有这能力，昔日一招便可【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。接我绝学，望整个江湖，唯有你能做到。”“本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】好，那就看我如何去争这盟主位。”说罢，我转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net便快步走上擂台，说到“今日在下无意盟主之【未经授权禁止转载】【原创内容，转载请注明出处】名，但天下己任，望众位大侠成全，若有不服【关注微信公众号：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下。……“荫少侠无愧盟主！荫少侠无愧盟主【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】！”……
【版权所有】唐霜 www.tangshuang.net【转载请注明来源】本文作者：唐霜，转载请注明出处。

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

Vue作为国人喜爱的一款前端框架，应用范【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。围也很广泛。同时，与react相比，vu【作者：唐霜】【版权所有，侵权必究】e原生做了一些性能优化方面的工作，避免大【版权所有，侵权必究】原创内容，盗版必究。部分开发者反复的去处理某些性能问题。但在【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。vue使用过程中，偶尔我们也会遇到一些情原创内容，盗版必究。【转载请注明来源】况。

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【转载请注明来源】

Vue响应式原理

和react等框架不同，vue的编程特点本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。是通过直接修改数据来触发界面的重新渲染。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】这一思想来源于angularjs，但是却【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net比angularjs更加优秀，因为它采用【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。了数据拦截的响应式原理，而抛弃了angu【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】larjs的脏检查机制。在vue2版本中著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。，它通过Object.definePro本文版权归作者所有，未经授权不得转载。【作者：唐霜】perty来拦截数据，当在代码中直接修改【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】数据（属性）时，会通过该属性的sette【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。r修改其值，在setter中，vue内置【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】了一个触发界面更新的任务，等到下一帧时，【原创内容，转载请注明出处】未经授权，禁止复制转载。这些更新任务就会被执行，从而带来界面的更【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】新。在vue3版本中，它用Proxy替代【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。了Object.defineProper【作者：唐霜】【原创内容，转载请注明出处】ty，因为Proxy可以更好的处理del【未经授权禁止转载】【本文首发于唐霜的博客】ete操作和数组的各种操作的拦截，但在拦【未经授权禁止转载】未经授权，禁止复制转载。截中插入重新渲染的任务仍然是其底层逻辑。

也正是因为这种拦截的机制，让vue在性能本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】上，如果不做任何优化，会有比react性转载请注明出处：www.tangshuang.net【转载请注明来源】能更好的表现。因为这种拦截具有依赖收集的【原创内容，转载请注明出处】【未经授权禁止转载】可能性（vue内部也是这么做的），也就意未经授权，禁止复制转载。原创内容，盗版必究。味着，只需要对依赖的变化进行响应即可，其本文作者：唐霜，转载请注明出处。【本文受版权保护】他变化，即使是被拦截的数据，也无需对它进【关注微信公众号：wwwtangshuangnet】【作者：唐霜】行响应。和react相比，react的重【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】新渲染是全量的，一旦触发了更新，那么就是【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。整个组件连带其子组件一起更新，而vue因【版权所有，侵权必究】【本文受版权保护】为是根据哪一个数据变化来进行更新，所以在未经授权，禁止复制转载。【本文首发于唐霜的博客】更新时具有更细粒度的把控，结合编译工具，【版权所有】唐霜 www.tangshuang.net【作者：唐霜】可以做到只更新对数据有依赖的节点，这就使本文版权归作者所有，未经授权不得转载。【作者：唐霜】得其性能有不错的表现。但是，也正是由于它【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。基于数据拦截机制，也带来了一些问题，一个原创内容，盗版必究。【原创内容，转载请注明出处】问题是，当遇到一些无法被拦截的数据，例如【作者：唐霜】【版权所有】唐霜 www.tangshuang.net一些类的实例对象，就无法正确响应其修改。

常见的Vue性能问题

1. 为什么修改某个数据时界面没有变动，转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】却出现了卡顿？

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

由于数据拦截机制，会导致有些情况下，一些【关注微信公众号：wwwtangshuangnet】【本文受版权保护】细节的修改我本不想带来重新渲染，但是由于原创内容，盗版必究。【未经授权禁止转载】其内部任务的存在，会出现大量的计算，占用【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。CPU，而且vue不像react实现了时【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。间切片，它就没有办法处理这种常见的CPU原创内容，盗版必究。本文作者：唐霜，转载请注明出处。被大量占用的情况。针对这种情况，我们只需【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】要让vue不要去拦截这类数据，即让这个数著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。据不要具备响应式能力。我们可以用Obje【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ct.defineProperty对数据本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。提前进行定义，将其configurabl【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】e设置为false，那么vue就无法通过转载请注明出处：www.tangshuang.net【转载请注明来源】Object.definePropert未经授权，禁止复制转载。【本文首发于唐霜的博客】y来拦截该数据。

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

因为可能是你的后端接口返回了一个巨大的数【版权所有，侵权必究】【未经授权禁止转载】据，而你在往vue里面塞入该数据时，vu【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】e会对该数据进行初始化拦截处理，而由于数【未经授权禁止转载】本文作者：唐霜，转载请注明出处。据太大，导致该过程消耗了大量的计算。解决著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。办法是用Object.freeze把该数【未经授权禁止转载】本文作者：唐霜，转载请注明出处。据进行冻结，经过冻结后的数据不会被vue转载请注明出处：www.tangshuang.net【转载请注明来源】拦截，这样就直接跳过了这个初始化拦截处理【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net阶段，可以快速展示你的数据。

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

3. 大列表、大表格卡顿？

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

这个不是vue的问题，参见前面“虚拟视口原创内容，盗版必究。未经授权，禁止复制转载。技术”一节。

笑傲江湖：其他框架性能亮点

追到峡谷，两岸峭壁如岸，抬头只见的一线天转载请注明出处：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 获取更多精彩内容】

Svelte为什么快？

2021年，svelte被评为react著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。、vue、angular之后的第四大前端【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net框架，主要原因在于它打破了react、v【原创不易，请尊重版权】原创内容，盗版必究。ue一类框架的范式，没有一点和这些框架有【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net相似的地方，相反，svelte大火之后，原创内容，盗版必究。【本文首发于唐霜的博客】vue马上跟进，开始抄作业。在一些评测中原创内容，盗版必究。【作者：唐霜】，我们也可以看到svelte在性能上有不转载请注明出处：www.tangshuang.net原创内容，盗版必究。错的表现，它之所以快，主要有两个原因：

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

svelte完全基于编译，它没有自己的运原创内容，盗版必究。【本文首发于唐霜的博客】行时，虽然在编译结果中也存在一些运行时代本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net码，但这些代码不足以称为一个框架，它完全本文版权归作者所有，未经授权不得转载。【作者：唐霜】通过编译来理解代码要做什么操作，并编译为【原创内容，转载请注明出处】原创内容，盗版必究。执行该操作的代码，因此，svelte程序本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。在运行的时候，不像vue或react，会【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】有那么复杂的生命周期，也没有复杂的dif原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】f->patch等过程，因此就更快

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

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

svelte抛弃了Virtual DOM【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】，转而直接对DOM进行操作，基于上面一条【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。原因，svelte没有像vue或reac转载请注明出处：www.tangshuang.net【版权所有，侵权必究】t一样，构建一套virtual dom，【未经授权禁止转载】【转载请注明来源】由于构建virtual dom需要占用大【转载请注明来源】著作权归作者所有，禁止商业用途转载。量内存，同时还要基于virtual do【转载请注明来源】【版权所有，侵权必究】m做大量运算，所以实际上是比较低性能的，【作者：唐霜】【版权所有，侵权必究】由于没有virtual dom这一整套机【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】制，svelte直接操作DOM，而且是一【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。针见血的操作依赖变量的DOM节点，所以直【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。捣黄龙搬的效率带来更高的性能

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

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

但是，svelte也存在一定的问题，由于【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】它没有自己的运行时，导致每一个组件编译之本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net后，都有大量相同或相似的运行时代码，这也转载请注明出处：www.tangshuang.net【作者：唐霜】就导致最终打包之后，代码体积可能比vue【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】或react程序要更大。

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

Solid为什么快？

solidjs是2021年火的一个框架，本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net它身上集合了svelte的编译和无Vir著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。tual DOM、react的语法、vu【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.nete的响应式原理等特点，这让它在前端框架届【作者：唐霜】著作权归作者所有，禁止商业用途转载。独树一帜。它之所以快，其实和svelte【转载请注明来源】【未经授权禁止转载】有相同的原因，虽然写solid程序有点像【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】写react，但是实际上它和react在【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】思想上完全不同，可以说是只借鉴了reac【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。t的语法，其他的全部是svelte和vu【转载请注明来源】【原创不易，请尊重版权】e，例如它的通过类似vue一样的reac著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nettive机制来实现界面的重新渲染，它采用未经授权，禁止复制转载。【原创不易，请尊重版权】了svelte的编译时策略，以及无Vir【未经授权禁止转载】【原创内容，转载请注明出处】utal DOM直接定点更新DOM节点的【本文受版权保护】原创内容，盗版必究。优化等等。

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

sfcjs为什么快？

sfcjs是我写的一个非常小的框架，在大【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】部分情况下，你无需用nodejs来搭建一著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。套编译环境，它直接在浏览器端启动了一个w【关注微信公众号：wwwtangshuangnet】【作者：唐霜】orker线程来进行编译，通过这个策略，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。它充分利用了客户端的资源，以及worke本文作者：唐霜，转载请注明出处。原创内容，盗版必究。r线程不干扰主线程的计算，同时基于AMD【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net的加载策略，在必要的时候才拉取组件代码进本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】行编译，从而让整个体验非常友好（起码在加【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net载、编译时不会出现卡顿现象）。而且sfc【本文受版权保护】未经授权，禁止复制转载。js也走了抛弃virtual DOM的路【原创不易，请尊重版权】原创内容，盗版必究。，通过对DOM节点的定点更新，通过依赖收著作权归作者所有，禁止商业用途转载。【本文受版权保护】集，只有当DOM节点所依赖的变量发生变化本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。时才会更新节点，这样当然就比基于virt本文作者：唐霜，转载请注明出处。【转载请注明来源】ual DOM的复杂计算效率更高。

行侠仗义：Webpack构建性能优化

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

Webpack作为现代前端重要的基础设施【本文受版权保护】【未经授权禁止转载】，对于打包构建有非常好的支持。但是，作为【作者：唐霜】【转载请注明来源】开发构建工具，它在性能上却并不如新出现的【本文受版权保护】著作权归作者所有，禁止商业用途转载。一些工具，这使得它饱受诟病。我们可以通过著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】有些手段来优化webpack构建性能，从本文作者：唐霜，转载请注明出处。【本文受版权保护】而在开发或构建时拥有更好的开发体验。

Webpack构建原理

虽然webpack的功能目标很单一，即把【作者：唐霜】【作者：唐霜】一堆代码打包后产生出一个可用的代码（或几本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】个代码文件），但是，它的架构却极为复杂，原创内容，盗版必究。【原创内容，转载请注明出处】不是一般初学者可以掌握的。简单讲，web【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】pack是通过3个方面的体系实现其构建目【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】标的，分别是：Compilition、L【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】oader、Plugin。

【未经授权禁止转载】【作者：唐霜】

其中Compilition是其最核心的部【作者：唐霜】原创内容，盗版必究。分，它完成了一个机器的核心设计，即完成内原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。容转换+资源合并的能力，包含三个阶段：初【原创不易，请尊重版权】未经授权，禁止复制转载。始化阶段，构建阶段，生成阶段。其中，构建【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。阶段又是重中之重，这个过程在我看来，本质【版权所有，侵权必究】【原创不易，请尊重版权】上就是一个编译过程，只不过它的编译不是把【转载请注明来源】【原创不易，请尊重版权】一份代码转化为另一份，而是把一组代码转化本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】为另外一组。它的构建大致如下：

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

创建Module

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

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

runLoaders

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

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

用acorn讲js解析为AST

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

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

遍历AST，过程中还会收集依赖

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

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

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

处理依赖，创建依赖树

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

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

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

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

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

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

如此循环往复，知道所有依赖都解析完毕

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

【关注微信公众号：wwwtangshuangnet】

【本文受版权保护】

依赖树是webpack构建阶段的目标，后【未经授权禁止转载】【未经授权禁止转载】面的生成阶段则是基于该依赖树生成最终的c本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。hunks。而在生成依赖树之前或过程中，著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。它会执行整个构建中的无数（200多个）钩【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】子，这些钩子可以被插件挂载，从而影响整个转载请注明出处：www.tangshuang.net【版权所有，侵权必究】构建流，比如插件可以加入新的依赖、替换依未经授权，禁止复制转载。【本文首发于唐霜的博客】赖等等。在构建过程中，webpack会把【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。每一个import/require认为是转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。在引入一个Module，至于这个Modu【关注微信公众号：wwwtangshuangnet】【转载请注明来源】le真正的文件类型它并不关心，因为它会把【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】这个Module的识别交给Loaders【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net去处理（当然，它默认可以识别js这种mo原创内容，盗版必究。【转载请注明来源】dule），而一个loader也可以在返【未经授权禁止转载】【作者：唐霜】回的结果中增加依赖，这就导致webpac【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】k的构建过程会出现循环往复的过程，当然，本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】你也可以说这是它先进的地方。

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

Webpack常见性能问题与优化技巧

通过上述原理，你可以发现，webpack原创内容，盗版必究。【作者：唐霜】的整个构建链路是很长的，而且它每一个阶段【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】都需要执行大量计算，甚至还会循环往复的执原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】行，所以性能上肯定好不到哪里去。但是，C【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。ompilition是我们无法修改的，它【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net是webpack的核心，除非我们自己fo未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】rk一份webpack的源码，定制一个自著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net己的webpack。那么，能够优化的，就著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】是通过插件、Loader的优化来提升性能【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net了。

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

合理优化Loaders

我们知道webpack把每一个文件都当做本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】Module对待，这也意味着，每一种文件著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】类型，都需要一个（或多个）Loader来【原创内容，转载请注明出处】【本文受版权保护】识别，并转化为ESModule的形式，比【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】如图片要转化为 export default 'http://xxx/a.jpg' 这样的形式。但是，有些loader却会【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】做多余的事，比如我们只是想得到一个url【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】，但是它却去计算尺寸大小颜色等，浪费大量【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】计算资源。一个典型的例子就是，不少开发者【本文受版权保护】转载请注明出处：www.tangshuang.net不管什么情况下，管他三七二十一，都把ba本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】bel-loader加上，而且给babe未经授权，禁止复制转载。【原创内容，转载请注明出处】l配置了一大堆presets，这就导致j本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】s文件不仅要过babel的编译，还要过w【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】ebpack的解析，当然更消耗性能。其实【转载请注明来源】【未经授权禁止转载】，在某些场景下，我们可以不需要babel原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。-preset-env之类的babel插【版权所有，侵权必究】【版权所有，侵权必究】件或preset，只需要加几个用于识别特本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net定的webpack无法识别的语法的插件即【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。可，甚至一些情况下，如果我们写的代码是标本文版权归作者所有，未经授权不得转载。【转载请注明来源】准代码，不包含ESNext，那么不使用b本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。abel-loader也完全没有问题，毕【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。竟标准ES是浏览器支持的。

启用多线程

我们知道webpack是基于js开发的，【作者：唐霜】【转载请注明来源】js是单线程的，所以即使两个毫不相干的l本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netoader也只能前后排队等待处理。我们可本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net以利用happypack插件来启用多线程【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。，让某些不需要串行的任务可以并行执行，这【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】样就可以让某些loader可以同时运行，原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】进而提升其性能。

使用DLL

动态链接库（DLL）是windows系统【转载请注明来源】本文作者：唐霜，转载请注明出处。的一种方案，你可以利用webpack内置本文版权归作者所有，未经授权不得转载。【本文受版权保护】的DllPlugin插件，把一些固定不变转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。的依赖，如放在node_modules目【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net录下的模块文件的代码，打包的dll文件中【原创内容，转载请注明出处】【转载请注明来源】，然后在编译时，基于dll的生成结果，w本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ebpack就不会再去打包这些依赖，由于【作者：唐霜】【原创不易，请尊重版权】减少了对这些依赖代码的整套构建流，所以整【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net体的工作量就少了很多，性能也就提升了上来原创内容，盗版必究。【本文首发于唐霜的博客】。

启用缓存

webpack5提高了更高水平的缓存机制【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。，新版本的webpack为了在性能上有所【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。突破，设计了一种复杂的缓存策略，它把一个【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。Compilition整条链路都给分任务【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net的缓存起来，每一个loader或plug【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。in的执行，在每一个阶段的结果，都给缓存【未经授权禁止转载】【作者：唐霜】了一遍，当第二次进行编译的时候，如果它基【本文受版权保护】【原创不易，请尊重版权】于缓存检查到某个文件发生了变化，那么它不未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。会去管其他文件的所有编译过程，而只会动当【原创内容，转载请注明出处】【版权所有，侵权必究】前文件的编译链，其他文件的所有编译结果将【本文受版权保护】【转载请注明来源】被直接使用。这一策略从理论上，显得非常高【原创内容，转载请注明出处】【原创不易，请尊重版权】效，可以说是我所见过的缓存策略里面做的最转载请注明出处：www.tangshuang.net【转载请注明来源】彻底的。但是由于它要缓存的内容太多了，导【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】致它的缓存文件特别大，动不动就上G了。而转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。且另外一个方面，它的Compilitio【版权所有】唐霜 www.tangshuang.net【作者：唐霜】n链路实在是太长了，即使其他所有文件的编【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】译过程结果都无需重新生成，但是当前文件的【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】编译链路也很长，这就导致即使使用了这么高转载请注明出处：www.tangshuang.net【转载请注明来源】级的缓存策略，webpack仍然无法做到【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】秒级构建响应。

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

让webpack打出更小的包

随着项目增长，webpack打包的体积也【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】越来越大。此时，我们要考虑用户打开页面时本文作者：唐霜，转载请注明出处。【本文受版权保护】，下载代码文件所花掉的时间，因此，我们要【转载请注明来源】【原创内容，转载请注明出处】想办法，让打包体积变小，让用户更快看到界【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net面。基于webpack，我们有如下的方案【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。：

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

使用dll

【未经授权禁止转载】

自己定制策略进行chunks拆分

【关注微信公众号：wwwtangshuangnet】

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

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

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

使用动态引入import()

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

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

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

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

使用tree shaking能力

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

【本文受版权保护】

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

使用公共utils库，减少重复代码

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

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

原创内容，盗版必究。

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

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

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

天外飞仙：热重载

云月轻过，黑风清凉，“秀若，你可曾在天上原创内容，盗版必究。本文作者：唐霜，转载请注明出处。看过世界？”“没有。”“来我带你。”我们【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】乘着夜风，飞上千尺深空，向下望来，长安整本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。城的美景尽在眼底。若这天下太平，这盛世，著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net不正是我所愿。
【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】

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

HMR的原理

热更新的本质，就是一个函数的执行效果被这【未经授权禁止转载】未经授权，禁止复制转载。个函数的拷贝的执行效果覆盖。比如我们现在【本文首发于唐霜的博客】【作者：唐霜】有一个函数 a() 在页面上输出R【未经授权禁止转载】【原创内容，转载请注明出处】21;a”，然后我们重新定义【原创内容，转载请注明出处】【本文受版权保护】了函数 a() 在页面上输出”【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。;b”，那么怎么做到页面不刷著作权归作者所有，禁止商业用途转载。【作者：唐霜】新而界面变化呢？运行新的 a() 就可以未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】了。

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

HMR的本质思路也是这样。只不过它重载的【转载请注明来源】【关注微信公众号：wwwtangshuangnet】不是函数，而是模块，当然，在webpac【原创内容，转载请注明出处】【作者：唐霜】k中，一个模块实际上也被包在一个函数中。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】但是如果我们脱离webpack聊HMR，【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】那么其本质大致相同。一般来讲，HMR需要【本文受版权保护】本文作者：唐霜，转载请注明出处。按照如下的原理来进行：

服务端：向客户端提供JS脚本，脚本具有特未经授权，禁止复制转载。【原创内容，转载请注明出处】殊性质，里面包含了一些hmr的处理代码，【作者：唐霜】转载请注明出处：www.tangshuang.net客户端运行该JS脚本，运行后这个脚本就具原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。备了hmr能力

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

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

服务端：监听文件变化，文件发生变化之后，著作权归作者所有，禁止商业用途转载。【转载请注明来源】重新进行构建，得到新的Module代码，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。这个新代码将被发送给客户端

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

【转载请注明来源】

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

原创内容，盗版必究。

服务端：得到新代码之后，通过websoc【转载请注明来源】本文作者：唐霜，转载请注明出处。ket向客户端告知新代码产生了，快来拿

【未经授权禁止转载】

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

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

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

【关注微信公众号：wwwtangshuangnet】

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

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

客户端：从原来的模块依赖关系中，删除原始【作者：唐霜】【原创内容，转载请注明出处】的模块引用，把新的Module作为替换，【原创内容，转载请注明出处】原创内容，盗版必究。放到原始引用的位置

原创内容，盗版必究。

【作者：唐霜】

客户端：模块间的引用是一种软引用，从而能【原创内容，转载请注明出处】未经授权，禁止复制转载。够保证模块引用发生变化时，其他模块再次获本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】得该模块的接口时，获得的是新模块的接口

【作者：唐霜】

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

【关注微信公众号：wwwtangshuangnet】

客户端：调用update方法，重新执行引转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。用新Module的代码，从而使界面更新。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】这个update过程，可能需要开发者自己【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。写代码来确定自己要调用哪个方法来更新界面【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net。

【作者：唐霜】

原创内容，盗版必究。

无论如何，通过HMR，我们可以让用户看到【原创不易，请尊重版权】【本文受版权保护】的界面可以快速更新到最新代码想要得到的效【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】果，这对于我们开发者而言，在开发调试阶段著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】可以说是一把锋利的宝剑，为我们节省非常多原创内容，盗版必究。【本文受版权保护】时间。

HMR状态丢失问题

如果你理解了 a() 被重载后执行来覆盖著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net界面的本质，那么也就会发现，假如某些东西本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】我们依赖的是 a() 内部的状态，那么【转载请注明来源】本文版权归作者所有，未经授权不得转载。a() 被重载执行之后，原来的状态就会丢原创内容，盗版必究。【原创不易，请尊重版权】失。我们来举个例子：

function a() {
  let state = { value: 1 }
  html`
    <span>${state}</span>
    <input :bind=${state} />
  `
}

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

function a() {
  let state = { value: 1 }
  html`
    <span>now: ${state}</span>
    <input :bind=${state} />
  `
}

我们就会发现，a() 运行后，state【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】回到了1，这也就导致now: 后面是1【版权所有，侵权必究】【未经授权禁止转载】，但实际上我们希望它保持我们上一次输入的本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net值，这也就是状态丢失了。怎么办呢？我们只【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。要确保 state 是在 a() 外面定原创内容，盗版必究。未经授权，禁止复制转载。义即可解决这个问题。

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

在HMR的实际案例中，这种情况非常常见，【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】因为作为HMR的提供者，是无法确保状态被著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net用在什么地方的。因此，我们很少在实际生产【原创不易，请尊重版权】【本文受版权保护】环境使用HMR，更多是在开发环境中使用它【原创不易，请尊重版权】未经授权，禁止复制转载。。

超俗释然：esbuild、vite等新事物

人世间事，或重如泰山，或若有若无。不以物【本文受版权保护】著作权归作者所有，禁止商业用途转载。喜，为己所为，行万里路，秉初始心。
原创内容，盗版必究。未经授权，禁止复制转载。

其他原生语言开发前端工具链

2020年开始，前端社区出现了用其他语言【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】开发前端工具链工具的现象，到2021-2本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net022这一现象骤然火爆，并引发了新一代前【未经授权禁止转载】【原创不易，请尊重版权】端工具链都是由其他语言，甚至更低层的ru【原创不易，请尊重版权】【版权所有，侵权必究】st等系统级语言来开发的讨论。在这些讨论未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net之下，总有一种前端快失业的错觉。用其他原本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net生语言来编写前端工具链主要有两个点：1.【本文受版权保护】本文版权归作者所有，未经授权不得转载。现代前端开发非常依赖工具链，随着这些工本文版权归作者所有，未经授权不得转载。【本文受版权保护】具越来越臃肿，作为工具，运行越来越慢，已【本文受版权保护】著作权归作者所有，禁止商业用途转载。经无法适应前端开发的快节奏；2. 此前所【本文受版权保护】未经授权，禁止复制转载。有前端工具都是由js写成，部分通过nod未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ejs调用c/c++模块，这导致了这些工【转载请注明来源】【版权所有，侵权必究】具慢，而使用其他更低层的语言来编写，可以【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net成百倍的提升其运行性能。

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

其中，esbuild和SWC就是典型代表原创内容，盗版必究。原创内容，盗版必究。。ESBuild是Figma前CTO E未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。van Wallace基于GO语言开发，原创内容，盗版必究。【原创内容，转载请注明出处】用于实现类似webpack一样的打包工具转载请注明出处：www.tangshuang.net【转载请注明来源】。由于GO语言原生支持高并发，因此，es本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】build中的任务可以被拆分并行，同时，未经授权，禁止复制转载。【未经授权禁止转载】由于完全摒弃了JS社区，没有任何历史包袱【关注微信公众号：wwwtangshuangnet】【本文受版权保护】，因此，其整体设计和架构都更加现代化，更【本文首发于唐霜的博客】原创内容，盗版必究。不会出现webpack工具链中多个ast转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】串来串去的情况。SWC是由Rust语言实【原创不易，请尊重版权】原创内容，盗版必究。现的类似babel的编译器，不过它的官方原创内容，盗版必究。【转载请注明来源】网站上并没有详细阐述其内部实现，只提到了【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。比JS的单线程而言，它具有并发优势。

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

由此可见，通过其他语言来开发前端工具链，著作权归作者所有，禁止商业用途转载。【本文受版权保护】最主要的一点，是绕开了JS单线程的缺点，本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】同时原生语言更接近底层，不需要一个运行时未经授权，禁止复制转载。【版权所有，侵权必究】，减少了额外的开销，因此性能上更优。但是【本文受版权保护】【版权所有】唐霜 www.tangshuang.net不可否认的一点是，这些其他语言写就的工具转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。，由于缺乏JS社区的支持，未来如何发展还转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。很难讲，因为JS社区是非常活跃的，要让这未经授权，禁止复制转载。【本文首发于唐霜的博客】些前端开发者切换语言去为其他语言的工具贡未经授权，禁止复制转载。未经授权，禁止复制转载。献，可能并不是一件容易的事。

bundless

2021年，vue的作者尤雨溪在状态中称著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】vite将超越webpack，而在202【本文首发于唐霜的博客】【本文首发于唐霜的博客】2年它也确实做到了非常大的占有率，甚至它转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】的前辈snowpack都直接在自己的官网【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。上推荐自己的用户去使用vite，要知道n著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】owpack可以说是bundless的先【转载请注明来源】【原创不易，请尊重版权】驱，vite就是受其启发而创建的。

所谓bundless，简单讲，就是我们尽本文版权归作者所有，未经授权不得转载。【本文受版权保护】量不要去做类似webpack一样的打包，【作者：唐霜】【本文首发于唐霜的博客】让我们的代码直接运行起来。没有了打包这个原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。过程，其速度自然就快了很多。vite作为【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】今年最热门的工具项目，它有自己的一些优势【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】。vite是如何做到比webpack快的著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。呢？对于webpack-dev-serv本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。er而言，要在本地启动一个服务作为开发的【原创内容，转载请注明出处】未经授权，禁止复制转载。预览服务，它必须进行一次webpack的【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】打包过程，我们前文已经讲过，webpac【未经授权禁止转载】【作者：唐霜】k其实是很慢的，虽然webpack-de转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】v-server采用了内存文件系统，但是【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。架不住其计算过程控制流太长太不可控，所以未经授权，禁止复制转载。未经授权，禁止复制转载。仍然会比较慢，开发者修改完代码之后，无法【本文首发于唐霜的博客】【未经授权禁止转载】尽快看到修改后的效果。而vite则在本地著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。服务中不执行打包过程，它基于ES原生的M【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。odule系统，也就是import fr【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】om语法在浏览器中的原生支持，让浏览器自著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。己去请求一个依赖，而请求的依赖实际上是向本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。vite本地服务的一个url地址发起请求本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。，vite本地服务在接收到这个请求之后，【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。立马对该请求所对应的文件进行编译和输出，【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】这个效率和我们经常提到的SSR差不多，这本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】也就让vite在第一次打开时比webpa原创内容，盗版必究。【原创内容，转载请注明出处】ck快了n倍，因为对于vite而言，第一转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。次打开时，要做的事情非常少，只需要起一个【作者：唐霜】未经授权，禁止复制转载。服务，把被访问的脚本编译完吐出就可以了，著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】在页面发生变化的时候，新的请求过来，才会【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。执行新的编译。

虽然vite在开发时效率极高，但是并不代【版权所有，侵权必究】未经授权，禁止复制转载。表它就是前端工具的终极形态，bundle【原创内容，转载请注明出处】【本文受版权保护】ss在浏览器原生支持import的今天，未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。其实是非常尴尬的，我们很难预判在不久的将【原创内容，转载请注明出处】【原创不易，请尊重版权】来，我们还需要bundless，我们可能未经授权，禁止复制转载。【版权所有，侵权必究】只需要浏览器就可以了。

【作者：唐霜】【未经授权禁止转载】

结语

行文至此，我已经把自己在前端开发领域所积【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。累的大部分有关性能的知识都讲了一遍，有些著作权归作者所有，禁止商业用途转载。【本文受版权保护】部分细，有的部分点到为止，有些内容没有讲【未经授权禁止转载】【版权所有，侵权必究】（如使用nodejs进行后端开发时遇到的著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。性能问题），不过对于完整阅读完本册的朋友【本文受版权保护】【原创不易，请尊重版权】而言，我想你应该能隐约感受到，万变不离其【原创不易，请尊重版权】【本文受版权保护】宗，前端的性能问题主要是加载、渲染、内存【本文首发于唐霜的博客】【本文首发于唐霜的博客】占用、算法（本质是内存和CPU占用）、架【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。构设计等方面的知识，慢慢理顺之后，无非如【本文受版权保护】本文版权归作者所有，未经授权不得转载。此。虽然本册提供了非常多的优化建议，但是著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】它们都不是一尘不变的，有的会随着浏览器、著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】运行环境的发展逐渐没用，有的则需要在日常【本文受版权保护】【版权所有】唐霜 www.tangshuang.net开发中根据自己的情况进行策略调整。我仍然【版权所有，侵权必究】转载请注明出处：www.tangshuang.net认为，虽然前端性能问题涉及的内容很多，但【转载请注明来源】未经授权，禁止复制转载。是，在真正的工作中被用到的其实不多，因为未经授权，禁止复制转载。【本文首发于唐霜的博客】我们在完成业务时，往往需要先实现业务本身【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】的目标，然后再来考虑性能，甚至大部分情况转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。下，根本不会考虑性能，直到用户使用过程中【版权所有，侵权必究】【原创不易，请尊重版权】出现了卡顿时，才会回头去关注，而性能问题原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。又没有安全问题那么致命，即使我们应该为了著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。性能进行重构，但在大部分情况下，我们也只本文版权归作者所有，未经授权不得转载。【转载请注明来源】会通过补丁的形式优化局部的性能问题。基于原创内容，盗版必究。原创内容，盗版必究。这样的现实，我还是希望读者朋友能够养成良未经授权，禁止复制转载。【作者：唐霜】好的习惯，能够在写代码时时刻记住性能问题【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。，有些高性能的代码就是随手写的，但是如果本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。你此刻忽视了，等回头再来优化时，就不得不转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net费非常大的力气。我比较推荐阅读《高性能J【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】avascript》一书，原因是它非常薄本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，利用闲暇时间很快就能读完，通过不断实践本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 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 获取更多精彩内容】【本文受版权保护】【本文首发于唐霜的博客】【本文受版权保护】【转载请注明来源】【原创内容，转载请注明出处】

唐霜

前端性能优化深入浅出

前言

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

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

性能问题的分类

建立性能指标体系

First Contentful Paint (FCP)

Largest Contentful Paint(LCP)

First Input Delay(FID)

Time to Interactive(TTI)

Total Blocking Time(TBT)

Cumulative Layout Shift(CLS)

Frame Per Second(FPS)

前端性能监控

诊断性能问题的方法

可视工具诊断

埋点诊断

Benchmark诊断

注入诊断

复杂度诊断

心理建设

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

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

浏览器加载资源的流程

哪些加载会阻塞渲染？

加载优化技巧

优先级加载顺序

预加载

预请求

懒加载

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

构建打包

分包

按需加载

至无化有：优化资源体积

代码压缩

图片资源优化

用css绘制图片

善用srcset属性

挑选适合的图片格式

图片压缩

尺寸缩放

使用base64地址

使用视频替换gif图

Sprite雪碧图

字体资源优化

压缩上传

分片上传

M3U8视频格式

寒阳三式：网络优化

网络请求优化

HTTP缓存

CDN

HTTP2

WebSocket/WebRTC

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

PWA

ServiceWorker

Workbox

微前端

小程序

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

浏览器渲染流程

浏览器线程详解

初出茅庐：页面结构优化

HTML结构优化

SVG渲染原理与优化

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

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

节流防抖

虚拟视口技术

requestIdleCallback

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

基于WebWorker完成大计算

基于WebAssembly处理计算

基于GPU处理计算

优化线程间消息传递

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

关于V8