图说前端-送给您百张前端技术图谱

TNTWeb - 全称腾讯新闻前端团队，组内小伙伴在 Web 前端、NodeJS 开发、UI 设计、移动 APP 等大前端领域都有所实践和积累。

目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能业务提效和产品创新。

团队倡导开源共建，拥有各种技术大牛，团队 Github 地址：https://github.com/tnfe

今天前端技术飞速发展，涉猎的领域非常广泛同时需要掌握很多很多知识。对于刚刚入门的小白来说面对网上满天飞的各种苦涩难懂的文字教程往往心有余悸、无从下手。有很多抽象且晦涩的知识点，它们用文字无法很直观的表述出来，所以众多开发者对这些知识点的理解很多是似是而非，如果我们通过图画图谱来展示就会很容易理解。因此Diagram项目希望开发者能通过这种方式吃透前端技术领域的知识点。

废话不多说直接上图，更多请访问 https://github.com/tnfe/FEDiagram 项目查看。

图说CSS单位.png

网页性能优化.png

一图掌握scrollTop,offsetTop,scrollLeft,offsetLeft.jpeg

引用的值改变.png

资源非覆盖式发布.png

cookie.png

css选择器权重1.png

css选择器权重2.png

dom diff.png

es3,es5,es6分别是什么.png

Es5中的继承.png

ES6_1.ECMAScript 6 简介.jpg

es6常用知识点.png

Es6中的继承.png

flex布局原理介绍.png

http what.png

http缓存（1）.png

http缓存（2）.png

http请求报文构成.png

http响应报文构成.png

javascript prototype chain.png

js event loop.jpg

js运行机制.jpg

Navigation Timing Recommendation.png

nodejs event loop.jpg

process.jpg

React Native 组件生命周期.png

React New Lifecycle.jpg

React Suspense Cheat Sheet.png

react开发者路线图.png

tcp三次握手，四次挥手.gif