{"id":13672428,"url":"https://github.com/ouvens/frontend-system-map","last_synced_at":"2025-05-16T19:00:28.076Z","repository":{"id":93556845,"uuid":"50400463","full_name":"ouvens/frontend-system-map","owner":"ouvens","description":"init","archived":false,"fork":false,"pushed_at":"2018-01-04T02:04:06.000Z","size":6121,"stargazers_count":1353,"open_issues_count":5,"forks_count":274,"subscribers_count":143,"default_branch":"master","last_synced_at":"2025-03-31T13:15:20.345Z","etag":null,"topics":["front-end","front-end-system"],"latest_commit_sha":null,"homepage":null,"language":null,"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/ouvens.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,"governance":null}},"created_at":"2016-01-26T03:28:44.000Z","updated_at":"2025-03-19T08:06:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"77af3614-850e-4202-bff1-46a4224c6dc1","html_url":"https://github.com/ouvens/frontend-system-map","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ouvens%2Ffrontend-system-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ouvens%2Ffrontend-system-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ouvens%2Ffrontend-system-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ouvens%2Ffrontend-system-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ouvens","download_url":"https://codeload.github.com/ouvens/frontend-system-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247666008,"owners_count":20975787,"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":["front-end","front-end-system"],"created_at":"2024-08-02T09:01:35.416Z","updated_at":"2025-04-07T14:10:54.589Z","avatar_url":"https://github.com/ouvens.png","language":null,"readme":"\n\u003ca href=\"https://search.jd.com/Search?keyword=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90\u0026enc=utf-8\u0026wq=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90\u0026pvid=fcced0a32e8b43de8b93fca570a93130\"\u003e\u003cimg src=\"http://7tszky.com1.z0.glb.clouddn.com/Fm9f00eiJ4OMozFXeNUKwurzVzo1\" title=\"现代前端技术解析\" width=\"50%\"\u003e\u003c/a\u003e \u0026emsp;\u0026emsp;首先肯定是一本好书啦，[查看豆瓣评分](https://book.douban.com/subject/27021790/)\n\n\n\u0026emsp;\u0026emsp;2017年很快又过去了几个月，在过去的一年里，前端技术迅猛发展，前端各类技术都在优化升级，\"大前端\"的概念进一步体现，前端人才需求量进一步扩大，但优秀的前端工程师却如大海捞针，一将难求，那么在未来一年里我们应该做好怎样的准备才能成为一名优秀(不仅仅是合格)的前端工程师呢？\n\n####  一 、现代前端技术知识体系\n\n\u0026emsp;\u0026emsp;我们先看看2017～2018前端技术知识体系图，这也是现代前端技术体系结构图的第二版。\n\n![](https://raw.githubusercontent.com/ouvens/frontend-system-map/master/%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90_V2%40%E9%AB%98%E6%B8%85.jpg)\n\n[查看code部分下载大图]\n\n\u0026emsp;\u0026emsp;大家也可以对比2016年的知识技术体系来看看：[2015-2016前端知识体系](http://jixianqianduan.com/frontend-resource/2016/01/26/front-end-learning-list.html)。在这次更新中，主要完善了原有的部分知识内容的原理解析，增加了新的领域内容。\n\n\u0026emsp;\u0026emsp;可能大家觉得体系图中内容还是过于抽象，没有有经验的人带，仍不能在实践中深入学习，或者需要自己花更多的时间搜索资料才能了解，亦或是网上的学习资料不够全面深入。\n\n\u0026emsp;\u0026emsp;幸运的是，对于现代前端技术知识体系图，现在已经推出了[《现代前端技术解析》](https://search.jd.com/Search?keyword=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90\u0026enc=utf-8\u0026pvid=1d4c950a6df34530b1fc1585ca7e011f)一书，针对2017年～2018年前端技术知识体系内容深入原理，展开剖析，体系化、全面地帮助前端读者们解决了这些问题。我们不妨先来看看[本书目录](https://github.com/ouvens/frontend-system-map/blob/master/v2/%E3%80%8A%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90%E3%80%8B%E7%9B%AE%E5%BD%95.pdf)（打不开看[这个链接](http://pan.baidu.com/s/1i4NMvQl)），再回头来看。\n\n\n####  二、《现代前端技术解析》适读人群\n\n\u0026emsp;\u0026emsp;前端入门极其简单，但要学习提升成为一名优秀的前端的工程师又极其不易，因为涉及的技术点很多，我们往往需要阅读很多书籍才能理解前端技术的知识体系。这本书在前端知识体系上做了很好的总结和梳理，涵盖了现代前端技术绝大部分的知识内容，起到一个启蒙作用，能帮助读者快速把握前端技术的整个脉络，培养更完善的体系化思维，掌握更多灵活的前端代码架构方法，能够帮助读者获得成为前端高级工程师或架构师所必须具备的思维和能力。\n\n\u0026emsp;\u0026emsp;同时，本书是来自一位腾讯一线前端工程师的工作经验和技术成长梳理总结，于2017年4月底正式发售，是一本全部由阿里、腾讯前端团队多位技术管理和技术专家一起审稿推荐完成的**前端思维体系成长进阶必读书**，融合了业内极其全面的前端知识技术实践经验。如果您不确定买不买，也可以先看看[本书目录](https://github.com/ouvens/frontend-system-map/blob/master/v2/%E3%80%8A%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90%E3%80%8B%E7%9B%AE%E5%BD%95.pdf)（打不开看[这个链接](http://pan.baidu.com/s/1i4NMvQl)）。\n\n---\n\n\u0026emsp;\u0026emsp;\u003ca target=\"_blank\" href=\"http://www.broadview.com.cn/book\"\u003e\u003cimg src=\"http://7tszky.com1.z0.glb.clouddn.com/FqLAMLFJ9gI3g2xHqyH_-xG0wBPH\" title=\"点击查看更多前端书籍\" width=\"240\"/\u003e\u003c/a\u003e\n\n---\n\n\u0026emsp;\u0026emsp;\u003ca target=\"_blank\" href=\"https://search.jd.com/Search?keyword=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90\u0026enc=utf-8\u0026wq=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90\u0026pvid=fcced0a32e8b43de8b93fca570a93130\"\u003e\u003cimg src=\"http://7tszky.com1.z0.glb.clouddn.com/FgJZKAoJKAjGJsSt6h4Q8fLrSIqV\" title=\"点击进入京东购买\" width=\"240\"/\u003e\u003c/a\u003e\n\u0026emsp;\u0026emsp;\u003cfont color=\"red\"\u003e （折后约 \u0026yen; 50 ~ \u0026yen; 65）\u003c/font\u003e\n\n\u0026emsp;\u0026emsp;[进入京东购买](https://search.jd.com/Search?keyword=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90\u0026enc=utf-8\u0026wq=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90\u0026pvid=fcced0a32e8b43de8b93fca570a93130) \u0026emsp;\u0026emsp;[进入淘宝购买](https://s.taobao.com/search?q=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90\u0026imgfile=\u0026commend=all\u0026ssid=s5-e\u0026search_type=item\u0026sourceId=tb.index\u0026spm=a21bo.50862.201856-taobao-item.1\u0026ie=utf8\u0026initiative_id=tbindexz_20170417) \u0026emsp;\u0026emsp;[进入亚马逊购买](https://www.amazon.cn/s/ref=nb_sb_noss?__mk_zh_CN=%E4%BA%9A%E9%A9%AC%E9%80%8A%E7%BD%91%E7%AB%99\u0026url=search-alias%3Dstripbooks\u0026field-keywords=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90)\n\n---\n\n\u0026emsp;\u0026emsp;《现代前端技术解析》适合以下几类读者阅读：\n\n1. **针对想进入阿里、腾讯工作的求职者**。项目做过很多，但面试总是悲剧，因为面试官一言不和就问你实现原理和解决方案，但你最擅长的可能是编代码。那么这本书能全面帮助你了解前端各方面的技术原理和实现机制，深入底层细节，让你对前端的理解不只是停留在代码层面面，更加轻松通过阿里、腾讯的技术面试。当然校招应届生更应该买来看看，提升竞争力。\n\n2. **针对刚入门的初学者**。前端学习入门非常简单，但是进阶的道路非常漫长，不是折腾了几个框架就能深入学习的，入门后没有明确的方向指导，将可能一直停留在初级阶段。那么这本书能以一个更高的层面引导刚入门的学习者，应该具有怎样的前端视野和学习范畴。\n\n3. 针对**想要进一步学习前端进阶技能的职业者**，例如框架设计原理、架构设计原理等，想要报班学习或购买视频课程，但是培训报名费过极其昂贵（例如一般一套前端进阶课程一般在**\u0026yen;15000元**以上）。前端技术发展很快，但是万变不离其宗。现在只需要低价购买这本书籍，自己静心学习，理解其中的原理，就能在学习时触类旁通各类相关技术，知识内容性价比高出几十倍百倍。\n\n4. 在前端开发上**具有一定基础和开发经验**，但是对现代前端技术知识体系认识不够前面，**不够深入的开发者**。也可以通过此书快速了解主流技术框架和架构的设计原理，加速前端的学习过程，让学习的时间事半功倍。\n\n5. **对于进阶培训班的讲师或企业前端培训讲师**。每节课程都需要去开发整理课件，很花时间，但是课件又过于抽象，如果没人讲解，不易于重复学习和传播。那么这本书就能很有用地帮助你规划教学路径，让您更轻松、更详细地展开进阶教学内容，也能帮助学员们有书可读，有书可依。\n\n\u0026emsp;\u0026emsp;当然，如果你还是刚要入门的学习者，还没接触过前端，但是想要学习前端。那么，我也推荐你先学习另一个前端基础知识体系结构图来开始，加上一两个的项目实践，再来进阶学习2017年～2018年前端技术知识体系内容。[查看前端基础知识结构图](https://github.com/ouvens/frontend-system-map/blob/master/%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E5%9F%BA%E7%A1%80%E7%AF%87.png)\n\n\u0026emsp;\u0026emsp;新手推荐基础参考资料：[www.w3cschool.cn](http://www.w3cschool.cn/html/)，而不是 http://www.w3school.com.cn/ 哦。\n\n#### 三、对于此书，看看腾讯、阿里的大牛怎么说\n\n\u0026emsp;\u0026emsp;近几年前端技术发展迅猛，前端人才的需求急剧增加。本书从一名一线专业前端从业者的角度，面面俱到地给大家剖析了当前Web前端所需要具备的各种现代技术。无论是从网络、浏览器还是从工程化、团队协作的角度都给出了非常好的呈现，非常值得大家阅读。\n\u003cdiv style=\"color:#f90;text-align:right;\"\u003e--郭学亨(Henry)，腾讯前端IMWeb团队负责人\u003c/div\u003e\n\n---\n\u0026emsp;\u0026emsp;近几年前端的书籍很少有全面而且深入介绍前端技术思想与理论相关的，大部分都是独立拆分介绍前端单点领域的技术栈。这本书以现代前端技术思想与理论为主，详细而且深入，但又通俗地向读者阐述了现代前端技术栈。不管对初学者还是中级者都是值得一读的好书，读者们可以通过本书快速领略到前端领域的深度和广度，把握整个前端技术领域所涵盖的绝大多数知识技术要点和发展方向，为未来深入学习前端知识提供指导和方向。\n\n\u003cdiv style=\"color:#f90;text-align:right;\"\u003e-- 大漠，W3cplus.com 站长\u003c/div\u003e\n\n---\n\n\u0026emsp;\u0026emsp;现如今前端已经不再是一种“新兴职业”，对技术系统且全面的追求愈显重要，但繁杂的技术体系及各种旁支经常让初学者无所适从；本书能从全局和主流的视野介绍前端职业工程师几乎涉猎的所有知识，并将前端工作中涉及到的解决方案分门别类，抽象成易于理解的思路；相信对前端感兴趣的读者能够借助这本难得的好书触类旁通，一帆风顺地推开通往前端界的神秘大门，快速地成为一位优秀的前端工程师。 \n\n\u003cdiv style=\"color:#f90;text-align:right;\"\u003e--许诺（Darksnow），阿里巴巴前端无线开发专家\u003c/div\u003e\n\n---\n\u0026emsp;\u0026emsp;本书从一名前端工程师的角度，梳理了现代前端所涉及的基础知识体系和原理性技术解析，包括开发方式的变更、前端框架的演进、前端跨栈技术以及未来的VR等等，契合当前流行的“大前端”概念，非常适合读者们扩宽个人知识面。另外作者本人在前端方面有很深的造诣，对目前的一些前端问题有深入的研究和个人独特的见解。相信读者朋友们一定能从本书中收获颇多。\n\n\u003cdiv style=\"color:#f90;text-align:right;\"\u003e--邓海龙(Helon)，腾讯前端IMWeb团队成员\u003c/div\u003e\n\n\n---\n\u0026emsp;\u0026emsp;前端技术日新月异且涉及的知识面较广泛。对于初学者，可能有不知从何学起、所学的东西是否已经过时的困惑；对于中级者，可能对某些知识的了解不够全面和深刻。本书从前端技术的发展历程到整体架构体系逐层展开，基本涵盖了现阶段的前端技能树，为前端学习者指明了方向；同时本书注重从原理的层面进行知识点的解析，万变不离其宗，各种框架或技术之间其很多思想是相通的，把握住这点，将对读者们后续的学习会更有帮助。 \n\u003cdiv style=\"color:#f90;text-align:right;\"\u003e---李双双(Lissa)，腾讯前端工程师\u003c/div\u003e\n\n---\n\u0026emsp;\u0026emsp; 申明：本文为半知识总结类文章，融合了知识技术体系总结，也向大家推荐了书籍，大家可以根据需要选择购买。对于前端学习者来说，相对于买一套昂贵的前端学习课程，购买一本课程内容的书更加实用，且可以用于反复学习，慢慢研究领悟，推荐买来看看，最后衷心祝各位前端learner们学有所成。\n\n[京东点击购买](https://search.jd.com/Search?keyword=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90\u0026enc=utf-8\u0026wq=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90\u0026pvid=fcced0a32e8b43de8b93fca570a93130) \u0026emsp;\u0026emsp;[淘宝点击购买](https://s.taobao.com/search?q=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90\u0026imgfile=\u0026commend=all\u0026ssid=s5-e\u0026search_type=item\u0026sourceId=tb.index\u0026spm=a21bo.50862.201856-taobao-item.1\u0026ie=utf8\u0026initiative_id=tbindexz_20170417) \u0026emsp;\u0026emsp;[亚马逊购买](https://www.amazon.cn/%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90-%E5%BC%A0%E6%88%90%E6%96%87/dp/B06Y5WBR7T/ref=sr_1_1?ie=UTF8\u0026qid=1492441680\u0026sr=8-1\u0026keywords=%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90)\n\n\u0026emsp;\u0026emsp;如果遇到什么问题，可以随时联系作者，发送邮箱 \u003ca href=\"mailto:ouvenzhang@qq.com\"\u003eouvenzhang@qq.com\u003c/a\u003e\n\n\u0026emsp;\u0026emsp;\u003ca target=\"_blank\" href=\"http://www.broadview.com.cn/book\"\u003e\u003cimg src=\"http://7tszky.com1.z0.glb.clouddn.com/FqLAMLFJ9gI3g2xHqyH_-xG0wBPH\" title=\"点击查看更多图书\" width=\"50%\"/\u003e\u003c/a\u003e\n\n","funding_links":[],"categories":["Others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fouvens%2Ffrontend-system-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fouvens%2Ffrontend-system-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fouvens%2Ffrontend-system-map/lists"}