Web前端技术由三个部分组成：HTML，CSS和三个部分。这是一个巨大而复杂的技术系统，其复杂性不少于任何后端语言的复杂性。当我们学习它时，我们通常从一定程度开始，然后不断接触并学习新的知识点。因此，初学者很难澄清整个系统的上下文结构。本文将简要整理Web前端知识系统，并且不会将每个相应的知识点引入结尾。目的是帮助每个人检查他们的知识结构是否完成。如果有任何遗漏或不正确的观点，我希望鼓励他们在一起。

第0章。基本语法

基本语法包括：可变定义，数据类型，循环，选择，内置对象等。

数据类型包括null，等等。其中，总和是基本类型，null，是JS中的两种特殊类型，是参考类型。

您可以通过执行判断基本数据类型，但是您不能准确判断参考类型，因此需要另一种方法，也就是说，对于数据类型及其判断，您可以参考以下博客：数据类型的详细说明和JS数据类型的四种类型

JS中常用的内置对象包括日期，JSON等。一般而言，日期最常使用。 JSON可以序列化并进行序列化对象和数组，另一个功能是实现对象的深层副本。

也就是说，正则表达式是处理字符串的强大工具。有关数据类型和正则表达式的介绍，请参阅博客：9 API和JS正则表达式增强了ES5。

1。功能原型链

尽管没有继承的概念，但在函数对象中建立了原型对象，并且原型链是在内部用对象作为主线构建的。

简而言之，建立了可变的搜索机制。访问对象的属性时，首先查找对象本身是否存在。如果不存在，请转到对象所在的原型，然后搜索对象。会返回。

因此，我们经常使用函数的原型机制来实现JS继承。有关功能原型链，请参阅博客：JS原型对象和原型链

2。功能范围

函数范围意味着变量是在声明它们的功能体中定义的，并且嵌套在功能主体中的任何功能主体。 JS中没有块级范围，仅函数范围，因此JS中还有另一个怪异现象，即可变促进。有关范围的介绍，请参阅博客：范围和范围函数链

3。功能指针这个

这存在于一个函数中，该函数指向该函数在运行时调用的对象。在实际项目中，这遇到了许多陷阱，因此您需要对此有深入的了解。

该对象还提供了诸如呼叫，绑定以更改函数指向的方法，其中呼叫和主动执行该函数，通常在事件回调中使用绑定，呼叫和呼叫之间的差异只是传递参数的不同方式。有关呼叫和绑定的用户，请参阅博客：JS通话和绑定的详细说明

4。构造函数新

JS中的功能可以是构造函数，也可以称为普通函数。当使用新来创建对象时，相应的函数是构造函数，当通过对象调用时，它是普通函数。

普通函数的创建包括三种方法：显式声明，匿名定义和new（）。

当通过新对象创建新对象时，JS下层将新对象的原型链指向构造函数的原型对象的原型链，因此在新对象和函数对象之间建立了原型链，并且可以访问函数对象通过原型中的新对象方法和属性。有关新信息的更多信息，请参阅博客：了解JS中的新运营商

5。关闭

封闭实际上是一个积极执行的代码块。关于此代码块的特殊之处在于，它可以永久保存本地变量，但不会污染全局变量，并且可以形成独立的执行过程。因此，我们经常使用封闭来定义组件。有关关闭的介绍，请参阅以下信息：共享信息：让您在几分钟内学习JS关闭

6。单线和异步队列

总和是JS中的两个内置计时器，非常简单，但是这两种方法背后的原理并不简单。

我们知道JS是一种单线程语言。在浏览器中，加载JS代码后，浏览器将为执行任务（函数）分配一个主线程。主线程将形成一个全局的执行环境，并且执行环境使用堆栈，执行任务的方法是按顺序执行的。

但是，浏览器中的某些任务非常耗时，例如HTTP请求，计时器，事件回调等。也称为工作）。线程），然后将这些任务放入等待的队列中。这些任务的执行时间不确定。只有在完成主线程的任务执行后，才能检查是否需要执行异步队列中的任务。这就是为什么（FN，0）总是必须等到最终执行。有关单线程和异步队列问题，请参考：（0）

7。异步通信ajax技术

Ajax是一种异步通信技术，浏览器专门用于与服务器进行交互。它的核心对象是可以通过此对象创建AJAX请求。为了防止XSS攻击，浏览器已限制AJAX，并且不允许Ajax跨域请求服务器，这意味着它只能在当前域名下访问URL。

当然，如果您确定您的网站没有跨域风险，则可以在服务器端积极启用跨域请求。它也可以直接通过CORS或。

它使用（）跨域功能来模拟AJAX请求。

CORS是W3C标准，其全名“跨域资源共享”（ - ）。它允许浏览器提出跨原始服务器的请求，从而克服了只能在相同原点中使用Ajax的限制。有关CORS的简介，请参阅：跨域资源共享CORS详细信息

8。dom对象

该对象存储整个网页DOM结构，并且页面上的所有元素最终都将映射到DOM对象中。还有许多API可以找到特定的DOM对象，例如，等。

9。事件系统

事件是用户与页面互动的基础。到目前为止，DOM事件已经从PC侧的 （）开发，以触摸移动侧的事件（）和手势事件（）。

由于DOM结构可能嵌套在多层中，因此也得出了两个事件流：事件捕获和事件气泡，后者最常用。使用事件气泡机制可以实现许多功能，例如单击统计信息。有关两个事件流的介绍，请参阅：事件气泡和捕获

另外， /和其他事件是在页面初始化，滚动，隐藏，返回等时内置的。当您想捕获这些事件时，您需要通过 /绑定。

10。全局对象

在JS中，当在浏览器中加载并执行一块JS代码时，JS引擎将在内存中构建全局执行环境。执行环境的功能是确保所有功能都可以按正确的顺序执行，并且该对象是在执行环境中的全局对象，其中许多操作API和对象都内置在对象中，并且对象是之一他们。有关JS执行环境的介绍，请参阅博客：深入了解JS执行的详细信息

CSS

CSS是一种用于修改HTML的语言。

1。选择器

CSS选择器有许多类型，常用的类型包括类选择器，标签选择器，ID选择器，后代选择器，组选择器，伪级选择器（/），兄弟选择器（+〜）和属性选择工具等。

2。定位

定位通常包括相对定位（），绝对定位（），固定定位（），以及在移动终端上使用的大多数。移动终端存在兼容性问题，因此不建议使用它。移动终端的替代解决方案是 +内部滚动。

3。浮动

设置为左，或者可以从文档流中删除元素，然后向左或向右浮动。通常，在制作网格模式布局时使用它。如果将所有子元素设置为浮动，则父元素崩溃。目前，需要清除浮动。有很多方法可以清除浮动。常用的方法是在元素末尾添加空。元素设置：两者，更高级的设置，设置/供父是模拟空的元素，您也可以直接设置：自动/。除了过度浮动外，还可以实现网格模式，并且还可以使用框（ - ）和盒子。

4。框型号

框模型是CSS的最重要概念，也是CSS布局的基石。通用框模型包括块级框（）和在线框（ - ）。盒子的最关键属性包括，这些元素可以设置盒子和框之间的关系以及盒子和内容之间的关系。 。另一个问题是计算盒子的大小。应该注意的是，盒子店的设置将影响盒子的总和。仅当正常文档流中的块框的垂直边缘的垂直边距才会发生。不会合并内联框，浮动框或绝对定位之间的边距。

5。弹性布​​局

Flex布局的容器是一个可扩展的容器。首先，容器本身将用容器中的元素动态设置自己的大小。然后，当应用Flex容器一个尺寸（和）时，容器中的元素将自动调整为新尺寸。 Flex容器还可以设置缩放和固定宽度，还可以设置容器中元素的布置方向（水平和肖像），以及它们是否支持元素的自动线包装。使用此工件，制作页面布局更加方便。请注意，将其设置为flex布局后，子元素的属性和 - 属性将无效。

6。（过渡）和（旋转）

该应用程序可以转换（），（），缩放（），偏移等。元素上的偏差等，因此CSS属性值（包括）在一段时间内平滑过渡。使用并实现页面的滑动开关效果。

7。动画

首先，您需要设置动画功能，然后更改此动画中元素CSS属性的更改。动画可以设置为永久循环演示。与动画效果相比，设置动画效果更加灵活和更丰富。两者之间的另一个区别是，只能通过主动更改元素的CSS值来​​触发动画效应，并且一旦应用了元素，则将执行动画。

8。图片

对于大型站点，为了减少HTTP请求的数量，通常将常用的小图标排列成大图像。加载页面后，需要一次请求网络，然后通过在CSS中进行设置来控制所需的小图标。

9。字体图标

所谓的字体图标是将常用图标转换为字体资源并将其存储在文件中。通过在CSS中引用字体文件，您可以通过控制字体的CSS属性直接设置图标样式。

HTML第1条。网络语义和SEO

HTML常规标签包括HTML，头部，身体，DIV，SPAN，UL，OL，DL，P，B，H1〜H6，FOMM，IMG，EM，I等。此外，还添加了许多语义。标签，例如

Web语义是指使用适当的语义标签使页面具有良好的结构，并且页面元素具有含义，这两个搜索引擎都可以很容易地理解。

SEO是指基于了解搜索引擎的自然排名机制的内部和外部调整和优化，从而改善了网站在搜索引擎中关键字的自然排名，获得了更多的显示量，并吸引了更多的目标客户点击。访问网站以实现互联网营销和品牌建设的目标。

搜索引擎通过爬行技术获得的页面是由一堆HTML标签组成的代码。人们可以使用视觉方法来确定页面上的哪个内容是密钥，但是机器不能这样做。但是，搜索引擎将根据标签的含义来判断内容的重量。因此，在正确位置使用适当的标签将使整个页面清晰明了，结构将清晰。仅通过正确识别页面中的重要内容并给予更高的级别重量。例如，SEO中标签H1〜H6的重量非常高，并且使用它们作为页面标题是简单的SEO优化。

2。页面渲染机制

页面渲染是浏览器的渲染引擎根据CSS定义的规则在浏览器窗口中显示HTML代码的过程。粗糙的工作原则如下：

3。重新粉刷和回流

由于元素的大小，布局，隐藏等的变化，需要重建渲染树的零件（或全部）时。这称为回流。例如，在加载上述IMG文件后，它将导致反流。每个页面都需要至少一次流动一次，这是第一次加载页面的时候。

当需要更新渲染树中的某些元素时，这些属性仅影响元素的外观和样式，而不影响布局，例如 - 。然后称为重擦。

从上面可以看出，反流将不可避免地导致重新粉刷，而重新粉刷不一定会引起回流。

导致重擦和回流的操作

4。本地存储

本地存储最原始的方法是将一块文本存储在本地浏览器中。数据以键值对的形式保存，并且可以设置到期时间。但是，它不适用于存储大量数据，因为每次请求页面时，它都会发送到服务器，这使其非常慢且不高效。因此，大小仅限于约4K（不同的浏览器可能不同，主机分为以下内容：

在所有浏览器中，任何大小都超过限制的限制都被忽略，并且永远不会设置。

有两种新的方法可以将数据存储在客户端：而且，它们都以键/的形式存储数据。前者是永久存储，后者的存储期限仅限于浏览器会话（），也就是说，当浏览器窗口关闭后，清除其中的数据。

存储空间约为5M（不同的浏览器可能不同，分为主机），这相当于5m尺寸的前端页面数据库，与浏览器的隐私模式相比，可以节省带宽隐私模式。在存储数据超过存储空间的存储空间之后，将抛出一个例外。

此外，H5还提供了总和的逆转，使前端可以将本地数据存储在关系数据库中。相对而言，当前此功能的情况较少，因此我不会在此处介绍它。

5。浏览器缓存机制

浏览器缓存机制是指通过HTTP协议标头中的 - （OR）和最后一个（或ETAG）控制文件缓存的机制。

- 用于控制本地缓存文件的有效性时间。最常见的一个，例如服务器数据包返回： - ：max -age = 600表示该文件应在本地缓存，有效性时间为600秒（根据请求计算得出）。在接下来的600秒内，如果请求此资源，浏览器将不会发出HTTP请求，而是直接使用本地缓存文件。

最后是确定服务器上文件的最新更新时间。下次您请求时，如果文件缓存到期，则浏览器将花费此时间使用IF-字段并将其发送到服务器。服务器比较时间戳以确定文件是否已修改。如果没有修改，服务器将返回304，以告诉浏览器继续使用缓存；如果进行了修改，它将返回200，然后返回最新文件。

- 通常与最后一起使用。一个用于控制高速缓存有效性时间，另一个用于查询服务后的更新。

- 还有一个具有相同功能的字段：。值的值是绝对时间点，例如：THU，2015年11月10日，格林尼治标准时间，这意味着缓存在此时间点之前有效。