{"id":20114609,"url":"https://github.com/alienzhou/fe-performance-journey","last_synced_at":"2025-04-06T07:14:55.568Z","repository":{"id":40606282,"uuid":"201038408","full_name":"alienzhou/fe-performance-journey","owner":"alienzhou","description":"🚵 a Journey of Performance Optimizing in Frontend 🚀","archived":false,"fork":false,"pushed_at":"2022-12-11T06:03:57.000Z","size":38693,"stargazers_count":356,"open_issues_count":22,"forks_count":55,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-30T06:07:46.246Z","etag":null,"topics":["frontend","guide","handbook","optimization","performance","performance-analysis"],"latest_commit_sha":null,"homepage":"https://alienzhou.com/projects/fe-performance-journey/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alienzhou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-07T11:39:42.000Z","updated_at":"2025-03-12T08:14:24.000Z","dependencies_parsed_at":"2023-01-26T16:45:35.773Z","dependency_job_id":null,"html_url":"https://github.com/alienzhou/fe-performance-journey","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Ffe-performance-journey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Ffe-performance-journey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Ffe-performance-journey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alienzhou%2Ffe-performance-journey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alienzhou","download_url":"https://codeload.github.com/alienzhou/fe-performance-journey/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445681,"owners_count":20939961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","guide","handbook","optimization","performance","performance-analysis"],"created_at":"2024-11-13T18:30:48.316Z","updated_at":"2025-04-06T07:14:55.545Z","avatar_url":"https://github.com/alienzhou.png","language":"JavaScript","readme":"# 🚵 前端性能优化之旅\n\n![intro](./img/intro.jpg)\n\n## 前端需要性能优化么？\n\n性能优化一直以来都是前端工程领域中的一个重要部分。很多资料\u003csup\u003e[1]\u003c/sup\u003e\u003csup\u003e[2]\u003c/sup\u003e\u003csup\u003e[3]\u003c/sup\u003e表明，网站应用的性能（加载速度、交互流畅度）优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。\n\n性能优化广义上会包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms 的响应优化缩减 80%(10ms) 相比，用户的体验提升会更大。因此很多时候，与体验相关的性能的瓶颈会出现在前端。\n\n\u003e 当然后端性能优化非常重要，正如上面所说，它们的关注点可能不同。前端类似于最后一公里，由于和用户最近，所以性能问题会直接影响到用户体验。这一系列文章关注点会放在“前端性能优化”上。\n\n![waterfall](./img/waterfall.jpg)\n\n## 如何学习前端性能优化？\n\n在我和一些同学接触的过程中，发现作为前端工程师，大家其实都具备一定的性能优化意识，同时也有自己的优化“武器库”，例如懒加载、资源合并、避免 reflow 等等。虽然大家对性能优化都有自己的思路，不过大多是分散在某几个点，较难形成一个完整的体系。业界也有很多优质的资料，例如[雅虎的性能优化 35 条](https://github.com/creeperyang/blog/issues/1)\u003csup\u003e[4]\u003c/sup\u003e，但是**性能优化作为一个系统性工程**，大家想要系统性地去学习并不容易。\n\n从用户开始来访问你的网站应用，到最终它在上面浏览信息、操作交互，其间经历了非常多的环节，每个环节都有可能出现性能问题，同时也是我们实现性能提升机会。所以，前端性能优化会要求你从整体维度来分析系统，甚至是业务。\n\n那么如何能够更有效地梳理与理解性能优化呢？回想到每每面试都会被问到：“从地址栏输入XXX到访问之间经历了什么？”其实我们也可以从这个视角来看待性能优化。\n\n从访问开始，用户可能会经历类似「查询缓存 -\u003e 发送请求 -\u003e 等待响应 -\u003e 页面解析 -\u003e 下载并处理各类静态资源 -\u003e 运行时 -\u003e 预加载（等待后续的请求）」这样一个不断往复的“旅程” —— 也就是我们的「性能优化之旅」。Web 应用在其中每一站都可能遇到性能问题，当然也会有对应的优化手段。\n\n所以在这次的「性能优化之旅」会沿着这条路径具体介绍每个环节中常见的性能问题以及优化技术。通过与 Web 应用的访问流程相结合，帮助大家全面理解与掌握前端的性能优化。\n\n如果准备好了，咱们就可以出发了 ——\n\n[第一站 - 缓存 🔜](./1-cache/README.md)\n\n## 旅途的行程路线\n\n\u003e 喜欢的朋友可以给个 `star` 支持一下。想订阅可以 `watch` 一下。\n\n下面是本次「性能优化之旅」的行程路线（大纲）👇\n\n\u003cdetails\u003e\n\u003csummary\u003e（想直接了解某部分内容也可以点开这个“行程表”）\u003c/summary\u003e\n\n- [第一站 - 缓存](./1-cache/README.md)\n- [第二站 - 发送请求](./2-request/README.md)\n- [第三站 - 服务端处理](./3-response/README.md)\n- [第四站 - 下载与解析页面](./4-parse/README.md)\n- [第五站 - 页面静态资源](./5-subresources/README.md)\n  - [JavaScript](./5-subresources/javascript.md)\n  - [CSS](./5-subresources/css.md)\n  - [图片](./5-subresources/image.md)\n  - [字体](./5-subresources/font.md)\n  - [视频](./5-subresources/video.md)\n- [第六站 - 运行时](./6-runtime/README.md)\n- [第七站 - 预加载](./7-preload/README.md)\n- [尾声](./END.md)\n- TODO:\n  - 性能指标\n  - 性能监控\n\n\u003c/details\u003e\n\n![overall](./img/overall.svg)\n\n[\u003e\u003e 去站点阅读 \u003e\u003e](https://alienzhou.github.io/fe-performance-journey/)\n\n## 参考资料\n\n1. [Driving user growth with performance improvements](https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7)\n1. [How Fast Should A Website Load in 2019?](https://www.hobo-web.co.uk/your-website-design-should-load-in-4-seconds/)\n1. [How long will you wait for a shopping website to load?](https://www.bbc.com/news/business-37100091)\n1. [Best Practices for Speeding Up Your Web Site (Yahoo)](https://github.com/creeperyang/blog/issues/1)\n1. [17 Things People Absolutely Hate About Your Website](https://blog.hubspot.com/blog/tabid/6307/bid/32307/15-things-people-absolutely-hate-about-your-website.aspx)\n1. [Why Performance Matters](https://developers.google.com/web/fundamentals/performance/why-performance-matters/)\n\n---\n\n除注明外，本仓库内文章均采用 [Creative Commons BY-NC-ND 4.0](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh) 协议。\n\n![license](./img/license.jpg)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falienzhou%2Ffe-performance-journey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falienzhou%2Ffe-performance-journey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falienzhou%2Ffe-performance-journey/lists"}