猫说

React生成PDF

Mon, 23 May 2022 00:00:00 +0800

前端项目生成PDF

1、直接上代码

import html2canvas from "html2canvas";
import JsPDF from "jspdf";
// import { uploadImg } from "./service";
export const html2pdf = async (name, id = "document-dom") => {
  let el = document.getElementById(id); //通过getElementById获取要导出的内容
  let ele = el.cloneNode(true);
  try {
  } catch (e) {}
  const div = document.createElement("div");
  div.setAttribute("id", "divInnerHtmlIsFileList");
  div.style.cssText = "position:absolute;z-index:-1;bottom:0;left:0";
  div.appendChild(ele);
  document.body.appendChild(div);

  let eleW = el.offsetWidth; // 获得该容器的宽
  let eleH = el.offsetHeight; // 获得该容器的高

  let eleOffsetTop = el.offsetTop; // 获得该容器到文档顶部的距离
  let eleOffsetLeft = el.offsetLeft; // 获得该容器到文档最左的距离

  let canvasEle = document.createElement("canvas");
  let abs = 0;
  let win_in =
    document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
  let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

  if (win_out > win_in) {
    abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
  }
  canvasEle.width = eleW * 2; // 将画布宽&&高放大两倍
  canvasEle.height = eleH * 2;

  let context = canvasEle.getContext("2d");
  context.scale(2, 2);
  context.translate(-eleOffsetLeft - abs, -eleOffsetTop);

  let canvas = await html2canvas(div, {
    dpi: 96, //分辨率
    scale: 2, //设置缩放
    useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。,
    //backgroundColor:'#ffffff',这样背景还是黑的
    bgcolor: "#ffffff", //应该这样写
    logging: false, //打印日志用的 可以不加默认为false
  });
  // el.setAttribute("crossOrigin",'anonymous');
  let contentWidth = canvas.width;
  let contentHeight = canvas.height;
  //一页pdf显示html页面生成的canvas高度;
  let pageHeight = (contentWidth / 592.28) * 841.89;
  //未生成pdf的html页面高度
  let leftHeight = contentHeight;
  //页面偏移
  let position = 0;
  //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
  let imgWidth = 595.28;
  let imgHeight = (595.28 / contentWidth) * contentHeight;
  let pageData = canvas.toDataURL("image/jpeg", 1.0);
  let pdf = new JsPDF("", "pt", "a4");
  // var pdf = new JsPDF('p', 'pt', 'letter');

  if (leftHeight < pageHeight) {
    //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
    pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
  } else {
    // 分页
    while (leftHeight > 0) {
      pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
      leftHeight -= pageHeight;
      position -= 841.89;
      //避免添加空白页
      if (leftHeight > 0) {
        pdf.addPage();
      }
    }
  }
  //可动态生成
  const formData = new FormData();
  let pdfFile = new window.File([pdf.output("blob")], name, {
    type: "application/pdf",
  });
  const url = window.URL.createObjectURL(pdfFile);
  window.open(url)
};

export const hideDom = (el, ele) => {
  try {
    let div = document.getElementById("divInnerHtmlIsFileList");
    div.removeChild(ele);
    document.body.removeChild(div);
  } catch (e) {}
};

调用的地方

import {html2pdf} from '@/global/utils'

const printGB = ()=>{
  html2pdf('名字', `DomId`)
}

electron基础

Tue, 01 Mar 2022 00:00:00 +0800

如果你可以建一个网站，你就可以建一个桌面应用程序。

1、简介

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

2、进程、线程

进程：正在进行的一个过程或者说一个任务。进程指的是程序的运行过程，而负责执行任务则是cpu。不同的进程不能相互沟通。
线程：线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中,是进程中的实际运作单位。同进程下的线程可以沟通。

electron也是基于Chromium，所以在electron中分为主进程main process和渲染进程renderer process

进程之间在Electron中想要通信可以使用IPC

3、创建项目

需要有node环境，使用npm或者yarn都行

mkdir my-electron-app && cd my-electron-app
npm init
npm install --save-dev electron
npm start

如果想看官网的demo

# 克隆项目
git clone https://github.com/electron/electron-quick-start

# 进入目录
cd electron-quick-start

# 安装依赖并运行
npm install && npm start

因为是基于node的，节省每次编译的时间，使用nodemon

npm install nodemon --save-dev

然后修改package.json

"scripts":{
  "start": "nodemon --watch main.js --exec \"electron .\""
}

意思是nodemon监听main.js，每次改变去执行electron .，而electron .执行的文件就是main.js，是在如下这个地方配置的

"main": "main.js"

3、主要文件

创建好项目，项目目录

main.js：主进程的文件
renderer.js：渲染进程的文件

4、创建窗口

清空main.js的内容，学习electron的第一个API：BrowserWindow：这个API目前只能在主进程main.js中使用。

const { app, BrowserWindow} = require('electron');

app.on('ready', ()=>{
  let mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      // 配置下面这个参数可以解决引入的js不生效的问题
      // 由于require可以直接请求运行客户机上的文件，容易引起安全问题，而在新的electron中被禁止，所以在contextIsolation为true时认为require不可以启用
      // contextIsolation默认为true
      contextIsolation: false 
    }
  })
	// 给当前窗口加载html文件
  mainWindow.loadFile('index.html');

  // 创建子窗口
  let secondWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true
    },
    parent: mainWindow
  })
  secondWindow.loadFile('second.html');
})

5、添加事件

在窗口里引用的HTML文件的里面可以引入js脚本

<!-- index.html -->


<h1>Hello World! 2s</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.

<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>

在这个js里面可以操控DOM，也可以使用node 的API

// renderer.js
window.addEventListener('DOMContentLoaded', ()=>{
    document.getElementById('node-version').innerHTML = process.versions.node + '测试';
})

然后运行main.js就可以看到新的窗口上有内容了。

6、主进程和渲染进程通信

// main.js
const { app, BrowserWindow, ipcMain  } = require('electron');


app.on('ready', ()=>{
  // ....
  ipcMain.on('message', (event, arg)=>{
    event.reply('reply', arg)
  })
})


// renderer.js
const { ipcRenderer } = require('electron')

window.addEventListener('DOMContentLoaded', ()=>{
		
  // ....
    document.getElementById('send').addEventListener('click', ()=>{
        ipcRenderer.send('message', '这是一条发送过来的消息')
    })

    ipcRenderer.on('reply', (evenr, arg)=>{
        document.getElementById('message').innerHTML = arg;
    })
})

在HTML中

<!-- index.html  -->

<button id="send">发送</button>
<div id="message"></div>

6.1 remote

在Electron中的模块有些只能在主进程中使用、有些只能在渲染进程中使用、只有一小部分模块在主进程和渲染进程中都可以使用

Electron 中与 GUI 相关的模块只存在于主进程，而不在渲染进程中，为了能从渲染进程中使用它们，需要给主进程发送进程间消息。remote 模块提供了一种在渲染进程和主进程之间进行进程间通讯的简便途径，使用 remote 模块，可以调用主进程对象的方法，而无需显式地发送进程间消息

Electron10.x 以后要使用 remote 模块的必须得在 BrowserWindow 中开启。

const createWindow = () => {
    // 创建窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // 开启node
            nodeIntegration: true,
            contextIsolation: false,
            // 开启remote
            enableRemoteModule:true
        }
    });
}

具体使用：

在electron17.x之后，remote模块想要使用需要npm install

npm install --save @electron/remote

然后在主进程中配置引用

const { app, BrowserWindow, ipcMain  } = require('electron');

app.on('ready', ()=>{

  let mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  }) 
	
  require("@electron/remote/main").initialize();
  require("@electron/remote/main").enable(mainWindow.webContents);
}) 

才可以在渲染进程中使用：

const { ipcRenderer } = require('electron')
const { BrowserWindow } = require("@electron/remote");

window.addEventListener('DOMContentLoaded', ()=>{
    
    document.getElementById('node-version').innerHTML = process.versions.node + '测试';
    document.getElementById('send').addEventListener('click', ()=>{
        ipcRenderer.send('message', '这是一条发送过来的消息')
        var win = new BrowserWindow({ width: 800, height: 600 });
        win.loadURL('https://baidu.com');
    })
    ipcRenderer.on('reply', (evenr, arg)=>{
        document.getElementById('message').innerHTML = arg;
    })
})

uniapp基础

Mon, 21 Feb 2022 00:00:00 +0800

uniapp的简单使用

1、简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

创建项目可以使用HBuilderX或使用vue-cli

# vue-cli
vue create -p dcloudio/uni-preset-vue my-project

2、目录结构

pages：页面存放目录
static：静态文件资源目录
App.vue：应用入口文件
Main.js：应用入口文件
manife.json：项目配置文件
pages.json：页面配置
Common：存放公用的文件
components：自定义组件目录
store：vuex目录
unpackage：编译后的文件存放目录

3、模板语法

在模板中使用data中的变量需要使用v-bind可以简写为:和vue中一样，包括v-on简写成@

<template>
	<view class="content">
		<view v-bind:class="title">
      
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		}
	}
</script>

各种语法基本上算是小程序和vue的结合版了。

4、组件

uniapp中的组件和微信小程序里的差不多

几个常用的：

视图容器：view、scroll-view
基础组件：icon、text
表单组件：button、input、checkbox、textarea
路由跳转：navigator
媒体组件：audio、image
地图组件：map
画布组件：canvas

各种组件可以看https://hellouniapp.dcloud.net.cn/pages/component/view/view

5、自定义组件

自定义组件创建在./components/组件名.vue，符合这个规范的可以在页面中直接引用，而不需要引文件这些操作

// ./components/card.vue 组件内
<template>
	<view class="content">
		<view >
			card
		</view>
	</view>
</template>


// 使用的组件,无需import，直接标签
<template>
	<view class="content">
		<view :class="title">
			
		</view>
		<button @click="clickBtn">1111</button>
		<card></card>
	</view>
</template>

6、生命周期

应用生命周期：

onLaunch：应用初始化完成执行，全局只执行一次
onShow：应用显示的时候执行，或者从后台进入到前台
onHide：应用隐藏的时候执行，或者应用从前台到后台

页面生命周期：

onLoad：页面加载的时候触发
onReady：页面初次渲染完成触发
onShow：页面显示的时候触发
onUnload：页面卸载的时候触发
onHide：页面隐藏的时候触发

组件生命周期（和Vue生命周期一致）：

beforeCreate：在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前调用
created：实例创建完成之后立即调用，实例上的方法属性也都配置完成，但是还没有挂载
beforeMount：在挂载开始之前被调用
mounted：挂载到实例上去之后调用。此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick
beforeUpdate：数据更新时调用
updated：更新完成后调用
beforeDestroy
destroyed

初次渲染顺序：

App onLaunch
App onShow
page onLoad
page onShow
beforeCreate
created
beforeMount
mounted
page onReady

前端面试题之webpack

Sun, 20 Feb 2022 00:00:00 +0800

webpack常问知识点

1、webpack简介

是一个用于现代javaScript应用程序的 静态模块打包工具。
当webpack处理应用程序时，会在内部构建一个依赖图，此依赖图对应影射到项目的每个模块，并声称一个或者多个bundle

2、webpack核心

入口：entry
输出：output
加载器：loader
插件：plugin
模式：mode

3、webpack打包流程

从配置文件webpack.config.js和shell语句中读取并合并参数，拿到最终的参数
用上一步的参数初始化Compiler对象，加载所有配置的插件，让插件监听 webpack 构建生命周期的事件节点，执行对象的run方法开始编译
根据entry找到所有的入口文件
从 entry 入口文件出发，调用loader对模块进行翻译，再找出该模块依赖的模块，进行递归本步骤，直到所有的入口依赖的文件都经过处理
使用loader翻译完所有的模块之后（将解析出来的AST语法树转化为code），得到了每个模块被翻译后的最终内容和它们之间的依赖关系
根据入口和模块之间的依赖关系，组成成一个个包含多个模块的Chunk，再将Chunk转换成一个单独的文件加入到输出列表，这一步是可以修改输出内容的最后机会
确定好输出内容之后，根据配置确定输出的路径和文件名，将内容写入到文件系统

4、loader和plugin的区别

loader是转换器，能够加载资源文件，并对这些文件进行处理，比如编译压缩等，最终打包到指定的文件中
- loader接受三个参数：source/sourceMap(可选)/data(可选)
- 处理一个文件可以使用多个loader，loader的执行顺序和配置的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行
- 前面执行的loader的返回值是后一个loader的入参，最后执行的loader会返回此模块的JavaScript源码
plugin是插件，在webpack运行的生命周期中会广播许多事件，plugin可以监听这些事件，在合适的时候通过webpack的钩子改变输出结果

plugin是针对webpack打包的过程，它不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些事件钩子，执行任务。plugin 比 loader 强大，通过plugin 可以访问 compliler 和 compilation 过程，通过钩子拦截 webpack 的执行。

4.1 为什么需要loader

本质上是因为 Webpack 只认识符合 JavaScript 规范的文本，对图片、json、Vue单文件组件等场景就不行了，就需要 Loader 介入将资源转化成 Webpack 可以理解的内容形态。

5、webpack进行模块加载

同步加载：直接通过webpack_require加载

异步加载：使用require.ensure()

6、常用的loader

Css-loader：支持css文件的加载和解析，Webpack 是用 JS 写的，运行在 node 环境，所以默认 Webpack 打包的时候只会处理 JS 之间的依赖关系，如果在 JS 中导入了 css，那么就需要使用 css-loader 来识别这个模块
Style-loader：css-loader 只会把 css 模块加载到 JS 代码中，并不会使用这个模块，style-loader 是通过一个 JS 脚本创建一个 style 标签，把css内容加载进去
file-loader：
在css文件中定义 background 的属性或者在html中引入 image 的src，我们知道在 webpack 打包后这些图片会打包至定义好的一个文件夹下，和开发时候的相对路径会不一样，这就会导致导入图片路径的错误。而 file-loader 正是为了解决此类问题而产生的，他修改打包后图片的储存路径，再根据配置修改我们引用的路径，使之对应引入。
url-loader：
如果页面图片较多，发很多http请求，会降低页面性能。这个问题可以通过 url-loader 解决。url-loader 会将引入的图片编码，生成 dataURl 并将其打包到文件中，最终只需要引入这个 dataURL 就能访问图片了。当然，如果图片较大，编码会消耗性能。因此 url-loader 提供了一个limit参数，小于 limit 字节的文件会被转为 DataURl，大于 limit 的还会使用 file-loader 进行copy。url-loader 内置了 file-loader。
Babel-loader：Babel是一个 JavaScript 编译器，可以把新的js语法编译成兼容旧版本的，能够让我们放心的使用新一代JS语法。

7、常用的plugin

clean-webpack-plugin：每次打包后自动清理dist目录。
html-webpack-plugin：相比于之前写死HTML文件的方式，自动生成HTML的优势在于：
- 1.HTML也输出到dist目录中了，上线时只需要把dist目录发布出去。
- 2.HTML中的script标签是自动引入的，所以可以确保资源文件的路径是正常的
HotModuleReplacementPlugin：热加载，HMR 作为一个 Webpack 内置的功能

8、Rollup和webpack区别

rollup所有资源放同一个地方，一次性加载利用tree-shake特性来剔除未使用的代码，减少冗余，可以将你的 js 中的代码，编译成你想要的格式
webpack拆分代码、按需加载，但是webpack5已结默认带tree-shaking了，静态资源导入（如 js、css、图片、字体等）,拥有如此强大的功能，所以 webpack 在进行资源打包的时候，就会产生很多冗余的代码。

9、sourceMap

source map 是将编译、打包、压缩后的代码映射回源代码的过程。
map文件只要不打开开发者工具、浏览器就不会加载。

10、热更新

webpack的热更新又称热替换简称HMR(HotModuleReplacementPlugin)。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。

HMR 核心是：客户端从服务端拉取更新后的文件，准确的说是chunk diff（比较出需要更新的部分）。实际上，WDS（webpack-dev-server）与浏览器之间维护了一个 websocket，当本地资源发生变化时，WDS向浏览器推送更新，并带上构建时的hash，让客户端与上一次资源进行对比。客户端比对出差异好会向WDS发起Ajax请求来获取更改内容，这样客户端就可以再次借助这些信息继续向WDS发起jsonp请求，获取该chunk的增量更新。

11、chunk 分包

chunk：用于组织输出结构的对象，webpack分析完所有模块资源的内容，构建出完整的依赖图Dependency Graph之后，会根据用户配置以及依赖图的内容构建出一个或多个chunk，每个chunk与最终输出的文件大致上是一一对应的。

webpack编译过程大致上分为四个阶段

初始化阶段
构建阶段 make
生成阶段 seal
写入阶段 emit

Dependency Graph：在构建(make) 阶段，webpack 从 entry 出发根据模块间的引用关系(require/import) 逐步构建出模块依赖关系图(ModuleDependencyGraph），依赖关系图表达了模块与模块之间互相引用的先后次序，基于这种次序 webpack 就可以推断出模块运行之前需要先执行那些依赖模块，也就可以进一步推断出那些模块应该打包在一起，那些模块可以延后加载(异步执行)

webpack根据模块依赖图的内容开始组织分包——chunk对象。

默认的分包规则有：

同一个entry下的模块组织成一个chunk
异步模块单独组织为一个chunk
entry.runtime单独组织成一个chunk (webpack5)：Webpack 执行完 entry、异步模块分包后，开始遍历 entry 配置判断是否带有 runtime 属性，如果有则创建以 runtime 值为名的 Chunk

后续会有如SplitChunksPlugin插件在Chunk系列对象上进一步拆解、优化，最终反映到输出上才会表现出复杂的分包结果。

11.1 chunk的父子关系

由entry生成的Chunk之间相互孤立，没有必然的前后依赖关系，但异步生成的Chunk不同，假设一个文件有同步引用的文件，也有异步引用的文件，由于异步的文件会单独进行打包(Async chunk )，但是这里异步的chunk是有单向依赖关系的，在这种情况下引用者被称为parent,被引用者为child，同步引用的文件都会存放到ChunkGroup._parents，异步的会存放到ChunkGroup._children属性中

12、loader缓存

默认情况下 Webpack 会缓存 Loader 的执行结果直到资源或资源依赖发生变化，开发者需要对此有个基本的理解，必要时可以通过 this.cachable 显式声明不作缓存，例如：

module.exports = function(source) {
  this.cacheable(false);
  // ...
  return output;
};

因为在 Loader 中执行的各种资源内容转译操作通常都是 CPU 密集型 —— 这放在单线程的 Node 场景下可能导致性能问题；又或者异步 Loader 会挂起后续的加载器队列直到异步 Loader 触发回调，稍微不注意就可能导致整个加载器链条的执行时间过长。

13、tree shaking 摇树优化

Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未曾其它模块使用，并将其删除，以此实现打包产物的优化。

在 Webpack 中，启动 Tree Shaking 功能必须同时满足三个条件：

使用 ESM 规范编写模块代码
配置 optimization.usedExports 为 true，启动标记功能
启动代码优化功能，可以通过如下方式实现：
- 配置 mode = production
- 配置 optimization.minimize = true
- 提供 optimization.minimizer 数组

// webpack.config.js
module.exports = {
  entry: "./src/index",
  mode: "production",
  devtool: false,
  optimization: {
    usedExports: true,
  },
};

Webpack 中，Tree-shaking 的实现一是先标记出模块导出值中哪些没有被用过，二是使用 Terser 删掉这些没被用到的导出语句，大概步骤如下：

Make 阶段，收集模块导出变量并记录到模块依赖关系图 ModuleGraph 变量中
Seal 阶段，遍历依赖图ModuleGraph标记模块导出变量有没有被使用
生成产物时，若变量没有被其它模块使用则删除对应的导出语句

也就是说，标记的效果就是删除没有被其它模块使用的导出语句。

ps：标记功能需要配置 optimization.usedExports = true 开启

摇树优化的优化效果并不是那么完美，需要使用者有意识的优化代码结构

13.1 避免无意义的赋值

// m.js
export const bar = 'bar'
export const foo = 'foo'

// i.js
import {bar, foo} from "./m.js"
console.log(bar) // 后续有在使用bar
const f = foo; // 后续没有在使用foo

如上，假设foo在后续没有用到，就不要引用或者引用了不要进行赋值操作，本应是可以优化掉的代码段，但是因为一个无意义的赋值操作，不会被优化掉。

13.2 使用 `#pure` 标注纯函数调用

/*#__PURE__*/  foo('be removed');

上面这个代码是用于明确告诉 Webpack 该次函数调用并不会对上下文环境产生副作用，可以被优化删除掉。

13.3 禁止 Babel 转译模块导入导出语句

Babel 是一个非常流行的 JavaScript 代码转换器，它能够将高版本的 JS 代码等价转译为兼容性更佳的低版本代码，使得前端开发者能够使用最新的语言特性开发出兼容旧版本浏览器的代码。

但 Babel 提供的部分功能特性会致使 Tree Shaking 功能失效，例如 Babel 可以将 import/export 风格的 ESM 语句等价转译为 CommonJS 风格的模块化语句，但该功能却导致 Webpack 无法对转译后的模块导入导出内容做静态分析

前端面试题之浏览器

Wed, 16 Feb 2022 00:00:00 +0800

浏览器方面的常问知识点

1、浏览器本地存储

有三种：

cookie
sessionStorage
localStorage

Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。Cookie的大小只有4kb，它是一种纯文本文件，每次发起HTTP请求都会携带Cookie。

cookie的特性：

cookie一旦创建成功，名称无法修改
cookie是不能跨域名的，这样就可以阻止其他网站非法获取cookie
每个域名下面的cookie不能超过20个，每个不超过4kb
cookie如果被劫持，那么就可以在不需要解密的情况下直接登录
cookie在请求一个新的页面的时候都会被发送

如果需要跨域名共享cookie：

Nginx反向代理
在一个站点登录后，往其他网站写cookie，服务端的session存储到一个节点，，cookie存储sessionId

cookie的使用场景：

存储用户登录信息，session+cookie
可以用来统计页面的点击次数

1.2 sessionStorage

SessionStorage和LocalStorage都是在HTML5才提出来的存储方案，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。

由于SessionStorage具有时效性，所以可以用来存储一些网站的游客登录的信息，还有临时的浏览记录的信息。当关闭网站之后，这些信息也就随之消除了。

使用：

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

// 获取某个索引的Key
sessionStorage.key(index)

1.3 localStorage

LocalStorage是HTML5新引入的特性，由于有的时候我们存储的信息较大，Cookie就不能满足我们的需求，这时候LocalStorage就派上用场了。

localStorage的优点：

可以存大小5MB的内容
是浏览器本地持久化存储，并不会随着页面的关闭而消失
存储在本地，不会像cookie一样每次请求都被携带

localStorage的缺点：

IE8以下不支持
如果浏览器设置为隐私模式，无法读取
受同源策略的限制，不同的端口、协议、主机地址不能访问

用法：

// 保存数据到 localStorage
localStorage.setItem('key', 'value');

// 从 localStorage 获取数据
let data = localStorage.getItem('key');

// 从 localStorage 删除保存的数据
localStorage.removeItem('key');

// 从 localStorage 删除所有保存的数据
localStorage.clear();

// 获取某个索引的Key
localStorage.key(index)

SessionStorage与LocalStorage对比：

SessionStorage和LocalStorage都在本地进行数据存储
SessionStorage也有同源策略的限制，但是SessionStorage有一条更加严格的限制，SessionStorage只有在同一浏览器的同一窗口下才能够共享
LocalStorage和SessionStorage都不能被爬虫爬取

2、浏览器同源策略

同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。同源指的是：协议、端口号、域名必须一致。

同源策略限制：

当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
当前域下 ajax 无法发送跨域请求。

同源政策的目的主要是为了保证用户的信息安全，它只是对 js 脚本的一种限制，并不是对浏览器的限制，对于一般的 img、或者script 脚本请求都不会有跨域的限制，这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。

3、如何解决跨域

3.1 CORS 跨域资源共享

CORS: 跨域资源共享，它使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain)上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域HTTP 请求。

3.2 JSONP

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);
    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

JSONP的缺点：

具有局限性，仅支持get方法
不安全，可能会遭受XSS攻击

3.3 postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数：

data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin：协议+主机+端口号，也可以设置为”*“，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/”。

3.4 Nginx代理

nginx代理跨域，服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也就不存在跨域问题。实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

3.5 node中间件代理

原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

3.6 document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

// 父页面
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>


// 子窗口
<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    console.log('get js data from parent ---> ' + window.parent.user);
</script>

3.7 location.hash + iframe跨域

a欲与b跨域相互通信，通过中间页c来实现。三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

3.8 window.name + iframe跨域

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

3.9 WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

4、正向代理和反向代理

正向代理：对真实服务器隐藏真实客户端，因为是客户的代理服务器向真实服务器发送的请求，真实服务器无法知道客户端

反向代理：对客户端隐藏真实服务器，客户端请求网址，后台通过负载均衡来匹配不同的服务器，对于客户端来说不知道是哪个服务器进行的响应。

5、浏览器缓存

浏览器缓存过程：

浏览器发送请求，服务端响应200，浏览器下载资源文件，并缓存文件与响应头
下次加载时，会先比较强缓存的过期时间例如：cache-control:max-age=1000，如果没有超时就命中强缓存，直接从本地读取
如果资源过期或强缓存失效之后就发送请求，浏览器在请求头中携带相应的缓存tag来向服务器发请求来决定是否使用缓存，这就是协商缓存。 ETag：文件唯一标识/指纹
Etag 值一致则没有修改，命中协商缓存，返回 304，如果不一致则直接返回新的资源文件带上新的Etag值并返回200
如果服务器收到的请求没有Etag值，则将 If-Modified-Since 和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回 304；不一致则返回新的 last-modified 和文件并返回 200。ps：服务器传一个时间戳给浏览器进行缓存，浏览器再次请求服务器的时候带着这个时间戳，字段为if-modified-since

这里经常会遇到的一个问题，项目发布新版本之后，打开网站看到的还是旧的内容，就是文件内容被浏览器进行缓存了，所以很多网站都在资源后面加了版本号，这样做的目的是：每次升级了 JS 或 CSS 文件后，为了防止浏览器进行缓存，强制改变版本号，客户端浏览器就会重新下载新的 JS 或 CSS 文件，以保证用户能够及时获得网站的最新更新。

使用浏览器缓存的优点：

减少了服务器的负担，提高了网站的性能
加快了客户端网页的加载速度
减少了多余的网络数据传输

点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别：

点击刷新按钮或者按 F5：浏览器直接对本地的缓存文件过期，但是会带上If-Modifed-Since，If-None-Match，这就意味着服务器会对文件检查新鲜度，返回结果可能是 304，也有可能是 200。
用户按 Ctrl+F5（强制刷新）：浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是 200。
地址栏回车：浏览器发起请求，按照正常流程，本地检查是否过期，然后服务器检查新鲜度，最后返回内容。

5.1 强缓存

使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。

强缓存策略可以通过两种方式来设置，分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。

服务器通过在响应头中添加 Expires 属性，来指定资源的过期时间。在过期时间以内，该资源可以被缓存使用，不必再向服务器发送请求。这个时间是一个绝对时间，它是服务器的时间，因此可能存在这样的问题，就是客户端的时间和服务器端的时间不一致，或者用户可以对客户端时间进行修改的情况，这样就可能会影响缓存命中的结果。
Expires 是 http1.0 中的方式，因为它的一些缺点，在 HTTP 1.1 中提出了一个新的头部属性就是 Cache-Control 属性，它提供了对资源的缓存的更精确的控制。
一般来说只需要设置其中一种方式就可以实现强缓存策略，当两种方式一起使用时，Cache-Control 的优先级要高于 Expires。

Cache-Control的值：

public：设置了该字段值的资源表示可以被任何对象（包括：发送请求的客户端、代理服务器等等）缓存。这个字段值不常用，一般还是使用max-age=来精确控制；
private：设置了该字段值的资源只能被用户浏览器缓存，不允许任何代理服务器缓存。在实际开发当中，对于一些含有用户信息的HTML，通常都要设置这个字段值，避免代理服务器(CDN)缓存；
no-cache：设置了该字段需要先和服务端确认返回的资源是否发生了变化，如果资源未发生变化，则直接使用缓存好的资源；
no-store：设置了该字段表示禁止任何缓存，每次都会向服务端发起新的请求，拉取最新的资源；
max-age=：设置缓存的最大有效期，单位为秒；
s-maxage=：优先级高于max-age=，仅适用于共享缓存(CDN)，优先级高于max-age或者Expires头；
max-stale[=]：设置了该字段表明客户端愿意接收已经过期的资源，但是不能超过给定的时间限制。

no-cache和no-store的区别

no-cache 是指先要和服务器确认是否有资源更新，在进行判断。也就是说没有强缓存，但是会有协商缓存；
no-store 是指不使用任何缓存，每次请求都直接从服务器获取资源。

5.2 协商缓存

强缓存过期了，如果设置了协商缓存就走协商缓存。

协商缓存的条件：

max-age=xxx 过期了
值为no-store

使用协商缓存策略时，会先向服务器发送一个请求，如果资源没有发生修改，则返回一个 304 状态，让浏览器使用本地的缓存副本。如果资源发生了修改，则返回修改后的资源。

协商缓存也可以通过两种方式来设置，分别是 http 头信息中的Etag 和Last-Modified属性。

这样的缓存tag分为两种: Last-Modified：最后修改时间 和 ETag：文件唯一标识/指纹。这两者各有优劣，并不存在谁对谁有绝对的优势，跟上面强缓存的两个 tag 不一样。

设置Last-Modified，服务器传一个时间戳给浏览器进行缓存，浏览器再次请求服务器的时候带着这个时间戳，字段为if-modified-since，服务器进行对比，如果没有改变，则返回304，去缓存里面寻找。

Last-modified不是很靠谱，主要有以下三种情况。

如果文件没有发生变化，但是进行操作了，比如修改后又恢复，这样修改时间就变了
一秒内改变多次，Last-modified是无法监控到秒内修改的.
CDN分发，可能时间是不一致的。

这种情况可以使用ETag来做缓存处理。

Etag 文件指纹必定用md5，所以使用crypto这个模块

import crypto from 'crypto';
let Etag = crypto.createHash('md5').update(fs.readFileSync(filePath)).digest('base64');
res.setHeader("Etag", Etag);
// 获取客户端请求携带的Etag指纹
let ifNoneMatch = req.headers['if-none-match'];
// 如果存在且相等，说明有缓存
if(ifNoneMatch && ifNoneMatch === Etag){
  return true;
}

6、浏览器缓存的位置

主要有以下几种：

页面缓存：浏览器的本地存储，主要由Cookie,WebStorage,IndexedDB,其中WebStorage又可以分为localStorage和sessionStorage。
memory cache：它的效率最快，但是内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。
disk cache：Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。
service worker：Service Worker 运行在 JavaScript 主线程之外，虽然由于脱离了浏览器窗体无法直接访问 DOM，但是它可以完成离线缓存、消息推送、网络代理等功能。

6.1 Service Worker

Service Worker 是一个浏览器中的进程而不是浏览器内核下的线程，因此它在被注册安装之后，能够被在多个页面中使用，也不会因为页面的关闭而被销毁。它可以完成离线缓存、消息推送、网络代理等功能。它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。因此，Service Worker 很适合被用与多个页面需要使用的复杂数据的计算——购买一次，全家“收益”。

但是不管是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示是从 Service Worker 中获取的内容。

Service Worker 只能被使用在 https 或者本地的 localhost 环境下。

如果当前使用的浏览器支持 Service Worker ，则在 window.navigator 下会存在 serviceWorker 对象，我们可以使用这个对象的 register 方法来注册一个 Service Worker。

Service Worker 在使用的过程中存在大量的 Promise ，Service Worker 的注册方法返回的也是一个 Promise 。

// index.js
if ('serviceWorker' in window.navigator) {
  navigator.serviceWorker.register('./sw.js', { scope: './' })
    .then(function (reg) {
      console.log('success', reg);
    })
    .catch(function (err) {
      console.log('fail', err);
    });
}

register 方法接受两个参数，第一个是 service worker 文件的路径，请注意：这个文件路径是相对于 Origin *，而不是当前 JS 文件的目录的；第二个参数是 Serivce Worker 的配置项，可选填，其中比较重要的是* scope 属性。按照文档上描述，它是 Service Worker 控制的内容的子目录，这个属性所表示的路径不能在 service worker 文件的路径之上，默认是 Serivce Worker 文件所在的目录

大概就这样，具体的操作可以看这篇文章https://juejin.cn/post/6844903613270081543

7、输入一个URL回车后发生了什么

详细的过程：

输入的过程中，浏览器会实时捕捉输入的内容，会检查有没有非法字符，有的话进行转义
检查缓存，检查缓存的过程
1. 如果是HTTPS的话，可能会优先检查Service Worker
2. 如果没有就找内存缓存Memory Cache
3. 没有接着找硬盘缓存Disk Cache，强缓存和协商缓存都属于硬盘缓存
4. 如果三种都没有找到并且是HTTP2的话，还可能会查找推送缓存Push Cache
进行URL解析：把协议、域名、端口、路径提取出来，根据解析出来的URL进行DNS解析
DNS解析：会先查找浏览器缓存，然后查找本地hosts文件，然后查找本地DNS解析器缓存，然后查找本地DNS服务器，如果还没有就去DNS根域名服务器查询，这样就可以拿到URL对应的IP地址了
TCP连接：有了IP就可以进行TCP连接了，进行三次握手，确认双方都有接受以及发送文件的能力
HTTPS的TLS握手：检查秘钥信息是否一致
建立连接之后，浏览器会把构建好的请求行、cookie等数据添加到请求头中，发送给服务器，服务器解析，如果没有就404，如果有就返回数据
服务端返回数据，前端准备进行读取解析
发送完成进行四次挥手，确认双方都已经发送完毕且没有其他问题了，就关闭链接。
前端开始看响应的数据内容，该怎么处理怎么处理，然后渲染DOM树、CSS树，对页面进行重绘重排直到重新渲染完成。

8、浏览器事件机制

事件是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型：

DOM0 级事件模型，这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数，也可以通过 js 属性来指定监听函数。所有浏览器都兼容这种方式。直接在dom对象上注册事件名称，就是DOM0写法。
IE 事件模型，在该事件模型中，一次事件共有两个过程，事件处理阶段和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过attachEvent 来添加监听函数，可以添加多个监听函数，会按顺序依次执行。
DOM2 级事件模型，在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型，事件绑定的函数是addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。

8.1 阻止事件冒泡

普通浏览器使用：event.stopPropagation()
IE浏览器使用：event.cancelBubble = true;

8.2 事件委托

事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件委托（事件代理）。

使用事件委托可以不必要为每一个子元素都绑定一个监听事件，这样减少了内存上的消耗。并且使用事件代理还可以实现事件的动态绑定，比如说新增了一个子节点，并不需要单独地为它添加一个监听事件，它绑定的事件会交给父元素中的监听函数来处理。

事件委托也是有局限的。比如 focus、blur 之类的事件没有事件冒泡机制，所以无法实现事件委托；mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的。

事件委托会影响页面性能，主要影响因素有：

元素中，绑定事件委托的次数；
点击的最底层元素，到绑定事件元素之间的DOM层数；

前端面试题之vue

Wed, 12 Jan 2022 00:00:00 +0800

vue面试常问知识点汇总

1、vue的原理

当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使用proxy ）将它们转为 getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

1.1 vue模板编译原理

vue中的模板template无法被浏览器解析并渲染，因为这不属于浏览器的标准，不是正确的HTML语法，所有需要将template转化成一个JavaScript函数，这样浏览器就可以执行这一个函数并渲染出对应的HTML元素，就可以让视图跑起来了，这一个转化的过程，就成为模板编译。模板编译又分三个阶段，解析parse，优化optimize，生成generate，最终生成可执行函数render。

解析阶段：使用大量的正则表达式对template字符串进行解析，将标签、指令、属性等转化为抽象语法树AST。
优化阶段：遍历AST，找到其中的一些静态节点并进行标记，方便在页面重渲染的时候进行diff比较时，直接跳过这一些静态节点，优化runtime的性能。
生成阶段：将最终的AST转化为render函数字符串。render返回的虚拟DOM。

2、双向绑定

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

数据劫持：

在vue2.x中使用Object.defineProperty()进行的数据劫持，缺点是对于数组而言，大部分操作是拦截不到的，只是vue在内部重写了数组的函数解决了这个问题，对于对象而言，新增一个对象是检测不到的
在vue3.x中使用了proxy进行数据劫持，解决了2.x拦截不到数组的问题，缺点是兼容性问题，因为proxy是ES6的标准

具体流程:

observer劫持，需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter，当这个对象赋值就可以监听到数据变化
1. 监听数据的变化：getter => 收集依赖 => setter => 触发依赖
2. 收集依赖到一个数组中，就是dep用来存储收集的依赖，收集依赖就是说当属性发送变化后通知谁
3. 然后在set触发时，循环把dep收集到的依赖触发
4. 依赖触发就通知到了watcher
compile解析，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个节点绑定一个订阅，当数据发送变动，就会收到通知，然后更新视图
watcher监听，它是observer和compile的通信桥梁，监听着dep订阅器，当observer监听到属性变化(setter)，通知给dep订阅器，dep就会通知watcher发生了变化，然后watcher去触发自己的update()方法告诉VDOM哪个变量发生改变，去重新走diff算法，diff算法会生成一颗新的DOM树，对比两棵树的不同，有不同的就替换，触发updateChildren()方法，去触发视图更新

vue 中对这个数组问题的解决方案：

先把原生 Array 的原型方法继承下来。
对继承后的对象使用 Object.defineProperty 做一些拦截操作。
把加工后可以被拦截的原型，赋值到需要被拦截的 Array 类型的数据的原型上。

;[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]

  Object.defineProperty(arrayMethods, method, {
    value: function mutator (...args) {
      console.log(method) // 打印数组方法
      return original.apply(this, args)
    },
    enumerable: false,
    writable: true,
    configurable: true
  })
})

2.1 v-model

v-model在vue2.x中是双向绑定的(一般用来收集用户输入的数据)，父子组件数据双向绑定，父组件修改了数据会影响子组件，反过来亦可从这个意义上，v-model能做的事也可以通过props或$emit来完成，在表单中v-model原理其实就是给input事件绑定oninput事件，触发就会立刻调用底层对象对应的setter方法改变data里的属性的值从而实现双向数据绑定

3、生命周期

beforeCreate(创建前)：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。
created(创建后)：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 $el 属性。
beforeMount(挂载前)：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。
mounted(挂载后)：在el被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html 页面中。此过程中进行ajax交互。
beforeUpdate(更新前)：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。
updated(更新后)：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestory(销毁前)：实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例。
destroyed(销毁后)：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。

数据请求操作一般created/beforeMount/mounted 皆可正常获取在 created 里面即可，而且服务端渲染只支持created；如果涉及到需要页面加载完成之后(DOM操作)的就用 mounted。

异步操作的话在created中操作更好：

能更快获取到服务端数据，减少页面加载时间，用户体验更好
SSR不支持 beforeMount 、mounted 钩子函数，放在 created 中有助于一致性。

另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数。

3.1 父子组件生命周期顺序

加载渲染过程：

父组件 beforeCreate
父组件 created
父组件 beforeMount
子组件 beforeCreate
子组件 created
子组件 beforeMound
子组件 mounted
父组件 mounted

更新过程：

父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated

4、常见的事件修饰符

.stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡
.prevent：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture：与事件冒泡的方向相反，事件捕获由外到内
.self：只会触发自己范围内的事件，不包含子元素
.once：只会触发一次
.sync：同步，它会被扩展为一个自动更新父组件属性的 v-on 监听器

5、vue和react的区别

相同处：

都将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库
都有自己的构建工具，能让你得到一个根据最佳实践设置的项目模板
都使用了VDOM，提供重绘性能
都有props的概念，允许组件间传递数据
都鼓励组件化应用

不同之处：

数据处理：Vue默认支持数据双向绑定，而React一直提倡单向数据流
虚拟DOM：Vue宣称可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。React会全部子组件重新渲染
组件化：Vue鼓励写近似常规HTML的模板。写起来很接近标准 HTML元素，只是多了一些属性。React推荐你所有的模板通用JavaScript的语法扩展——JSX书写。
监听数据的原理：vue使用getter/setter以及一些函数的劫持，React使用比较引用的方法，react这种可能会造成大量不必要的vdom的渲染

6、vue的优点

轻量级、易学
双向数据绑定
组件化
虚拟DOM节省了大量DOM操作
运行速度更快

7、template和jsx的有什么分别

template更加简单、直观、更好维护，但是不够灵活
jsx更灵活，复杂的组件里更有优势

8、computed和watch的区别

对于computed：

支持缓存，只有依赖的数据发生了变化，才会重新计算
不支持异步，当computed中有异步操作时，无法监听数据的变化
computed默认走缓存，计算属性是基于他们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递的props中的数据进行计算的
如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，那么一般都会使用computed
如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性，属性变化时，会调用set方法

对于watch：

它不支持缓存，数据变化就会触发相应的操作
支持异步监听
监听的函数接受两个参数，第一个参数是最新的值，第二个是变化之前的值
当一个属性发送变化时，就需要执行相应的操作
监听的数据必须是data中声明的或者父组件传递过来的props中的数据
当需要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch、

总结：

computed：依赖其他属性值，并且computed的值有缓存，只有它依赖的属性发生改变，下一次computed获取的值才会重新计算
watch：更多是观察的作品，无缓存，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作

9、组件通信

父组件通过props向子组件传递数据，子组件通过$emit和父组件通信

父级=》子级

<template>
    <div id="father">
        <son :msg="msgData" :fn="myFunction"></son>
    </div>
</template>

// 子级
<template>
    <div id="son">
        <p></p>
        <button @click="fn">按钮</button>
    </div>
</template>
<script>
export default {
    name: "son",
    props: ["msg", "fn"]
};

子级=》父级

// 父级
methods: {
  onEmitIndex(idx) {
    this.currentIndex = idx
  }
}


// 子级
 methods: {
   emitIndex(index) {
     this.$emit('onEmitIndex', index) // 触发父组件的方法，并传递参数index
   }
 }

9.1 父子组件通信

props&emit：子组件通过props属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过$emit触发事件来向父组件发送数据
ref：通过ref属性给子组件设置一个名字，父组件通过$refs组件名来获得子组件，子组件通过$parent获得父组件，这样也可以实现通信
provide/inject：在父组件中通过provide提供变量，在子组件中通过inject来讲变量注入到组件中，不论子组件有多深，只要调用了inject那么就可以注入provide中的数据

子组件不能直接修改父组件，需要父组件定义一个监听的自定义事件，子组件进行$emit来触发，父组件监听到后，由父组件修改

9.2 兄弟组件通信

eventBus
通过$parent/$refs获取到兄弟组件也可以进行通信

9.3 任意组件通信

使用eventBus

10、eventBus事件总线

eventBus事件总线适用于父子组件、非父子组件等之间的通信

import Vue from 'vue'
export const EventBus = new Vue()


methods:{
  add(){
    EventBus.$emit('addition', {
      num:this.num++
    })
  }
}


mounted() {
  EventBus.$on('addition', param => {
    this.count = this.count + param.num;
  })
}

11、vue路由懒加载

方案一：使用箭头函数+import动态加载

const List = () => import('@/components/list.vue')
const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
})

方案二：使用箭头函数+require动态加载

const router = new Router({
  routes: [
   {
     path: '/list',
     component: resolve => require(['@/components/list'], resolve)
   }
  ]
})

方案三：使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

// r就是resolve
const List = r => require.ensure([], () => r(require('@/components/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
  routes: [
  {
    path: '/list',
    component: List,
    name: 'list'
  }
 ]
}))

12、route 和router 的区别

$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数
$router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。

13、router路由钩子

vue-router全局有三个路由钩子：

router.beforeEach 全局前置守卫进入路由之前
router.beforeResolve 全局解析守卫（2.5.0+）在 beforeRouteEnter 调用之后调用
router.afterEach 全局后置钩子进入路由之后

另外如果不想配置全局路由钩子，给单独某个路由配置的话可以使用beforeEnter，有三个参数∶ to、from、next

export default [    
    {        
        path: '/',        
        name: 'login',        
        component: login,        
        beforeEnter: (to, from, next) => {          
            console.log('即将进入登录页面')          
            next()        
        }    
    }
]

组件内也有相应的钩子函数：

beforeRouteEnter∶ 进入组件前触发
beforeRouteUpdate∶ 当前地址改变并且该组件被复用时触发，举例来说，带有动态参数的路径foo/∶id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的foa组件，这个钩子在这种情况下就会被调用
beforeRouteLeave∶ 离开组件被调用

另外beforeRouteEnter组件内还访问不到this，因为该守卫执行前组件实例还没有被创建，需要传一个回调给 next来访问

beforeRouteEnter(to, from, next) {      
    next(target => {        
        if (from.path == '/classProcess') {          
            target.isFromProcess = true        
        }      
    })    
}

13.1 Vue路由钩子在生命周期函数的体现

完整的路由导航解析流程（不包括其他生命周期）

触发进入其他路由。
调用要离开路由的组件守卫beforeRouteLeave
调用全局前置守卫∶ beforeEach
在重用的组件里调用 beforeRouteUpdate
调用路由独享守卫 beforeEnter。
解析异步路由组件。
在将要进入的路由组件中调用 beforeRouteEnter
调用全局解析守卫 beforeResolve
导航被确认。
调用全局后置钩子的 afterEach 钩子。
触发DOM更新（mounted）。
执行beforeRouteEnter 守卫中传给 next 的回调函数

13.2 Vue-router 导航守卫有哪些

全局前置/钩子：beforeEach、beforeResolve、afterEach
路由独享的守卫：beforeEnter
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

14、Redux 和 Vuex 有什么区别

Vuex改进了Redux中的Action和Reducer函数，以mutations变化函数取代Reducer，无需switch，只需在对应的mutation函数里改变state值即可
Vuex由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可
Vuex数据流的顺序是∶View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变（vue检测到数据变化自动渲染）

15、Vuex

Vuex 是一个专为Vue.js开发的状态管理工具，每一个Vuex的核心就是store，包含着应用中大部分的状态state

vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若状态发生变化，那么组件内也会相应的改变
改变store中的state的唯一途径就是显示的提交(commit)mutation

执行顺序：

在vue的组件中触发dispatch一些事件或动作actions
然后在actions中去commit提交一个mutation，因为vuex中，数据的修改只能通过mutations去修改
在mutation中去改变state的数据
当state的数据被修改之后，会重新渲染到vue的组件中，触发组件的更新

15.1 vuex有哪几种属性？

state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步，如果需要异步触发就需要异步提交action然后由action commit一个mutation去触发更新
actions => 像一个装饰器，包裹mutations，使之可以异步。actions只能由dispatch触发
modules => 模块化Vuex

15.2 action和mutation的区别

mutation中的操作是一系列的同步函数，用于修改state中变量的状态，当使用vuex时需要通过commit来提交需要操作的内容。每个mutation都有一个事件类型和一个回调函数，该回调函数会接受state作为第一个参数

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++      // 变更状态
    }
  }
})

触发

store.commit('increment')

action类似于mutation，不同的是action可以包含任意异步操作，action提交的是mutation，而不是直接改变state的状态

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

15.3 为什么mutation不能异步

每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

16、Vue3.0有什么更新

监测机制的改变：3.0 将带来基于代理 Proxy的 observer 实现消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制，如对数组的索引和长度修改不能检测到、添加或删除对象的属性时，Vue 检测不到。
支持 Map、Set、WeakMap 和 WeakSet，检测属性的添加和删除
作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。
对象式的声明方式：vue2.x 中的组件是通过声明的方式传入一系列 option，和 TypeScript 的结合需要通过一些装饰器的方式来做，虽然能实现功能，但是比较麻烦。3.0 修改了组件的声明方式，改成了类式的写法，这样使得和 TypeScript 的结合变得很容易
基于 tree shaking 优化，提供了更多的内置功能。

17、虚拟DOM

虚拟DOM是一个JavaScript对象，通过对象的方式来表示DOM结构。

虚拟DOM的解析过程：

首先对将要插入到文档中的 DOM 树结构进行分析，使用 js 对象(AST语法树)将其表示出来，比如一个元素对象，包含 TagName、props 和 Children 这些属性。然后将这个 js 对象树(AST语法树)给保存下来，最后再将 DOM 片段插入到文档中。
当页面的状态发生改变，需要对页面的 DOM 的结构进行调整的时候，首先根据变更的状态，重新构建起一棵对象树，然后将这棵新的对象树和旧的对象树进行比较，记录下两棵树的的差异。DIFF算法
最后将记录的有差异的地方应用到真正的 DOM 树中去，这样视图就更新了。

17.1 DIFF算法的原理

首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换
如果为相同节点，进行patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
比较如果都有子节点，则进行updateChildren，判断如何对这些新老节点的子节点进行操作（diff核心）。
匹配时，找到相同的子节点，递归比较子节点

18、$nextTick原理及作用

原理就是JavaScript的eventloop的一种应用

核心利用了Promise来模拟微任务

nextTick 不仅是 Vue 内部的异步队列的调用方法，同时也允许开发者在实际项目中使用这个方法来满足实际应用中对 DOM 更新数据时机的后续逻辑处理

nextTick()内部会有一些兼容性判断if (typeof Promise !== 'undefined' && isNative(Promise))判断是否支持promise，不支持就使用降级的方案，依次是：setImmediate、MessageChannel、setTimeout.

使用：

当数据变化后执行某个操作，而这个操作需要使用随数据变化而变化的DOM结构的时候，需要把方法写在nextTick()的回调中
nextTick是Vue提供的一个全局API由于vue的异步更新策略导致我们对数据的修改不会立刻体现在dom变化上，此时如果想要立即获取更新后的dom状态，就需要使用这个方法
在vue生命周期中，如果需要在created()钩子里进行DOM操作，也需要放在nextTick()的回调函数里，
Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的dom操作完成后才调用。

19、自定义指令

全局定义：Vue.directive("focus",{})
局部定义：directives:{focus:{}}

前端面试题之js

Mon, 10 Jan 2022 00:00:00 +0800

js面试常问知识点汇总

1、js中的数据类型

js种的数据类型分为：基础数据类型和复杂数据类型(对象类型/引用类型)

基础数据类型是存放在栈中，对象类型存放在堆中。

基础数据类型：

在ES3时代：
- 有5种基础数据类型：undefined、null、Boolean、number、string
- 一种对象类型：object；array、function都是对象类型
在ES6时代：基础数据类型新增了两种 symbol和bigint
- symbol：代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
- BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。

2、数据类型检测

2.1 typeof

console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object    
console.log(typeof function(){});    // function
console.log(typeof {});              // object
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object

其中数组、对象、null都会被判断为object，其他判断都正确。

其中null判断为object是js遗留的问题，判断null的话可以null == null

2.2 instanceof

instanceof只能判断引用类型，而不能判断基础类型，因为内部运行机制是顺着原型链查找该对象的原型

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false 
 
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

2.3 constructor

constructor有两个作用，一是判断数据的类型，二是对象实例通过 constrcutor 对象访问它的构造函数。需要注意，如果创建一个对象来改变它的原型，constructor就不能用来判断数据类型了

console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true

3、箭头函数与普通函数的区别

箭头函数没有自己的this
箭头函数继承的this指向不可变，call()\bind()\apply()也不能改变
箭头函数不能作为构造函数使用
箭头函数没有arguments
箭头函数没有prototype
箭头函数不能用作generator函数，不能使用yeild关键字

4、proxy可以实现什么功能

proxy：Proxy(target, handler)

target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler: 一个对象，其属性是当执行一个操作时定义代理的行为的函数(可以理解为某种触发器)。可以进行get和set

在 Vue3.0 中通过 Proxy+Reflect 来替换原本的 Object.defineProperty 来实现数据响应式。

vue3响应原理代码：https://catsaid.cn/2020/04/20/vue3Proxy/

5、new

new的执行过程：

创建一个新的空对象
设置原型，将对象的原型设置为函数的prototype对象
让函数的this指向这个对象，执行构造函数代码
判断函数的返回值类型，如果是值类型，就返回创建的对象，如果是引用类型，就返回引用类型的对象

function createObject(n, ...args){
  let obj = {}
  Object.setPrototypeOf(obj, n.prototype)
  let result = n.apply(obj, args)
  return result instanceof Object ? result : obj;
}

6、原型、原型链

在JavaScript中是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性，它的属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说不应该能够获取到这个值的，但是现在浏览器中都实现了 proto 属性来访问这个属性，但是最好不要使用这个属性，因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法，可以通过这个方法来获取对象的原型。

当访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是新建的对象为什么能够使用 toString() 等方法的原因。

因为原型链的存在，而JavaScript 对象是通过引用来传递的，创建的每个新对象实体中并没有一份属于自己的原型副本。当修改原型时，与之相关的对象也会继承这一改变。

原型修改：

function Funa(){
  // ...
}

Funa.prototype.getName = function(){
  return 'a'
}

let fun = new Funa()
console.log(fun.getName())  // a

原型的作用就是用于继承。

7、闭包

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。

闭包的作用：

闭包的第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包，可以通过在外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量。
闭包的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。

function A() {
  let a = 1
  window.B = function () {
      console.log(a)
  }
}
A()
B() // 1

函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包。

经典面试题：循环中使用闭包解决 var 定义函数的问题

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
}

// 解决方案一：使用闭包
for (var i = 1; i <= 5; i++) {  
  ;(function(j) {    
    setTimeout(function timer() {      
      console.log(j)    
    }, j * 1000)  
  })(i)
}
// 其他方案：使用setTimeout的第三个参数或使用let

8、作用域、作用域链

全局作用域：
1. 最外层函数和最外层函数外面定义的变量拥有全局作用域
2. 所有未定义直接赋值的变量自动声明为全局作用域
3. 所有window对象的属性拥有全局作用域
函数作用域：
1. 函数作用域声明在函数内部的变零，一般只有固定的代码片段可以访问到
2. 作用域是分层的，内层作用域可以访问外层作用域，反之不行
块级作用域：
1. 使用ES6中新增的let和const指令可以声明块级作用域，块级作用域可以在函数中创建也可以在一个代码块中的创建（由{ }包裹的代码片段）
2. 在循环中比较适合绑定块级作用域，这样就可以把声明的计数器变量限制在循环内部。

作用域链：在当前作用域中查找所需变量，但是该作用域没有这个变量，那这个变量就是自由变量。如果在自己作用域找不到该变量就去父级作用域查找，依次向上级作用域查找，直到访问到window对象就被终止，这一层层的关系就是作用域链。

作用域链的作用：保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，可以访问到外层环境的变量和函数。

9、this

this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this 的指向可以通过四种调用模式来判断。

函数调用：当一个函数不是一个对象的属性时，直接作为函数来调用时，this 指向全局对象。
方法调用：如果一个函数作为一个对象的方法来调用时，this 指向这个对象。
构造器调用：如果一个函数用 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象。
apply、call、bind调用：这三个方法都可以改变this的指向，改变到哪里this值的就是谁

这四种方式，使用构造器调用模式的优先级最高，然后是 apply、call 和 bind 调用模式，然后是方法调用模式，然后是函数调用模式。

10、call、apply、bind

call和apply的区别他们的作用都一样，区别是传入参数的形式不同

apply(obj,args)：第一个参数是函数体的this的指向，第二个参数是一个带下标的集合，会传入函数体内，可以是数组或类数组，返回结果
call(obj, arg1, arg2…..)：第一个参数是函数体的this的指向，后续参数会依次传入函数体内，返回结果
bind(obj, arg1, arg2…)：第一个参数是函数体的this指向，后续参数会依次传入函数体内，返回的是一个函数

10.1 实现call()

实现步骤：

判断调用对象是否为函数
判断传入上下文对象是否存在，如果不存在则设置为window
处理参数，截取第一个参数后的所有参数
将函数作为上下文对象的一个属性
使用上下文对象来调用这个方法，并保存返回结果
删除刚才新增的属性
返回结果

实现代码：

let obj = {
  name: 'a',
  fun: function(){
    console.log('a')
    return this.name
  }
}

let obj2 = {
  name: 'b',
  fun: function(){
    console.log('b')
    return this.name
  }
}

Function.prototype.myCall = function(context) {
  // 判断调用对象
  if (typeof this !== "function") {
    console.error("type error");
  }
  // 获取参数
  let args = [...arguments].slice(1),
      result = null;
  // 判断 context 是否传入，如果未传入则设置为 window
  // context = obj2
  context = context || window;
  console.log(context)
  // 将调用函数设为对象的方法
  // obj2.fn = obj.fun
  context.fn = this;
  console.log(context.fn.toString())
  // 调用函数
  // 这个时候obj的函数的this指向的是obj2了
  result = context.fn(...args);
  // 将属性删除
  delete context.fn;
  return result;
};

console.log(obj.fun.myCall(obj2) ,'2222')// b

/*
{ name: 'b', fun: [Function: fun] }
function(){
        console.log('a')
      return this.name
    }
a
b 2222
*/

10.2 实现apply()

和call()差不多的逻辑

判断是否为函数
判断传入的上下文对象是否存在，不存在就设置为window
将函数作为上下文对象的一个属性
判断参数是否传入
使用上下文对象来调用这个方法，并保存结果
删除刚才新增的属性
返回结果

let obj = {
    name: 'a',
    fun: function(c,d){
      return this.name + ',' +c + ','+d
    }
  }
  
  let obj2 = {
    name: 'b',
    fun: function(c,d){
      return this.name + ',' +c + ','+d
    }
  }


Function.prototype.myApply = function(context){
  if(typeof this !=='function'){
    console.log('type error')
  }
  let result = null;
  context = context || window;
  context.fn = this;
  if (arguments[1]) {
    result = context.fn(...arguments[1]);
  } else {
    result = context.fn();
  }
  // 将属性删除
  delete context.fn;
  return result;
}

console.log(obj.fun.myApply(obj2,[2,3]))

/*
b,2,3
*/

10.3 实现bind()

步骤：

判断调用对象是否为函数
保存当前函数的引用，获取其余参数值
创建一个函数返回
函数内部使用apply来绑定函数调用，需要判断函数作为构造函数的情况，这个时候要传入当前函数的this给apply调用，其他情况都传入指定的上下文对象

let obj = {
  name: 'a',
  fun: function(){
    console.log([...arguments])
    return this.name
  }
}

let obj2 = {
  name: 'b',
  fun: function(){
    return this.name
  }
}


Function.prototype.myBind = function(context) {
  if (typeof this !== "function") {
    throw new TypeError("Error");
  }
  var args = [...arguments].slice(1),
    fn = this;
  return function Fn() {
    return fn.apply(
      this instanceof Fn ? this : context,
      args.concat(...arguments)
    );
  };
};

f = obj.fun.myBind(obj2,2,3,4,5,6,7)
console.log(f()) 
/*
[ 2, 3, 4, 5, 6, 7 ]
b
*/ 

11、异步编程

JavaScript中异步执行有以下几种方法：

回调
promise
generator
async+await

12、promise

Promise是异步编程的一种解决方案，它是一个对象，可以获取异步操作的消息，他的出现大大改善了异步编程的困境，避免了地狱回调，它比传统的解决方案回调函数和事件更合理和更强大。

Promise本身是同步的立即执行函数，当在执行resolve或者reject的时候, 此时是异步操作，会先执行then/catch等，当主栈完成后，才会去调用resolve/reject中存放的方法执行。

promise有三种状态：

进行中
已完成
已拒绝

当把一件事情交给promise时，它的状态就是Pending，任务完成了状态就变成了Resolved、没有完成失败了就变成了Rejected。一旦从进行状态变成为其他状态就永远不能更改状态了。

promise的缺点：

无法取消，一旦新建它就会立即执行，无法中途取消
如果不设置回调，promise就会抛出错误，不会反应到外部
当处于pending状态时，无法得知目前进展到哪个阶段(刚刚开始还是即将结束)

基本用法：

const promise = new Peomise(function(resolve, reject){
  if(true){
    resolve()
  }else{
    reject()
  }
})
promise.then((res)=>console.log(res))

// 或直接使用Promise.resolve(value)
Promise.resolve(11).then(function(value){
  console.log(value); // 打印出11
});

// Promise.reject()也可以直接使用
Promise.reject(new Error(“error”));

12.1 promise的方法

有五个常用方法：

then()：当Promise执行的内容符合成功条件时，调用resolve函数，失败就调用reject函数。方法返回的是一个新的Promise实例（不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
catch()：Promise对象除了有then方法，还有一个catch方法，该方法相当于then方法的第二个参数，指向reject的回调函数。不过catch方法还有一个作用，就是在执行resolve回调函数时，如果出现错误，抛出异常，不会停止运行，而是进入catch方法中。

All()：方法可以完成并行任务，它接收一个数组，数组的每一项都是一个promise对象。当数组中所有的promise的状态都达到resolved的时候，all方法的状态就会变成resolved，如果有一个状态变成了rejected，那么all方法的状态就会变成rejected。

let promise1 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(1);
	},2000)
});
let promise2 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(2);
	},1000)
});
let promise3 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(3);
	},3000)
});
Promise.all([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //结果为：[1,2,3] 
})

rece()：方法和all一样，接受的参数是一个每项都是promise的数组，但是与all不同的是，当最先执行完的事件执行完之后，就直接返回该promise对象的值。如果第一个promise对象状态变成resolved，那自身的状态变成了resolved；反之第一个promise变成rejected，那自身状态就会变成rejected。

let promise1 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       reject(1);
	},2000)
});
let promise2 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(2);
	},1000)
});
let promise3 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(3);
	},3000)
});
Promise.race([promise1,promise2,promise3]).then(res=>{
	console.log(res);
	//结果：2
},rej=>{
    console.log(rej)};
)

Finally()：方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

12.2 all()和race()的区别

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

需要注意的是promise.all()在传入多个promise对象之后执行顺序是不固定的，但是返回的数据和传入的数据是对应的。

Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。当要做一件事，超过多长时间就不做了，可以用这个方法来解决：

13、async/await

async/await其实是Generator 的语法糖，它能实现的效果都能用then链来实现，它是为优化then链而开发出来的。从字面上来看，async是“异步”的简写，await则为等待，所以很好理解async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。当然语法上强制规定await只能出现在asnyc函数中

async 函数返回的是一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

async function test(){
  //...
  return x;
}
let a = await test()

// 如果不能使用await可以继续使用.then()
let a = test()
a.then(res=>console.log(res))

await是等待的意思，语法要求需要在async函数内使用，但是await不一定需要非得等待promise结果，可以是ajax或其他函数的结果

假设有一个业务，有多个步骤，每个步骤都依靠前一个步骤的结果来完成，那么就需要使用await来把并行改成串行

异常捕获：

async function test(){
  try{
    // ...
  }
  catch(){
    // ...
  }
}

14、eventloop 事件环

事件环就是代码的执行顺序，JS进程中主线程执行完毕后会走异步代码，因为JS是单线程，所以进程中只有一条线程，js的异步事件会再次开辟一条线程不会马上执行( 不是主线程 )，叫做任务队列，任务队列有宏任务与微任务之分。

14.1 宏任务

宏任务每次取一个，微任务每次取一组。

等主线程全部执行完毕，清空微任务队列之后，会取出宏任务队列里的第一个宏任务放到主线程里面执行，如果执行过程中遇到微任务会把他添加到微任务队列，执行完当前宏任务后立即执行微任务队列的任务，然后再去宏任务队列里取下一个宏任务。执行过程中遇到宏任务会放到宏任务队列的最后一个位置等待执行。

js的宏任务：script、Ajax、事件、requestFrameAnimation、定时器。
node的宏任务：I/O 视图渲染。

14.2 微任务

微任务会比宏任务快，但是script例外，因为js是script脚本，所以会先执行script。

微任务：promise.then(promise的参数函数是立即执行的)、 MutationObserver、process.nextTick

15、面向对象

面向对象有三大特性，封装、继承和多态。对于ES5来说，没有class的概念，并且由于js的函数级作用域（在函数内部的变量在函数外访问不到），所以我们就可以模拟 class的概念，在es5中，类其实就是保存了一个函数的变量，这个函数有自己的属性和方法。

封装：将属性和方法组成一个类的过程就是封装。
继承：js继承是通过原型链进行继承的
多态：js函数是无态的，js不支持多态

15.1 封装

说一下对象的几种常见创建方式：

字面量形式直接创建let obj = {}
工厂模式：工厂模式的主要工作原理是用函数来封装创建对象的细节，从而通过调用函数来达到复用的目的。但是它有一个很大的问题就是创建出来的对象无法和某个类型联系起来，它只是简单的封装了复用代码，而没有建立起对象和类型间的关系。
```
function createPerson(name,age){
  let o = new Object();
  o.name = name;
  o.age = age;
  o.sayName = function(){
    return this.name
  }
  return o;
}
let p1 = CreatePerson('a',20)
```
在使用工厂模式创建对象的时候，我们都可以注意到，在createPerson函数中，返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。所以就出现了构造函数创建对象方法
构造函数创建对象：js 中每一个函数都可以作为构造函数，只要一个函数是通过 new 来调用的，那么就可以把它称为构造函数。
执行构造函数首先会创建一个对象，然后将对象的原型指向构造函数的 prototype 属性，然后将执行上下文中的 this 指向这个对象，最后再执行整个函数，如果返回值不是对象，则返回新建的对象。因为 this 的值指向了新建的对象，因此可以使用 this 给对象赋值。构造函数模式相对于工厂模式的优点是，所创建的对象和构造函数建立起了联系，因此可以通过原型来识别对象的类型。但是构造函数存在一个缺点就是，造成了不必要的函数对象的创建，因为在 js 中函数也是一个对象，因此如果对象属性中如果包含函数的话，那么每次都会新建一个函数对象，浪费了不必要的内存空间，因为函数是所有的实例都可以通用的。
```
function Person(name, age){
  this.name = name;
  this.age = age;
  this.sayName = function(){
    console.log(this.name)
  }
}
let p1 = new Person('a', 20);
p1.sayName() // a
   
/*
对比工厂模式，构造函数有很明显的优点
1. 没有明显的创建对象，而是挂到了this上
2. 没有return
3. 可以检测对象的类型 p1 instanceof Person
   
缺点就是sayName()方法会在每个实例上都创建
*/
```
原型模式：原型模式就是把函数体内的this挂载，改为挂到函数的原型上面prototype，这样创建的实例都可以共享它包含的属性和方法
```
function Person(){}
Person.prototype={
  name: 'a',
  age: 20,
  sayName: function(){
    console.log(this.name)
  }
}
var p1 = new Person();
p1.sayName();
```
这样就会有新的问题，一个是没有办法通过传入参数来初始化值，另一个是如果存在一个引用类型如 Array 这样的值，那么所有的实例将共享一个对象，一个实例对引用类型值的改变会影响所有的实例。

组合使用构造函数模式和原型模式：属性都是在构造函数中定义的，通过原型对象来实现函数方法的复用，但是这种对代码的封装性不太好。

function Person(name, age){
  this.name = name;
  this.age = age;
}
   
Person.prototype={
  constructor:Person,
  sayName: function(){
    console.log(this.name)
  }
}

每种创建的方法都有自己的优势和缺点，选择最适合的方法创建即可。

15.2 继承

在js中继承就是通过原型链进行模拟实现继承的，几种常见的继承的方法如下：

类式继承：就是子类的原型是父类的实例化对象。

function Super(){}
function Son(){}
Son.prototype = new Super()
   
/*
优点：子类实例化对象的属性和方法都指向父类的原型
缺点：子类之间可能会互相影响
*/

构造函数继承：构造函数继承就是在子类函数体内进行call()

function Super(){}
function Son(){
  Super.call(this)
}
/*
优点：每个实例化的子类互不影响
缺点：内存浪费
*/

组合式继承：组合式继承就是汲取两者的优点，即避免了内存浪费，又使得每个实例化的子类互不影响。

function Super(){}
function Son(){
  Super.call(this)
}
Son.prototype = new Super();
let s1 = new Son();
/*
缺点：父类的构造函数会被创建两次 Super.call(this) 、Son.prototype = new Super();
*/

寄生组合继承：在组合继承中，父类会被创建两次，规避这个问题就可以了，所以说我们先给父类的原型创建一个副本，然后修改子类constructor属性，最后在设置子类的原型就可以了~

//原型式继承
//原型式继承其实就是类式继承的封装,实现的功能是返回一个实例，改实例的原型继承了传入的o对象
function inheritObject(o) {
  //声明一个过渡函数对象
  function F() {}
  //过渡对象的原型继承父对象
  F.prototype = o;
  //返回一个过渡对象的实例，该实例的原型继承了父对象
  return new F();
}
//寄生式继承
//寄生式继承就是对原型继承的第二次封装，使得子类的原型等于父类的原型。并且在第二次封装的过程中对继承的对象进行了扩展
function inheritPrototype(subClass, superClass){
  //复制一份父类的原型保存在变量中，使得p的原型等于父类的原型
  var p = inheritObject(superClass.prototype);
  //修正因为重写子类原型导致子类constructor属性被修改
  p.constructor = subClass;
  //设置子类的原型
  subClass.prototype = p;
}
//定义父类
var SuperClass = function (name) {
  this.name = name;
  this.books = ['javascript','html','css']
};
//定义父类原型方法
SuperClass.prototype.getBooks = function () {
  console.log(this.books)
};
   
//定义子类
var SubClass = function (name) {
  SuperClass.call(this,name)
}
   
inheritPrototype(SubClass,SuperClass);
   
var subclass1 = new SubClass('php')

16、深浅拷贝

浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

拷贝完善的一篇可以参考https://segmentfault.com/a/1190000016672263

16.1 浅拷贝实现

Object.assign()：可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。
```
let obj1 = {a:1}
let obj2 = {b:2}
let obj3 = Object.assign({},obj1, obj2)
console.log(obj3) // {a: 1, b: 2}
```

展开运算符...

let obj = {a:1, b:2}
let obj1= {...obj}

Array.prototype.concat()：用于合并两个或者多个数组。

const arr1 = [
  1,
  {
    user: 'a'
  }
];
let arr2 = arr1.concat();
arr2[0] = 2;
arr2[1].user = 'b';
console.log(arr1); // [ 1, { user: 'b' } ]
console.log(arr2); // [ 2, { user: 'b' } ]

Array.prototype.slice()：数组的一个内置方法，该方法会返回一个新的对象，不改变原数组

const arr1 = [
  1,
  {
    user: 'a'
  }
];
let arr2 = arr1.slice();
arr2[0] = 2;
arr2[1].user = 'b';
console.log(arr1); // [ 1, { user: 'b' } ]
console.log(arr2); // [ 2, { user: 'b' } ]

手写：就是一个for循环，然后进行遍历赋值

const shallowClone = (obj) => {
  const dst = [];
  for (let prop in obj) {
    if (obj.hasOwnProperty(prop)) {
        dst[prop] = obj[prop];
    }
  }
  return dst;
}

16.2 深拷贝

其实深拷贝可以拆分成 2 步，浅拷贝 + 递归，浅拷贝时判断属性值是否是对象，如果是对象就进行递归操作，两个一结合就实现了深拷贝。用上面的浅拷贝修改一下：

const deepClone = (obj) => {
  var dst = Array.isArray(obj) ? [] : {};
  if(!obj){
    return obj;
  }
  for (let prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      if(typeof obj[prop] === 'object' && obj[prop]){
        dst[prop] = deepClone(obj[prop])
      }
        dst[prop] = obj[prop];
    }
  }
  return dst;
}

这就实现了一个简单的深拷贝，另外还可以使用JSON进行深拷贝

JSON.parse(JSON.stringify(object))

这样会有一些其他的问题：

会忽略undefined
会忽略symbol
不能处理正则
不能处理new Date()
不能解决循环引用的对象
不能序列化函数

17、防抖节流

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

防抖实现：

let timer = null;
function btnClick(){
  clearTimeout(timer)
  timer = setTimeout(()=>{
    // 一些操作
  },1000)
}

/*
原理就是，每次触发事件都把之前的定时任务清除，然后重新开一个任务
*/

节流实现：

let timer = null;
function btnClick(){
  if(!timer){
    timer = setTimeout(()=>{
      // 一些操作
      timer = null;
    },1000)
  }
}
/*
原理就是当timer存在的时候，不给触发操作，执行完了把timer清空就可以重新触发了
*/

18、高阶函数

高阶函数很简单，满足以下任意一个条件的都是高阶函数

接受一个或多个函数作为输入
输出一个函数

接收一个函数的例子如：Array.prototype.map()方法接受一个回调，接受回调的都是高阶函数，因为这是一个函数

返回一个函数的例子：

function add(a) {
    function sum(b) { // 使用闭包
    	a = a + b; // 累加
    	return sum;
    }
    sum.toString = function() { // 重写toString()方法
        return a;
    }
    return sum; // 返回一个函数
}

add(1); // 1
add(1)(2);  // 3
add(1)(2)(3)； // 6
add(1)(2)(3)(4)； // 10 

每次调用都是返回了一个函数sum()

18.1 柯里化

柯里化是把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接受余下的参数且返回结果的新函数的技术。如bind()就是一个柯里化函数，bind在内部处理了第一个参数，然后交给了apply()执行，把其余参数都给apply()传过去了。

a.bind(b,1,2,3,4)
/*
bind() 方法会创建一个新函数，当这个新函数被调用时，它的 this 值是传递给 bind() 的第一个参数，传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。bind返回的绑定函数也能使用 new 操作符创建对象：这种行为就像把原函数当成构造器，提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。
*/

作用：

延迟计算
动态创建函数
参数复用

18.2 反柯里化

如果说柯里化的过程是将函数拆分成功能更具体化的函数，那反柯里化的作用则在于扩大函数的适用性，使本来作为特定对象所拥有的功能函数可以被任意对象所使用。

// 构造函数 F
function F() {}

// 拼接属性值的方法
F.prototype.concatProps = function () {
    let args = Array.from(arguments);
    return args.reduce((prev, next) => `${this[prev]}&${this[next]}`);
}

// 使用 concatProps 的对象
let obj = {
    name: "Panda",
    age: 16
};

// 使用反柯里化进行转化
let concatProps = uncurring(F.prototype.concatProps);

concatProps(obj, "name", "age"); // Panda&16

前端面试题之CSS

Sun, 09 Jan 2022 00:00:00 +0800

CSS面试常问知识点汇总

1、盒模型

CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型，这两种盒模型的主要区别是高度和宽度的计算不同

标准盒模型：盒模型 = content高度 + padding + border + margin；宽度同样
IE盒模型：盒模型 = 高度（高度 = 盒子实际高度content + padding + border） + margin；宽度同样

可以通过修改元素的box-sizing属性来改变元素的盒模型：

box-sizing: content-box表示标准盒模型（默认值）
box-sizing: border-box表示IE盒模型（怪异盒模型）

2、选择器优先级

优先级从前往后排序为：

!important声明的样式的优先级最高
内联样式：1000
id 选择器：100
类选择器、伪类选择器、属性选择器：10
标签选择器、伪元素选择器：1

优先级的规则：

如果优先级相同，则最后出现的样式生效
继承得到的样式的优先级最低
优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

3、line-height和height

先说height，是一个固定值，代表了当前盒子的固定高度。

line-height的理解：

是一行文本的高，包含了字间距，实际是下一行基线到上一行基线的距离
如果一个标签没有定义height属性，那么高度由line-height决定
一个容器如果没有设置高度，那么容器的高度是line-height而不是文本内容
line-height定义的高度是一行的高度，如果文字有多行，盒子的高度会增大
line-height和height一样大小的值可以实现单行文字垂直居中

4、CSS属性继承

可继承的有：

字体属性：如字体类型、粗细、大小
文本属性：如行高、文本缩进、颜色、字间距
元素的可见性：visibility
列表布局属性：list-style
光标属性

不可继承的有：

display
文本的一些处理的属性：
1. text-shadow：阴影效果
2. white-space：空白符的处理
3. vertical-align：垂直文本对齐
盒模型的属性都不行：width、height、margin、border、padding
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
生产内容属性：content
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

5、display

display的属性及值：

none：元素不显示，并且从文档流中移除
block：块类型，默认宽高为父级宽高，可设置
inline：行内元素，默认为父级宽、不可以设置宽高
inline-block：行内块，可以设置宽高，但是是同行显示
list-item：像块级元素一样显示，并添加列表标记
table：元素作为表格元素显示
inherit：继承父级display的值

5.1 行内元素

不可以设置宽高
可以设置水平方向的margin和padding，不能设置垂直方向的
不会自动换行

5.2 块级元素

可以设置宽高
可以设置margin和padding
可以自动换行
多个块级元素，默认从上到下排列

6、隐藏元素的方法

display：none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility：hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index：-999：来使其他元素遮盖住该元素，以此来实现隐藏。
transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

6.1 display:none与visibility:hidden的区别

在渲染树种：
1. display:none会让元素从渲染树中移除，不占据任何空间
2. visibility:hidden不会从渲染树中移除，元素还在只是不可见
是否可以继承：
1. display:none：不可以继承，子孙节点随着父节点消失而消失，没办法修改子节点显示
2. visibility:hidden：继承，可以设置visibility:visible让子孙节点显示
修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘
如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取

7、link和@import的区别

两者都是外部引用CSS的方式，它们的区别如下：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

8、transition和animation的区别

transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

9、伪元素和伪类的区别和作用

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。

p::after {content:"Hot!";}

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。

a:hover {color: red}

伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

单冒号:：是css3伪类
双冒号::：是css3伪元素

10、requestAnimationframe

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

该方法属于宏任务，所以会在执行完微任务之后再去执行。

window.requestAnimationFrame(callback);

取消动画：使用cancelAnimationFrame()来取消执行动画，该方法接收一个参数——requestAnimationFrame默认返回的id，只需要传入这个id就可以取消动画了。

优势：

CPU节能：当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统走的RequestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
函数节流：为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次
减少DOM操作：requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

11、CSS3新特性

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）

圆角（border-radius:8px）

多列布局（multi-column layout）

阴影和反射（Shadoweflect）

文字特效（text-shadow）

文字渲染（Text-decoration）

线性渐变（gradient）

旋转（transform）

增加了旋转,缩放,定位,倾斜,动画,多背景

12、CSS优化

加载性能
1. CSS压缩
2. css单一样式
3. 减少使用!import
选择器性能
1. 减少后代选择器的使用，最好不要超过三层
2. 尽量少使用通配符
3. 尽量少的类名，使用id
渲染性能
1. 减少使用浮动、定位
2. 减少页面的重排、重绘
3. 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
4. 不使用@import前缀，它会影响css的加载速度。
5. 小而杂的图片内容使用雪碧图
6. 尽量少使用web字体
可维护性
1. 同种样式抽离
2. 样式与内容分离

13、css预处理器、后处理器

预处理器：如：less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性。层级，mixin，变量，循环，函数等对编写以及开发UI组件都极为方便。
后处理器：如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

好处：

可以很方便的屏蔽浏览器私有语法的差异
结构清晰，便于扩展
可以轻松实现多重继承
完美的兼容了CSS代码，可以应用到老项目中

14、单行、多行文本溢出隐藏

// 单行
div{
  overflow: hidden;            // 溢出隐藏
  text-overflow: ellipsis;      // 溢出用省略号显示
  white-space: nowrap;         // 规定段落中的文本不进行换行
}

// 多行
div{
  overflow: hidden;            // 溢出隐藏
  text-overflow: ellipsis;     // 溢出用省略号显示
  display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
  -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
  -webkit-line-clamp:3;        // 显示的行数
}

15、媒体查询

使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

<!-- link元素中的CSS媒体查询 --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 
<!-- 样式表中的CSS媒体查询 --> 
<style> 
@media (max-width: 600px) { 
  .facet_sidebar { 
    display: none; 
  } 
}
</style>

16、CSS工程化

CSS 工程化是为了解决以下问题：

宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计
编码优化：怎样写出更好的 CSS
构建：如何处理我的 CSS，才能让它的打包结果最优
可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？

以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：

预处理器：Less、 Sass 等；
重要的工程化插件： PostCss；
Webpack loader 等。

17、BFC 块级格式化上下文

BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创造BFC的条件：

根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll；

BFC的特点：

垂直方向上，自上而下排列，和文档流的排列方式一致。
在BFC中上下相邻的两个容器的margin会重叠
计算BFC的高度时，需要计算浮动元素的高度
BFC区域不会与浮动的容器发生重叠
BFC是独立的容器，容器内部元素不会影响外部元素
每个元素的左margin值和容器的左border相接触

BFC的作用：

解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
 
<div class="left"></div>
<div class="right"></div>

18、浮动

非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

浮动的原理：

浮动元素碰到包含它的边框或者其他浮动元素的边框停留
浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）

清除浮动：

给父级div定义height属性
最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
包含浮动元素的父级标签添加overflow:hidden或者overflow:auto

使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**

.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }

19、flex布局

任何一个元素都可以指定flex布局。设置flex布局之后，float clear和vertical-align属性将失效。

19.1 容器属性

就是设置在父级盒子上面的属性。

容器的排列属性：

flex-direction：决定主轴的方向、即项目的排列方向。有四个值：
1. row：主轴为水平，起点在左端。
2. row-reverse: 主轴为水平。起点在右端。
3. column：主轴为垂直方向，起点在上端。
4. column-reverse：主轴为垂直方向，起点在下端。
flex-wrap: 定义了如果一行放不下，是否换行，默认不换行，属性值有三个。
1. nowrap：不换行，默认值
2. wrap：换行，第一行在上面、
3. wrap-reverse：换行，第一行在下面
flex-flow：是前两个属性的集合版。 flex-flow: flex-direction || flex-wrap；

容器的对齐属性：

justify-content: 定义了项目在主轴(X轴)上的对齐方式。有五个值。
1. flex-start：左对齐，默认值。
2. flex-end：右对齐
3. conter : 居中
4. space-between: 两端对齐
5. space-around: 每个元素的左右空隙都平分剩余空间。
align-items: 定义项目在交叉轴(Y轴)上的对齐方式。有五个属性值。
1. flex-start：顶端对齐。
2. flex-end：底部对齐。
3. conter：居中
4. baseline：基线对齐
5. stretch: 默认值，如果项目没有设置高度或者auto就默认占满整个容器的高度。
align-content：定义了如果有多根轴线的情况下的对齐方式，只有一根的话不生效，就是当设置了flex-wrap：wrap并且换行之后才生效。有6个值。
1. flex-start：与交叉轴的起点对齐
2. flex-end：与交叉轴的终点对齐
3. center：居中
4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
6. stretch：默认值、轴线占满整个交叉轴。

19.2 项目属性

子节点上面的属性。

order：定义项目的排列顺序，值越小，排列越靠前，默认都是0.
flex-grow：定义项目的放大比例，设置每一项的占比，默认为0，即存在剩余空间也不放大。如果所有的项目都设置为1的话就是有剩余空间的情况下，每一项平方剩余空间。如果有一项为2，代表该项是为1的二倍。
flex-shrink：定义项目的收缩比例，默认为1，就是当空间不足的情况下，所有的都收缩，如果有某个设置为0的话，为0的不收缩。
flex-basis：定义了在分配剩余空间前，项目占据的空间，浏览器根据这个属性计算是否有多余空间，默认值是auto，即项目原本的大小，也可以设置具体的数值。
flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：允许单个项目与其他项目对齐方式不一样，可以覆盖align-items属性，默认值为auto，即继承父级的align-items属性，如果没有父元素，则等同于stretch。

20、rem和em、px

px: 固定的值，无论页面放大或者缩小都不会改变，但是是相对显示器屏幕分辨率而言的，不同设备dpr( 物理像素 / 独立像素)不同，低分辨率屏幕dpr=1，高分辨率屏幕>1
em: 相对父元素字体大小的倍数。如果父元素的字体为 12px，那么子元素 1em 就是 24px。由于是相对父级的倍数，所以多层嵌套时，倍数关系的计算会很头痛。
rem: 相对根元素字体大小的倍数。相对于 html 的字体大小，如果不做任何修改，浏览器默认字体大小为 16px。

可以使用Post css

selenium模块

Wed, 05 Jan 2022 00:00:00 +0800

selenium模块，浏览器自动化

1、简介

selenium是基于浏览器自动化的一个模块

selenium模块和爬虫之间的关联

便捷的获取网站中动态加载的数据
便捷实现模拟登陆

2、使用

selenium环境安装

pip3 install selenium

下载一个浏览器的驱动程序

https://chromedriver.storage.googleapis.com/index.html
http://npm.taobao.org/mirrors/chromedriver/

任意一个网站，根据浏览器版本选择

然后就可以使用selenium实例化一个浏览器对象，

from selenium import webdriver

bro = webdriver.Chrome(executable_path='./chromedriver')

运行之后会打开一个浏览器窗口，提示Chrome正受到自动测试软件的控制。

#!/usr/bin/env python3
# -*- coding:utf8 -*-
from selenium import webdriver
from lxml import etree

bro = webdriver.Chrome(executable_path='./chromedriver')

bro.get('http://scxk.nmpa.gov.cn:81/xk/')

page_text = bro.page_source

tree = etree.HTML(page_text)
li_list = tree.xpath('//ul[@id="gzlist"]/li')

names = []

for li in li_list:
    name = li.xpath('./dl/@title')[0]
    names.append(name)

print(names)
# 关闭浏览器
bro.quit()
    

3、其他常用操作

Demo：

from selenium import webdriver
from lxml import etree
import time

bro = webdriver.Chrome(executable_path='./chromedriver')

bro.get('https://www.taobao.com/')

# 标签定位 定位淘宝的搜索框
search_input = bro.find_element_by_id('q')

# 标签交互 给搜索框赋值
search_input.send_keys('mac')

# 执行js代码
bro.execute_script('alert(1)')

# 点击搜索按钮
btn = bro.find_element_by_class_name('btn-search')
btn.click()

time.sleep(5)
bro.quit()

3.1 标签定位的方法

bro.find_element_by_class_name()
bro.find_element_by_id()
bro.find_element_by_xpath()
bro.find_element_by_css_selector()
bro.find_element_by_link_text()
bro.find_element_by_name()
bro.find_element()
bro.find_element_by_tag_name()

3.2 执行js代码

如demo：

bro.execute_script('alert(1)')

# 里面可以放任意的js代码

3.3 执行事件

如demo：

btn.click()

也可以通过js代码执行

# 滚动一屏的高度
bro.execute_script('window.scrollTo(0, document.body.scrollHeight)')
# 可以执行一些其他的事件 如：回退
bro.back()
# 前进
bro.forward()
# 关闭浏览器
bro.quit()

3.4 iframe处理

页面中也嵌套的iframe就会找不到，需要切换浏览器标签定位的作用域

bro.switch_to.frame('iframeID')

3.5 动作链

一系列的连续动作

# 引入对应的模块
from selenium.webdriver import ActionChains
bro = webdriver.Chrome(executable_path='./chromedriver')
div = bro.find_element_by_id('divid')
# 动作链
action = ActionChains(bro)
# 点击且长按
action.click_and_hold(div)
# 拖动
for i in range(5):
  action.move_by_offset(20,0).perform()
  sleep(0.3)
  
# 释放动作链
action.release()

bro.quit()

4、无头浏览器

把浏览器弹窗取消，但是动作照常执行。

from selenium.webdriver.chrome.options import Options

chrome_options = Options()
chrome_options.add_argument('--headless')
chrome_options.add_argument('--disable-gpu')
bro = webdriver.Chrome(executable_path='./chromedriver',chrome_options=chrome_options )

5、规避监测

from selenium.webdriver import ChromeOptions
option = ChromeOptions()
option.add_experimental_option('excludeSwitches', ['enable-automation'])
bro = webdriver.Chrome(executable_path='./chromedriver', options=option )

异步爬虫

Sun, 02 Jan 2022 00:00:00 +0800

异步爬虫

1、简介

在爬虫中使用异步实现高性能的数据爬取操作。

在不使用异步的时候，同时爬取多个url的数据，前面的请求会阻塞后面的请求

#!/usr/bin/env python3
# -*- coding:utf8 -*-
import requests
import time
 
if __name__ == '__main__':
    start_time = time.time()
    headers = {
        "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36"
    }

    urls = [
        'https://bj.58.com/changping/ershoufang/',
        'https://bj.58.com/chaoyang/ershoufang/',
        'https://bj.58.com/haidian/ershoufang/'
    ]

    def get_content(url):
        print('正在爬取',url)
        page_text = requests.get(url=url, headers=headers).text
        return page_text

    def parse(content):
        print('内容长度为：', len(content))

    for url in urls:
        content = get_content(url)
        parse(content)
    end_time = time.time()

'''
正在爬取 https://bj.58.com/changping/ershoufang/
内容长度为： 1363782
正在爬取 https://bj.58.com/chaoyang/ershoufang/
内容长度为： 1549302
正在爬取 https://bj.58.com/haidian/ershoufang/
内容长度为： 1407832
3.3931241035461426
'''

第一个执行完毕之后才会执行第二个，需要改成同时执行就需要使用到异步，也就是多线程or多进程

2、多线程&多进程

好处：可以异步进行操作

弊端：无法无限制的开启多线程或进程

3、进程池、线程池

好处：降低系统对进程或者线程创建和销毁的一个频率，从而降低系统开销

弊端：池中的进程或者线程的数量是有上限的

线程池的简单使用：

import requests
from multiprocessing.dummy import Pool
import time
 
if __name__ == '__main__':
    start_time = time.time()
    headers = {
        "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36"
    }

    urls = [
        'https://bj.58.com/changping/ershoufang/',
        'https://bj.58.com/chaoyang/ershoufang/',
        'https://bj.58.com/haidian/ershoufang/'
    ]

    def get_content(url):
        print('正在爬取',url)
        page_text = requests.get(url=url, headers=headers).text
        return page_text

    def parse(content):
        print('内容长度为：', len(content))
    
    pool = Pool(3)
    contents = pool.map(get_content, urls)
    # 线程池的返回值
    print(len(contents))
    end_time = time.time()
    print(end_time - start_time)
    
"""
正在爬取 https://bj.58.com/changping/ershoufang/
正在爬取 https://bj.58.com/chaoyang/ershoufang/
正在爬取 https://bj.58.com/haidian/ershoufang/
3
1.229123830795288
"""

对比上面的串行的内容，快了2s多

4、协程

协程不是进程或线程，其执行过程更类似于子例程，或者说不带返回值的函数调用

协程的几个概念：

event loop：事件循环，相当于一个无线循环，可以把一些函数注册到这个事件循环上，当满足某些条件时，函数就会被循环执行
corowtine：协程对象，我们可以将协程对象注册到事件循环中，它会被事件循环调用。可以使用async关键字来定义一个方法，这个方法在调用的时候不会立刻被执行，而是返回一个协程对象
task：任务，是对协程对象的进一步封装，包含了任务的各个状态
future：代表将来执行或还没有执行的任务，实际上和task没有本质区别
async：定义一个协程对象
await：用来挂起阻塞方法的执行

协程demo：

#!/usr/bin/env python3
# -*- coding:utf8 -*-
import asyncio
 
if __name__ == '__main__':
  	# 定义一个协程对象函数
    async def request(url):
        print('正在请求：', url)
        print('请求成功：', url)
		
    # 返回一个协程对象
    c = request('www.baidu.com')

    # 创建一个事件循环对象
    loop = asyncio.get_event_loop()

    # 将协程对象注册到事件循环中,启动c
    loop.run_until_complete(c)

task对象的使用：

#!/usr/bin/env python3
# -*- coding:utf8 -*-
import asyncio
 
if __name__ == '__main__':
    async def request(url):
        print('正在请求：', url)
        print('请求成功：', url)

    c = request('www.baidu.com')

    # 创建一个事件循环对象
    loop = asyncio.get_event_loop()

    # 注册一个任务,将协程对象封装进任务里
    task = loop.create_task(c)
    print(task) # 任务执行前的状态
    loop.run_until_complete(task)
    print(task) # 执行后的状态
    
'''
<Task pending name='Task-1' coro=<request() running at 协程.py:6>>
正在请求： www.baidu.com
请求成功： www.baidu.com
<Task finished name='Task-1' coro=<request() done, defined at 协程.py:6> result=None>
'''

task和future的使用差不多

future对象的使用：

#!/usr/bin/env python3
# -*- coding:utf8 -*-
import asyncio
 
if __name__ == '__main__':
    async def request(url):
        print('正在请求：', url)
        print('请求成功：', url)

    c = request('www.baidu.com')

    # # 创建一个事件循环对象
    loop = asyncio.get_event_loop()

    # 注册一个功能
    future = asyncio.ensure_future(c)
    loop.run_until_complete(future)

还可以添加回调事件来执行：

#!/usr/bin/env python3
# -*- coding:utf8 -*-
import asyncio
 
if __name__ == '__main__':
    async def request(url):
        return url

    def cb(task):
        print(task.result())

    c = request('www.baidu.com')

    # # 创建一个事件循环对象
    loop = asyncio.get_event_loop()
    future = asyncio.ensure_future(c)
    # 绑定回调，需要在协程对象那里有一个返回值，然后在回调函数里面通过`task.result()`来处理
    future.add_done_callback(cb)
    loop.run_until_complete(future)

在异步协程中如果出现了同步模块相关的代码，就无法实现异步。

代码如下：

#!/usr/bin/env python3
# -*- coding:utf8 -*-
import asyncio
import time
 
if __name__ == '__main__':
    async def request(url):
        print('任务开始：',url)
        time.sleep(2)
        print('任务结束：',url)

    urls = [
        'www.url1.com',
        'www.url2.com',
        'www.url3.com'
    ]
    tasks = []
    for url in urls:
        c = request(url)
        task = asyncio.ensure_future(c)
        tasks.append(task)

    loop = asyncio.get_event_loop()
    loop.run_until_complete(asyncio.wait(tasks))

'''
任务开始： www.url1.com
任务结束： www.url1.com
任务开始： www.url2.com
任务结束： www.url2.com
任务开始： www.url3.com
任务结束： www.url3.com
'''

如上代码，在time.sleep(2)的地方被阻塞了，在asyncio中遇到阻塞操作必须进行手动挂起，可以替换成如下代码：

async def request(url):
  print('任务开始：',url)
  await asyncio.sleep(2)
  print('任务结束：',url)

'''
任务开始： www.url2.com
任务开始： www.url3.com
任务结束： www.url1.com
任务结束： www.url2.com
任务结束： www.url3.com
'''

5、多任务异步协程

开启一个服务器：

import time
import flask
from flask import Flask
app = Flask(__name__) 

@app.route('/a')
def indexa():
    time.sleep(2)
    return 'a'

@app.route('/b')
def indexb():
    time.sleep(2)
    return 'b'

@app.route('/c')
def indexc():
    time.sleep(2)
    return 'c'

if __name__ == '__main__':
     app.run(host='0.0.0.0',port=80,threaded=True)

运行，然后访问http://192.168.3.17/a返回了a

多任务协程代码

# -*- coding:utf8 -*-
import requests
import asyncio
import time
 
if __name__ == '__main__':

    urls = [
        'http://192.168.3.17/a',
        'http://192.168.3.17/b',
        'http://192.168.3.17/c'
    ]

    async def get_page(url):
      	print('开始下载：', url)
        page_text = requests.get(url = url).text
        print('下载完毕：', url, '=》', page_text)

    tasks = []

    for url in urls:
        c = get_page(url)
        task = asyncio.ensure_future(c)
        tasks.append(task)
    
    loop = asyncio.get_event_loop()
    loop.run_until_complete(asyncio.wait(tasks))

'''
开始下载： http://192.168.3.17/a
下载完毕： http://192.168.3.17/a =》 a
开始下载： http://192.168.3.17/b
下载完毕： http://192.168.3.17/b =》 b
开始下载： http://192.168.3.17/c
下载完毕： http://192.168.3.17/c =》 c
'''

发现是串行执行的，是因为requests.get()是基于同步进行请求的，我们需要使用基于异步的网络请求模块进行请求

5.1 aiohttp

异步网络请求模块

安装

pip install aiohttp
pip3 install aiohttp

引用

import aiohttp

修改上面的bug

    async def get_page(url):
        print('开始下载：', url)
        async with aiohttp.ClientSession() as session:
            # 因为session发送http请求期间是会阻塞的 所以要使用await进行手动挂起
            async with await session.get(url) as res:
                page_text = await res.text()
                print('下载完毕：', url, '=》', page_text)
                
'''
# 执行结果
开始下载： http://192.168.3.17/a
开始下载： http://192.168.3.17/b
开始下载： http://192.168.3.17/c
下载完毕： http://192.168.3.17/a =》 a
下载完毕： http://192.168.3.17/b =》 b
下载完毕： http://192.168.3.17/c =》 c
'''

使用异步模块之后就变成了异步了，这样就完成了多任务异步协程了。

猫说

React生成PDF

1、直接上代码

electron基础

1、简介

2、进程、线程

3、创建项目

3、主要文件

4、创建窗口

5、添加事件

6、主进程和渲染进程通信

6.1 remote

uniapp基础

1、简介

2、目录结构

3、模板语法

4、组件

5、自定义组件

6、生命周期

前端面试题之webpack

1、webpack简介

2、webpack核心

3、webpack打包流程

4、loader和plugin的区别

4.1 为什么需要loader

5、webpack进行模块加载

6、常用的loader

7、常用的plugin

8、Rollup和webpack区别

9、sourceMap

10、热更新

11、chunk 分包

11.1 chunk的父子关系

12、loader缓存

13、tree shaking 摇树优化

13.1 避免无意义的赋值

13.2 使用 #pure 标注纯函数调用

13.3 禁止 Babel 转译模块导入导出语句

前端面试题之浏览器

1、浏览器本地存储

1.1 cookie

1.2 sessionStorage

1.3 localStorage

2、浏览器同源策略

3、如何解决跨域

3.1 CORS 跨域资源共享

3.2 JSONP

3.3 postMessage

3.4 Nginx代理

3.5 node中间件代理

3.6 document.domain + iframe跨域

3.7 location.hash + iframe跨域

3.8 window.name + iframe跨域

3.9 WebSocket协议跨域

4、正向代理和反向代理

5、浏览器缓存

5.1 强缓存

5.2 协商缓存

6、浏览器缓存的位置

6.1 Service Worker

7、输入一个URL回车后发生了什么

8、浏览器事件机制

8.1 阻止事件冒泡

8.2 事件委托

前端面试题之vue

1、vue的原理

1.1 vue模板编译原理

2、双向绑定

2.1 v-model

3、生命周期

3.1 父子组件生命周期顺序

4、常见的事件修饰符

5、vue和react的区别

6、vue的优点

7、template和jsx的有什么分别

8、computed和watch的区别

9、组件通信

9.1 父子组件通信

9.2 兄弟组件通信

9.3 任意组件通信

13.2 使用 `#pure` 标注纯函数调用