├── LICENSE ├── README.md └── personal-experience.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Quincy Qiu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 前端图书馆 2 | 3 | A collection of resources for frontend learners 4 | 5 | 个人整理的前端学习资源。 6 | 7 | 个人上岸经验请看：[点我](https://github.com/quincy-chiu/my-frontend-library/blob/master/personal-experience.md) 8 | 9 | ## 开发语言相关 10 | 11 | ### CSS 12 | 13 | [CSS 基础拾遗](https://juejin.cn/post/6941206439624966152)：偏面经向，类似的文章掘金上还有很多，这里不多列举了 14 | 15 | [CSS-Tricks](css-tricks.com)：CSS爱好者聚集地，日更各种高质量CSS文章 16 | 17 | [CSS小样式效果实现集合](https://lhammer.cn/You-need-to-know-css/#/zh-cn/introduce?v=1)：一些常见的CSS效果的实现集合 18 | 19 | [CSS Grid Garden](https://cssgridgarden.com/)：学习Grid布局的小游戏 20 | 21 | [CSS Diner](https://flukeout.github.io/)：学习CSS选择器的小游戏 22 | 23 | [彻底搞懂word-wrap、white-space等](https://zhuanlan.zhihu.com/p/43601822) 24 | 25 | ### JavaScript 26 | 27 | [现代javascript教程](https://zh.javascript.info/)：帮助我0基础入门JS的在线书籍，可与红宝书配合食用。知识体系完备，融入ES6+语法标准，每一节都有相应的demo示例与配套作业，强力推荐👍。 28 | 29 | [32个手写JS](https://juejin.cn/post/6875152247714480136#heading-24)：面经向，JS手写系列集合 30 | 31 | [微任务、宏任务与Event-Loop](https://juejin.cn/post/6844903657264136200)：必须掌握的事件循环知识 32 | 33 | [JavaScript深入系列](https://github.com/mqyqingfeng/Blog#%E6%B7%B1%E5%85%A5%E7%B3%BB%E5%88%97)：国人写的JavaScript基础知识解读系列文章，质量还不错 34 | 35 | [JS中的继承方式](https://github.com/noahlam/articles/blob/master/JS%E4%B8%AD%E7%9A%84%E7%BB%A7%E6%89%BF(%E4%B8%8A).md)：了解JS中常见的继承实现方式 36 | 37 | [最全 ECMAScript 攻略](https://juejin.cn/post/6968269593206849572#heading-10) 38 | 39 | [2ality.com](https://2ality.com/index.html)：Dr.Axel的博客，有对于JS各种语法特性的深入探讨，以及他的提案，喜欢深入研究JS特性的同学可以阅读。 40 | 41 | ### TypeScript 42 | 43 | *TS相关知识面试一般不常考，但在企业实际工程中已有大量相关实践，可根据兴趣学习* 44 | 45 | [TypeScript中文手册](https://typescript.bootcss.com/)：官方参考书 46 | 47 | [TypeScript入门教程](https://ts.xcatliu.com/index.html)：国人写的TypeScript学习笔记 48 | 49 | [Type Challenges](https://github.com/type-challenges/type-challenges)：来一起做类型体操吧！让你像刷算法题一样学习TS，由前端开源社区先锋@antfu创立的项目。 50 | 51 | [细数这些年被困扰过的 TS 问题](http://www.semlinker.com/ts-problems-encountered/)：常见TS问题合集 52 | 53 | [React相关的TypeScript小抄](https://github.com/typescript-cheatsheets/react)：React开发中常见的TypeScript使用参考 54 | 55 | ## 浏览器与网络 56 | 57 | ### 网络相关 58 | 59 | [「查缺补漏」巩固你的HTTP知识体系](https://juejin.cn/post/6857287743966281736)：面经向 60 | 61 | [20-计算机网络面试题（2020最新版）](https://www.yuque.com/u24609/sg6ge7/wgp5cs)：计网基础知识面经 62 | 63 | [彻底搞懂HTTPS的加密原理](https://zhuanlan.zhihu.com/p/43789231) 64 | 65 | [HTTP缓存机制](https://juejin.cn/post/6844903517702848526) 66 | 67 | [详解 HTTP/2 头压缩算法 —— HPACK](https://halfrost.com/http2-header-compression/)：HTTP2头压缩算法的深度解析文章 68 | 69 | [HTTP响应的状态码](https://harttle.land/2015/08/15/http-status-code.html)：HTTP响应状态码整理大全 70 | 71 | [不要再问我跨域的问题了](https://segmentfault.com/a/1190000015597029) 72 | 73 | [浅说 XSS 和 CSRF](https://github.com/dwqs/blog/issues/68) 74 | 75 | ### 浏览器相关 76 | 77 | [Web workers vs Service workers vs Worklets](https://bitsofco.de/web-workers-vs-service-workers-vs-worklets/) 78 | 79 | [深入解析 EventLoop 和浏览器渲染、帧动画、空闲回调的关系](https://zhuanlan.zhihu.com/p/142742003) 80 | 81 | [浏览器的工作原理：新式网络浏览器幕后揭秘](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/)：搞懂浏览器从解析HTML到渲染图形所经历的全过程 82 | 83 | ## 前端框架 84 | 85 | ### React 86 | 87 | [React技术揭秘](https://react.iamkasong.com/)：一部很不错的React源码分析书 88 | 89 | [Build your own React](https://pomb.us/build-your-own-react/)：手把手教你实现一个React，深入理解React运行机制的最佳方法 90 | 91 | [这可能是最通俗的 React Fiber(时间分片) 打开方式](https://juejin.cn/post/6844903975112671239#comment) 92 | 93 | [一文吃透 React SSR 服务端渲染和同构原理](https://segmentfault.com/a/1190000020417285) 94 | 95 | [从头开始，彻底理解服务端渲染原理(8千字汇总长文)](https://juejin.cn/post/6844903881390964744) 96 | 97 | [React SSR | 從零開始實作 SSR — 基礎篇](https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/server-side-rendering-ssr-in-reactjs-part1-d2a11890abfc) 98 | 99 | ## 服务端知识 100 | 101 | [Nodejs学习笔记](https://github.com/chyingp/nodejs-learning-guide) 102 | 103 | [Serverless 应用开发指南](https://serverless.ink/#serverless-%E6%9E%B6%E6%9E%84) 104 | 105 | [前端也要懂一点 MongoDB Schema 设计](https://juejin.cn/post/6844904018301419534) 106 | 107 | ## 工程实践 108 | 109 | ### 性能优化 110 | 111 | [我所知道的 Web 性能优化策略](https://github.com/rccoder/blog/issues/34) 112 | 113 | [React 性能优化 | 包括原理、技巧、Demo、工具使用](https://juejin.cn/post/6935584878071119885) 114 | 115 | [High Performance Browser Networking](hpbn.co) 116 | 117 | ### 设计模式 118 | 119 | [A Comprehensive Guide To JavaScript Design Patterns](https://www.lambdatest.com/blog/comprehensive-guide-to-javascript-design-patterns/) 120 | 121 | [JavaScript设计模式es6（23种)](https://juejin.cn/post/6844904032826294286) 122 | 123 | ### 架构设计 124 | 125 | [每个架构师都应该研究下康威定律](https://www.infoq.cn/article/every-architect-should-study-conway-law) 126 | 127 | [面向 Model 编程的前端架构设计](https://zhuanlan.zhihu.com/p/144157268) 128 | 129 | ## 前沿信息 130 | 131 | ### 各类技术新闻速递 132 | 133 | [JavaScript Weekly](https://javascriptweekly.com/) 134 | 135 | [React Status](https://react.statuscode.com/) 136 | 137 | [Node Weekly](https://nodeweekly.com/) 138 | 139 | ### Web Assembly 140 | 141 | [WebAssembly-w3ctech](https://www.w3ctech.com/category/18) 142 | 143 | [Awesome Wasm](https://github.com/mbasso/awesome-wasm) 144 | 145 | ## 实体书单 146 | 147 | ***“书籍是人类进步的阶梯“*** 148 | 149 | [软技能](https://book.douban.com/subject/26835090/)：此书单中我最推荐阅读的书没有之一 150 | 151 | [计算机程序的构造和解释(原书第2版)](https://book.douban.com/subject/1148282/)：大名鼎鼎的SICP，推荐对CS刚入门的同学阅读 152 | 153 | [人月神话(40周年中文纪念版)](https://book.douban.com/subject/26358448/)：软件工程领域的传世经典著作 154 | 155 | [现代编译原理](https://book.douban.com/subject/1435535/) 156 | 157 | [写给大家看的设计书](https://book.douban.com/subject/26664522/) 158 | 159 | [架构整洁之道](https://book.douban.com/subject/30333919/)&[代码整洁之道](https://book.douban.com/subject/26919457/) 160 | 161 | [Web性能权威指南](https://book.douban.com/subject/25856314/) 162 | 163 | ## Misc 164 | 165 | [egghead.io](egghead.io) 166 | 167 | [前端精读](https://github.com/ascoders/weekly/tree/v2) 168 | 169 | [Google Chrome Developers的Youtube频道](https://www.youtube.com/channel/UCnUYZLuoy1rq1aVMwx4aTzw) -------------------------------------------------------------------------------- /personal-experience.md: -------------------------------------------------------------------------------- 1 | # 个人上岸经验 2 | 3 | 自我介绍：2022届，出于兴趣选了前端方向，秋招侥幸拿了几家大厂的ssp，在此分享一下自己的上岸经验，希望能帮到各位同学。权当抛砖引玉，若有疏漏、不当之处欢迎指出😃。 4 | 5 | 另附：[个人整理的前端学习资源](https://github.com/quincy-chiu/my-frontend-library/blob/master/README.md) 6 | 7 | ## 基础知识 8 | 9 | 基础不牢，地动山摇。对于校招生而言最重要的当然还是基础知识啦。除算法题以外，个人认为前端校招的基础知识可以分为4个部分： 10 | 11 | 1. HTML/CSS 12 | 2. JavaScript 13 | 3. 计算机网络相关 14 | 4. 浏览器相关 15 | 16 | 17 | 其余如前端MVC框架、打包工具、Node、TypeScript等知识其实都不是面试时必须要求掌握的，只是锦上添花而已，面试时也不会以这些问题为重点。可以发现前端方向的知识点其实都比较零碎，这里的1/3/4点其实都是可以通过只背面经就通过面试的部分，但最好在自己的实践中有相关应用（如跨域、cookie、缓存等等）。 18 | 19 | - HTML/CSS往往是入门前端时接触的第一块知识，这部分内容可以通过看一些免费网课学习，同时自己动手写几个小demo，这样做的好处一是可以让萌新对前端有一个初步认知，二是可以将碎片化的知识较为系统地吸收一部分。 20 | - JS绝对是需要系统性学习的一块内容，也是面试考察的重中之重，这部分的学习就见仁见智了，可以通过阅读红宝书(JavaScript高级程序设计)和犀牛书(JavaScript权威指南)学习，也可以继续看网课，还可以像我这样通过阅读 [现代javascript教程](https://zh.javascript.info/) 来学习。路径多种多样，但最重要的是一定要系统性地学习，建议边学边画一个思维导图，最终构建出一个整体宏观的认知。 21 | - 3、4两点对于萌新而言其实一开始只要做项目时多查google+背面经就行了(逃)。尽量在项目中对这类知识多加应用，并确保自己对运行机制足够了解，以在面试时能够对相关知识胸有成竹。后续进阶可以多看一些掘金、Medium等技术网站上的优秀文章，继续深入甚至可以看RFC文档或者chromium源码。 22 | 23 | ## 项目经历 24 | 25 | 如果以上提到的基础足够扎实，那么上岸基本就问题不大了，但如果想要拿到更好的offer，项目经历时还是不可或缺的。就我个人而言，在秋招之前我有两段还算比较有产出的实习经历，这期间的产出/项目成为了后续我二面、三面时的重要谈资，让整个秋招过程都顺利了不少。 26 | 27 | 一段好的项目经历**通常**可以通过这3种方式获得： 28 | 29 | 1. 在实习期间完成一个交付周期比较长、相对比较完整独立的需求。之前听到不少同学在实习期间的感受都是打杂内容太多，没什么技术含量。其实我个人看来能分到比较有含金量的需求都算运气不错，打杂才是实习的主旋律，因此如果认为自己能够抗压，建议多和mentor、上级沟通，承担一些比较完整的模块开发任务。 30 | 2. 对某个自己感兴趣的开源项目的源码进行阅读、理解、魔改，乃至阅读其issue并着手开发解决，提PR成为contributor。可以在Github上对任意技术关键词前加上'awesome-'来搜索相关优秀开源项目，如[awesome-javascript ](https://github.com/sorrycc/awesome-javascript), [awesome-react](https://github.com/enaqx/awesome-react)。 31 | 3. 跟随各种视频网课做项目，如某某商城、某某后台管理等等，在此不多赘述。 32 | 33 | 三种方式的优缺点如下： 34 | 35 | | | 优点 | 缺点 | 36 | | -------- | ------------------------------------------------------------ | ---------------------------------------------- | 37 | | 实习项目 | 对技术、沟通能力提升很大，为后续面试时增加话题，另外实习可以转正上岸 | 对抗压能力有要求，获取方式略为困难，机会成本高 | 38 | | 开源项目 | 对技术提升非常大，获取途径较容易，对面试加成很大 | 上手困难，需要一定基础 | 39 | | 网课项目 | 对技术提升一般，获取途径非常容易，上手简单，相关参考多 | 较为千篇一律，在面试时需要努力体现独到之处 | 40 | 41 | ## 其它 42 | 43 | 以上就是我认为比较重要和关键的一些内容了。不过在末尾我再补充一些其它经验以供各位参考。 44 | 45 | ### 算法题 46 | 47 | 刷题不在量多在于精，对各类题型都有初步掌握之后可以多参加一下周赛，自测水平。对于前端方向来说，我认为达到力扣周赛能稳定过两题、第三题有思路的水准就算不错了。 48 | 49 | ### 时间线 50 | 51 | 我的两段实习分别是在21年3月-5月，6月-8月，不过实际上我认为只要项目的技术含量够高，面试时的谈资足够，实习并不是必须的。另外如果参加暑期实习，那么在8月底那段时间往往需要同时准备秋招提前批面试+实习转正答辩，我个人感觉还是有点忙的。大家可以根据自身情况考虑是否参加暑期实习。 52 | 53 | ### 面试技巧 54 | 55 | - 做算法题时不要一上来就先码代码，先思考，然后对面试官讲述大致思路，再写实现。如果思路不顺可以适当寻求提示，合理沟通最重要。 56 | - 二、三面时面试官会倾向于询问项目经历，面试前可以先用STAR法则准备一段3分钟内的简述。再次强调对于自己的项目一定要确保十分熟悉，项目中的技术难点最好要深入了解原理，这真的很重要！ 57 | - 可以提前参加一些不愿意去的公司的面试练手（但至少要是二线厂，否则面试体验可能会比较糟糕），如果先拿了开价比较高的offer，到了其它公司的HR面时可以以此作为argue的资本，如果你沟通能力强、运气也好，用一家的ssp甚至就能argue出好几家的ssp。 58 | 59 | *最后祝大家都能顺利上岸😋，各种offer拿到手软！！！* --------------------------------------------------------------------------------