知识小节

JS规范有哪些

AMD、CMD、CommonJS、UMD、ESM（ JS模块化规范）open in new window

什么是语义化标签？为啥使用语义化标签?

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

优点

有利于开发和维护，语义化更具可读性
在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
方便搜索引擎能识别页面结构，有利于SEO
兼容性更好，支持更多的网络设备
让浏览器的爬虫和机器很好地解析

Sass和Less是什么？

基于CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。

Sass（Syntactically Awesome Style Sheets）是一个相对新的编程语言，Sass为web前端开发而生，可以用它来定义一套新的语法规则和函数，以加强和提升CSS。通过这种新的编程语言，你可以使用最高效的方式，以少量的代码创建复杂的设计。它改进并增强了CSS的能力，增加了变量，局部和函数这些特性。而这只使Sass一部分利器！

Less也可以这样理解。

能简单描述下洋葱模型吗？

中间件

验证洋葱模型：

const Koa = require('koa')
const app = new Koa()

// ctx: 上下文，web容器 (ctx.request、ctx.response...)
// next: 下一层中间件，下一层中间件是否能够得到执行，取决于next这个函数有没有被调用
// 第一层中间件
app.use((ctx, next) => {
  console.log('第一层中间件...1');
  ctx.response.body = 'hello world';
  next();
  console.log('第一层中间件...2');
})
// 第二层中间件
app.use((ctx, next) => {
  console.log('第二层中间件...1');
  next();
  console.log('第二层中间件...2');
})
// 第三层中间件
app.use((ctx, next) => {
  console.log('第三层中间件');
})

app.listen(3000)

第二段是/favicon.ico的请求打印

什么是SSR

服务端渲染简称 SSR，全称是 Server Side Render，是指一种传统的渲染方式，就是在浏览器请求页面URL的时候，服务端将我们需要的HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中。

与之相对的是 CSR（Client Side Render），是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。

总结

优点
1. 更快的首屏渲染
  更快的响应时间，相对于客户端渲染，服务端渲染在浏览器请求URL之后已经得到了一个带有数据的HTML文本，浏览器只需要解析HTML，直接构建DOM树就可以。
2. 利于SEO
  可以将 SEO 的关键信息直接在后台就渲染成 HTML，而保证搜索引擎的爬虫都能爬取到关键数据，然后在别人使用搜索引擎搜索相关的内容时，你的网页排行能靠得更前，这样你的流量就有越高。
缺点
1. 服务端压力较大
2. 一些常用的浏览器API可能无法正常使用（比如window、docment和alert等，如果使用的话需要对运行的环境加以判断）
3. 开发调试会有一些麻烦（因为涉及了浏览器及服务器，对于SPA的一些组件的生命周期的管理会变得复杂）

SSR 技术概述 - 掘金open in new window

浅谈服务端渲染(SSR) - 简书open in new window

什么是SEO

搜索引擎工作原理

在搜索引擎网站的后台会有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现，这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，如果“蜘蛛”认为是垃圾信息或不重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。

一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是flash和js等，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容可以被搜索引擎能识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。这样一个过程我们称之为SEO。

SEO简介

SEO(Search Engine Optimization)，即搜索引擎优化。SEO是随着搜索引擎的出现而来的，两者是相互促进，互利共生的关系。SEO的存在就是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。而优化的目的就是为了提升网站在搜索引擎中的权重，增加对搜索引擎的友好度，使得用户在访问网站时能排在前面。

SEO规范

网站结构布局优化：尽量简单、开门见山，提倡扁平化结构
一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬了。并且根据相关数据调查：如果访客经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：
1. 控制首页链接数量
2. 扁平化的目录层次（尽量在3层）
3. 导航优化（例如面包屑）
4. 利用布局，将重要内容HTML代码放在最前
5. 控制页面大小，加少http请求
网页代码优化
1. 突出重要内容---合理的设计title、description和keywords
2. 语义化书写HTML代码，符合W3C标准
3. 使用alt属性加以说明
4. 等等（更多参看链接文章）

前端SEO优化 - 掘金open in new window

一个前端知道的 SEO - 掘金open in new window

什么是SPA?和MAP区别?SPA的优缺点?

SPA是指单页面应用, 必要的代码都通过单个页面的加载而检索, 根据需要动态的装载适当的资源添加到页面中, 页面在任何时候都不会重新加载. 举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容

而MAP是指多页面应用, 每一个页面都是一个主页面, 当访问每一个页面时, 都需要重新加载 html、js、css 文件

SPA和MAP区别

SPA优缺点

优点:

具有桌面应用的即时性、网站的可移植性和可访问性
用户体验好, 内容改变不影响整个页面
良好的前后端分离, 分工明确

缺点:

不利于搜索引擎的抓取
首次渲染速度相对较慢

SPA首屏优化方式

SSR(服务端渲染, 直接返回组装好的html进行渲染)
UI框架按需引入
开启Gzip压缩(无损压缩)
静态资源本地缓存
减小入口文件体积
图片资源压缩

什么是CDN

CDN的全称是Content Delivery Network，即内容分发网络。由于CDN是为加快网络访问速度而被优化的网络覆盖层，因此被形象地称为“网络加速器”。

CDN简介

实现方法： 通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接和负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，加快访问速度。

原理：广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。

目的： 使用户可就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。

CDN工作流程

不使用CDN：

用户在自己的浏览器中输入要访问的网站域名。
浏览器向本地DNS服务器请求对该域名的解析。
本地DNS服务器中如果缓存有这个域名的解析结果，则直接响应用户的解析请求。
本地DNS服务器中如果没有关于这个域名的解析结果的缓存，则以递归方式向整个DNS系统请求解析，获得应答后将结果反馈给浏览器。
浏览器得到域名解析结果，就是该域名相应的服务设备的 IP地址。
浏览器向服务器请求内容。
服务器将用户请求内容传送给浏览器。

使用CDN：

当用户点击网站页面上的内容URL，经过本地DNS系统解析，DNS 系统会最终将域名的解析权交给 CNAME 指向的 CDN 专用 DNS 服务器。
CDN 的 DNS 服务器将 CDN 的全局负载均衡设备 IP 地址返回用户。
用户向 CDN 的全局负载均衡设备发起内容 URL 访问请求。
CDN 全局负载均衡设备根据用户 IP 地址，以及用户请求的内容URL，选择一台用户所属区域的区域负载均衡设备，告诉用户向这台设备发起请求。
基于以下这些条件的综合分析之后，区域负载均衡设备会向全局负载均衡设备返回一台缓存服务器的IP地址：
- 根据用户 IP 地址，判断哪一台服务器距用户最近；
- 根据用户所请求的 URL 中携带的内容名称，判断哪一台服务器上有用户所需内容；
- 查询各个服务器当前的负载情况，判断哪一台服务器尚有服务能力。
全局负载均衡设备把服务器的 IP 地址返回给用户。
用户向缓存服务器发起请求，缓存服务器响应用户请求，将用户所需内容传送到用户终端。如果这台缓存服务器上并没有用户想要的内容，而区域均衡设备依然将它分配给了用户，那么这台服务器就要向它的上一级缓存服务器请求内容，直至追溯到网站的源服务器将内容拉到本地。

CDN的作用

加速访问
实现跨运营商、跨地域的全网覆盖
保障你的网站安全（CDN的负载均衡和分布式存储技术，可以加强网站的可靠性）
异地备援（当某个服务器发生意外故障时，系统将会调用其他临近的健康服务器节点进行服务）
节约成本
让你更专注业务本身

什么是AST（抽象语法树）

什么是AST

抽象语法树 (Abstract Syntax Tree)，简称 AST，它是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

在 JS 的世界中，我们可以认为 AST 是最底层，再往下，就是关于转换和编译的“黑魔法”领域了。

AST如何生成

读取 js 文件中的字符流，然后通过词法分析生成 token
通过语法分析( Parser )生成 AST，最后生成机器码执行

词法分析

词法分析，也称之为扫描（scanner），简单来说就是调用 next() 方法，一个一个字母的来读取字符，然后与定义好的 JavaScript 关键字符做比较，生成对应的Token。Token 是一个不可分割的最小单元:

例如 var 这三个字符，它只能作为一个整体，语义上不能再被分解，因此它是一个 Token。

词法分析器里，每个关键字是一个 Token ，每个标识符是一个 Token，每个操作符是一个 Token，每个标点符号也都是一个 Token。除此之外，还会过滤掉源程序中的注释和空白字符（换行符、空格、制表符等。

语法分析

语法分析会将词法分析出来的 Token 转化成有语法含义的抽象语法树结构。同时，验证语法，语法如果有错的话，抛出语法错误。

举例

第一个例子

const fn = a => a;

用人话翻译这个图就是：用类型 const 声明变量 fn 指向一个箭头函数表达式，它的参数是 a ，函数体也是 a。

第二个例子

const fn = a => {
    let i = 1;
  return a + i;
};

AST Explorer 网站open in new window

# 知识小节

# JS规范有哪些

# 什么是语义化标签？为啥使用语义化标签?

# Sass和Less是什么？

# 能简单描述下洋葱模型吗？

# 什么是SSR

# 什么是SEO

# 什么是SPA?和MAP区别?SPA的优缺点?

# SPA首屏优化方式

# 什么是CDN

# CDN简介

# CDN工作流程

# CDN的作用

# 什么是AST（抽象语法树）

# 什么是AST

# AST如何生成

# 词法分析

# 语法分析

# 举例

#