# 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到页面加载完成的过程？（高频考点）

# 开发环境	
## 3.1 Git操作	
### 3.1.1 Git的基本命令有哪些
```js
git add .
git checkout xxx
git commit -m 'xxx'
git push origin master
git pull origin master
git branch
git checkout -b xxx / git checkout xxx(文件名)
git merge xxx
git diff
--------------git多人协作：
git branch                   查看当前分支
git checkout -v dev          创建新的分支
git checkout dev             切换当前分支
git push origin dev          提交代码到dev分支（修改bug…
git checkout matser          切换到已有的分支
git merge dev                合并dev分支到master分支
git push origin master       推送修改的内容到远程仓库

```	
### 3.1.2 git rebase和git merge的区别？
**git merge**：将两个分支，合并提交为一个新提交，并且新提交有2个parent。把公共分支和你当前的commit 合并在一起，形成一个新的 commit 提交

**git rebase**：会取消分支中的每个提交，并把他们临时存放，然后把当前分支更新到最新的origin分支，最后再吧所有提交应用到分支上。
### 3.1.3 git上线回滚的流程？
上线流程：
1. 将测试完成的代码提交到git版本库的master分支
2. 将当前服务器的代码全部打包并记录版本号，备份
3. 将master分支的代码提交覆盖到线上服务器，生效新的版本号
回滚流程：
1. 将当前服务器的代码打包并记录版本号，备份
2. 【将备份的上一个版本号解压，覆盖到线上服务器】，生成新的版本号

## 3.2 模块化	
### 3.2.1 谈一下你对JS模块化的理解	
### 3.2.2 AMD和CommonJS规范的区别和使用场景	
AMD规范：
1. require.js requirejs.org
2. 全局定义了define函数
3. 全局定义了require函数
4. 依赖JS会自动、异步加载
CommonJS规范：
1. 这是nodejs的模块化规范，现在被广泛应用于前端
2. 前端开发依赖的插件和库，都可以从npm中获取
3. 构建工具的高度自动化，使得使用npm的成本非常低
4. CommonJS不会异步加载JS，而是同步一次性加载进来
使用场景：
1. 需要异步加载JS，使用AMD
2. 使用了npm之后建议使用commonjs规范

## 3.3 构建工具	
### 3.3.1 Webpack的基本配置流程	
> [!NOTE]
> 主要是掌握Webpack的基本配置，包括文件的打包和压缩、CSS文件的处理和模块化、图片文件的处理以及一些开发环境的常用配置和性能优化知识点，理解打包的底层实现原理。
> - 具体配置可参考：https://www.jianshu.com/p/11e8f9668c0e

### 3.3.2 Gulp的基本配置流程，与webpack的区别？
> [!NOTE]
> 需要掌握基本的配置流程和打包过程，底层实现原理。

```js
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require("browser-sync").create(), //自动刷新
    reload = browserSync.reload;
const filter = require('gulp-filter');
// gulp-filter 包， 以确保只有 *.css 文件响应 .reload - 这样一来，
// 您还是会得到CSS注入，而不是整个页面重载。
const useref = require('gulp-useref'); //合并JS
const uglify = require('gulp-uglify'); //js压缩
const minifyCSS = require('gulp-minify-css'); //压缩css

var gulpIf = require('gulp-if');

var del = require('del');

var runSequence = require('run-sequence');//组织任务执行顺序,未使用

var rename = require('gulp-rename');//重命名

var watch=require('gulp-watch');//监视

var minifyHtml = require("gulp-minify-html");//压缩html

var babel = require("gulp-babel");
// npm install --save-dev gulp-babel@7 babel-core babel-preset-env

var jshint = require("gulp-jshint");//js检查
var imagemin = require('gulp-imagemin');//压缩图片文件
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
var connect=require('gulp-connect');//引入gulp-connect模块 浏览器刷新
var cache = require('gulp-cache');//压缩图片可能会占用较长时间，使用 gulp-cache 插件可以减少重复压缩。
var RevAll = require("gulp-rev-all");//md5后缀
 
gulp.task('html',function(){//编译html
    return gulp.src('app/*.html')
    .pipe(gulp.dest('app/dist'))
    .pipe(connect.reload());
})

gulp.task('css',function(){//编译scss
    return gulp.src('app/scss/**/*.scss')
    .pipe(sass())//编译scss
    // .pipe(gulp.dest('app/css')) //当前对应css文件
    .pipe(gulp.dest('app/dist/css')) //当前对应css文件
    .pipe(connect.reload());//更新
})
 
gulp.task('js',function(){//编译ES6并且压缩
    return gulp.src('app/js/**/*.js')
    .pipe(jshint())//检查代码
    .pipe(babel({//编译ES6
        presets: ['es2015']
    }))
    .pipe(uglify())//压缩js
    .pipe(gulp.dest('app/dist/js'))
    .pipe(connect.reload());
})

gulp.task('fonts', function() {
    return gulp.src('app/fonts/**/*')
        .pipe(gulp.dest('app/dist/fonts'))
})

gulp.task('images', function() {
    return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({//压缩图片文件
        interlaced: true,
        })))
        .pipe(gulp.dest('dist/images'))
});

gulp.task('clean:app/dist', function() {//删除之前生成的文件
    return del(['app/dist']);
});

gulp.task('clean:dist', function() {//异步清理除dist目录图片以外的文件
     return del(['app/dist/**/*', '!dist/images', '!dist/images/**/*']);
});

gulp.task('minFs', function() {//压缩文件
    return gulp.src('app/dist/*.html')
        .pipe(useref())//合并js
        .pipe(
            gulpIf('*.js',uglify())//压缩js
        )
        .pipe(gulpIf('*.css', minifyCSS()))//压缩css
        .pipe(RevAll.revision({//不被重命名
            dontRenameFile:[/^\/favicon.ico$/g, ".html"]
        }))  
        .pipe(gulp.dest('dist'));
});

gulp.task('connect:app',function(){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9998//端口
    })
})

gulp.task('connect:dist',function(cb){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9999//端口
    })
    cb()//执行回调，表示这个异步任务已经完成，起通作用,这样会执行下个任务
})

gulp.task('watchs',function(){//监听变化执行任务
    //当匹配任务变化才执行相应任务
    gulp.watch('app/*.html',gulp.series('html'));
    gulp.watch('app/scss/**/*.scss',gulp.series('css'));
    gulp.watch('app/js/**/*.js',gulp.series('js'));
    gulp.watch('app/fonts/**/*',gulp.series('fonts'));
    gulp.watch('app/images/**/*',gulp.series('images'));
})

//gulp.series|4.0 依赖顺序执行
//gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行

//下面1和2分别运行

//1.自动监测文件变化并刷新浏览器

//初始生成app/dist目录
gulp.task('init',gulp.series('clean:app/dist',gulp.parallel('html','css','js','fonts','images')));

//启动任务connect:app服务，并监控变化
gulp.task('run',gulp.series('init','connect:app','watchs'));

//2.生成打包文件
gulp.task('build',gulp.series('clean:dist',gulp.parallel('init'),'minFs'));

//启动任务connect:dist服务，生成打包文件后，监控其变化
gulp.task('serve',gulp.series('connect:dist','build','clean:app/dist','watchs'));
```
## 3.4 Linux环境基本命令	
> 可参见开发环境下的Linux面试题相关章节。

【JS相关】开发环境

3.2.1 谈一下你对JS模块化的理解

3.2.2 AMD和CommonJS规范的区别和使用场景

3.3.2 Gulp的基本配置流程，与webpack的区别？

# 前端性能监控指标

## 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. 如何统计前端的性能（量化统计）？

# 移动端和Hybrid
## 1.hybrid是什么，为何使用hybrid呢？
1. 概念：
    - hybrid就是前端和客户端的混合开发
    - 需要前端开发人员和客户端开发人员配合完成
    - 某些环节也可能会涉及到server端
    - 大前端：网页、APP、前端和server端交互的过程
2. 存在价值：
    - 可以快速迭代更新【关键】，无需APP审核（hybrid技术可以一天上线多次）
    - 体验流畅（和Native开发的体验基本类似）
    - 减少开发和沟通成本，双端公用一套代码    
3. webview：
    - 是APP中的一个组价（App可以有Webview，也可以么有）
    - 主要用于加载H5页面，是一个小型的浏览器内核
4. file:// 协议
    - file协议: 本地文件，快
    - http(s): 网络加载、慢
   + 扩展知识：Web标准都有哪些呢？

## 2.hybrid的具体实现流程？
### 2.1 使用场景
1. 不是所有场景都适合使用hybrid
2. 使用NA： 体验要求极致，变化不频繁（如头条的首页）
3. 使用hybrid：体验要求高，变化频繁（如头条的新闻详情页面）
4. 使用H5： 体验无要求，不常用（如举报、反馈等页面）
   
### 2.2 具体实现
1. 前端做好静态页面（HTML，CSS，JS），将文件交给客户端
2. 客户端拿到前端静态页面，以文件形式存储在APP中
3. 客户端在一个Webview中
4. 使用file协议加载本地静态文件
   
## 3.介绍一下hybrid更新和上线的流程？
### 3.1 优点
1. 用户体验更好，跟NA体验基本一致
2. 可以快速迭代，无需app审核 【关键】
   
### 3.2 缺点：
1. 开发成本高：联调、测试、查bug都比较麻烦
2. 运维成本高。（平台维护）
   
### 3.3 适用场景：
1. hybrid：产品的稳定功能，用户体验高，迭代频繁
2. H5：单词的运营活动（如XX红包），或不常用的功能  
   
## 4.前端JS和客户端如何通讯？
1. 类似于JSONP的数据请求方式
2. schema协议的简介和使用
3. 通讯的基本形式：调用能力，传递参数监听回调
4. 对schema协议的理解和使用
5. 调用schema代码的封装
6. 内置上线的好处：更快、更安全



【JS相关】移动端和Hybrid

1.hybrid是什么，为何使用hybrid呢？

3.介绍一下hybrid更新和上线的流程？

# 腾讯面经系列
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的区别
…

【面经系列】腾讯面经

【CSS相关】CSS布局

3.什么是层叠上下文？如何形层叠上下文？层叠顺序是怎样的？

4.如何解决inline-block 的间隙问题？

8.1 方法一：基于视口的垂直居中

9.1 方法一：text-align的center属性

# 百度面经系列
1. react和vue的区别
2. JS的数据类型
3. null和undefined的区别
4. ![]的结果
5. 闭包的使用场景
6. 微任务和宏任务
7. 实现JSONP
8. 手写节流
9. 路由两种模式使用场景
10. 数组和链表区别
11. 链表的使用场景
12. 实现点击按钮输出input中字符串的反转
13. PWA
14. 跨域
15. 缓存策略
16. 缓存位置
17. 前端安全
18. 白屏的处理
19. 按需加载
20. HTTP
21. 闭包
22. websocket
23. socket
24. 写一个函数判断页面两个矩形是否相交
25. 介绍项目，介绍项目的难点与创新点
26. 前端项目打包方式
27. 项目前端方面引用技术
28. React的生命周期
29. React的虚拟DOM
30. 事件循环（EventLoop）
31. 解构赋值
32. 箭头函数
33. Promise（写一个promise的实例）
34. 写Promise.all的实现源码
35. 跨域及实现的方式，及比较
36. 同源策略在浏览器具体的表现
37. 回流与重绘，以及如何避免
38. 浏览器的缓存机制
39. 介绍强缓存与协商缓存
40. 对前端工程化方面的理解
41. 介绍一个你自己的项目？
42. 说一下Vue的缺点有哪些？
43. Eventloop循环说一下？
44. Node中的Worker说一下？Node中如何创建多个线程？Node中如何实现开启守护进程？
45. 说一下Express的架构和实现原理？
46. 说一下中间件的实现原理？
47. Express和Koa的区别呢？
48. 说一下Diff算法的本质？abc, acb是如何改变的呢？
49. 说一下红黑树和他的应用场景？
50. Nginx的应用场景说一下？
51. app.use和app.get的区别？
52. node的路由实现原理？
53. Node如何读取大数据量下的数据？
54. 介绍一下项目，项目中的用到的一些技术
55. 移动端的性能优化，rem的原理
56. 点透事件：H5开发中可能遇到的特有的问题
57. 项目后台用的技术栈是什么
58. 跨域问题
59. 常见的http状态码
60. $documnent.ready()  VS  window.onload() 两种方式的区别（哪个先执行）
61. ES6的新特性
62. 箭头函数与普通函数的区别
63. let与var的区别
64. 对vue熟悉吗？（不能算是熟悉，所以vue是硬伤）
65. vue的生命周期
66. 对闭包的理解
68. 常见的git命令
69. 项目中所有人都在master分支上开发吗？还是都有自己的分支？
70. http状态码
71. 输入一个URL的过程
72. es6，promise讲一下
73. 冒泡算法、二分查找、快排，以及时间复杂度、最坏情况
74. 同源策略
75. 跨域
76. xss攻击和预防
77. import和link的区别
78. 水平居中的方式，包括块和文本
79. css3的新特性，说一下单行文本溢出和多行文本溢出
80. less了解吗
81. 设计模式，实现一个登录框，不让用户重复点击弹出多个登录框（使用单例模式）
82. 原型链
83. 优化方法
84. git提交冲突如何解决
85. 实现一个repeat(str,count)函数，str是一个字符串，count是重复的次数。
86. 三个盒子里有一块糖，你挑了一个盒子，然后拿走一个空盒子，问是否更换盒子？
87. 一个为n的台阶，小明可以一次走一步、两步或者五步，问一共几种走法？

【面经系列】百度面经

# Bootstrap
## 1.Bootstrap 的优缺点？
+ 优点：CSS代码结构合理，现成的代码可以直接使用（响应式布局）
+ 缺点：定制流程较为繁琐，体积大

## 2.如何实现响应式布局？
+ 原理：通过media query设置不同分辨率的class
+ 使用：为不同分辨率选择不同的class

## 3.如何定制自己的bootstrap样式?
1. 使用CSS同名类覆盖（门槛低，见效快，可能会有bug）
2. 修改源码重新构建（一次性彻底解决）
                [
                    bootstrap.scss是入口文件，修改这个文件内容之后，使用node-sass重新编译scss文件
                    node-sass --output-style expanded bootstrap/custom/scss/bootstrap.scss > bootstrap/custom/dist/css/bootstrap.css
                ]
3. 引用Scss源文件，修改变量(类似于预处理器的使用方式, 徐亚什么模块引入什么模块，会更加灵活，推荐)
                [
                    1. 创建一个自己的custom.scss文件
                    ```
                        $primary: greed;
                        @import './botstrap-custom/scss/bootstrap.scss'
                    ```
                ]


## 4.如何实现一个响应式布局框架？
> [!NOTE]
> 面试常考考点，要求模拟实现boostrap的底层实现原理。

上面的[!NOTE]是行匹配模式，默认情况下支持类型NOTE，TIP，WARNING和DANGER。
### 4.1 JS的模拟实现
```html
<style>
    .container{
　　　　height: 40px;
       margin: 0 auto;
       background-color: rebeccapurple;
   }
</style>
<div class="container"></div>
<script>
    window.addEventListener("load", function () {
        // 1. 获取容器
        let container = document.querySelector(".container");
        let clientW = 0;
        resize();
        // 2. 监听窗口的大小变化
        window.addEventListener("resize", resize);
        function resize() {
            // 2.1 获取改变后的宽度
            clientW = window.innerWidth;
            // 2.2 判断
            if(clientW >= 1200){ // 超大屏幕
                container.style.width = "1170px";
            }else if(clientW >= 992){ // 大屏幕
                container.style.width = "970px";
            }else if(clientW >= 768){ // 小屏幕
                container.style.width = "750px";
            }else { // 超小屏幕
                container.style.width = "100%";
            }
        }
    });
</script>
```

### 4.2 CSS的模拟实现
```html
<style>
        .container{
            height: 40px;
            margin: 0 auto;
            background-color: rebeccapurple;
        }

        /*媒体查询*/
        @media screen  and (max-width: 768px){
            .container{
                width: 100%;
            }
        }
　　　　　
        @media screen  and (min-width: 768px) and (max-width: 992px){
            .container{
                width: 750px;
            }
        }
        @media screen  and (min-width: 992px) and (max-width: 1200px){
            .container{
                width: 970px;
            }
        }
        @media screen  and (min-width: 1200px){
            .container{
                width: 1170px;
            }
        }
</style>
<div class="container"></div>
```
> [!NOTE]
> 关键点：mediaQuery, 浮动，响应式布局，resize事件


【CSS相关】Bootstrap

4.如何实现一个响应式布局框架？

# CSS预处理器
## 1.常见的CSS预处理器有哪些？
> [!NOTE]
> css预处理器：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处
> + Sass(Scss)：2007,ruby编写
> + Less: 2009，js编译

### 1.1 使用流程？ 
1. 基于CSS的另外一种语言
2. 通过工具编译成CSS
3. 添加了很多CSS不具备的特性
4. 同时CSS文件的组织方式

### 1.2 预处理器的作用有哪些？
1. 帮助开发者更好组织CSS代码（变量，mixIn）
2. 提高代码的复用性
3. 代码的可维护性增强

## 2.Less/Sass预处理器的功能？
1. 嵌套： 反映层级和约束
2. 变量和计算： 减少重复代码
3. Extend和mixIn： 代码片段的抽离
4. 循环: 适用于复杂有规律的样式
5. import：可以实现CSS文件的模块化

## 3.CSS预处理器的优缺点？
+ 优点： 提高代码的复用率和可维护性
+ 缺点： 引入了编译的过程，有一定的学习成本

> 前端工程化：预处理不再是唯一的手段了，可以使用工程化构建工具进行处理

## 4.scss和less的区别？
1. 编译环境不一样
2. 变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。
3. 输出设置，Less没有输出设置，Sass提供4种输出选项：
4. Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
5. 引用外部CSS文件
6. 工具库不同

