谷歌搜索引擎优化初学者指南(如何使用如果你是高级工程化，笔者也推荐先行学习「前端核心学习路径」)

　　谷歌搜索引擎优化初学者指南(如何使用如果你是高级工程化，笔者也推荐先行学习「前端核心学习路径」)

　　这是什么？

　　作者在学习了JS的应用和框架之后，一时间不知道怎么深入，能做的很好，但是不知道该学什么。相信很多读者都会遇到这个问题。

　　当然，笔者现在已经突破了这个瓶颈，也成为了某知名公司的基础设施组的一员。因此，我想通过自己的成长经历和积累的素材，整理出一系列的学习路线和信息推荐，帮助读者朋友们解决这个问题。

　　仓库内容的作者是主要贡献者。此外，近20名资深前端开发人员参与内容共建与审核。他们大多在一线厂商P6、P7工作。第一版需要几个星期。大家都是国庆假期。不停歇，内容绝对让所有评委满意。

　　此信息适用于初学者、高级初中级和高级检查和填补空缺。

　　内容每天更新，大家可以持续关注。

　　这是 Github 链接。最新内容会先在Github上更新。如果您认为内容对您有帮助，您可以点击Star。

　　如何使用

　　如果你是初级/中级工程师，笔者也建议先学习“前端核心学习路径”，主要是夯实基础，然后选择感兴趣的话题。

　　如果你是高级工程，作者建议跳过“前端核心学习路径”，直接选择感兴趣的话题学习。

　　以下所有知识点的作者将帮助读者和朋友连接知识，从而建立自己的知识体系，而不是单独记忆松散的知识点。

　　如何获取本文中的信息

　　作者整理了仓库内容中的重要信息，前端还收录了10万字的面试指南，帮助上千人拿到offer。关注【公众号】发送“资料”即可获取。

　　内容

　　读者朋友可以到Github浏览目录。

　　如何高效自学

　　

　　自学是每个工程师都需要掌握的技能。这个学习方法的作者会想尽一切办法，我会用这个想法去学习任何技术。另外，我们可以利用这个思路拓宽我们的技术栈，链接各种知识，建立自己的知识体系，通过这种学习方式学到的知识也不容易忘记。

　　推荐书籍

　　以下书籍主要推荐JS，其他技术如框架、TS等将在各自的章节中介绍。

　　初级进阶

　　您可以关注【公众号】发送“资料”获取以上图书。此外，还自带10万字的前端面试攻略，帮助上千人拿到offer。

　　前端核心学习路径

　　有很多前端知识点。这是公认的东西，但我们真的不需要把所有的知识都学，只会贪得无厌。如果我们能够学习到核心知识点、流行技术以及我们在工作中需要用到的知识，我们已经可以打败大多数前端工程师。其余的可以根据自己的兴趣选择学习内容。

　　不过，在学习其他内容之前，笔者强烈建议大家一定要先打好基础。如果基础不好，真的是不可能提高自己的技能的。

　　为确保您所学知识正确无误，以下文档作者均使用英文版本。因为在查阅资料的过程中，笔者发现很多中文文件翻译错误或过时。

　　如果你还是初学者，建议在按照计划之前自己阅读一两本书，因为下面的计划并没有涵盖JS的所有知识，而是列出了所有核心知识点。

　　作者推荐以下两本关于书籍的书籍：

　　JS核心知识数据类型

　　JS数据类型分为两大类八种数据类型。请不要错过 ES6 的新 bigint。

　　类型判断

　　有几种方法可以确定类型，即：

　　推荐文章，Issue也很重要

　　类型转换

　　类型转换在JS中可以说是复杂且容易出错的，但却是开发中经常遇到的一个知识点。强行所有记忆很容易忘记，建议在开发中记住并练习常见的情况。

　　双重判断

　　推荐文章

　　这个

　　这是很多初学者容易混淆的知识点，但非常重要，必须掌握。

　　推荐文章

　　关闭

　　闭包特别常用，但其实很多工程师对闭包都有错误的理解。

　　推荐文章

　　范围

　　作用域是指程序中定义变量的区域。位置决定了变量的生命周期，即变量和函数的可访问范围。

　　推荐文章

　　变量促销

　　变量提升（Hoisting）可以在编译阶段将变量和函数放入内存，以便在执行阶段声明前使用。

　　推荐文章

　　新的

　　new 运算符可以帮助我们构造一个实例并将其绑定到 this。

　　推荐文章

　　调用、应用、绑定

　　推荐文章

　　原型

　　通过原型机制，JavaScript 中的对象继承了其他对象的功能特性。

　　推荐文章

　　班级

　　class 只是原型链的语法糖，与其他语言中的 class 不同。

　　推荐文章

　　继承

　　继承是面向对象语言的三大特征之一，在JS中也占有非常重要的地位。继承的实现方式有很多种，各有优缺点。

　　推荐文章

　　模块化的

　　这块知识肯定是有的，最好了解模块化的前世今生，对ES6原生的模块化有深刻的理解。

　　推荐文章

　　Promise推荐文章Callbacks Vs Promises和JS基础，需要自己带梯子实现最简单的Promise，支持异步链调用（20行）100行代码实现Promises/A+标准Githubpromise-fun迭代器和发电机

　　推荐文章

　　异步等待

　　推荐文章

　　事件循环

　　大家都知道JS是一种单线程非阻塞脚本语言。这意味着代码只有一个主线程来随时处理所有任务。所以理解事件循环机制对我们学习JS非常重要。

　　推荐文章

　　事件循环可视化

　　节流防抖

　　节流是指连续触发事件的情况，在一定时间内，函数只会执行一次。

　　防抖是指事件触发一定时间后执行回调函数。如果事件在一定时间内重复触发，计时将重新开始。

　　咖喱

　　柯里化就是把一个接收多个参数的函数转换成一个接收一个参数的函数。

　　垃圾采集

　　JavaScrip 在变量创建时分配内存，当对象不再使用时自动释放内存。这个过程称为垃圾采集。另外我们主要学习V8引擎下的垃圾回收机制。

　　推荐文章

　　其他零散但重要的知识点

　　如果你觉得以上内容对你有帮助，可以到Github点击Star支持。

　　HTML语义

　　语义html是对页面内容进行结构化，以方便浏览器和搜索引擎的分析。在不引入样式CCS样式的情况下，可以以可区分的、粗略表示内容的文档格式进行展示，便于阅读。搜索引擎爬虫依靠标签来确定每个关键词的上下文和权重，有利于SEO。让阅读网站源码的人更容易将网站分块，方便阅读、维护和理解。

　　推荐文章

　　CSS盒模型

　　在 CSS 中，所有元素都被“框”包围。我们广泛使用两种“盒子”——块盒子和内联盒子。了解这些“盒子”的基本原理，是我们使用CSS实现精准布局和流程元素排列的关键。

　　推荐文章

　　选择器

　　在 CSS 中，选择器用于指定网页上我们想要设置样式的 HTML 元素。CSS 选择器提供了很多方法，因此在选择要设置样式的元素时，我们可以非常精确。

　　CSS 选择器是 CSS 规则的第一部分。它是一种结合元素和其他部分的方式来告诉浏览器应该选择哪个 HTML 元素作为应用程序规则中的 CSS 属性值。选择器选择的元素称为“选择器对象”。

　　推荐文章

　　柔性

　　推荐文章

　　实战

　　网格

　　推荐文件

　　其他框架

　　一般选择其中一个框架进行深入研究。

　　虚拟DOM

　　虚拟 DOM 也是一个虚拟节点。JS Object对象模拟DOM中真实的节点对象，然后通过特定的render方法渲染成真实的DOM节点。

　　推荐文章

　　路由

　　SPA架构中使用的是路由，实际原理是使用hash和history相关的API实现。

　　推荐文章

　　反应

　　学习框架一定要从文档入手，至少要通读一遍，写一些初步的demo，再考虑学习其他材料。

　　React推荐学习路径

　　

　　您可以按照上述学习路径进行学习。除了必须学习的概念相关内容外，使用时还可以学习生态相关内容。

　　React推荐学习资料如何编写组件

　　推荐文章

　　受控和非受控组件

　　推荐文章

　　高端组件 (HOC)

　　高阶组件（HOC）是一种在 React 中重用组件逻辑的高级技术。HOC 本身不是 React API 的一部分，它是一种基于 React 组合特性的设计模式。

　　具体来说，高阶组件是一个函数，它的参数是一个组件，返回值是一个新的组件。

　　推荐文章

　　挂钩

　　Hook 是 React 16.8 的一个新特性。它允许您在不编写类组件的情况下使用 React 功能。

　　推荐文章

　　合成事件

　　合成事件（SyntheticEvent）是一个事件对象，它反应模拟原生DOM事件的所有能力，即浏览器原生事件的跨浏览器包装器。React 根据 W3C 规范定义合成事件。需要注意的是，v16 和 17 版本中的合成事件是有区别的。

　　推荐文章

　　反应路由反应状态管理

　　React 状态管理可谓百花齐放，远不止作者列举的库。但实际上很多项目根本不需要使用状态管理，反而增加了编码复杂度。其实使用React Context或者react-query等接口请求库就可以很好的满足需求了。

　　React 接口请求 React SSRReact 单测 React CSS 解决方案 React 原理 博客推荐 Vue

　　学习框架一定要从文档入手，至少要通读一遍，写一些初步的demo，再考虑学习其他材料。

　　对于Vue，官方文档内容相当齐全，全家桶也正式发布，完全不用担心技术栈选择。

　　Vue推荐学习路径

　　目前3.0的生态并不完善。熟悉2.0在公司里的写法是很有必要的，所以建议新手先学习2.0的内容。

　　Vue推荐学习资料Vue原理浏览器

　　说到浏览器，人们通常会提到 Chrome。由于浏览器是前端不可或缺的载体，我们不可避免地需要学习和掌握其相关知识。

　　另外，浏览器涉及的知识领域很多，涉及到JS执行机制、网络、性能优化、安全等领域。因此，在学习这部分内容的时候，需要更多的与之前学到的知识联系起来。

　　架构整体流程渲染相关JS执行机制缓存Devtools浏览器安全性能优化

　　性能优化是一个系统工程，涉及很多方面，不仅仅是大家常说的静态文件和代码优化。

　　在学习这部分内容的时候，可以先从推荐的文章中了解具体的性能优化方法和具体方法，然后根据这些内容进行实验。

　　推荐书籍

　　其实市面上和性能优化相关的书籍并不多，优秀的都是几年前的老书。如果你不阅读它们也没关系。

　　推荐 网站 整体优化建议 性能指标 性能监控 TypeScript

　　TypeScript 是为开发大型应用而设计的，TypeScript 可以翻译成 JavaScript。由于 TypeScript 是 JavaScript 的严格超集，因此任何现有的 JavaScript 程序都是有效的 TypeScript 程序。

　　文档

　　推荐文章

　　推荐开源项目

　　电子

　　Electron 是一个框架，可以使用 JavaScript、HTML 和 CSS 等 Web 技术来创建跨平台的原生桌面应用程序。使用 Electron，我们可以使用纯 JavaScript 调用丰富的原生 API。

　　文档

　　推荐文章

　　推荐开源项目

　　组件库

　　组件库，顾名思义，是指通过提取集成多个通用模块或可复用组件而生成的仓库

　　知名组件库：

　　相关文件：

　　推荐文章：

　　微前端

　　它是一种类似于微服务的架构，将微服务的概念应用到浏览器端，即将单页面前端应用从单个单体应用转变为多个小型前端应用聚合而成的应用成一。

　　优势：

　　框架：

　　推荐文章：

　　推荐学习资料跨端框架

　　跨终端的主要含义是一套代码运行在多个终端上，减少重复劳动

　　目前看来，小程序、H5、App三端跨界框架在国内比较流行。Uniapp 和 taro 是两个做得比较出色的框架。当然，在taro3.0（以下主要指小程序）之前，taro和uniapp都是利用编译时间做更多的事情，编译成小程序可以运行的代码。

　　taro3.0之后，就变成了和remax一样的思路，在运行时做更多的事情，保证可以充分利用原有框架代码，转换成其他小程序时不需要兼容。

　　监视器

　　当业务稳定时，最重要的就是监控业务线上的各种性能、异常和正常业务，避免上线后盲目。

　　目前市场上最著名的监控系统：

　　推荐的开源库：

　　推荐文章：

　　每日充电 CSS 每日充电 Github 优秀学习资料 JS 优秀学习资料 React 优秀学习资料 代码风格与安全生产力工具流程图最后

　　内容目前只能算是第一版，还不完善。欢迎大家为内容做出贡献。这是仓库的链接。