这时候遇到的问题

guoss
431 阅读18分钟 
---

highlight: arduino-light

loader: webpack能够编译除js外语法的桥梁
css-loader less-loader stylus-loader file-loader vue-loader
plugin： 优化webpack相关功能、编译、打包、压缩、配置等
autoprefix、 html-webpack-plugin 、happypack 、uglify-webpack-plugin、 extrac-text-webpack-plugin 、 define-plugin 、webpack-bundle-analyzer
hot-module-replace-plugin

webapck中指纹策略

hash：文件修改，项目构建的hash会发生变化
chunkhash:和webpack打包相关、不同的chunk生成不同的chunkhash 。
在生成chunk的过程中hash值修改，所以是依赖于入口文件js，当js修改的时候css也会重新进行打包。但是通过使用contetnhash的话是js的修改不会引起contetnhash的变化。 contenthash：文件内容的变化引起hash的变化 一般是css

webpack打包体积过大

1.去掉sourcemap 2.使用treeshaking 剔除es6中的无用代码 3.mini-css-extra-plugin 提取css 4.ugifyjs 混淆js代码 5.公用的用script从服务器下载 6.router按需加载

bfc: 块级格式上下文 block formate context

含义：隔离的独立容器，容器元素不会在布局上影响外面的元素，
触发条件： display不是none、position为absolute fix、display为inline-block flex table-cell grid、overflow除visible、float不是none、body根元素
1.margin bottom折叠
2.清除浮动（浮动元素会脱离文档流）
3.margin-top传递
4.浮动元素被覆盖

base64的缺点

图片资源会和原来相比更大，ie下还有最大长度的限制，图片解析不了

堆和栈的理解

堆：用于存放引用数据类型，变量的保存其实是一个至今，指针指向对应的位置
栈：存放基本的数据类型 null、undefined、bool、stirng、number、symbol

css中引入样式方法

1.link 可以添加参数rel、直接加载、兼容性较好、可以js添加对应的link
2.@import 没有参数可以添加、页面加载完毕后加载、兼容性不好、不能使用js操作

跨域

1.cors cross-origin-recourse-site和相关的options请求
2.jsonp：并且在请求完毕后可以通过调用 callback 的方式回传结果 3.nginx+proxy
nginx反向代理
在服务器端设置nginx反向代理服务器，来转发客户端的请求，并从服务器上得到结果返回给客户端
接口不会暴露安全性好
可移植性差
其中dev中配置proxy，是webpack自身提供的一种跨域访问
4.websocket实现跨域
通过WebSocket双向通信协议建立连接，实现客户端与服务器端的通信。全双工 只需要建立一次连接就可以完成通讯，安全性也比较高，兼容性不太好 5.iframe：
iframe能够原封不动的把嵌入的网页展现出来
设备兼容性差\样式较丑 实现的是窗口间的通信

devServer:{
	// 地址以/api开头，会请求到跨域所在的地址
	proxy:{
		"/api":{
			target:'跨域地址',
			changeOrigin: true, //本地虚拟一个服务端，同事转发请求
			pathRewrite:{
				"^/api": '' // /api替换为空
			}
		}
	}
}

4.iframe
6.服务器反向代理：客户端----服务器----服务器node.js request请求
后台是不会跨域，跨域是前端浏览器才会存在的。

函数节流 在固定的时间只会触发一次

函数防抖 ---在固定的时候不会触发 最后一次才会触发

let wrap = document.getElementById('a')
let wrapH = wrap.height
let inner = document.getElementById('a')
if(wrapH+wrap.scrollTop>inner.height)

websocket

前端 new websocket、 建立链接、发送请求、接受返回
使用socket.io new websocket 发送请求、监听变化

开始编译，先找到entry，根据依赖加载对应的模块，对加载的各个模块进行解析，解析后的模块根据各个之前的依赖 关系组装成一个个chunk，chunk加入到输出列表，最后列表写入到文件系统

前端安全策略

待补充

bfc：

1.display：不是block
2.position 不是static、relatice
3.float不是none
4overflow： 不是visible
作用：清除浮动、margin折叠、字体环绕

清除浮动的方法

1.添加空标签：clear：both
2.after伪类清除，设置:after {content:'';dispaly:block;height:0;clear:both;visibility:hidden}
3.外层元素也是浮动

seo：

meta 标签的作用

<meta name="keyword" content="">
<meta http-equiv="expires" content="no-cache">

seo优化、keyword、desc、作者、浏览器用什么版本渲染、浏览器的解析版本、是否拨号、过期时间、重定向

1.title meta标签完善
2.img alt title明显
3.布局优化、需要显示的地方清晰明了
作用：搜索引擎爬虫、提高网站权重、改善用户体验
性能优化
1.减少http请求
2.缓存资源
3.预加载、懒加载
4.图片压缩合并
5.减少dom请求
6.使用cdn缓存加速访问

css选择器解析过程

从右向左，dom树和css树组成渲染树，经过gpu渲染在屏幕

状态码：

200：服务端返回成功
300：重定向 304:命中协商缓存 302：临时重定向 301： 永久重定向 400：客户端语法错误 403：无权限访问 500：服务端错误
缓存机制：是否有缓存（当浏览器请求服务器数据时，会将请求结果和缓存表示放在相应头中）-----
当命中了强缓存----从本地中读取数据
expires服务器和客户端时间不同步的问题
cache-control 是相对服务器的时间
命中协商缓存
etag：MD5处理，文件修改，就会修改
last-modified：精度时间，只能精确到s，如果是在当前s内修改的 或许就不生效
from memory cache :关闭后就没了
form disk cache: 关闭后还是有的

f5：是从服务端获取数据、所以是协商缓存是存在的
ctrl+f5: 原来的缓存都不会加上。强缓存和协商缓存都不存在
http缓存是可以提高并发的处理效率。通过强缓存和协商缓存。
地址栏回车之后强缓存和协商缓存都是存在的对
http：80
https： 443
ftp 21

函数节流：多次触发最终只有最后一次生效
函数防抖：在规定的时间只触发一次

设计模式：

1.工场模式
2.单例模式
3.迭带器模式
4.发布订阅模式
5.策略模式
6.代理模式

spa单页应用：

优点：加载后不会跳转、理由路由切换
用户体验号、内容的改变不用重新加载页面、前后端职责分离
缺点：首次加载数据太大、seo困难

路由

history：history,go、history.back、history.forward pushStatus
优点：链接清晰、不容易别截断、history.state获取信息、后端了解当前页面
缺点：后端需要配置
hash :hashchange
优点：不会发起多余的服务器请求、实现简单
缺点：容易被截断
abstract： node.js端支持，模拟history入栈出栈操作

兼容问题：

  1. img禁止放大 ponter-event:none
    2.img保存：-webkit-touch-callout:none;
    3.ios滚动卡顿：-webit-overflow-scrolling: touch

react:挂载前后、是否需要更新、更新前后、销毁前

vuex模块化modules：在全局数据store中可以分模块管理，区分不同模块的数据。namespaced: true
mapMutation mapAction mapState
减少代码冗余、重复声明

vue性能优化

代码：
1.懒加载和预加载
2.关闭页面事件销毁
3.列表优化
4.插件按需加载
webpack：
1.代码压缩
2.加快打包速度
3. 提取公用代码
4.雪碧图
5.图片压缩
web优化： 1.cdn缓存
2.浏览器缓存、在不经常更新的内容上设置强缓存、需要修改时修改hash、版号等；经常变化的资源设置no-cache
web内存优化：
1.减少全局变量的定义
2.绑定的元素不用，解绑
用户性能指标：
1.fp：首次绘制，无论是什么元素
2.fcp：文本、图片、svg、canvas绘制
3.fmp:首次有意义的绘制，页面主要内容绘制出来
4.tti：可交互事件
5.fps：每秒帧率 ，帧率过大的动画会感觉卡顿

vue computed的原理

初始化computed函数，在get和set方法中将对应的data依赖注入，通过监听data依赖的变化，返回set对应的值，或者是上次的计算结果。

new vue之后发生了什么

1.初始化vue实例
2.绑定createElement到实例上
3.完成对生命周期初始化，触发生命周期beforeCreate
4.完成内部数据的监听
5.触发声明周期中create
6.挂载，将vue转换成虚拟dom
7.渲染真是dom

虚拟dom和真是dom区别

1.虚拟dom减少性能浪费，根据diff算法更新dom

keep-alive

组件缓存，不会执行销毁，可以通过actived、disactive更新

vue渲染

加载：父组件创建前后---父子间挂载钱---子组件创建----子组件挂载前后-父组件挂载后
子组件更新：子组件更前前后--父组件更新后
销毁过程：父组件销毁前---子组件销毁前后-父组件销毁后

vue插槽

默认插槽、具名插槽、作用域插槽 作用域插槽主要实现父组件访问子组件值的

diff算法

先同级进行比较、然后再比较子节点 递归比较子节点 vue中的diff算法 深度优先遍历的原则。首选会进行以下的比对
1.新旧vdom节点都有文本内容，会对文本内容进行，不相同将el中vdom内容进行修改 2.对于是否有子节点，进行增删 3.如果两者都有子节点，则执行updateChildren函数比较子节点，这一步很重要 4.子节点的比较是通过首位对比，生成map的映射。通过key值做比较，如果旧的dom有就移动，否则创建。当新旧节点遍历完成，会对多余的节点进行一次的添加和删除

v-html的问题

可以解析html语法，但是css中scoped失效，stylus中使用>>>、less中使用/deep/

vue中不适合用jq的原因

vue中数据和视图是双向绑定的，直接操作DOM会和vue的原理相悖
jquery可以用在ajax的请求中。或者是动画效果上

vue-cli2和vue-cli3的区别

vue-cli3将webpak相关的配置放在vue-cli中，配置文件是通过vue.config.js进行配置，.envproduction相关环境参数配置。process.env.VUE_APP_MODE访问对应的环境

webpack 热更新原理

1.修改一个或者多个文件时，webpack重新编译，触发hmr
2.hmr使用websocket通知hmr runtime 更新，进而请求http更新jsonp
3.模块可以更新就更新模块，不可以就刷新浏览器 简单来说通过hmr runtime 和websocket，当webpack检测到数据变化，会重新打包，告诉浏览器，浏览器通过jsonp获取到js脚本，进行模块的热替换

前端性能优化

1.雪碧图
2.资源压缩
3.dom缓存
4.数据分页加载
5.cdn缓存
6.浏览器缓存
7.预加载

vue3.0

1.数据绑定原理修改
2.fregenet支持
3.typescript
4.更人性化的操作vm层
5.treeshaking优化

data为什么要返回对象：所有导入组件的数据会引起冲突。使用函数写法return新对象互相不影响。但是new出来的是实例，是不会被复用的所以不存在引用对象的问题

loader：将非js文件解析成webpack能够识别的js
computed:对于属性值进行操作、适用于多次对变量进行存储、响应式的、有缓存、计算量比较大的时候、可读可写
method:函数方法、没有缓存、非响应式、对应点击等事件
watch：监听一个属性的变化、执行异步或开销较大的操作时

method: 数据每次重新渲染都会执行、性能消耗比较大、除非不希望有缓存
computed:计算属性、依赖其他属性值，有缓存、属性值修改的时候才会返回内容
watch：监听值的变化就会执行回调、在回调中可以进行逻辑操作
vue原理，当数据发生改变，observer会检测数据的变化并广播出去，watcher检测到数据的变化告知complier，虚拟dom会进行编译

vue项目的优化

1.页面层面
js按需加载
图片懒加载
无限列表分页
事件销毁
路由懒加载
图片合并
webpack
1.sourcemap
2.ugify压缩
3.提取公共代码

设计模式：

1.工厂模式
2.单例模式
3.装饰器模式
4.迭代器模式 5.发布-订阅模式
6.建造者模式
7.代理模式
8.策略模式

原型链：

一切皆对象，所有的函数都有prototype和_proto_属性，对象有_proto_属性，对象的__proto__指向构造函数的prototype,
在查找对象的方法时候，会在原型链上一层层的去找，如果有执行对应的方法，没有的话还会向上查找 实现继承的方法
1.构造器 parent.call(this,arguement)
2.原型链 a.prototype = new b()
5.组合继承 （构造器和原型链结合）
3寄生模式 object.create
4.寄生组合模式 object.create(b) b.call(this,arguements)
6.es6 中class extends

js事件

鼠标事件、键盘事件、表单事件、视频相关事件、触摸事件、点击事件
跨浏览器的事件操作

// 定义一个形参evt
	var clickHandler = function(evt)
	{
		// 对于DOM事件模型，访问事件源用target属性
		if (evt)
		{
			alert(evt.target.innerHTML);
		}
		// 对于IE浏览器
		else
		{
			alert(window.event.srcElement.innerHTML);
		}
	}
	// 为按钮a绑定事件处理器
	document.getElementById("a").onclick = clickHandler;

前端攻击：

1.xss 跨站脚本攻击 html节点、html属性 js代码 富文本 (将标签对应转换成特殊字符串) 反射型：通过url进行链接
存储型： 恶意代码存储在服务器，客户端在获取值时候攻击 dom型： 2.csrf 跨站伪造请求 xss.js

let options = {
	whiteList: {
		a: ['href', 'onclick']
	}
};  // 自定义规则
let myxss = new filterXSS.FilterXSS(options);
// 以后直接调用 myxss.process() 来处理即可
let html = myxss.process('<a href="#" onclick="alert(/xss/)">click me</a>')

html5

1.语义化标签
2。css背景 边框等效果
3.mediaquery
4.animation
5.transition
6.video audio
7.file reader
8 canvas、webgl、svg
9.socket
10表单元素
11地图
12.postmessage

css3： 字体、边框、渐变、盒模型、transform和transition动画、弹性媒体查询、背景、伪类
伪类：nth-child last-child first-child、not before after link vistied hover active、 disabled check enable

let const var 区别

var全局作用域、作用域污染、变量提升的问题 let块级作用域 const 常量

require和import

require：值得拷贝 运行时加载 同步
import 值得引用 编译时加载 异步
amd cmd都是异步加载，区别在于一个需要前置依赖，cmd是依赖就近
es6使用模块化
commonjs输出值得拷贝、es6值得引用
common是运行时加载、es6是编译时输出
es6新增
箭头函数、let const、class、模板字符串、解构赋值、数组新的方法 new set 等 扩展运算符、for in for of、promise、装饰器、proxy、import

webpack 编译过程：

1。初始化webpack.config.js获取对应的配置
2.第一步得到的配置文件初始化compiler对象，加载相关的配置的插件，执行对象的run方法开始执行编译
3.根据配置中的entry找到所有的入口文件
4.从入口文件出发，找到所有的loader对应的模块进行翻译，在知道对应的依赖模块
5.完成模块的编译，在经上一步翻译所有的模块之后,得到每个模块被翻译后的最终内容以及他们之间的依赖关系。
6.输出自愿：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，再把每个chunk转换成一个单独 的文件加到输出列表
7.完成输出，在确定好输出内容后，根据配置确定输出的路径和温家明，把文件内容写到文件系统

模块化的理解

模块化就是将一个个大的功能拆分成小得功能模块，不仅仅有助于各个职能的分工，更有利于程序的调试。增加代码的可读性和可移植性。 原则
1.接口不要太多 2.高内聚、低耦合 3.单一职能原则

node.js

1.起服务
2。文件存取操作
3.项目中环境变量
4.module.export require
5.package.json的依赖
6.package-lock.json 当前确切的包版本，以及来源等信息
7.npm对于包的管理
8.版本的定义 ^最左边不更改 ~ 只改最后一位
9.事件循环机制：后劲先出
10.事件触发器
11.webpack中使用的路径__dirname join
require和import 运行时加载 编译时加载 require是值得复制 import 值得引用 require同步 import 异步 v8引擎事件：定时器事件、ajax事件、用户触发事件

npm包安装过程

1，发出npm init命令 2，找到package。json的文件，对应下载压缩包 3.压缩包放在.npm目录下，解压缩到当前node_modules目录中

http协议

http协议：明文发送，没有任何数据加密
https：http加上ssl加密传输

重绘和重拍

重绘：背景 颜色的修改引起的改变
重拍：大小位置的改变
减少重拍和重绘
1.css硬件加速
2.display:none减少
3.多使position: absolute fixed
4.减少使用table
5.减少修改offset等相关参数
6.避免重复修改don

opacity:none、visibility：hidden 、display:none

display: 不占空间 重拍
opacity：占空间、可以点击
visibility： 站空间 不可以点击

盒模型

盒子的组成部分： content、padding、border、margin
标准：content = width
怪异盒模型： content +padding +border = width
弹性盒模型

rem和转化原理

rem是相对于html的根元素进行定位的，移动端浏览器的默认字体是16px，那么10px就是62.5%，100px就是625%，即1rem相当于100px；所以当我们设计的尺寸是750px，那么以750px为基准，1rem相当于100px， 750/626% = clientWidth/百分比；这样可以根据浏览器的尺寸进行大小的缩放

行内元素的margin和padding

左右有效、上下没效

css那些属性可以继承

color、font-size、font-family、font-weight、text-aligin、cursor visibility

新增的伪类

nth-child first-chilid not enable
min-width > max-width >width

object.definePrototype

1.无法监听数组、对象无法直接监听
proxy可以代理对象、数组、动态增加的属性

key的作用

通过diff算法更新节点，在vue中，当新节点和旧节点头尾交叉对比么有结果时，会根据新节点的key和旧的数组key进行对比，从而找到就节点，进行增删改，为什么不能用index，因为index是根据当前的数组变化的。 创建id的函数：没有自增。uuid的库

函数节流和防抖

节流：在固定的时间只触发一次
防抖：多次触发只相应动作的最后一次

Async/Await 如何通过同步的方式实现异步

generate 状态函数实现yield 协程：异步任务去执行

箭头函数和普通函数区别

1.内部没有this的指向
2.参数传递使用rest
3.不能使用构造函数
4.不能作为generate函数

js中内存泄漏

事件绑定、定时器、全局的变量、闭包中的变量

csrf攻击

诱导用户登录第三方的网站，留下自己的cookie信息

vue中watch和computed区别

1.computed检测属性的变化，并挂载在data上，watch 是检测一个已经有的数据
2.computed是属性值的变化依赖其他多个参数，watch是一个参数的变化会引起其他值得变化
3.computed缓存，只有当依赖修改的时候才会再次触发，获取一个返回值。watch是当数据发生改变触发函数

webAssembly

可以将其他语言运行在浏览器的编译工具

函数科利华

function cuurrAdd(){
  let arg = [...arguments]
  function add(){

  }
  let addq =  function(){
    let arg1 = [...arguments]
    return cuurrAdd.apply(null,arg.concat(arg1))
  }
  addq.toString = ()=>{
		return addq.reduce((item,a)=>{
				item + +a
		})
  }
  return addq
}

正则匹配邮箱

/([\s\S]*)@([\s\S]*)\.\w{2,10}$/

正则匹配html

/^(https{0,1}:\/\/)[\w\W]+\.[\w\W]+$/

http 和 websocket

websocket是全双工通信、http是单工

TCP 三次握手 四次挥手

三次握手：客户端发送数据包，服务端确认 客户端有发的能力，服务端有收的能力
服务端发送数据包，客户端接受确认。证明客户端有收的能力，服务端有发的能力
服务端收到客户端对于第二次握手的回应，证明双方的手收发能力正常
四次挥手：客户端说我要关闭了
服务端会说稍等
服务端确认所有的数据传输完毕
断开链接

target和curTarget区别

target是当前元素、curTarget是绑定触发的元素
事件代理 addeventlisten
减少dom操作、减少内存消耗、修改dom不需要增加代码

事件代理

事件捕获（父元素到目标元素）、目标阶段、事件冒泡（目标元素到父元素） 事件冒泡：减少内存占用、子元素新增的的时候dom操作不用修改

应用层协议

http、https、ftp、smtp、

es5实现const

主要使用object.definePrototype，可写设置为false

es6转es5的方法

转换成ast与大叔，按照规则修改树结构，生成普通的代码

for forEach map方法

for>forEach>map for没有任何参数、forEach有参数、map会返回一个数组

parseInt的返回值问题

['1','2','3'].map(parseInt)输出的结果是[1,nan,nan],若果是[1,0,1]那么将输出[1,nan,1]

正则匹配ip

var reg =/((2(5[0-5]|[0-4]\d))|[0-1]{0,1}\d{1,2})(\.(((2(5[0-5]|[0-4]\d))|[0-1]{0,1}\d{1,2}))){3}/
avatar
文章
阅读
粉丝