
> 在现代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优化方案全解析

# 运行环境	
## 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进行性能优化？

# 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.跨域问题的产生原因？
### 1.1 同源策略
 - 端口相同
 - 域名相同
 - 协议相同

例子：`http://www.example.com/dir/page.html` 这个网址，协议是`http`，域名是`www.example.com`，端口是`80`

> [!NOTE]
> 同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。**是浏览器做的努力**


### 1.2 同源策略限制范围

 - Cookie、LocalStorage 和 IndexDB 无法读取
-  DOM 无法获得
-  AJAX 请求不能发送


## 2 跨域通信的解决方法？
###  2.1 CROS跨域资源请求
> [!NOTE]
> CORS(Cross-origin resource sharing)跨域资源请求: 浏览器在请求一个跨域资源的时候，如果是跨域的Ajax请求，他会在请求头中加一个`origin`字段，但他是不知道这个资源服务端是否允许跨域请求的。浏览器会发送到服务端，如果服务器返回的头中没有`'Access-Control-Allow-Origin': '对应网址或 * '` 的话，那么浏览器就会把请求内容给忽略掉，并且在控制台报错


#### 2.1.1 CORS限制

允许的请求方法
 - GET
 - POST
 - HEAD

允许的Content-Type
 - text/plain
 - multipart/form-data
 - application/x-www-form-ulencoded

其他类型的请求方法和Content-Type需要通过**预请求验证**后然后才能发送


#### 2.1.2 CORS预请求
> [!NOTE]
> 跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求。

服务器在HTTP header中加入允许请求的方法和Content-Type后，其他指定的方法和Content-Type就可以成功请求了
```
'Access-Control-Allow-Headers': '允许Content-Type'
'Access-Control-Allow-Methods': '允许的请求方法'
'Access-Control-Max-Age': '预请求允许其他方法和类型传输的时间'
```


### 2.2 JSONP跨域
#### 2.2.1 基本概念
> [!NOTE]
> 浏览器上虽然有同源限制，但是像 srcipt标签、link标签、img标签、iframe标签，这种**在标签上通过src地址来加载一些内容的时候浏览器是允许进行跨域请求的**。

#### 2.2.2 跨域原理
1. 创建一个script标签，这个script标签的src就是请求的地址；
2. 这个script标签插入到DOM中，浏览器就根据src地址访问服务器资源
3. 返回的资源是一个文本，但是因为是在script标签中，浏览器会执行它
4. 而这个文本恰好是函数调用的形式，即函数名（数据），浏览器会把它当作JS代码来执行即调用这个函数
5. 只要提前约定好这个函数名，并且这个函数存在于window对象中，就可以把数据传递给处理函数。


### 2.3 Hash值跨域通信
> [!NOTE]
> 背景：在页面A下提供iframe或frame嵌入了跨域的页面B

容器页面 -> 嵌入页通信：

在A页面中改变B的url中的hash值，B不会刷新，但是B可以用过`window.onhashchange`事件监听到hash变化


### 2.4 postMessage通信

```js
// 窗口A中
window.postMessage('data', 'http://A.com');
// 窗口B中
window.addEventListener('message', function(event) {
  console.log(event.origin);    // http://A.com
  console.log(event.source);    // A 对象window引用
  console.log(event.data);      // 数据
})
```

### 2.5 WebSoket 跨域通信

```js
var ws = new WebSocket('wss://echo.websoket.org') //这个是后端端口

ws.onopen = function(evt) {
  ws.send('some message')
}

ws.onmessage = function (evt) {
  console.log(evt.data);
}

ws.onclose = function(evt){
  console.log('连接关闭');
}
```


【计算机网络】跨域

# XSS 跨站脚本攻击

## 1. 介绍一下XSS攻击的原理和危害？
### 1.1 基本原理
> [!NOTE]
> XSS ( Cross Site Scripting ) 是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

### 1.2 XSS攻击的危害

1. 获取页面数据
2. 获取cookie
3. 劫持前端逻辑
4. 发送请求
5. 偷取网站任意数据
6. 偷取用户资料
7. 偷取用户密码和登陆态
8. 欺骗用户
   
### 1.3 XSS攻击分类

#### 1.3.1  反射型
> 通过url参数直接注入。

发出请求时，XSS代码出现在URL中，作为输入提交到服务器端，服务端解析后返回，XSS代码随响应内容一起传回给浏览器，最后浏览器执行XSS代码。这个过程像一次反射，故叫做反射型XSS。

**举个例子**

一个链接，里面的query字段中包含一个script标签，这个标签的src就是恶意代码，用户点击了这个链接后会先向服务器发送请求，服务器返回时也携带了这个XSS代码，然后浏览器将查询的结果写入Html，这时恶意代码就被执行了。

并不是在url中没有包含script标签的网址都是安全的，可以使用[短网址](dwz.com)来让网址变得很短。



#### 1.3.2 存储型
> [!NOTE]
> 存储型XSS会被保存到数据库，在其他用户访问（前端）到这条数据时，这个代码会在访问用户的浏览器端执行。

**举个例子**

比如攻击者在一篇文章的评论中写入了script标签，这个评论被保存数据库，当其他用户看到这篇文章时就会执行这个脚本。



### 1.4 XSS攻击注入点
 - HTML节点内容
   - 如果一个节点内容是动态生成的，而这个内容中包含用户输入。
 - HTML属性
   - 某些节点属性值是由用户输入的内容生成的。那么可能会被封闭标签后添加script标签。


```html
<img src="${image}"/>
<img src="1" onerror="alert(1)" />
```
 - Javascript代码
   - JS中包含由后台注入的变量或用户输入的信息。
```js
var data = "#{data}";
var data = "hello"; alert(1);"";
```
 - 富文本


## 2. XSS 防御方法有哪些？
> [!NOTE]
> 对于 XSS 攻击来说，通常有两种方式可以用来防御。
> - 转义字符
> - CSP 内容安全策略

### 2.1 转义字符

 - 普通的输入 - 编码
   - 对用户输入数据进行HTML Entity编码（使用转义字符）
   - "
   - &
   - <
   - \>
   - 空格

 - 富文本 - 过滤（黑名单、白名单）
   - 移除上传的DOM属性，如onerror等
   - 移除用户上传的style节点、script节点、iframe节点等

 - 较正
   - 避免直接对HTML Entity解码
   - 使用DOM Parse转换，校正不配对的DOM标签和属性


#### 2.1.1 对于会在DOM中出现的字符串（用户数据）

 < 转义为 \&lt;
 > 转义为 \&gt;

#### 2.1.2 对于可能出现在DOM元素属性上的数据

 " 转义为 \&quot;
 ' 转义为 \&9039;
 空格转义为 \&nbsp; 但这可能造成多个连续的空格，也可以不对空格转义，但是一定要为属性加双引号

 & 这个字符如果要转义，那么一定要放在转移函数的第一个来做

#### 2.1.3 避免JS中的插入
```js
var data = "#{data}";
var data = "hello"; alert(1);"";
```

因为是用引号将变量包裹起来的，而且被攻击也因为引号被提前结束，所以要做的就是将引号转义
```
先 \\ -> \\\\
再 " -> \\"
```

### 2.2 富文本

#### 2.2.1 按照黑名单过滤script等
> [!NOTE]
> 但是html标签中能执行html代码的属性太多了，比如onclick, onhover,onerror, `<a href="jacascript:alert(1)">`


```js
function xssFilter = function (html) {
  html = html.replace(/<\s*\/?script\s*>/g, '');
  html = html.repalce(/javascript:[^'"]/g, '');
  html = html.replace(/onerror\s*=\s*['"]?[^'"]*['"]?/g, '');
  //....
  return html;
}
```

##### 2.2.1.1 按照白名单过滤
> [!NOTE]
> 只允许某些标签和属性存在

> 做法：将HTML解析成树状结构，对于这个DOM树，一个一个的去看是否存在合法的标签和属性，如果不是就去掉。

> 使用cheerio就可以快速的解析DOM


```js
function xssFilter (html) {

  const cheerio = require('cheerio');
  const $ = cheerio.load(html);

  //白名单
  const whiteList = {'img': ['src']}

  $('*').each((index, elem) => {
    if(!whiteList[elem.name]) {
      $(elem).remove();
      return;
    }
    for(let attr in elem.attribs) {
      if(whiteList[elem.name].indexOf(attr) === -1) {
        $(elem).attr(attr, null);
      }
    }
  })
  return html;
}
```

##### 2.2.1.2 使用npm包来简化操作
[xss文档](https://github.com/leizongmin/js-xss/blob/master/README.zh.md)


### 2.3 CSP 内容安全策略
> [!NOTE]
> CSP 本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。

通常可以通过两种方式来开启 CSP：
 - 设置 HTTP Header 中的 Content-Security-Policy
 - 设置 meta 标签的方式 `<meta http-equiv="Content-Security-Policy">`

以设置 HTTP Header 来举例
 - 只允许加载本站资源
```
Content-Security-Policy: default-src ‘self’
```
 - 图片只允许加载 HTTPS 协议
```
Content-Security-Policy: img-src https://*
```
 - 允许加载任何来源框架
```
Content-Security-Policy: child-src 'none'
```

**参考文章**
- [CSP](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) ( Content Security Policy )


【Web安全】XSS攻击

1. 介绍一下XSS攻击的原理和危害？

2.1.1 对于会在DOM中出现的字符串（用户数据）

2.1.2 对于可能出现在DOM元素属性上的数据

# 缓存
##  1. 介绍一下HTTP的缓存？（面试重点）
> [!NOTE]
> Http 的缓存主要利用 header 里的Cache-control 和 ETag

### 1.1 Cache-control
`Cache-control`主要包含以及几个字段：
 - public
   - 指HTTP请求返回的资源在所经过的所有路径包括一些中间代理服务器以及发出这个请求的客户端浏览器都可以进行缓存
 - private
   - 代表发起请求的浏览器才可以进行缓存
 - no-cache
   - 指可以存缓存，但是每次使用都需要去服务端验证
 - no-store
   - 本地和代理服务器都不允许去缓存
 - no-transform
   - 不允许代理/缓存服务器转换文件格式

到期
 - max-age=<seconds\>
   - 缓存到期时间
 - s-maxage=<seconds\>
   - 代理服务器专用
 - max-stale=<seconds\>
   - 指示客户机可以使用超出max-age时间的响应

重新验证
 - must-revalidate
   - 设置了max-age的资源过期后必须到源服务端验证资源是否还可用
 - proxy-revalidate
   - （缓存服务器用）设置了max-age的资源过期后必须到源服务端验证资源是否还可用


### 1.2 ETag
> [!NOTE]
> `ETag`:即用来进行对比缓存，Etag 是服务端资源的一个标识码

当客户端发送第一次请求时服务端会下发当前请求资源的标识码 Etag，下次再请求时，客户端则会通过 header 里的 If-None-Match 将这个标识码 Etag 带上，服务端将客户端传来的 Etag 与最新的资源 Etag 做对比，如果一样，则表示资源没有更新，返回 304。



### 1.3 缓存方案

#### 1.3.1 需求
有的静态资源会设置一个较长的缓存时间，但是我们希望用户还是能使用最新的资源。

#### 1.3.2 解决方案
在打包完成的文件名上加上一串哈希码，这个哈希码是根据内容进行的哈希计算。
所以，如果你的内容文件没有变，那么这个hash码不会变，即这个静态资源的url没有变。 而如果内容有变，那么hash码也会变，浏览器就会去请求新的资源请求。

#### 1.3.3 普通的缓存机制(重点理解)

![浏览器缓存](../img/browser-cache.jpg)

### 1.4 资源验证
> [!NOTE]
> 如果给Cache-Control设置了no-cache后，每次要使用资源时浏览器都要到服务器验证缓存是否过期。 如果直接使用缓存，返回码：**304**

如何验证资源是否过期：
 - Last-Modified（上次修改时间）
   - 配合 If-Modified-Since 或 If-Unmodified-Since 使用
   - 如果请求的资源头中有Last-Modified这个头，这个头指定了一个时间。那么浏览器重新访问资源时就会带上If-Modified-Since这个头，其时间是Last-Modified的时间，服务器就会拿这个时间去对比上次修改的时间，然后告诉浏览器是否可以直接使用。

 - Etag （数据签名）
   - 资源会依据它的内容产生一个唯一的数据签名，如果资源有更新，那么Etag就会发生变化。
   - 配合 If-Match 或 If-None-Match 使用


【计算机网络】缓存

1. 介绍一下HTTP的缓存？（面试重点）

1.3.3 普通的缓存机制(重点理解)

# HTML5 CSS3
## 1.CSS3有哪些新特性？
1. CSS3实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4. 增加了更多的CSS选择器  多背景 rgba 
5. 在CSS3中唯一引入的伪元素是 ::selection.
6. 媒体查询，多栏布局
7. border-image
## 2.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
新特性：
1. 拖拽释放(Drag and drop) API 
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search  
9. 新的技术webworker, websocket, Geolocation
移除的元素：
1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
2. 对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

如何区分： 
DOCTYPE声明新增的结构元素、功能元素
## 3.本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？
Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；
本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除
## 4.如何实现浏览器内多个标签页之间的通信?
调用 localstorge、cookies 等本地存储方式
## 5.你如何对网站的文件和资源进行优化？
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
## 6.什么是响应式设计？
它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常	
## 7.新的 HTML5 文档类型和字符集是？
答：HTML5文档类型：<!doctype html>
    HTML5使用的编码<meta charset=”UTF-8”>
## 8.HTML5 Canvas 元素有什么用？
答：Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。
## 9.HTML5 存储类型有什么区别？
答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API
## 10用H5+CSS3解决下导航栏最后一项掉下来的问题
## 11.	CSS3新增伪类有那些？
    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
    :enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
## 12.	请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。
css属性的熟练程度和实践经验
## 13.	描述下CSS3里实现元素动画的方法
动画相关属性的熟悉程度
## 14.	html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。
* 绘画 canvas 元素
  用于媒介回放的 video 和 audio 元素
  本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  sessionStorage 的数据在浏览器关闭后自动删除
  语意化更好的内容元素，比如 article、footer、header、nav、section
  表单控件，calendar、date、time、email、url、search
  CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器  多背景 rgba
  新的技术webworker, websockt, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
* 是IE8/IE7/IE6支持通过document.createElement方法产生的标签，
  可以利用这一特性让这些浏览器支持HTML5新标签，
  浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

## 15.	你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?
* 首先划分成头部、body、脚部；。。。。。 
* 实现效果图是最基本的工作，精确到2px；
  与设计师，产品经理的沟通和项目的参与
  做好的页面结构，页面重构和用户体验
  处理hack，兼容、写出优美的代码格式
  针对服务器的优化、拥抱 HTML5。
## 16.	你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。　
　　“优雅降级”观点
　　“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
　　在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
　　“渐进增强”观点
　　“渐进增强”观点则认为应关注于内容本身。
　　内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
 
　　那么问题了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？
## 17.	为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便 
突破浏览器并发限制 
节约cookie带宽 
节约主域名的连接数，优化页面响应速度 
防止不必要的安全问题
## 18.	请谈一下你对网页标准和标准制定机构重要性的理解。
　　（无标准答案）网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。
 
## 19.	请描述一下cookies，sessionStorage和localStorage的区别？　　
　　sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
## 20.	知道css有个content属性吗？有什么作用？有什么应用？
知道。css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。
//一种常见利用伪类清除浮动的代码
```css
.clearfix:after {
    content:"."; //这里利用到了content属性
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; }
.clearfix { 
    *zoom:1; 
}
```
after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。
　　那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？
答案：css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。 
## 21.	如何在 HTML5 页面中嵌入音频?
HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：
<audio controls> 
  <source src="jamshed.mp3" type="audio/mpeg"> 
   Your browser does'nt support audio embedding feature. 
</audio>

## 22.	如何在 HTML5 页面中嵌入视频？
和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：
<video width="450" height="340" controls> 
  <source src="jamshed.mp4" type="video/mp4"> 
   Your browser does'nt support video embedding feature. 
</video> 

## 23	HTML5 引入什么新的表单属性？
Datalist   datetime   output   keygen  date  month  week  time  number   range   emailurl
## 24.CSS3新增伪类有那些？
 p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
    :enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。

## 25.	(写)描述一段语义的html代码吧。
（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）
就是基于语义化设计原则）  
< div id="header">
< h1>标题< /h1>
< h2>专注Web前端技术< /h2>
< /div>
语义 HTML 具有以下特性：

文字包裹在元素中，用以反映内容。例如：
段落包含在 <p> 元素中。
顺序表包含在<ol>元素中。
从其他来源引用的大型文字块包含在<blockquote>元素中。
HTML 元素不能用作语义用途以外的其他目的。例如：
<h1>包含标题，但并非用于放大文本。
<blockquote>包含大段引述，但并非用于文本缩进。
空白段落元素 ( <p></p> ) 并非用于跳行。
文本并不直接包含任何样式信息。例如：
不使用 <font> 或 <center> 等格式标记。
类或 ID 中不引用颜色或位置。

## 26.	cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage区别
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；
## 27.	html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
* 绘画 canvas  
  用于媒介回放的 video 和 audio 元素 
  本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  sessionStorage 的数据在浏览器关闭后自动删除
  语意化更好的内容元素，比如 article、footer、header、nav、section 
  表单控件，calendar、date、time、email、url、search  
  新的技术webworker, websockt, Geolocation
* 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：
* IE8/IE7/IE6支持通过document.createElement方法产生的标签，
  可以利用这一特性让这些浏览器支持HTML5新标签，
  浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

## 28.如何区分： DOCTYPE声明\新增的结构元素\功能元素
## 29.语义化的理解？
用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
## 30.	HTML5的离线储存？
localStorage    长期存储数据，浏览器关闭后数据不丢失；
sessionStorage  数据在浏览器关闭后自动删除。
## 31.	写出HTML5的文档声明方式
	 <DOCYPE html>
## 32.	HTML5和CSS3的新标签     

	HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio...
CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image, 
border-color, transform...;
## 33.	自己对标签语义化的理解
    在我看来，语义化就是比如说一个段落， 那么我们就应该用 <p>标签来修饰，标题就应该用 <h?>标签等。符合文档语义的标签。

【前端面试题】HTML5 CSS3

2.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

3.本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？

4.如何实现浏览器内多个标签页之间的通信?

5.你如何对网站的文件和资源进行优化？

7.新的 HTML5 文档类型和字符集是？

10用H5+CSS3解决下导航栏最后一项掉下来的问题

12.    请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。

13.    描述下CSS3里实现元素动画的方法

14.    html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

15.    你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?

16.    你能描述一下渐进增强和优雅降级之间的不同吗?

17.    为什么利用多个域名来存储网站资源会更有效？

18.    请谈一下你对网页标准和标准制定机构重要性的理解。

19.    请描述一下cookies，sessionStorage和localStorage的区别？　　

20.    知道css有个content属性吗？有什么作用？有什么应用？

21.    如何在 HTML5 页面中嵌入音频?

22.    如何在 HTML5 页面中嵌入视频？

23    HTML5 引入什么新的表单属性？

25.    (写)描述一段语义的html代码吧。

26.    cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage区别

27.    html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

28.如何区分： DOCTYPE声明\新增的结构元素\功能元素

# 操作系统基础知识
## 1.操作系统分类
- 批处理操作系统（单道，多道）
- 分时操作系统（Unix）
- 实时操作系统（MsgOS）
- 网络操作系统
- 分布式操作系统
- 微机操作系统（Linux、Windows、IOS等）
- 嵌入式操作系统（Android，iOS）

## 2.操作系统的4个特征?
### 2.1 并发性
区别于并行性，并发是指：多个事件在同一时间间隔内发生，并行是指：多个事件在同一时刻发生
### 2.2 共享性
一般的共享是指某种资源可以被大家使用，在os下的资源共享称为资源复用，具体含义是：系统中的资源可供内存中多个并发的执行的进程共同使用
### 2.3 虚拟性
通过某种技术将一个物理实体变为若干个逻辑上的对应物的功能即是虚拟
### 2.4 不确定性（异步）
每道程序完成的时间都是不可预知的，进程是以人们不可预知的速度向前推进的


## 3.操作系统的功能
### 3.1 处理机管理
也称进程管理。实质上是对处理机执行时间进行管理，采用多道程序等技术将CPU的时间真正合理地分配给每个任务。主要包括进程管理、进程同步、进程通信和进程调度。
### 3.2 文件管理
又称信息管理。主要包括文件存储空间管理、目录管理、文件的读写管理和存取管理。
### 3.3 存储管理
是对主存储器空间的管理。主要包括存储分配与回收、存储保护、地址映射（变换）和主存扩充。（即内存管理）
### 3.4 设备管理
实质上是对硬件设备进行管理，其中包括输入输出设备的分配、启动、完成和回收。
### 3.5 作业管理
包括人物、人机交互和用户界面管理等。

## 4.处理机管理
### 4.1 线程与进程
#### 4.1.1 基本概念
> [!NOTE]
> 
  1. 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动，是系统进行资源分配和调度的一个独立单位。

  2. 线程是进程的一个实体，是CPU调度和分派的基本单位，它是比进程更小的能独立运行的基本单位。线程自己基本上不拥有系统资源，只拥有一点在运行中必不可少的资源(如程序计数器，一组寄存器和栈)，但是它可与同属一个进程的其他的线程共享进程所拥有的全部资源。也有就绪、运行、阻塞三态。

> PCB：为了便于系统描述和管理进程，在OS的核心位每个进程专门定义了一个数据结构，进程控制块PCB。PCB是进程的唯一标志

一个线程可以创建和撤销另一个线程;同一个进程中的多个线程之间可以并发执行。相对进程而言，线程是一个更加接近于执行体的概念，它可以与同进程中的其他线程共享数据，但拥有自己的栈空间，拥有独立的执行序列。

#### 4.1.2 区别

- 1) 简而言之,一个程序至少有一个进程,一个进程至少有一个线程.
- 2) 线程的划分尺度小于进程，使得多线程程序的并发性高。
- 3) 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
- 4) 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
- 5) 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。


#### 4.1.3 优缺点
> [!NOTE]
> 线程执行开销小，但不利于资源的管理和保护；而进程正相反。同时，线程适合于在SMP机器上运行，而进程则可以跨机器迁移。

### 4.2 程序顺序执行的特征
- 顺序性：每一操作必须在下一操作开始之前结束
- 封闭性：程序运行时独占全机资源，资源的状态（除初始状态外）只有本程序才能改变，程序一旦执行，其结果不受外界影响
- 可再现性：程序执行环境和初始条件相同，重复执行时，结果相同

### 4.3 程序并发执行的特征

- 间断性：程序并发运行时，共享系统资源，为完成同一任务相互合作，会形成相互制约关系，导致并发程序具有“执行-暂停-执行”这种间断性的活动规律
- 失去封闭性：程序并发执行时，资源状态由多个程序改变，某程序执行时，会受到其他程序影响，失去封闭性
- 不可再现性：失去封闭性，导致失去可再现性

### 4.4 进程的特征

- 结构特征：程序段、相关数据段和PCB三部分构成进程实体
- 动态性：进程实体的一次执行过程，具有生命期，而程序是有序指令集合，是静态的
- 并发性：多个进程同时存于内存，在一段时间内同时运行
- 独立性：进程实体是一个能独立运行、独立分配资源和独立接受调度的基本单位
- 异步性：进程按各自独立的、不可预知的速度向前推进

### 4.5 进程的状态
三态模型（左图）、五态模型（右图）
![进程的状态](../img/进程的状态.jpg)


### 4.6 进程间的通信（同步与互斥）
> [!NOTE]
> 由于多个进程可以并发执行，所以进程间必然存在资源共享和相互合作的问题。进程通信是指各个进程交换信息的过程。

同步是合作进程间直接制约问题，互斥是申请临界资源进程间的间接制约问题。（临界资源（Critical Resource, CR）：在同一时间只能供一个进程使用的资源，例如：打印机，磁带机等硬件资源）

#### 4.6.1 临界区管理4条原则
（临界区：每个进程中访问临界资源的那段代码）
1. 有空即进：
2. 无空则等：
3. 有限等待：要求访问临界区的进程，保证有限时间内进入临界区，避免死等
4. 让权等待：进程不能进入临界区时，应立即释放处理机，避免忙等

### 4.7 信号量机制
即利用PV操作来对信号量进行处理。

> [!NOTE]
> 信号量（semaphore）的数据结构为一个值和一个指针，指针指向等待该信号量的下一个进程。信号量的值与相应资源的使用情况有关。

当它的值大于0时，表示当前可用资源的数量；
当它的值小于0时，其绝对值表示等待使用该资源的进程个数。

注意，信号量的值仅能由PV操作来改变。
　
> [!NOTE]
> 一般来说，信号量S >= 0时，S表示可用资源的数量。执行一次P操作意味着请求分配一个单位资源，因此S的值减1；当S < 0时，表示已经没有可用资源，请求者必须等待别的进程释放该类资源，它才能运行下去。而执行一个V操作意味着释放一个单位资源，因此S的值加1；若S <= 0，表示有某些进程正在等待该资源，因此要唤醒一个等待状态的进程，使之运行下去。

### 4.8 进程调度
如何分配CPU。
> [!NOTE]
> 调度方法分为可剥夺和不可剥夺两种。即当有更高优先级的进程到来时，是否可以将正在运行进程的CPU分配给高优先级的进程，可以则为可剥夺，否则为不可剥夺的。

在某些操作系统中，一个作业从提交到完成需要经历高、中、低三级调度。
#### 4.8.1 高级调度
又称长调度或作业调度。它决定处于输入池中的哪个后备作业可以调入主系统做好运行的准备，成为一个或一组就绪进程。系统中一个作业（程序）只需经过一次高级调度。

#### 4.8.2 中级调度
又称短程调度或对换调度。它决定处于交换区中的就绪进程哪个可以调入内存，以便直接参与对CPU的竞争。在内存资源紧张时，为了将进程调入内存，必须将内存中处于阻塞状态的进程调出交换区，以便为调入进程腾出空间。

#### 4.8.3 低级调度
又称短程调度或进程调度。它决定处于内存中的就绪进程中的哪个可以占用CPU。最活跃、最重要的调度程序，对系统影响也是最大的。


### 4.9 常见的进程调度算法
1. 先来先服务（FCFS）
2. 短作业优先
3. 时间片轮转（固定时间片、可变时间片）
4. 优先级调度（静态优先级、动态优先级）
5. 多级反馈调度（时间片轮转+优先级调度）。

### 4.10 死锁
#### 4.10.1 基本概念
> [!NOTE]
> 两个以上的进程互相要求对方释放已经占有的资源导致无法继续运行下去的现象

例如：一个系统有一台扫描仪R1，一台刻录机R2，有两个进程P1，P2，他们都准备将扫描的文档刻录到CD上，P1先请求R1并成功，P2先请求R2并成功，后来，P1又请求R2，但却因为已经分配而阻塞，P2请求R1，也因分配而阻塞，此时，双方都被阻塞，都希望对方释放自己所需的资源，但又谁都不能得到自己所需的资源而继续进行，从而一直占有自己所占的资源，就形成死锁

#### 4.10.2 可抢占性资源和不可抢占性资源
- 前者：某进程获得这类资源后，该资源可以在被其他进程或系统抢占。
- 后者：一旦系统把资源分配给一个进程以后，就不能把他强行收回，只能等它用完自行释放

#### 4.10.3 产生死锁的原因

- （1） 竞争不可抢占性资源

- （2） 进程运行推进的顺序不合适。

- （3） 竞争可消耗资源

如果系统资源充足，进程的资源请求都能够得到满足，死锁出现的可能性就很低，否则就会因争夺有限的资源而陷入死锁。其次，进程运行推进顺序与速度不同，也可能产生死锁。

#### 4.10.4 产生死锁的四个必要条件
互斥条件、请求与保持条件、不剥夺条件、循环等待条件。
- （1） 互斥条件：一个资源每次只能被一个进程使用。
- （2） 请求与保持条件：一个进程因请求资源而阻塞时，对已获得的资源保持不放。
- （3） 不剥夺条件:进程已获得的资源，在末使用完之前，不能强行剥夺。
- （4） 循环等待条件:若干进程之间形成一种头尾相接的循环等待资源关系。

　　这四个条件是死锁的必要条件，只要系统发生死锁，这些条件必然成立，而只要上述条件之一不满足，就不会发生死锁。

#### 4.10.5 解决死锁的4种处理策略
1. 鸵鸟策略（即不理睬策略）
2. 预防策略
3. 避免策略
4. 检测与解除策略

##### 死锁预防
预先静态分配法（破坏不可剥夺条件）、资源有序分配法（将资源分类按顺序排列，保证不形成环路）。

##### 死锁避免
银行家算法（对每个资源请求进行检测，确保安全。需要很大的系统开销）。

##### 死锁解除
资源剥夺法、撤销进程法。

### 4.11 内存池和进程池
> [!NOTE]
> 所谓池的概念， 一般是指应用提前向内核批量申请资源，用于接下来的使用和回收再利用， 减少资源的初始化和销毁次数等开销， 以达到提高系统性能的目标。

#### 4.11.1 内存池
真正使用前申请一片内存区域，有新需求时取出其中一部分使用，不够用时再重新申请新内存。

#### 4.11.2 进程池
应用预先创建一组子进程，所有子进程运行相同代码，拥有相同属性，比如PGID和优先级等；

#### 4.11.3 常见两种工作方式：
1. 主进程通过随机或round robin算法来选择子进程作为新任务的服务进程；
2. 通过一个共享队列来进行同步，所有子进程从该队列中获取任务，不过同时只能有一个子进程能成功获得新任务处理权。

#### 4.11.4 线程池：
主要应用于任务小而多，处理时间短的场景，比如简单网页请求等。



## 5.存储器管理
### 5.1 存储器的层次
> [!NOTE]
> 在存储层次中，层次越高（越接近CPU），存储介质的访问速度越快，价格越高，存储容量也越小
![存储器的层次](../img/存储器的层次.jpg)


#### 5.1.1 主存储器
简称内存或主存，是计算机系统中的主要部件，用于保存进程运行时的程序和数据，也称可执行存储器

#### 5.1.2 寄存器
寄存器与处理机的速度，寄存器的字长一般是32或是64位。

#### 5.1.3 高速缓存
介于寄存器和主存储器之间的存储器，主要用来备份内存中常用的数据，以减少处理机对内存的访问次数，这样可以大幅的提高速度

#### 5.1.4 磁盘缓存
由于磁盘的I/O速度远低于内存的速度，所以用磁盘缓存来暂时存放一些磁盘数据和信息，它本身并不是一种实际存在的存储器，而是利用内存中的部分存储空间赞数存放一些信息


### 5.2程序的装入和链接

![程序的装入和链接](../img/程序的装入和链接.jpg)

### 5.3连续分配存储管理方式
#### 5.3.1 地址重定位
指将逻辑地址变换成物理地址的过程。分为静态重定位和动态重定位。


#### 5.3.2 存储管理方案
> [!NOTE]
> 分区存储管理（固定分区、可变分区、可重定位分区）、分页存储管理（将一个进程的地址空间划分为若干个大小相等的区域，成为页，相应地，将主存空间划分成与页相同大小的若干个物理块，称为块。至少需要两次访问主存）、分段存储管理、段页式存储管理（地址结构：段号+段内页号+页内地址）、虚拟存储管理。


可变分区的请求和释放主要算法：最佳适应算法、最差适应算法、首次适应算法、循环首次适应算法。

- **快表**：在页式存储管理中将当前最活跃的少数几页的物理块号保存在高速存储器中，用以提高页式存储管理的性能。（不用两次访问主存）

- **页面置换算法**：最佳置换算法（最长时间内不再被访问的页面置换出去）、先进先出置换算法、最近最少未使用置换算法、最近未用置换算法。

## 6.设备管理
> [!NOTE]
> 设备管理的目标是如何提高设备的利用率，为用户提供方便统一的界面。


### 6.1 设备管理采用的缓冲技术
通道技术、DMA技术、缓冲技术、Spooling技术。
### 6.2 磁盘调度算法
1. 先来先服务（FCFS）
2. 最短寻道时间（SSTF）
3. 扫描算法（SCAN）（先由里向外，到达最外后由外向里）
4. 单向扫描调度算法（CSCAN）（无法换向，只能由里向外）。

## 7.文件管理
### 7.1 文件的逻辑结构
1. 有结构的记录式文件（由一个以上的记录构成。记录分为定长记录、不定长记录）
2. 无结构的流式文件（由一串顺序的字符流构成的文件，不划分记录）

### 7.2 文件的物理结构
顺序结构、链接结构、索引结构、多个物理块的索引表。

### 7.3 Unix的三级索引结构
#### 7.3.1 文件的存取方法
顺序存取法、随机存取法。

#### 7.3.2 文件的存储空间管理
外存空闲空间管理的数据结构通常称为磁盘分配表。常用的空闲空间的管理方法：位示图（用一个bit为的0、1表示一个物理块的空闲情况）、空闲区表、空闲块链、成组链接法（每100块为一组进行记录空闲的块号和大小）。

#### 7.3.3 文件链接
> [!NOTE]
> 硬链接（两个文件目录表目指向同一个索引节点，即指不同的文件名与同一个文件实体的链接）、符号链接（在建立的新文件或目录并与原来的文件或目录的路径名进行映射）。

##### 7.3.3.1 硬连接
原文件名和连接文件名都指向相同的物理地址。目录不能有硬连接；硬连接不能跨越文件系统（不能跨越不同的分区）文件在磁盘中只有一个拷贝，节省硬盘空间；由于删除文件要在同一个索引节点属于唯一的连接时才能成功，因此可以防止不必要的误删除。

##### 7.3.3.2 符号连接
用ln -s命令建立文件的符号连接符号连接是linux特殊文件的一种，作为一个文件，它的数据是它所连接的文件的路径名。类似windows下的快捷方式。可以删除原有的文件而保存连接文件，没有防止误删除功能。

## 8.作业管理
### 8.1 作业状态
- 提交（通过输入设备送入计算机）
- 后备（通过Spooling系统将作业输入到计算机系统的后备存储器中，等待作业调度程序调度）
- 执行
- 完成。


### 8.2 常用的作业调度算法
1. 先来先服务
2. 短作业优先
3. 响应比高优先
4. 优先级调度算法
5. 均衡调度算法。

---
**参考文章**
- https://blog.csdn.net/Song_JiangTao/article/details/79670805

【操作系统】基础知识

4.6 进程间的通信（同步与互斥）

4.10.2 可抢占性资源和不可抢占性资源

# CSS工程化方案
## 1.如何解决CSS的模块化问题？
1. 使用Less，Sass等CSS预处理器
2. 使用PostCSS插件（postcss-import/precss）
3. 使用webpack处理CSS（css-loader + style-loader）

## 2.PostCSS是什么？
1. PostCSS是一个平台，具体要取决于这个平台上面的插件可以做什么
2. 常用的插件如下
    ```js
    //  1. 可以添加属性前缀，适应所有的浏览器
        const autoprefixer = require('autoprefixer');
        // 2. 将所有的import 导入进来的模块全部合并为一个文件
        // const atImport = require('postcss-import');
        // 3.  实现代码的压缩优化
        // const cssnano = require('postcss-cssnano');
        // 4. cssnext提前使用CSS的高级语法
        // const cssnext = require('postcss-cssnext');
        // 5. precss 类似于sass的语法处理
        // const precss = require('precss')
    ```
    3. import实现模块的合并（模块分开，提前合并）
    4. CSS语法检查，兼容性检查
    5. 压缩文件


## 3.CSS modules是什么？如何使用?
1. 解决类名冲突的问题
2. 使用PostCSS或者Webpack等构建工具进行编译
3. 在HTML模板中使用编译过程产生的类名（对象.类名的方式来获取）

## 4.为什么使用JS来引用，加载CSS？
1. JS作为入口，管理资源具有天然优势（HTML，CSS本身是无法管理模块和资源的）
2. 将组件的结果、样式、行为封装到一起，增强组件内聚（减少代码耦合）
3. 可以做更多的处理（webpack，使用CSS Modules 解决了命名的冲突问题）


## 5. PostCSS的实现原理说一下？
> [!NOTE]
> PostCSS是一个通过JS插件转换样式表的工具，它本身并不是一门新的CSS语言，而是一个平台或者是生态心态，提供插件扩展服务即JS API，开发者可以根据这些接口，定制开发插件，
目前比较流行的插件工具如：Autoprefixer 、Stylelint 、CSSnano。

### 5.1 解析步骤
1. 将CSS解析成抽象语法树(AST树)
2. 将AST树”传递”给任意数量的插件处理
3. 将处理完毕的AST树重新转换成字符串


### 5.2 处理机制

Source string → Tokenizer → Parser → AST → Processor → Stringifier

#### 5.2.1 Tokenizer
> [!NOTE]
> 将源css字符串进行分词

举个例子：
.className { color: #FFF; }
通过Tokenizer后结果如下：
```js
[
    ["word", ".className", 1, 1, 1, 10]
    ["space", " "]
    ["{", "{", 1, 12]
    ["space", " "]
    ["word", "color", 1, 14, 1, 18]
    [":", ":", 1, 19]
    ["space", " "]
    ["word", "#FFF" , 1, 21, 1, 23]
    [";", ";", 1, 24]
    ["space", " "]
    ["}", "}", 1, 26]
]
```

以word类型为例，参数如下：
```js
const token = [
     // token 的类型，如word、space、comment
    'word',
 
    // 匹配到的词名称
    '.className',
 
    // 代表该词开始位置的row以及column，但像 type为`space`的属性没有该值
    1, 1,
 
    // 代表该词结束位置的row以及column，
    1, 10
]
```

#### 5.2.2 Parser
> [!NOTE]
> 经过Tokenizer之后，需要Parser将结果初始化为AST

```js
this.root = {
    type: 'root',
    source: { input: {css: ".className { color: #FFF; }", hasBOM: false, id: "<input css 1>"},
                   start: { line: 1, column: 1 } ,
                  end: { line: 1, column: 27 }
    },
   raws:{after: "", semicolon: false}
   nodes // 子元素
}
```

#### 5.2.3 Processor
经过AST之后，PostCSS提供了大量JS API给插件用

#### 5.2.4 Stringifier
插件处理后，比如加浏览器前缀，会被重新Stringifier.stringify为一般CSS。


## 6.谈一下你对前端工程化的理解？
参考博客：
+ https://www.cnblogs.com/fsyz/p/8274727.html
+ https://www.cnblogs.com/onebox/p/9570518.html

【CSS相关】CSS工程化方案

4.为什么使用JS来引用，加载CSS？

6.谈一下你对前端工程化的理解？

# 前端性能监控指标

## 1. 前端性能统计的指标有哪些？
1. 白屏时间：从打开网站到有内容渲染出来的时间节点；
2. 首屏时间：首屏内容渲染完毕的时间节点；
3. 用户可操作时间节点：domready触发节点；
4. 总下载时间：window.onload的触发节点。


## 2. 如何统计前端的性能（量化统计）？
下面介绍几种以上几个数据的统计方案。

### 2.1 常规统计方案
使用注入代码监控的方式统计以上指标，在没有一些浏览器新API（如下文将提到的timing API）的支持下，得到的数据大都是估值，虽然不准确，但也有一定的参考价值。

#### 2.1.1 白屏时间
白屏时间节点指的是从用户进入网站（输入url、刷新、跳转等方式）的时刻开始计算，一直到页面有内容展示出来的时间节点。这个过程包括dns查询、建立tcp连接、发送首个http请求（如果使用https还要介入TLS的验证时间）、返回html文档、html文档head解析完毕。

使用注入代码监控无法获取解析html文档之前的时间信息，目前普遍使用的白屏时间统计方案是在html文档的head中所有的静态资源以及内嵌脚本/样式之前记录一个时间点，在head最底部记录另一个时间点，两者的差值作为白屏时间。如下：
```html
<html>
<head>
<meta charset="UTF-8"/>
    
    <script>
    var start_time = new Date();//统计起点，实际为html开始解析的时间节点
    </script>
    <link href='a.css'></link>
    <script src='a.js'></script>
    <script>
    var end_time = new Date();//统计起点，实际为html开始解析的时间节点
    </script>
</head>
<body>
</body>
</html>
```
上述代码中的end_time和start_time的差值一般作为白屏时间的估值，但理论上来讲，这个差值只是浏览器解析html文档head的时间，并非准确的白屏时间。

#### 2.1.2 首屏时间
首屏时间的统计比较复杂，目前应用比较广的方案是将首屏的图片、iframe等资源添加onload事件，获取最慢的一个。

这种方案比较适合首屏元素数量固定的页面，比如移动端首屏不论屏幕大小都展示相同数量的内容，响应式得改变内容的字体、尺寸等。但是对于首屏元素不固定的页面，这种方案并不适用，最典型的就是PC端页面，不同屏幕尺寸下展示的首屏内容不同。上述方案便不适用于此场景。

#### 2.1.3 可操作时间
用户可操作的时间节点即dom ready触发的时间，使用jquery可以通过$(document).ready()获取此数据，如果不使用jQuery可以参考这里通过原生方法实现dom ready。

#### 2.1.4 总下载时间
> [!NOTE]
> 总下载时间即window.onload触发的时间节点。

目前大多数web产品都有异步加载的内容，比如图片的lazyload等。如果总下载时间需要统计到这些数据，可以借鉴AOP的理念，在请求异步内容之前和之后分别打点，最后计算差值。不过通常来讲，我们说的总下载时间并不包括异步加载的内容。

### 2.2 使用window.performance API
> [!NOTE]
> window.performance 是W3C性能小组引入的新的API，目前IE9以上的浏览器都支持。

一个performance对象的完整结构包括：

1. memory字段代表JavaScript对内存的占用。

2. navigation字段统计的是一些网页导航相关的数据：

3. redirectCount:重定向的数量（只读），但是这个接口有同源策略限制，即仅能检测同源的重定向；
   
4. type 返回值应该是0,1,2 中的一个。分别对应三个枚举值:
    - 0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式)
    - 1 : TYPE_RELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面)
    - 2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)
    最重要的是timing字段的统计数据，它包含了网络、解析等一系列的时间数据。

#### 2.2.1 timing API
timing的整体结构包括：

![性能监控](../../img/性能监控-timing.png)

1. startTime：有些浏览器实现为navigationStart，代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com，在地址栏输入google.com并回车，浏览器的执行动作依次为：unload当前文档（即baidu.com）->请求下一文档（即google.com）。navigationStart的值便是触发unload当前文档的时间节点。

    - 如果当前文档为空，则navigationStart的值等于fetchStart。

2. redirectStart和redirectEnd：如果页面是由redirect而来，则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点；

3. unloadEventStart和unloadEventEnd：如果前一个文档和请求的文档是同一个域的，则unloadEventStart和unloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0；

4. fetchStart是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间，浏览器会检查当前文档的缓存；

5. domainLookupStart和domainLookupEnd分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询（比如使用了cache），则两者的值都等于fetchStart；

6. connectStart和connectEnd分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接（比如使用持久化连接webscoket），则两者都等于domainLookupEnd；

7. secureConnectionStart：可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0；

8. requestStart代表浏览器发起请求的时间节点，请求的方式可以是请求服务器、缓存、本地资源等；

9. responseStart和responseEnd分别代表浏览器收到从服务器端（或缓存、本地资源）响应回的第一个字节和最后一个字节数据的时刻；

10. domLoading代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性，domLoading的值就等于readyState改变为loading的时间节点；

11. domInteractive代表浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady，它早于DOMReady触发，代表html文档解析完毕（即dom tree创建完成）但是内嵌资源（比如外链css、js等）还未加载的时间点；

12. domContentLoadedEventStart：代表DOMContentLoaded事件触发的时间节点：

13. 页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

14. domContentLoadedEventEnd：代表DOMContentLoaded事件完成的时间节点，此刻用户可以对页面进行操作，也就是jQuery中的domready时间；

15. domComplete：html文档完全解析完毕的时间节点；
    
16. loadEventStart和loadEventEnd分别代表onload事件触发和结束的时间节点

#### 2.2.2 计算性能指标
> [!NOTE]
> 可以使用Navigation.timing 统计到的时间数据来计算一些页面性能指标，比如DNS查询耗时、白屏时间、domready等等。

- DNS查询耗时 = domainLookupEnd - domainLookupStart
- TCP链接耗时 = connectEnd - connectStart
- request请求耗时 = responseEnd - responseStart
- 解析dom树耗时 = domComplete - domInteractive
- 白屏时间 = domloadng - fetchStart
- domready时间 = domContentLoadedEventEnd - fetchStart
- onload时间 = loadEventEnd - fetchStart


#### 2.2.3 统计代码

```js
// 计算加载时间
function getPerformanceTiming () { 
    var performance = window.performance;
  
    if (!performance) {
        // 当前浏览器不支持
        console.log('你的浏览器不支持 performance 接口');
        return;
    }
  
    var t = performance.timing;
    var times = {};
  
    //【重要】页面加载完成的时间
    //【原因】这几乎代表了用户等待页面可用的时间
    times.loadPage = t.loadEventEnd - t.navigationStart;
  
    //【重要】解析 DOM 树结构的时间
    //【原因】反省下你的 DOM 树嵌套是不是太多了！
    times.domReady = t.domComplete - t.responseEnd;
  
    //【重要】重定向的时间
    //【原因】拒绝重定向！比如，http://example.com/ 就不该写成 http://example.com
    times.redirect = t.redirectEnd - t.redirectStart;
  
    //【重要】DNS 查询时间
    //【原因】DNS 预加载做了么？页面内是不是使用了太多不同的域名导致域名查询的时间太长？
    // 可使用 HTML5 Prefetch 预查询 DNS ，见：[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)           
    times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
  
    //【重要】读取页面第一个字节的时间
    //【原因】这可以理解为用户拿到你的资源占用的时间，加异地机房了么，加CDN 处理了么？加带宽了么？加 CPU 运算速度了么？
    // TTFB 即 Time To First Byte 的意思
    // 维基百科：https://en.wikipedia.org/wiki/Time_To_First_Byte
    times.ttfb = t.responseStart - t.navigationStart;
  
    //【重要】内容加载完成的时间
    //【原因】页面内容经过 gzip 压缩了么，静态资源 css/js 等压缩了么？
    times.request = t.responseEnd - t.requestStart;
  
    //【重要】执行 onload 回调函数的时间
    //【原因】是否太多不必要的操作都放到 onload 回调函数里执行了，考虑过延迟加载、按需加载的策略么？
    times.loadEvent = t.loadEventEnd - t.loadEventStart;
  
    // DNS 缓存时间
    times.appcache = t.domainLookupStart - t.fetchStart;
  
    // 卸载页面的时间
    times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;
  
    // TCP 建立连接完成握手的时间
    times.connect = t.connectEnd - t.connectStart;
  
    return times;
}
```

【性能优化】performance性能监控

1. 前端性能统计的指标有哪些？

2. 如何统计前端的性能（量化统计）？