开门见山，这篇文章，适合 「 初级前端 」 ，如果你还在校招的话，或者还在求职的话，可以看看本文，找一找灵感，希望对你们有帮助呀。

我的感受就是，自己一边梳理知识点，一边总结归纳，收获可能更大，所以打算把我梳理的部分分享出来，篇幅有点长，覆盖的点也不是很全，大家见谅呀。

你是如何理解 HTML 语义化的？
让页面内容结构化，它有如下优点

1、易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
2、有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
3、方便其他设备解析，如盲人阅读器根据语义渲染网页
4、有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐

可以跟面试官讲的更具体一点:point_down:

第一个是荒野阶段，那时候前端的代码主要是后台来写的，所以那个时候写的代码主要是用table来布局的。

第二阶段---美工阶段，这个时候就有专门的人来前端代码了，这个阶段的布局主要是DIV+CSS布局，但是呢有一个问题，就是不够语义化。

第三个阶段-->> 前端阶段，也就是利用具有语义的标签，比如p,h1,h2,article，header，nav，main，aside，footer这些标签，使用这些正确的标签，可以表达正确的内容，也利于开发和维护。

通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的，pc端的视口是浏览器窗口区域，而在移动端有三个不同的视口概念：布局视口、视觉视口、理想视口

keywords(关键字) 告诉搜索引擎，你网页的关键字

description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。

robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引

//旧的HTML，不推荐 //HTML5设定网页字符集的方式，推荐使用UTF-8

//指定IE和Chrome使用最新版本渲染当前页面

cache-control（请求和响应遵循的缓存机制）

如上，服务器拿到后解析参数query，最后将内容返回给浏览器，浏览器将这些内容作为HTML的一部分解析，发现是Javascript脚本，直接执行，这样子被XSS攻击了。

这也就是反射型名字的由来，将恶意脚本作为参数，通过网络请求，最后经过服务器，在反射到HTML文档中，执行解析。

主要注意的就是， 「服务器不会存储这些恶意的脚本，这也算是和存储型XSS攻击的区别吧」 。

基于 DOM 的 XSS 攻击是不牵涉到页面 Web 服务器的。具体来讲，黑客通过各种手段将恶意脚本注入用户的页面中，在数据传输的时候劫持网络数据包

阻止 XSS 攻击的策略
以上讲述的XSS攻击原理，都有一个共同点：让恶意脚本直接在浏览器执行。

针对三种不同形式的XSS攻击，有以下三种解决办法

对输入脚本进行过滤或转码
对用户输入的信息过滤或者是转码

这样的代码在 html 解析的过程中是无法执行的。

可以移步 ，有更加规范的解释。我在这里就是梳理一下吧。

CSP，即浏览器中的内容安全策略，它的核心思想大概就是服务器决定浏览器加载哪些资源，具体来说有几个功能:point_down:

• 限制加载其他域下的资源文件，这样即使黑客插入了一个 JavaScript 文件，这个 JavaScript 文件也是无法被加载的；
• 禁止向第三方域提交数据，这样用户数据也不会外泄；
• 提供上报机制，能帮助我们及时发现 XSS 攻击。
• 禁止执行内联脚本和未授权的脚本；

由于很多 XSS 攻击都是来盗用 Cookie 的，因此还可以通过使用 HttpOnly 属性来保护我们 Cookie 的安全。这样子的话，JavaScript 便无法读取 Cookie 的值。这样也能很好的防范 XSS 攻击。

前面讲到CSRF的另一个特征是，攻击者无法直接窃取到用户的信息（Cookie，Header，网站内容等），仅仅是冒用Cookie中的信息。

那么我们可以使用Token，在不涉及XSS的前提下，一般黑客很难拿到Token。

Token(令牌)做为Web领域验证身份是一个不错的选择，当然了，JWT有兴趣的也可以去了解一下。

首先，用户打开页面的时候，服务器需要给这个用户生成一个Token，该Token通过加密算法对数据进行加密，一般Token都包括随机字符串和时间戳的组合，显然在提交时Token不能再放在Cookie中了（XSS可能会获取Cookie），否则又会被攻击者冒用。因此，为了安全起见Token最好还是存在服务器的Session中，之后在每次页面加载时，使用JS遍历整个DOM树，对于DOM中所有的a和form标签后加入Token。这样可以解决大部分的请求，但是对于在页面加载之后动态生成的HTML代码，这种方法就没有作用，还需要程序员在编码时手动添加Token。

第二步:页面提交的请求携带这个Token

第三步：服务器验证Token是否正确

当用户从客户端得到了Token，再次提交给服务器的时候，服务器需要判断Token的有效性，验证过程是先解密Token，对比加密字符串以及时间戳，如果加密字符串一致且时间未过期，那么这个Token就是有效的。

非常感兴趣的，可以仔细去阅读一下相关的文章，Token是如何加密的，又是如何保证不被攻击者获取道。

CSRF(Cross-site request forgery), 即跨站请求伪造，本质是冲着浏览器分不清发起请求是不是真正的用户本人，所以防范的关键在于在请求中放入黑客所不能伪造的信息。从而防止黑客伪造一个完整的请求欺骗服务器。

这部分的知识点，基本上看别人写的翻译，然后按照别人的思路去完成的，所以这里就推荐一篇我看的文章吧，个人觉得写的还是挺好的，所以有兴趣的可以了解一下，下面的文章:point_down:

HTTP 状态码知道哪些？分别什么意思？
状态码：由3位数字组成，第一个数字定义了响应的类别

1xx：指示信息，表示请求已接收，继续处理
2xx：成功，表示请求已被成功接受，处理。

200 OK：客户端请求成功
204 No Content：无内容。服务器成功处理，但未返回内容。一般用在只是客户端向服务器发送信息，而服务器不用向客户端返回什么信息的情况。不会刷新页面。
206 Partial Content：服务器已经完成了部分GET请求（客户端进行了范围请求）。响应报文中包含Content-Range指定范围的实体内容

301 Moved Permanently：永久重定向，表示请求的资源已经永久的搬到了其他位置。
302 Found：临时重定向，表示请求的资源临时搬到了其他位置
303 See Other：临时重定向，应使用GET定向获取请求资源。303功能与302一样，区别只是303明确客户端应该使用GET访问
304 Not Modified：表示客户端发送附带条件的请求（GET方法请求报文中的IF…）时，条件不满足。返回304时，不包含任何响应主体。虽然304被划分在3XX，但和重定向一毛钱关系都没有

400 Bad Request：客户端请求有语法错误，服务器无法理解。
403 Forbidden：服务器收到请求，但是拒绝提供服务
404 Not Found：请求资源不存在。比如，输入了错误的url

5xx：服务器端错误，服务器未能实现合法的请求。

短轮询(Polling)的实现思路就是浏览器端 每隔几秒钟向 服务器端 发送http请求，服务端在收到请求后，不论是否有数据更新，都直接进行响应。 在服务端响应完成，就会关闭这个Tcp连接。

优点：就是兼容性比较好，只要支持http协议就可以实现该方式。
缺点：很明显消耗资源，因为下一次的建立Tcp是非常消耗资源的，服务器端响应后就会关闭这个Tcp连接。

客户端发送请求后服务器端 不会立即 返回数据，服务器端会 阻塞请求 连接不会 立即断开 ，直到服务器端 有数据更新或者是连接超时 才返回，客户端才再次发出请求新建连接、如此反复从而获取最新数据。

优点：长轮询与短轮询相比，明显减少了很多不必要的http请求，节约资源。
节点：连接挂起也会导致资源的浪费，停留在服务器端。
HTTP 缓存有哪几种？
浏览器缓存是性能优化的一个重要手段，对于理解缓存机制而言也是很重要的，我们来梳理一下吧:point_down:

「强缓存分为两种情况，一种是发送HTTP请求，一种不需要发送。」
首先检查强缓存，这个阶段 不需要发送HTTP请求。 通过查找不同的字段来进行，不同的HTTP版本所以不同。

Expires 即过期时间，时间是相对于服务器的时间而言的，存在于服务端返回的响应头中，在这个过期时间之前可以直接从缓存里面获取数据，无需再次请求。比如下面这样:

表示该资源在2020年 7月29日11:10:23 过期，过期时就会重新向服务器发起请求。

这个方式有一个问题：「服务器的时间和浏览器的时间可能并不一致」 ，所以HTTP1.1提出新的字段代替它。

HTTP1.1版本中，使用的就是该字段，这个字段采用的时间是过期时长，对应的是max-age。

上面代表该资源返回后6000秒，可以直接使用缓存。

当然了，它还有其他很多关键的指令，梳理了几个重要的:point_down:

当然了，当缓存资源失效了，也就是没有命中强缓存，接下来就进入协商缓存:point_down:
强缓存失效后，浏览器在请求头中携带响应的 缓存Tag来向服务器发送请求，服务器根据对应的tag，来决定是否使用缓存。

缓存分为两种， 「Last-Modified」 和 「ETag」 。两者各有优势，并不存在谁对谁有 绝对的优势 ，与上面所讲的强缓存两个Tag所不同。

这个字段表示的是 「最后修改时间」 。在浏览器第一次给服务器发送请求后，服务器会在响应头中加上这个字段。

浏览器接收到后，** 「如果再次请求」** ，会在请求头中携带 If-Modified-Since 字段，这个字段的值也就是服务器传来的最后修改时间。

服务器拿到请求头中的If-Modified-Since的字段后，其实会和这个服务器中 该资源的最后修改时间 对比:

如果请求头中的这个值小于最后修改时间，说明是时候更新了。返回新的资源，跟常规的HTTP请求响应的流程一样。
否则返回304，告诉浏览器直接使用缓存。

ETag是服务器根据当前文件的内容，对文件生成唯一的标识，比如MD5算法，只要里面的内容有改动，这个值就会修改，服务器通过把响应头把该字段给浏览器。

浏览器接受到ETag值，会在下次请求的时候，将这个值作为 **「If-None-Match」 **这个字段的内容，发给服务器。

如果两者一样的话，直接返回304，告诉浏览器直接使用缓存
如果不一样的话，说明内容更新了，返回新的资源，跟常规的HTTP请求响应的流程一样

编辑了资源文件，但是文件内容并没有更改，这样也会造成缓存失效。
Last-Modified 能够感知的单位时间是秒，如果文件在 1 秒内改变了多次，那么这时候的 Last-Modified 并没有体现出修改了。
最后，「如果两种方式都支持的话，服务器会优先考虑ETag」。
接下来我们考虑使用缓存的话，缓存的位置在哪里呢？

浏览器缓存的位置的话，可以分为四种,优先级从高到低排列分别:point_down:

指的是内存缓存，从效率上讲它是最快的，从存活时间来讲又是最短的，当渲染进程结束后，内存缓存也就不存在了。

存储在磁盘中的缓存，从存取效率上讲是比内存缓存慢的，优势在于存储容量和存储时长。

内容使用率高的话，文件优先进入磁盘

比较大的JS，CSS文件会直接放入磁盘，反之放入内存。

推送缓存，这算是浏览器中最后一道防线吧，它是 HTTP/2 的内容。具体我也不是很清楚，有兴趣的可以去了解。

如果可用的话，直接使用
资源更新，返回资源和200状态码。
否则，返回304，直接告诉浏览器直接从缓存中去资源。

首先，我们的知道区别只是语义上有区别而已，但是面试的时候，肯定不能这么回答的。

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

将一个复杂的程序依据特定的规则(规范)封装成几个文件，然后将其组合在一起，这些只是向外暴露一些接口，或者方法，与其他模块进行通信，这样子叫做是模块化的过程。

为什么要模块化，目的在于减少复杂性，减少它们相互之间的功能关系。使每个模块功能单一。

避免了命名冲突(减少了命名空间污染)

require 函数，用于导入模块

require 的第一步是解析路径获取到模块内容：

如果是核心模块，比如fs ，就直接返回模块
如果是带有路径的如/ , ./等等，则拼接出一个绝对路径，然后先读取缓存 require.cache再读取文件。如果没有加后缀，则自动加后缀然后一一识别。

首次加载后的模块会缓存在 require.cache之中，所以多次加载require，得到的对象是同一个。
在执行模块代码的时候，会将模块包装成如下模式，以便于作用域在模块范围之内。

然后根据require执行代码时需要加上的，那么实际上我们的代码长成这样：

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令import ，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的import 有点像 Unix 系统的“符号连接”，原始值变了， import 加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
运行时加载: CommonJS 模块就是对象；即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为“运行时加载”。
编译时加载: ES6 模块不是对象，而是通过 export命令显式指定输出的代码，import 时采用静态命令的形式。即在 import 时可以指定加载某个输出值，而不是加载整个模块，这种加载称为“编译时加载”。

我对模块的理解是，一个模块是实现一个特定功能的一组方法。在最开始的时候，js 只实现一些简单的功能，所以并没有模块的概念，但随着程序越来越复杂，代码的模块化开发变得越来越重要。
由于函数具有独立作用域的特点，最原始的写法是使用函数来作为模块，几个函数作为一个模块，但是这种方式容易造成全局变量的污染，并且模块间没有联系。
后面提出了对象写法，通过将函数作为一个对象的方法来实现，这样解决了直接使用函数作为模块的一些缺点，但是这种办法会暴露所有的所有的模块成员，外部代码可以修改内部属性的值。
现在最常用的是立即执行函数的写法，通过利用闭包来实现模块私有作用域的建立，同时不会对全局作用域造成污染。

如果你觉得这篇内容对你挺有有帮助的话：

点赞转发支持下吧，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）

或者你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以加入到我的Q群中:前114中6649后671，里面有许多前端学习资料以及2020大厂面试真题 点赞、评论、转发 即可免费获取，希望能够对你们有所帮助。