
> 在现代Web开发中，搜索引擎优化（SEO）是提高网站可见性和流量的重要手段。Next.js作为一个功能强大的React框架，凭借其内置的SEO支持以及丰富的工具和策略，成为构建高性能、SEO友好的Web应用的首选框架之一。本文将深入探讨Next.js的SEO优化方案，并通过代码示例展示具体实现方法。

#### 一、Next.js的SEO优势

Next.js提供了多种内置功能，使得开发者能够轻松实现SEO优化。这些功能包括但不限于：

1. **自动处理`<head>`标签**：Next.js提供了`Head`组件，允许开发者动态管理页面的元信息，如标题、描述、canonical等。
2. **预渲染技术**：Next.js支持静态生成（Static Generation, SG）和服务器端渲染（Server-Side Rendering, SSR），这两种技术都能提供完整的HTML结构供搜索引擎爬虫抓取，从而提升SEO排名。
3. **基于文件的路由系统**：Next.js使用基于文件的路由系统，使得创建干净且对SEO友好的URL变得容易。
4. **next-seo库**：next-seo是一个专门为Next.js设计的库，它提供了一组React组件，允许开发者轻松地将与SEO相关的元标记添加到页面中。

#### 二、Next.js SEO优化方案

##### 1. 使用`Head`组件管理页面元信息

Next.js的`Head`组件允许开发者在页面中设置和管理`<head>`标签，这些标签对于搜索引擎来说非常重要。通过`Head`组件，可以设置页面的标题、描述信息以及关键词等，从而吸引搜索引擎和用户的关注，提升网站在搜索结果中的点击率。

```jsx
import Head from 'next/head';

const HomePage = () => (
  <>
    <Head>
      <title>Home Page</title>
      <meta name="description" content="This is the description of the Home Page" />
    </Head>
    <h1>Welcome to the Home Page!</h1>
  </>
);

export default HomePage;
```

##### 2. 使用next-seo库添加元标记

next-seo是一个流行的库，它允许开发者轻松地将与SEO相关的元标记添加到Next.js应用程序中。搜索引擎使用这些标签（如标题和描述标签）来了解页面内容并将其显示在搜索结果中。

首先，需要安装next-seo库：

```bash
npm install next-seo
# 或者
yarn add next-seo
```

然后，在页面中导入并使用next-seo组件：

```jsx
import Head from 'next/head';
import { DefaultSeo, SEO } from 'next-seo';

const Home = () => {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
      </Head>
      <SEO
        title="My Next.js App"
        description="This is my Next.js app, it's awesome!"
        openGraph={{
          title: 'My Next.js App',
          description: 'This is my Next.js app, it\'s awesome!',
          url: 'https://mynextjsapp.com',
          images: [
            {
              url: 'https://mynextjsapp.com/og-image.jpg',
              alt: 'My Next.js App',
            },
          ],
          site_name: 'My Next.js App',
        }}
      />
      <p>Welcome to my Next.js app!</p>
    </div>
  );
};

export default Home;
```

在这个示例中，我们使用了`SEO`组件来设置页面的标题、描述以及OpenGraph标签。同时，`Head`组件中也设置了标题标签，这是Next.js中添加元标签的标准方式。

##### 3. 优化URL结构

合理的URL结构能提升搜索引擎对网站的认可度，从而带来更好的排名和流量。Next.js使用基于文件的路由系统，使得创建干净且对SEO友好的URL变得容易。此外，Next.js还支持动态路由，允许开发者创建具有良好结构的URL。

```jsx
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;
  return <p>Post: {id}</p>;
};

export default Post;
```

在这个示例中，我们创建了一个动态路由页面`Post`，通过`useRouter`钩子获取路由参数`id`，并将其显示在页面中。

##### 4. 内容质量和关键词优化

除了技术层面的优化，还需要关注网站的内容质量和关键词优化。Next.js的静态生成和服务端渲染能够帮助实现高质量的内容展示，而在内容中合理地布局关键词，并进行内部链接的优化，也是提升网站SEO的重要策略。

##### 5. 使用预渲染技术提升性能

Next.js提供了静态生成和服务器端渲染两种预渲染技术，这两种技术都能提供完整的HTML结构供搜索引擎爬虫抓取，从而提升SEO排名。同时，预渲染技术还能显著提升页面加载速度和服务器资源利用率。

- **静态生成**：适用于内容相对固定、更新频率较低的页面。

```jsx
export const getStaticProps = async () => {
  const posts = await fetchPostsFromApi(); // 获取静态数据
  return {
    props: { posts },
    revalidate: 60, // 可选，指定数据刷新间隔（秒）
  };
};

function HomePage({ posts }) {
  // 页面渲染逻辑
}
```

- **服务器端渲染**：适用于需要实时数据、个性化内容或动态路由的应用场景。

```jsx
export const getServerSideProps = async (context) => {
  const currentUserId = context.req.user?.id; // 从请求上下文中获取当前用户ID
  const personalizedData = await fetchPersonalizedData(currentUserId); // 获取实时数据
  return {
    props: { personalizedData },
  };
};

function UserProfilePage({ personalizedData }) {
  // 页面渲染逻辑
}
```

##### 6. 图片优化

在网站开发中，图片通常是占用较大资源的内容。Next.js提供了`Image`组件来进行图片优化，包括懒加载、响应式加载等策略，以提升页面的加载速度和性能表现。

```jsx
import Image from 'next/image';

function BlogPost({ post }) {
  return (
    <>
      <Image
        src={post.featuredImage.url}
        alt={post.title}
        width={800}
        height={450}
        layout="responsive"
      />
      {/* 页面内容 */}
    </>
  );
}
```

##### 7. 代码分割和懒加载

Next.js支持代码分割和按需加载，通过动态导入和懒加载的方式，可以将页面和组件进行分割，按需加载，以减少初始加载时的资源压力，提升页面的响应速度。

```jsx
const SomeComponent = React.lazy(() => import('../components/SomeComponent'));

function MyPage() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SomeComponent />
      </Suspense>
    </div>
  );
}
```

##### 8. 缓存策略

通过合理地设置HTTP缓存策略、使用CDN加速等手段，可以有效地提升网站的访问速度和性能表现，为用户提供更好的体验。

#### 三、总结

Next.js凭借其强大的静态生成、服务器端渲染以及对SEO的深度支持，已成为构建高性能、高SEO友好Web应用的首选框架之一。通过合理的URL结构、页面标题和描述、内容质量和关键词优化，以及图片优化、代码分割和懒加载、缓存策略等手段，可以提升网站在搜索引擎中的排名，以及网站的加载速度和用户体验。这些策略都是基于Next.js丰富的特性和工具而提供的，可以帮助开发者构建性能优秀、SEO友好的Web应用。

在Next.js的SEO优化过程中，next-seo库是一个不可或缺的工具，它使得添加和管理SEO元标记变得更加容易和高效。同时，Next.js的预渲染技术、动态路由、图片优化等功能也为SEO优化提供了强有力的支持。

作为开发者，我们应该充分利用Next.js的这些功能和工具，不断优化和提升网站的SEO效果，从而为网站带来更多的流量和曝光机会。希望本文能够为你的Next.js SEO优化之路提供一些有用的启示和帮助。

在现代Web开发中，搜索引擎优化（SEO）是提高网站可见性和流量的重要手段。Next.js作为一个功能强大的React框架，凭借其内置的SEO支持以及丰富的工具和策略，成为构建高性能、SEO友好的Web应用的首选框架之一。本文将深入探讨Next.js的SEO优化方案，并通过代码示例展示具体实现方法。

Next.js SEO优化方案全解析

### rem 与 em：CSS中的相对单位深度解析

在Web开发中，字体大小的控制是至关重要的。它不仅影响着网页的可读性，还直接关系到整体的设计美感。在CSS中，我们有两种主要的相对单位来设置字体大小：rem和em。尽管它们看起来相似，但实际上，它们的工作原理和应用场景有着显著的差异。今天，我们就来深入了解一下这两个单位。

#### 一、rem：全局的相对单位

**定义**：
rem，全称“root em”，是一个相对于HTML文档的根元素（即<html>标签）的字体大小的单位。这意味着，无论你在文档的哪个位置，使用rem设置的字体大小都会基于根元素的字体大小进行计算。

**工作原理**：
假设根元素的字体大小设置为16px（这是许多浏览器的默认值），那么1rem就等于16px。如果你将某个元素的字体大小设置为2rem，那么它的字体大小就会是32px（16px * 2）。

**应用场景**：
rem单位非常适合用于全局的字体大小设置。通过调整根元素的字体大小，你可以轻松地改变整个网站的字体大小，而无需逐个修改每个元素的字体大小。这使得rem成为响应式设计中的理想选择，因为你可以根据设备的屏幕尺寸动态地调整根元素的字体大小，从而改变整个网站的字体大小。

#### 二、em：局部的相对单位

**定义**：
em是一个相对于其父元素的字体大小的单位。这意味着，使用em设置的字体大小会根据其父元素的字体大小进行计算。

**工作原理**：
如果父元素的字体大小为16px，那么1em就等于16px。如果你将某个子元素的字体大小设置为2em，那么它的字体大小就会是父元素字体大小的两倍，即32px。如果父元素的字体大小发生了变化，那么子元素使用em设置的字体大小也会相应地发生变化。

**应用场景**：
em单位更适合用于局部的字体大小设置，特别是当你需要相对于父元素的字体大小进行设置时。例如，在创建文本层级时，你可以使用不同的em值来设置不同层级的字体大小，从而创建更加灵活和可伸缩的布局。

#### 三、rem与em的对比

1. **全局与局部**：
   - rem是全局的相对单位，它基于根元素的字体大小进行计算。
   - em是局部的相对单位，它基于父元素的字体大小进行计算。

2. **可读性和一致性**：
   - 使用rem可以更容易地实现全局字体大小的一致性，因为所有使用rem设置的字体大小都会基于同一个根元素进行计算。
   - 使用em可以创建更加灵活和可伸缩的布局，但需要注意父元素字体大小对子元素字体大小的影响。

3. **响应式设计**：
   - rem更适合用于响应式设计，因为你可以通过调整根元素的字体大小来轻松地改变整个网站的字体大小。
   - 虽然em也可以用于响应式设计，但通常需要更多的计算和调整。

#### 四、使用注意事项

- 在使用rem时，需要确保根元素的字体大小被正确设置，以便整个网站的字体大小能够保持一致。
- 在使用em时，需要注意父元素的字体大小对子元素字体大小的影响，以避免出现意外的视觉效果。
- 在进行复杂的布局和样式设计时，可以结合使用rem和em来创建更加灵活和可伸缩的布局。

#### 五、总结

rem和em都是CSS中用于设置字体大小的相对单位，但它们的工作原理和应用场景有所不同。选择使用哪个单位取决于你的具体需求和设计目标。通过了解它们的差异和优势，你可以更好地控制网页的字体大小，从而创建更加美观和可读的网页。

在Web开发中，字体大小的控制是至关重要的。它不仅影响着网页的可读性，还直接关系到整体的设计美感。在CSS中，我们有两种主要的相对单位来设置字体大小：rem和em。尽管它们看起来相似，但实际上，它们的工作原理和应用场景有着显著的差异。今天，我们就来深入了解一下这两个单位。

rem 与 em：CSS中的相对单位深度解析

## 前言
> 近期，阮一峰在[科技爱好者周刊第 325 期](https://www.ruanyifeng.com/blog/2024/11/weekly-issue-325.html)中推荐了一款开源工具——ReactPress，ReactPress一个基于 Next.js 的博客和 CMS 系统，可查看 [demo](https://blog.gaoredu.com/)站点。（@[fecommunity](https://github.com/fecommunity/reactpress) 投稿）

![2024-11-24/RB88NO19NMJGHY35OXTQHO..png](https://api.gaoredu.com/public/uploads/2024-11-24/RB88NO19NMJGHY35OXTQHO..png)


在数字化时代，内容创作与发布已成为连接读者与作者的重要桥梁。而在这个过程中，一个高效、灵活且功能丰富的发布平台显得尤为重要。近期，阮一峰在科技爱好者周刊中推荐了一款开源工具——ReactPress，它凭借其出色的性能和多样化的功能，吸引了众多开发者和内容创作者的目光。


 此项目是基于 React + antd + NestJS + NextJS + MySQL  的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。
项目地址：https://github.com/fecommunity/reactpress
 



![2024-11-10/KQFCPOSHPESKXJGYLZ8XVA..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8XVA..png)

此项目是用于构建博客网站的，包含前台展示、管理后台和后端。


> 此项目是基于 React + antd + NestJS + NextJS + MySQL  的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。
> 项目地址：<https://github.com/fecommunity/reactpress>

*   前台&管理后台展示: <https://github.com/fecommunity/reactpress/tree/master/client>
*   后端：<https://github.com/fecommunity/reactpress/tree/master/server>
*   ReactPress在线演示站点：<https://blog.gaoredu.com/>


- 前台&管理后台展示: https://github.com/fecommunity/reactpress/tree/master/client
- 后端：

## 1. 效果图
### 1.1 前台展示

#### pc 端
![2024-11-10/KQFCPOSHPESKXJGYLZ8ZQ7..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZQ7..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZWA..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZWA..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ902D..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ902D..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ908G..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ908G..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ90EJ..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ90EJ..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ90KM..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ90KM..png)


#### 移动端适配
![2024-11-10/KQFCPOSHPESKXJGYLZ8Y1D..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Y1D..png)


### 管理后台
管理后台是在蚂蚁金服用户开源的 antd 5.0 基础上进行开发的。
![2024-11-10/KQFCPOSHPESKXJGYLZ8Y7G..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Y7G..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8YDJ..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YDJ..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8YJM..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YJM..png)


![2024-11-10/KQFCPOSHPESKXJGYLZ8YPP..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YPP..png)


![2024-11-10/KQFCPOSHPESKXJGYLZ8YVS..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YVS..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8Z1V..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Z1V..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZE1..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZE1..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZK4..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZK4..png)




## 2. 体验地址

网站首页：https://blog.gaoredu.com/
管理后台：https://blog.gaoredu.com/admin

## 3. 计划
这次是一个完整的全栈式开发，只要部署了这个项目的代码，是完全可以搭建好博客网站的。


### 环境准备
```bash
$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i
```

### 配置文件

项目启动后会加载根目录下的 `.env` 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 `reactpress` 数据库

```js
DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=reactpress // 用户名
DB_PASSWD=reactpress // 密码
DB_DATABASE=reactpress // 数据库
```

环境准备好后，执行启动命令：

```bash
$ pnpm run dev
```

打开浏览器访问 http://127.0.0.1:3001


## 4. 收获与感触
学而不用，基本等于没学，因为最近一直在做自己的个人博客网站，所以好久没更新技术文章了；而且是利用业余时间做的，所以经过差不多两个月的搬砖，现在网站终于都上线了。
开发网站的这段时间里，每天晚上几乎都搬砖到接近 11 点，周末的时间大多也在搬砖，每天写完文章，也快 12 点了，搬砖不易啊，喜欢或者觉得不错的，欢迎到 github 上给个 star，谢谢。

## 5. 文档教程
- 项目地址： https://github.com/fecommunity/reactpress
- next.js 源码：https://github.com/vercel/next.js
- nest.js 源码：https://github.com/nestjs/nest



此项目是基于 React + antd + NestJS + NextJS + MySQL  的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。

阮一峰推荐工具：基于React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站

<h1>ReactPress</h1>

ReactPress 是一套集成文章发表、页面创建、知识库管理、博客后台管理等功能于一体的博客系统。

## ✨ 特性

- 📦 技术栈：基于 `React` + `MySQL` + `NestJS` + `NextJS` 构建
- 🌈 组件化：基于 `antd` 的交互语言和视觉风格
- 🌍 国际化：支持中英文切换，国际化配置管理能力
- 🌞 黑白主题：支持亮色和暗黑模式主题自由切换
- 🖌️ 创作管理：内置 `MarkDown` 编辑器，支持文章写文章、分类目录管理，标签管理
- 📃 页面管理：支持自定义新页面
- 💬 评论管理：支持内容评论管理
- 📷️ 媒体管理：支持文件本地上传和 `OSS` 文件上传
- ...

## ⌨️ 本地开发

### 环境准备
```bash
$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i
```

### 配置文件

项目启动后会加载根目录下的 `.env` 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 `reactpress` 数据库

```js
DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=admin // 用户名
DB_PASSWD=admin // 密码
DB_DATABASE=reactpress // 数据库
```

环境准备好后，执行启动命令：

```bash
$ pnpm run dev
```

打开浏览器访问 http://127.0.0.1:3001


## 🔗 链接

- [首页](https://github.com/fecommunity/reactpress)
- [高热度网](https://gaoredu.com)
- [报告问题](https://github.com/fecommunity/reactpress/issues)
- [参与共建](https://github.com/fecommunity/reactpress/pulls) 
- [next.js 源码](https://github.com/vercel/next.js)
- [nest.js 源码](https://github.com/nestjs/nest)


> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。

## 👥 社区互助

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
<img style="width:30%" src="https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG23.jpg">

- 通过 WeChat 联系，可通过搜素微信号 `red_tea_v2` 或扫码加入 ，并备注来源。

- 通过 GitHub Discussions 提问时，建议使用 `Q&A` 标签。

- 通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `reactpress` 标签。


1. [GitHub Discussions](https://github.com/ant-design/ant-design/discussions)
2. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
3. [Segment Fault](https://segmentfault.com/t/antd)（中文）


ReactPress 是一套集成文章发表、页面创建、知识库管理、博客后台管理等功能于一体的博客系统。


什么是ReactPress？

# Ajax 

## 1. 介绍一下ajax并代码实现 
### 1.1 基本概念 
>  avaScript 和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

[Ajax | MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX)


### 1.2 创建一个简单的Ajax

 - 创建 XMLHttpRequest 对象
```js
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
```

 - 绑定onreadystatechange 事件
```js
httpRequest.onreadystatechange = function(){
    // Process the server response here.
};
```

 - 向服务器发送请求
```js
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();
```

完整的例子
```js
function ajax(url, cb) {
  let xhr;
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      cb(xhr.responseText);
    }
  }
  xhr.open('GET', url, true);
  xhr.send();
}
```

### 1.3 httpRequest.readyState的值(熟记)

 - 0 (未初始化) or (请求还未初始化)
 - 1 (正在加载) or (已建立服务器链接)
 - 2 (加载成功) or (请求已接受)
 - 3 (交互) or (正在处理请求)
 - 4 (完成) or (请求已完成并且响应已准备好)


### 1.4 访问服务端返回的数据

 - httpRequest.responseText
   - 服务器以文本字符的形式返回
 - httpRequest.responseXML
   - 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理


### 1.5 GET 注意事项

 -  如果不设置响应头 `Cache-Control: no-cache` 浏览器将会把响应缓存下来而且再也不无法重新提交请求。你也可以添加一个总是不同的 GET 参数，比如时间戳或者随机数 (详情见 [bypassing the cache](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache))


### 1.6 POST 请求
> [!NOTE]
> POST请求则需要设置`RequestHeader`告诉后台传递内容的编码方式以及在send方法里传入对应的值

```js
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type": "application/x-www-form-urlencoded");
xhr.send("key1=value1&key2=value2");
```


### 1.7 Ajax如何携带cookie(面试加分)
 - ajax会自动带上同源的cookie，不会带上不同源的cookie
 - 可以通过前端设置withCredentials为true， 后端设置Header的方式让ajax自动带上不同源的cookie，但是这个属性对同源请求没有任何影响。会被自动忽略。

[withCredentials | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials)

```js
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);
```


【计算机网络】Ajax

# HTML基础强化
## 1.如何理解HTML？
1. HTML类似于一份word“文档”
2. 描述文档的“结构”
3. 有区块和大纲

## 2.对WEB标准的理解？
> Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。

对应的标准也分三方面：
+ 结构化标准语言主要包括XHTML和HTML以及XML，
+ 表现层标准语言主要包括CSS，
+ 行为标准主要包括对象模型，DOM、ECMAScript等

### 2.1 结构层标准
> 结构化标准语言，就是W3C规定的主要包括HTML和XHTML以及XML，在页面body里面我们写入的标签都是为了页面的结构。

1. 标签的书写，需要开始和结束。单便签除外；
2. 块级元素不能放在p标签里面。li内可以包含div标签。
3. 块元素里面可以放在块和内联，特殊的 p和 h1—h6里面不要放块元素，li和div可以放很多。因为这两个标签，本身就有容器的属性
4. 内联里面要放内联，不要放块。（嵌套关系）
5. 结构与表现分离
6. 命名一定要规范

### 2.2 表现层标准
> 表现标准语言主要包括CSS（Cascading Style Sheets）层叠式样式表，通过CSS样式表，W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言，通过CSS样式可以是页面的结构标签更具美感。

1.	尽可能使用外部引入的方式，达到分离的目的
2.	CSS选择器，优先级
3.	代码简洁

### 2.3 行为层标准
> 行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，标准主要包括对象模型（如W3C DOM）、ECMAScript并要求这三部分分离。

+ DOM是Document Object Model文档对象模型的缩写。DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

+ ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的标准脚本语言（JAVAScript）

## 3.对W3C的认识？
> W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范。

主要包含如下几点：
### 3.1 对于结构的要求
+ 1）标签字母要小写
+ 2）标签要闭合
+ 3）标签不允许随意嵌套
  
### 3.2 对于css和js的要求
+ 1）尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
+ 2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。
+ 3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
  
## 4.什么是前端语义化？
> [!NOTE]
>语义化就是是让机器可以读懂内容，web页面的解析是由搜索引擎来进行搜索，机器来解析。

### 4.1 标签是有语义的
h1~h6、thead、ul、ol等标签，初期的语义化标签：程序员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值）（使用有语义的对于需要声明的变量和class，id）
### 4.2 HTML5的语义标签
w3C采用了header/footer; section（章节、页眉、页脚）/article（内容区域）; nav导航；aside 不重要的内容；em(emphasize)/strong增强; i(icon)制作图标

## 5.谈一下页面布局架构？
+ CSS布局：table布局，float布局，flex布局（瀑布流布局），inline-block布局
+ 三大框架，页面架构

## 6.HTML的版本问题？
1. HTML4/4.0.1(SGML)(标签允许不结束)
2. XHTML(XML)（标签必须结束，属性必须带引号，属性必须有值，标签属性必须有值）
3. HTML5（类似于HTML4的写法）

> [!NOTE]
> 关键点：HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

## 7.HTML5新增的内容有哪些？
1. 新的区块标签：section,article,nav,aside
2. 表单增强：日期、时间、搜索（修改type的类型实现）；表单验证；placeholder
3. 语义增强：header/footer; section/article; nav导航；aside 不重要的内容；em(emphasize)/strong增强; i(icon)制作图标

## 8.HTML的元素分类？
+ 块级元素block（方块形状，占据一整行）：div ul ol li dl dt dd h1 h2 h3 h4…p
+ 行内元素inline(一行中的某个位置)：a b span img input select strong（强调的语气）
+ inline-block(行内，有宽高属性)：selection

> [!NOTE]
> 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
> 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
> 空元素:br、meta、hr、link、input、img

## 9.HTML嵌套关系？
1. 块级元素可以包含行内元素
2. 块级元素不一定能包含块级元素(p标签不能包含div标签)
3. 行内元素“一般”不能包含块级元素（a包含div是可以的）

## 10.HTML的默认样式？
1. 默认样式的意义
2. 默认样式代理的问题
3. CSS Reset 的作用

```css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
```

## 11.使用ajax方式来提交数据可以不使用form标签吗？
1. form标签可以使用submit, reset
2. 使用form可以直接一次性获取所有的form窗体的数据属性
3. form可以较好地实现表单验证等功能

### 11.1 Form表单提交
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="login test">   
</head>
<body>
<div id="form-div">
    <form id="form1" action="/users/login" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>
```
### 11.2 ajax提交
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function login() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    </script>
</head>
<body>
<div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>
```
> [!NOTE]
> 扩展思考：Form表单提交数据给一个非同源的网址，如在A网址(http://www.A.com)上直接向B网站(http://www.B.com)发送数据请求, 为什么不会触发浏览器的同源策略限制呢？

【HTML相关】HTML基础强化

11.使用ajax方式来提交数据可以不使用form标签吗？

# 运行环境	
## 4.1 页面加载过程	
### 4.1.1 从输入url到得到HTML的详细过程	
> [!NOTE]
> 参考计算机网络章节考点总结

### 4.1.2 window.onload和DOMContentLoaded的区别	
1. onload: 会在页面上的全部资源加载完毕之后执行（包括图片、视频）
2. DOMContentLoaded：（会在页面的DOM渲染完成之后执行，此时页面图片、视频还可能没有加载完毕）
3. jQuery和zepto这些类似的类库都是使用DOMContentLoaded来实现的

### 4.1.3 浏览器加载资源的形式有哪些？	
1. 输入url（或跳转页面）加载html---（eg: 输入http://www.baidu.com）
2. 加载html中的静态资源（CSS，JS，图片等）

### 4.1.4 描述一下浏览器渲染页面的过程	
1. 根据HTML结构生成DOM Tree（单个节点，没样式）
2. 根据CSS生成CSSOM（CSS对象模型）
3. 将DOM和CSSOM整合生成一个RenderTree（每个节点都有自己的样式）
4. 根据RenderTree开始渲染和显示
5. 遇到**script**标签的时候，会执行并阻塞渲染（渲染权交给了js）----JS加载完毕之后然后执行代码
   
### 4.1.5 CSS和JS的位置问题？
#### CSS
1. 浏览器是自上而下进行解析的，防止出现多次渲染
2. CSS加载不会阻塞DOM树的解析，但是会阻塞DOM树的加载、css加载会阻塞后面js语句的执行

#### JS
1. 可以让页面快速的展示，提升性能
2. 可以在此处获取到页面上所有的标签


## 4.2 性能优化	
### 4.2.1 前端性能优化的方法有哪些	
1. 资源的合并和压缩（HTML，CSS，JS压缩混淆，文件合并）
2. 图片资源的优化
   图片压缩处理
   CSS雪碧图
   Image Inline（Base64编码）
   使用SVG和webp格式的图片
### 4.2.2 懒加载和预加载的区别和实现原理?
> [!NOTE]
> - 懒加载的实现：当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中

> - 预加载的实现：提前加载图片，当用户需要查看时可直接从本地缓存中渲染
1.	使用img标签
2.	创建img对象
3.	Ajax请求（跨域问题）

### 4.2.3 重绘和回流的区别？
> [!NOTE]
> 重绘：当render tree中的一些元素需要更新属性（只影响元素外观、风格，不影响布局）

> 回流：当render tree中的一部分因为元素的尺寸、布局、隐藏等盖面需要重新构建（页面布局和集合属性改变）

#### 避免重绘和回流的两种方法
1.	使用不会触发回流的标签（避免使用触发重绘、回流的CSS属性）
2.	将重绘、回流的影响范围限制在单独的图层之内

#### 开启浏览器自动创建图层的方法
1. transform:translatez(0)
2. z-index
3. **video** 和 **canvas**标签

#### 性能优化点：
1. 使用top会触发回流，translate不会（transform : translaeY(0)）
2. 使用opacity替换visibility（visibility会触发重绘）
3. 使用className替代style

## 4.3 安全问题	
### 4.3.1	前端的安全问题及预防措施	
#### XSS攻击
利用用户的cookie进行恶意欺骗（cookie发送到外部服务器）[标签转义、白名单、黑名单过滤]
#### CSRF攻击
论坛发送了一个删帖的API链接（图片），结果删除了自己的帖子。[恶意发帖、删帖]（验证码、token）
#### 二者区别
XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包



【JS相关】运行环境

4.1.1 从输入url到得到HTML的详细过程

4.1.2 window.onload和DOMContentLoaded的区别

4.1.3 浏览器加载资源的形式有哪些？

4.1.4 描述一下浏览器渲染页面的过程

4.2.1 前端性能优化的方法有哪些

4.2.2 懒加载和预加载的区别和实现原理?

开启浏览器自动创建图层的方法

4.3.1   前端的安全问题及预防措施

# RESTful
## 1. 谈一下你对RESTful的理解？
> [!NOTE]
> REST (Representational State Transfer)，中文意思是：表述性状态转移。 一组架构约束条件和原则，如果一个架构符合 REST 的约束条件和原则，我们就称它为 RESTful 架构。

### 1.1 RESTful基本概念
 - 在 REST 中，一切的内容都被认为是一种资源
 - 每个资源都由 URI 唯一标识
 - 使用统一的接口处理资源请求（POST/GET/PUT/DELETE/HEAD）
 - 无状态（每次请求之前是无关联，没有 session ）

### 1.2 理解RESTful
下面我们结合REST原则，围绕资源展开讨论，从资源的定义、获取、表述、关联、状态变迁等角度，列举一些关键概念并加以解释。

 - 资源与URI
 - 统一资源接口
 - 资源的表述
 - 资源的链接
 - 状态的转移


#### 1.2.1  资源和URI
 - 使用 `/` 来表示资源的层级关系
 - 使用 `?` 用来过滤资源
 - 使用 `_` 或者 `-` 让URI的可读性更好
 - `,` 或 `;` 可以用来表示同级资源的关系



#### 1.2.2  统一资源接口

| 请求方法 | 描述                                                             |
| -------- | ---------------------------------------------------------------- |
| GET      | 获取某个资源。 幂等（取多少次结果都没有变化）                    |
| POST     | 创建一个新的资源                                                 |
| PUT      | 替换某个已有的资源（更新操作） ， 幂等（更新多次只保存一个结果） |
| DELETE   | 删除某个资源                                                     |
| HEAD     | 主要用于确认 URL 的有效性以及资源更新的日期时间等                |
| PATCH    | 新引入的，对PUT方法的补充，用来对已知资源进行局部更新            |



#### 1.2.3 资源表述
> [!NOTE]
> 客户端获取的只是资源的表述而已。资源在外界的具体呈现，可以有多种表述(或成为表现、表示)形式，在客户端和服务端之间传送的也是资源的表述，而不是资源本身。文本资源可以采用 html、xml、json 等格式，图片可以使用 PNG 或 JPG 展现出来。

资源的表述包括数据和描述数据的元数据，例如，HTTP 头 “Content-Type” 就是这样一个元数据属性。

那么客户端如何知道服务端提供哪种表述形式呢？

答案是可以通过 HTTP 内容协商，客户端可以通过 Accept 头请求一种特定格式的表述，服务端则通过 Content-Type 告诉客户端资源的表述形式。

MIME 类型

accept: text/xml html文件

Content-Type告诉客户端资源的表述形式



#### 1.2.4 资源的链接
> [!NOTE]
> 超媒体即应用状态引擎（可以做多层链接）

https://api.github.com/repos/github
```
{
  "message": "Not Found",
  "documentation_url": "https://developer.github.com/v3"
}
```



#### 1.2.5 状态转移

服务器端不应该保存客户端状态。

应用状态 -> 服务器端不保存应用状态

访问订单 根据接口去查询

访问商品 查询


【计算机网络】RESTful

# Webpack性能优化
## 1. 谈一下如何使用Webpack进行性能优化？
> [!NOTE]
 - 有哪些方式可以减少 Webpack 的打包时间
 - 有哪些方式可以让 Webpack 打出来的包更小

### 1.1 减小打包后文件体积
#### 1.1.1 按需加载
如果我们将页面全部打包进一个 JS 文件的话，虽然将多个请求合并了，但是同样也加载了很多并不需要的代码，耗费了更长的时间。那么为了首页能更快地呈现给用户，我们肯定是希望首页能加载的文件体积越小越好，这时候我们就可以使用按需加载，将每个路由页面单独打包为一个文件。

#### 1.1.2 Tree Shaking
Tree Shaking 可以实现删除项目中未被引用的代码，比如
```js
// test.js
export const a = 1
export const b = 2
// index.js
import { a } from './test.js'
```

1. 对于以上情况，test 文件中的变量 b 如果没有在项目中使用到的话，就不会被打包到文件中。

2. 如果你使用 Webpack 4 的话，开启生产环境就会自动启动这个优化功能。

#### 1.1.3 Scope Hoisting
> Scope Hoisting 会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去。


比如我们希望打包两个文件

```js
// test.js
export const a = 1
// index.js
import { a } from './test.js'
```

对于这种情况，我们打包出来的代码会类似这样
```js
[
  /* 0 */
  function (module, exports, require) {
    //...
  },
  /* 1 */
  function (module, exports, require) {
    //...
  }
]
```
但是如果我们使用 Scope Hoisting 的话，代码就会尽可能的合并到一个函数中去，也就变成了这样的类似代码
```js
[
  /* 0 */
  function (module, exports, require) {
    //...
  }
]
```
样的打包方式生成的代码明显比之前的少多了。如果在 Webpack4 中你希望开启这个功能，只需要启用 optimization.concatenateModules 就可以了。
```js
module.exports = {
  optimization: {
    concatenateModules: true
  }
}
```

## 1.2 加快打包速度
### 1.2.1 优化 Loader
> [!NOTE]
> 对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST（抽象语法树），然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。

首先我们可以**减小 Loader 的文件搜索范围**
```js
module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夹下查找
        include: [resolve('src')],
        // 不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}
```
还可以将 Babel 编译过的文件缓存起来，下次只需要编译更改过的代码文件即可，这样可以大幅度加快打包时间。
```js
  loader: 'babel-loader?cacheDirectory=true'
```

### 1.2.2 HappyPack
> [!NOTE]
> 受限于 Node 是单线程运行的，所以 Webpack 在打包的过程中也是单线程的，特别是在执行 Loader 的时候，长时间编译的任务很多，这样就会导致等待的情况。

**HappyPack 可以将 Loader 的同步执行转换为并行的**，这样就能充分利用系统资源来加快打包效率了
```js
module: {
  loaders: [
    {
      test: /\.js$/,
      include: [resolve('src')],
      exclude: /node_modules/,
      // id 后面的内容对应下面
      loader: 'happypack/loader?id=happybabel'
    }
  ]
},
plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: ['babel-loader?cacheDirectory'],
    // 开启 4 个线程
    threads: 4
  })
]
```

### 1.2.3 DllPlugin
> DllPlugin 可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案。

```js
  // 单独配置在一个文件中
  // webpack.dll.conf.js
  const path = require('path')
  const webpack = require('webpack')
  module.exports = {
    entry: {
      // 想统一打包的类库
      vendor: ['react']
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: '[name].dll.js',
      library: '[name]-[hash]'
    },
    plugins: [
      new webpack.DllPlugin({
        // name 必须和 output.library 一致
        name: '[name]-[hash]',
        // 该属性需要与 DllReferencePlugin 中一致
        context: __dirname,
        path: path.join(__dirname, 'dist', '[name]-manifest.json')
      })
    ]
  }
```
然后我们需要执行这个配置文件生成依赖文件，接下来我们需要使用 **DllReferencePlugin** 将依赖文件引入项目中
```js
// webpack.conf.js
module.exports = {
  // ...省略其他配置
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      // manifest 就是之前打包出来的 json 文件
      manifest: require('./dist/vendor-manifest.json'),
    })
  ]
}
```

#### 1.2.4 代码压缩
在 Webpack3 中，我们一般使用 UglifyJS 来压缩代码，但是这个是单线程运行的，为了加快效率，我们可以使用 webpack-parallel-uglify-plugin 来并行运行 UglifyJS，从而提高效率。

> [!NOTE]
> Webpack4新特性：在 Webpack4 中，我们就不需要以上这些操作了，只需要将 mode 设置为 production 就可以默认开启以上功能。代码压缩也是我们必做的性能优化方案，当然我们不止可以压缩 JS 代码，还可以压缩 HTML、CSS 代码，并且在压缩 JS 代码的过程中，我们还可以通过配置实现比如删除 console.log 这类代码的功能。


#### 1.2.5 一些小的优化点

 - `resolve.extensions` 用来表明文件后缀列表，默认查找顺序是 ['.js', '.json']，如果你的导入文件没有添加后缀就会按照这个顺序查找文件。我们应该尽可能减少后缀列表长度，然后将出现频率高的后缀排在前面
 - `resolve.alias`  可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径
 - `module.noParse`  如果你确定一个文件下没有其他依赖，就可以使用该属性让 Webpack 不扫描该文件，这种方式对于大型的类库很有帮助

#### 1.2.6 Webpack长缓存优化
> [!NOTE]
> 浏览器在用户访问页面的时候，为了加快加载速度，对用户请求的静态资源都会进行存储，但是每次代码更新或者升级的时候，我们都需要浏览器去加载新的代码。最方便的方法就是引入新的文件名称，只下载新的代码块，不加载旧的代码块，这就是长缓存。

##### Webpack3配置
```js
// foo.js
import react from 'react'
console.lg('hello world')

//webpack.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
    entry: {
        main: './src/foo',
        // 如果要把vendor和业务代码区分开
        // 独立的给vendor建一个entry就可以了
        vendor: ['react']
    },
     
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkHash].js'
    },
    plugins: [
        // 单个模块打包优化
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
        })
      // 引入新模块，模块顺序变化，vendor hash变化的打包优化
        new webpack.NamedChunksPlugin(),
        new webpack.NamedModulesPlugin(),
    ]   
}
```

这时会有三个文件，vendor、main、manifest，这时再修改代码，再加一个！此时manifest和main发生变化，但是vendor没有发生变化，manifest发生变化是因为代码发生改变，要重新编译，这就达到了改变业务代码，但不改变vendor。

如果不用这种方法，就算vendor的代码不修改，打包出来的文件名的hash值也会发生改变。
##### Webpack4配置
```js
optimization: {
    splitChunks: {      // 打包 node_modules里的代码
        chunks: 'all'
     },
     runtimeChunk: true,  // 打包 runtime 代码
}
```

性能优化前后对比：vendor的hash值并没有发生改变。
![webpack性能优化](../../img/webpack-性能优化.png)



**参考文章**
- https://www.cnblogs.com/weihuan/p/9643095.html

【性能优化】Webpack性能优化

1. 谈一下如何使用Webpack进行性能优化？

# 参考资料

## 前端工具

- Git
  1. [入门篇](https://backlog.com/git-tutorial/cn/intro/intro1_1.html)
  2. [高级篇](https://backlog.com/git-tutorial/cn/stepup/stepup1_1.html)
  3. [索引篇](https://backlog.com/git-tutorial/cn/reference/)
  4. [原版](https://www.atlassian.com/git/tutorials/merging-vs-rebasing)
  5. [原版翻译](https://github.com/geeeeeeeeek/git-recipes/wiki/1.1-%E6%9E%9C%E5%A3%B3%E4%B8%AD%E7%9A%84-Git)
  6. [Git 的奇技淫巧](https://github.com/cucygh/git-tips)
- Webpack
  1. [文档](https://doc.webpack-china.org/concepts/)
  2. [插件](https://doc.webpack-china.org/plugins/)
- Gulp
  -  [文档](https://www.gulpjs.com.cn/)
- Grunt
  - [文档](http://www.gruntjs.net/)
- Rollup
  - [文档](http://www.rollupjs.com/)
- 代码质量
  1. [vue eslint](https://mysticatea.github.io/vue-eslint-demo/)
  2. [htmlhint](https://htmlhint.io/)
  3. [stylelint](https://stylelint.io/)
- http-server
  - [静态服务器](https://www.npmjs.com/package/http-server)
- ast
  - [业界 AST 库](https://github.com/cucygh/AST-)
- 自动化测试
  - [jest](https://jestjs.io/zh-Hans/)


## 前端框架

- Vue
  1. [基本教程](https://cn.vuejs.org/)
  2. [路由](https://router.vuejs.org/)
  3. [Vuex](https://vuex.vuejs.org/)
  4. [SSR](https://ssr.vuejs.org/)
  5. [Nuxt.js](https://zh.nuxtjs.org/)
  6. [Vue 源码分析·免费](http://hcysun.me/vue-design/)
- React
  1. [文档](https://doc.react-china.org/)
  2. [Redux 官方文档](http://cn.redux.js.org/)
  3. [Redux 中文社区](http://www.redux.org.cn/)
  4. [Next.js](https://zeit.co/blog/next4)
  5. [Next.js 中文文档](http://nextjs.frontendx.cn/docs)
  6. [Next.js 掘金博客](https://juejin.im/entry/59791d8f6fb9a03c391b557e)
- Angular
  - [官方文档](https://angular.cn/)
- Koa
  > Express 升级后的框架，抽象设计更彻底，强大、自由、灵活

  1. [文档](https://koa.bootcss.com/)
  2. [Koa2 进阶学习笔记](https://chenshenhai.github.io/koa2-note/)
  3. [基于 Koa2 搭建 Node.js 实战项目教程](https://github.com/ikcamp/koa2-tutorial)
- Express
  > Node.js 开发最容易上手的业务应用开发框架
  - [文档](http://expressjs.com/zh-cn/)

## 前端技术

- 内存泄漏
  1. [JavaScript 内存泄露和 CSS 优化](https://github.com/cucygh/js-leakage-patterns?organization=cucygh&organization=cucygh)
  2. [内存泄漏](https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=zh-cn)
- MDN官方文档
  - [MDN官方文档](https://developer.mozilla.org/zh-CN/)

## CSS 教程

- Less
  - [文档](http://less.bootcss.com/)
- Sass
  - [文档](http://sass.bootcss.com/docs/sass-reference/)
- CSS3 布局
  - [学习布局](http://zh.learnlayout.com/)

## JavaScript 教程

- ES6
  1. [权威教程:ECMAScript 6](http://es6-features.org/#Constants)
  2. [入门教程](http://es6.ruanyifeng.com/)
- Node
  1. [官方网站](http://nodejs.cn/)
  2. [官方教程](http://nodejs.cn/api/)
- ES3
  - [入门教程](http://www.runoob.com/js/js-tutorial.html)
- ES5
  1. [ES5 新特性与 ES3 的对比](http://www.hahack.com/wiki/javascript-es5.html#es5-%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7)
  2. [ES5 新特性博客](http://pij.robinqu.me/JavaScript_Core/ECMAScript/es5.html)

## 服务端教程

- [Nginx 入门](http://cnt1992.xyz/2016/03/18/simple-intro-to-nginx/)
- [Nginx 入门与精通（高级）](http://tengine.taobao.org/book/#)
- [Nginx 配置大全](https://nginxconfig.io/)



【总结】参考资料

# URL请求细节
## 1. 从输入URL到页面加载完成的过程？（高频考点）
> [!NOTE]
> 涉及到浏览器缓存、TCP连接、浏览器渲染等知识。

### 1.1 基本流程
![输入URL后.png](../img/输入URL后.png)

 - 判断是否需要跳转(301)
 - 从浏览器中读取缓存
 - DNS解析
 - TCP连接
 - HTTP请求发出
 - 服务端处理请求，HTTP响应返回
 - 浏览器拿到响应数据，解析响应内内容，把解析结果展示给用户


### 1.2 详细流程（重点掌握）
1. 在浏览器地址栏输入URL
2. 浏览器查看是否有**强缓存**，如果请求资源在缓存中并且新鲜，跳转到转码步骤
    1. 如果资源未缓存，发起新请求
    2. 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
    3. 检验新鲜通常有两个HTTP头进行控制`Expires`和`Cache-Control`：
        - HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
        - HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
3. 浏览器**解析URL**获取协议，主机，端口，path
4. 浏览器**组装一个HTTP（GET）请求报文**
5. **DNS解析**，查找过程如下：
    1. 浏览器缓存
    2. 本机缓存
    3. hosts文件
    4. 路由器缓存
    5. ISP DNS缓存
    6. DNS查询（递归查询 / 迭代查询）
6. **端口建立TCP链接**，三次握手如下：
    1. 客户端发送一个TCP的**SYN=1，Seq=X**的包到服务器端口
    2. 服务器发回**SYN=1， ACK=X+1， Seq=Y**的响应包
    3. 客户端发送**ACK=Y+1， Seq=Z**
7. TCP链接建立后**发送HTTP请求**
8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
9. 服务器检查**HTTP请求头是否包含缓存验证信息**如果验证缓存新鲜，返回**304**等对应状态码
10. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
11. 服务器将**响应报文通过TCP连接发送回浏览器**
12. 浏览器接收HTTP响应，然后根据情况选择**关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下**：
    1. 主动方发送**Fin=1， Ack=Z， Seq= X**报文
    2. 被动方发送**ACK=X+1， Seq=Z**报文
    3. 被动方发送**Fin=1， ACK=X， Seq=Y**报文
    4. 主动方发送**ACK=Y， Seq=X**报文
13. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
14. 如果资源可缓存，**进行缓存**
15. 对响应进行**解码**（例如gzip压缩）
16. 根据资源类型决定如何处理（假设资源为HTML文档）
17. **解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本**，这些操作没有严格的先后顺序，以下分别解释
18. **构建DOM树**：
    1. **Tokenizing**：根据HTML规范将字符流解析为标记
    2. **Lexing**：词法分析将标记转换为对象并定义属性和规则
    3. **DOM construction**：根据HTML标记关系将对象组成DOM树
19. 解析过程中遇到图片、样式表、js文件，**启动下载**
20. 构建**CSSOM树**：
    1. **Tokenizing**：字符流转换为标记流
    2. **Node**：根据标记创建节点
    3. **CSSOM**：节点创建CSSOM树
21. **[根据DOM树和CSSOM树构建渲染树](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)**:
    1. 从DOM树的根节点遍历所有**可见节点**，不可见节点包括：1）`script`,`meta`这样本身不可见的标签。2)被css隐藏的节点，如`display: none`
    2. 对每一个可见节点，找到恰当的CSSOM规则并应用
    3. 发布可视节点的内容和计算样式
22. **js解析如下**：
    1. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时**document.readystate为loading**
    2. HTML解析器遇到**没有async和defer的script时**，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。**同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容**
    3. 当解析器遇到设置了**async**属性的script时，开始下载脚本并继续解析文档。脚本会在它**下载完成后尽快执行**，但是**解析器不会停下来等它下载**。异步脚本**禁止使用document.write()**，它们可以访问自己script和之前的文档元素
    4. 当文档完成解析，document.readState变成interactive
    5. 所有**defer**脚本会**按照在文档出现的顺序执行**，延迟脚本**能访问完整文档树**，禁止使用document.write()
    6. 浏览器**在Document对象上触发DOMContentLoaded事件**
    7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些**内容完成载入并且所有异步脚本完成载入和执行**，document.readState变为complete,window触发load事件
23. **显示页面**（HTML解析过程中会逐步显示页面）


+ 补充知识：浏览器缓存包含两种类型，即强缓存（也叫本地缓存）和协商缓存
+ 强缓存和协商缓存:https://www.cnblogs.com/wonyun/p/5524617.html


```
获取资源形式	状态码	发送请求到服务器
强缓存	 从缓存取	 200（from cache）	否，直接从缓存取
协商缓存	 从缓存取	 304（not modified）	是，正如其名，通过服务器来告知缓存是否可用
```



【计算机网络】输入url请求细节

1. 从输入URL到页面加载完成的过程？（高频考点）

# 腾讯面经系列
1. js基本数据类型
2. js的作用域
3. 如何判断一个数组是数组
4. BOM 和 DOM的区别
5. 有一个 字符串里面有很多is 请写一个方法只保留一个is          
6. 问了sql注入和防御，我说我有点忘了，把话题转移到了xss
7. 问了node 问了如何用experess搭建服务器
8. js 的event-loop
9. 有3个-10--10之间的整数，写一个方法这三个数一共有多少可能想加等于10 
10. redux
11. react vue 的一些基础
12. 说一下思路，如何把一个图片的地址，传到服务器，并保存在服务器 
13. 用js中的正则表达式去掉两边的空格                           
14. 堆和栈的区别
15. 快排，怎么判断快排排好了
16. dom操作，怎么遍历所有dom节点，根div下有两div(A与B)，每个div下面又有两个span(A1,A2)与span(B1、B2)，怎么将spanA1与A2存在一个数组，B1与B2存在一个数组，树的遍历算法，这个题应该用深度优先还是广度优先，用什么数据结构。
17. tcp慢启动
18. tcp三次、四次握手
19. https握手，加密方式是对称还是非对称
20. 强缓存、弱缓存
21. 修改this的方法，apply和call区别
22. 对JS闭包的理解
23. 原型链
24. 事件冒泡与捕获
25. 原生ajax请求 带cookie
26. jsonp怎么反回后台数据
27. 跨域后台怎么设置
28. es6 class怎么用es5实现
29. 怎么实现动画，canvas动画与svg区别
30. css动画优化
31. promise原理怎么实现
32. `水平垂直居中`
33. 从浏览器输入URL会发生什么
34. 浏览器渲染 ，css、js会阻塞dom树加载吗
35. xss怎么防御
36. 前端怎么实现富文本编辑器
37. PWA（Progressive Web App）
38. Service Worker
39. 后台广播
40. http 长、短轮训
41. 前端缓存，很长的数据缓存怎么选择
42. 301与302区别，什么时候返回304
43. http1.1和http2.0的区别
44. CDN有没有了解
45. 怎样判断Object和Array，Object有父对象么
46. CSS positon的属性有常见三个值 absolute fixed relative 这三个值有什么区别 是怎么用的，这三个跟文档流的关系？
47. 两个单位em和rem，是怎么用的，有什么区别
48. js中的类数组
49. 能不能改写一个数组的push方法，不是重写，也不是新写，保持原来的逻辑之外，再添加一个consle.log（arguements）在控制台打印出来，比如pushA。在工作台把A打印出来，push什么就打印什么。原来的逻辑不能改？
50. 学习前端的方式有哪些？看哪些博客？看过哪些书？
51. JS如何改变函数上下文
52. bind/call/apply有什么区别？
53. bind调用时传入一个参数，此参数跟函数原有的参数什么关系？
54. CSS继承属性有哪些？列举3个
55. 块级元素有哪些？
56. CSS position有哪些取值？
57. 一个div,position设置为absolute,再用JS设置div.style.position=""，问这时div的表现？怎么去判断？
58. 如何检测浏览器所支持的最小字体大小？
59. 怎么做JS代码Error统计？
60. 一张高清图片，怎么保证其在不同移动端设备上的显示效果？
61. html中一进入就一直页面缓冲不出来组件怎么办
62. 怎么使用纯css实现一个三角形
63. html不同页面之间怎么共享数据
64. 垃圾回收机制是怎么样
65. 一个5升瓶子和一个6升瓶子怎么装3升水
66. 为什么js是单线程？怎么解决
67. 如何定义私有字段
68. git add commit 区别 commit到哪？
69. 用过webpack吗？怎么用的？css文件
70. HTTP 如何标记缓存
71. etag和exprises 哪个用得比较多 为什么
72. 35分时针分针夹角几度
73. 实现一个input输入框，实现在一个arr数组查询命中和自动补齐效果
74. 实现一个函数，完成超过范围的两个大整数相加功能
75. diff算法，树的深搜广搜
76. 缓存机制，如何缓存图片
77. 非递归便利二叉树
78. web性能优化
79. 浏览器连接限制，编码怎么解决，http2.0
80. 网络安全, xss, csrf
81. 有一个数组，对这个数组按顺序进行异步处理，一个处理完才开始下一个，然后问用foreach行不行。
82. 介绍发一个Ajax请求的链路全过程。IP地址怎样获取？
83. 如何让一个cookie同时用于a.qq.com和b.qq.com？
84. 有一个a.qq.com的图片发到百度贴吧上，会不会带上那个cookie？
85. 快排原理，时间空间复杂度，为什么空间复杂度是log2n？
86. Vue响应式原理。
87. 介绍项目，说其中的难点。
88. 介绍归并排序原理。
89. 说一下nodejs的原理（？？？不会，只说了事件驱动balabala）
90. https（又是https）
91.  从海量十亿个数选最大的一百个，你有什么方法？
92.  除了Vue还会什么？
93.  React-router和路由的实现的方式有哪些？
94.  移动端的适配问题？字体大小一致？
95.  移动端的30ms点击延迟问题?如何解决？
96.  node和ES6规范的差别？
97.  module.exports和exports 的区别，与CommonJS的联系？
98.  export 和 export default 的区别？
99.  Canvas的性能如何优化？
100. JS的原型是什么？
101. webpack的底层实现原理，懒加载的配置
102. CSS雪碧图和Base64编码的选择？Base64编码原理？
103. get请求的url地址如何通过post方式发送？
104. 浏览器的缓存策略？
105. 将一个div容器移动到另外一个div容器的过程？
106. 实现一个原生的ajax封装？
107. 浏览器路由的实现方式有哪些?
108. 输入URL到内容完全展示出来的过程？
109. HTTPS和HTTP的原理和区别？
110. Webpack和Gulp的区别
111. URL请求的过程
112. 首页渲染问题如何优化, 前端的性能优化方式有哪些？
113. 网站首页白屏错误如何排查？实时监控？
114. 如何解决JS的回调地狱问题?
115. CSS的margin重叠问题如何解决？
116. mvvm  mvc；
117. 单页应用 多页应用的优缺点；
118. 前后分离 不分离 哪一个更安全 区别  页面的响应是前端还是后端；
119. typeScript；
120. this指针；
121. 原型链；
122. https；
123. 维持登录状态；
124. es6常用；
125. ccs3用过什么；
126. 浏览器怎么适配；
127. 你封装过什么组件；
128. js怎么优化；
129. 工程化。webpack；
130. webpack工作原理；
131. 和同事关系不好，怎么办；
132. 一个5升  一个6升  空瓶子  怎么弄出来2l水；
133. 上海高铁到杭州 杭州飞机到老家 现在高铁晚点了  怎么办  （今天必须回家）；
134. react生命周期
135. url的整个过程，越多越好；
136. 跨域的方式，越多越好；
137. web优化的方式，越多越好；
138. react生命周期，和vue比较，要求多说；
139. rsa算法，esa算法；
140. linux查看进程的命令；
141. 一个很大的数据集包括192.168.0.1 -24/32/30 给一个ip地址怎么知道在不在这个数据集中；
142. 给一亿个长度不一样的字符串，怎么判断一个随机长度的字符串在不在这个里面（字典树）；
143. 给一堆整数，怎么判断这个整数在不在这一堆数里面（位图）；
144. 一个表有姓名年龄课程，sql数据库找每个人的最高成绩，课程名，姓名。
145. 说一下url；
146. xss怎么预防；
147. http说一下；
148. get post区别；
149. tcp三次握手和四次分手，都有什么标志；
150. pv uv是啥；
151. h5用过什么；
152. xml json区别；
153. web优化；
154. mysql引擎；
155. 浏览器引擎有什么；
156. 页面渲染的过程；
157. http劫持怎么预防；
158. ngnix反向代理服务器

1. js基本数据类型
2. js的作用域
3. 如何判断一个数组是数组
4. BOM 和 DOM的区别
…