{"id":28756823,"url":"https://github.com/wx-chevalier/web-tuning-notes","last_synced_at":"2025-06-17T03:08:53.096Z","repository":{"id":39256826,"uuid":"378025344","full_name":"wx-chevalier/Web-Tuning-Notes","owner":"wx-chevalier","description":"Web 性能优化系列：浏览器工作机制、性能优化、体验度量、PWA、录屏与重放","archived":false,"fork":false,"pushed_at":"2023-09-23T08:22:31.000Z","size":216,"stargazers_count":58,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T21:40:01.432Z","etag":null,"topics":["web","web-performance"],"latest_commit_sha":null,"homepage":"https://ng-tech.icu/books/Web-Tuning-Series","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wx-chevalier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-18T03:38:52.000Z","updated_at":"2024-04-12T09:28:00.000Z","dependencies_parsed_at":"2022-07-26T01:02:39.434Z","dependency_job_id":null,"html_url":"https://github.com/wx-chevalier/Web-Tuning-Notes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wx-chevalier/Web-Tuning-Notes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2FWeb-Tuning-Notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2FWeb-Tuning-Notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2FWeb-Tuning-Notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2FWeb-Tuning-Notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wx-chevalier","download_url":"https://codeload.github.com/wx-chevalier/Web-Tuning-Notes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wx-chevalier%2FWeb-Tuning-Notes/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260281524,"owners_count":22985630,"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":["web","web-performance"],"created_at":"2025-06-17T03:08:52.575Z","updated_at":"2025-06-17T03:08:53.084Z","avatar_url":"https://github.com/wx-chevalier.png","language":"HTML","readme":"[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![license: CC BY-NC-SA 4.0](https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey.svg)][license-url]\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/wx-chevalier/Web-Engineering-Notes\"\u003e\n    \u003cimg src=\"https://assets.ng-tech.icu/item/header.svg\" alt=\"Logo\" style=\"width: 100vw;height: 400px\" /\u003e\n  \u003c/a\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://ng-tech.icu/books/Web-Engineering-Notes\"\u003e\u003cstrong\u003e在线阅读 \u003e\u003e \u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/wx-chevalier\"\u003e代码实践\u003c/a\u003e\n    ·\n       \u003ca href=\"https://github.com/wx-chevalier/Awesome-Lists\"\u003e参考资料\u003c/a\u003e\n\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n# Introduction | 前言\n\n\u003e 本篇承接自《[Web-Notes](https://github.com/wx-chevalier/Web-Notes?q=)》，想要了解 Web 开发基础知识请移步。\n\n从桌面浏览器到移动互联网的时代，用户体验毫无疑问都是重中之重，而 Web 页面的性能则是整体体验的基础。所谓高性能的网站，直观来说，即是用户能够快速打开页面展示网页内容，并能流畅的浏览网页，同时尽可能地降低页面资源占用。移动端的硬件条件，网络条件相对于桌面端，会复杂的多，设备类型多样，硬件配置参差不齐，分辨率碎片化，网络状况在移动过程中稳定性，速率都会变化，而对于一个页面到达用户的终端展示，会经过，用户发起请求，服务端接受请求，服务端处理请求，返回响应内容，在用户终端的浏览器展示内容，用户操作页面发起其他页面时间，而这个过程中任何一个环节的延迟都会造成性能瓶颈，降低用户继续访问的可能性，所以我们在服务器端，浏览器端，网络加载，多个方面做了一系列的优化工作。\n\n![Web 性能调优思维脑图](https://assets.ng-tech.icu/item/20230512204427.png)\n\n随着应用复杂度的不断增加，我们发现脚本解析与处理的瓶颈在于脚本的下载与 CPU 执行这两个阶段：而当 CPU 忙于执行 JavaScript 的时候，自然会难以及时响应用户的操作，从而造成卡顿的感觉。因此，这个阶段我们优化的重点就是网络下载以及脚本执行。\n\n- 对于降低下载时间，保持 JavaScript 包的小巧，特别是对于移动设备。小型捆绑包可提高下载速度，降低内存使用率并降低 CPU 成本。避免只有一个大捆; 如果捆绑超过~50-100 kB，则将其拆分为单独的较小捆。通过 HTTP/2 多路复用，可以同时传输多个请求和响应消息，从而减少额外请求的开销。在移动设备上，你会希望运输更少，特别是因为网络速度，但也保持低内存使用率。\n\n- 对于脚本执行效率的优化，避免长期任务可以使主线程保持忙碌，并可以推断出页面交互的时间。下载后，脚本执行时间现在是主要成本。避免使用大型内联脚本（因为它们仍然在主线程上进行了解析和编译）。一个好的经验法则是：如果脚本超过 1 kB，请避免内联（也因为 1 kB 是代码缓存为外部脚本启动时）。\n\n总的优化策略会从资源请求与缓存、关键渲染路径、图片优化、脚本解析与执行、页面布局与渲染策略、交互与动画、移动端优化、PWA 等几个角度进行考虑。如果您想尽快了解优化清单，请参阅《[Awesome-CheatSheets/Web-Tuning-CheatSheet](https://github.com/wx-chevalier/Awesome-CheatSheets?q=)》\n\n# Links\n\n- https://zhuanlan.zhihu.com/p/66398148\n- https://mp.weixin.qq.com/s/vEO4r3-pSROgBzOQjzjV3A 深度解读当代前端架构进化史，下一个趋势在哪？\n\n## Nav | 关联导航\n\n# About | 关于\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n\n## Acknowledgements\n\n- [Awesome-Lists](https://github.com/wx-chevalier/Awesome-Lists): 📚 Guide to Galaxy, curated, worthy and up-to-date links/reading list for ITCS-Coding/Algorithm/SoftwareArchitecture/AI. 💫 ITCS-编程/算法/软件架构/人工智能等领域的文章/书籍/资料/项目链接精选。\n\n- [Awesome-CS-Books](https://github.com/wx-chevalier/Awesome-CS-Books): :books: Awesome CS Books/Series(.pdf by git lfs) Warehouse for Geeks, ProgrammingLanguage, SoftwareEngineering, Web, AI, ServerSideApplication, Infrastructure, FE etc. :dizzy: 优秀计算机科学与技术领域相关的书籍归档。\n\n## Copyright \u0026 More | 延伸阅读\n\n笔者所有文章遵循[知识共享 署名 - 非商业性使用 - 禁止演绎 4.0 国际许可协议](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh)，欢迎转载，尊重版权。您还可以前往 [NGTE Books](https://ng-tech.icu/books-gallery/) 主页浏览包含知识体系、编程语言、软件工程、模式与架构、Web 与大前端、服务端开发实践与工程架构、分布式基础架构、人工智能与深度学习、产品运营与创业等多类目的书籍列表：\n\n[![NGTE Books](https://s2.ax1x.com/2020/01/18/19uXtI.png)](https://ng-tech.icu/books-gallery/)\n\n# Links\n\n- [支付宝前端应用架构的发展和选择](https://github.com/sorrycc/blog/issues/6)\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\n[contributors-shield]: https://img.shields.io/github/contributors/wx-chevalier/Web-Engineering-Notes.svg?style=flat-square\n[contributors-url]: https://github.com/wx-chevalier/Web-Engineering-Notes/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/wx-chevalier/Web-Engineering-Notes.svg?style=flat-square\n[forks-url]: https://github.com/wx-chevalier/Web-Engineering-Notes/network/members\n[stars-shield]: https://img.shields.io/github/stars/wx-chevalier/Web-Engineering-Notes.svg?style=flat-square\n[stars-url]: https://github.com/wx-chevalier/Web-Engineering-Notes/stargazers\n[issues-shield]: https://img.shields.io/github/issues/wx-chevalier/Web-Engineering-Notes.svg?style=flat-square\n[issues-url]: https://github.com/wx-chevalier/Web-Engineering-Notes/issues\n[license-shield]: https://img.shields.io/github/license/wx-chevalier/Web-Engineering-Notes.svg?style=flat-square\n[license-url]: https://github.com/wx-chevalier/Web-Engineering-Notes/blob/master/LICENSE.txt\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwx-chevalier%2Fweb-tuning-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwx-chevalier%2Fweb-tuning-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwx-chevalier%2Fweb-tuning-notes/lists"}