笔记-前端进阶02

前端开发

• 开发工具

nodejs
VSCode
HBuilderX
git
微信开发者工具
snipaste截图工具
向日葵
录屏取色FSCapture
oss阿里云文件服务
360压缩
postmen
谷歌浏览器
火狐浏览器
JSON在线解析工具： http://json.zhaojun.im/
js文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
书栈网：https://www.bookstack.cn/
题库：https://leetcode-cn.com/problemset/all/
七鱼客服：http://qiyukf.com/docs/
快递100：https://api.kuaidi100.com
菜鸟教程 csdn
小程序vant: https://vant-contrib.gitee.io/vant-weapp/#/quickstart
Ant Design: https://ant.design/docs/react/introduce-cn
远程控制软件：1、Teamviewer 2、向日葵

• vscode使用

Auto Close Tag
Auto Rename Tag
Babel ES6/ES7
Beautify css/sass/scss/less
Bracket Pair Colorizer
Color Picker
EditorConfig for VS Code
Git Blame
Git Graph
Git History
Git History Diff
GitLens
Markdown All in One
One Dark Pro
Partial Diff
Path Intellisense
Prettify JSON
Vetur
vscode-icons
minapp
wxml
wxml-language service
git配置(git.path): "terminal.integrated.shell.windows": "D:\\Program Files\\Git\\bin\\bash.exe",
新版vscode git配置：
    "terminal.integrated.profiles.windows": {
        "Git-Bash": {
            "path": "D:\\softwore2021\\git\\Git\\bin\\bash.exe",
            "args": []
        }
    },
    "terminal.integrated.defaultProfile.windows": "Git-Bash",
    
git clone 报错：HTTP Basic: Access denied 错误
第一种方法： git config --system --unset credential.helper  重置输入账号密码
第二种方法： git config --global http.emptyAuth true
来源：https://blog.csdn.net/estrusKing/article/details/120332506

AES加解密：CryptoJS插件
sign前端签名
解决js计算机计算精度问题：使用mathjs数学库 
vue图片滑动验证： npm插件：vue-puzzle-vcode或者vue-monoplasty-slide-verify

• 防抖、节流

防抖：在一段时间内，回调函数只会调用一次，即触发事件的最后一次
	function avoidShak(fn,time){
		let timer;
		return function(...args){
			clearTimeout(timer);
			let context = this;
			let _arguments = args;
			timer = setTimeout(()=>{
				fn.apply(context,_arguments);
			},time);
		};
	};
节流：在一段时间内，会每隔一段时间调用一次；
	function ttrottle(fn,time){
		let isNeedInvoke = true;
		return function(...args){
			if(!isNeedInvoke)return;
			let context = this;
			let _arguments = args;
			isNeedInvoke = false;
			setTimeout(()=>{
				fn.apply(context,_arguments);
				isNeedInvoke = true;
			},time);
		};
	};  

• 小程序性能优化

 1、分包加载 、代码注入（按需注入、用时注入）、首屏渲染（精简首屏数据，组件、缓存请求数据、骨架屏）
 2、合理使用setData(滚动事件onPageScroll减少频繁使用、抢购倒计时封装成自定义组件)
 3、页面切换(避免在 onHide/onUnload 执行耗时操作、 提前发起数据请求)
 4、资源加载优化(图片资源的大小、 避免滥用 image 组件的 widthFix/heightFix 模式，尽量固定图片大小)

• 解决小程序在onPageScroll()频繁调用wx.setData({{})问题 影响性能

 onPageScroll() { // 滚动函数 （防抖）
	let { show } = this.data;
	if(show) {
		this.setData({
			show:false
		})
	}
	clearTimerout(this.timer)
	this.timer = setTimerout(res =>{
		this.setData({
			show:true
		})
		clearTimerout(this.timer)
	}, 200)
 }

• js 中编码（encode）和解码（decode）的三种方法

编码：escape,encodeURI,encodeURIComponent
解码：unescape,decodeURI,decodeURIComponent 

• es6

1) es6
1.let const ...  
2.map  new set() for...of Object.keys()  Object.values() Object.assign()
3.字符串：includes() padStart() padEnd() `` 箭头函数 export import
4.Promise：pending（进行中）、fulfilled（已成功）和 rejected（已失败）

• 安全

1、XSS
攻击：代码注入一种,XSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站 
应对：转义输入输出的内容，对于引号，尖括号，斜杠进行转义
2、CSRF
攻击：利用用户的登录态发起恶意请求。
应对：
    Get 请求不对数据进行修改
    不让第三方网站访问到用户 Cookie
    阻止第三方网站请求接口
    请求时附带验证信息，比如验证码或者 token
3、密码安全（后端）
应对：通常需要对密码加盐，然后进行几次不同加密算法的加密

• 浏览器缓存机制（http/https缓存）

Service Worker： 运行在浏览器背后的独立线程，可以用来实现缓存功能
Memory Cache（内存缓存）：cookie, sessionStorage, localStorage
Disk Cache（硬盘缓存）: 读取速度比 Memory Cache 慢，但是存储量更大。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存
Push Cache（推送缓存）：它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。

• promise三种状态

异步回调函数
等待（pending）、已完成（fulfilled）、已拒绝（rejected）
一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换

• session、cookie、token有什么区别

记录用户登录状态方法（cookie、token、session）
用户权限问题，越来越多的场景需要标识用户身份。例如：单点登陆、购物车等等。而cookie、session 与 token，就是为了实现带有状态的“会话控制”
一般cookie和session一起使用：cookie（在客户端记录状态）session:（在服务器端记录状态）
问题：如果web服务器做了负载均衡（服务器不同），那么下一个操作请求到了另一台服务器的时候session会丢失。
token：维持用户状态（前端与服务器之间存在跨域问题）

• meta viewport是做什么用的（移动端使用）

name：为viewport表示供移动设备使用.
content：内定义了viewport的属性：
width：表示移动设备下显示的宽度为设备宽度(device-width)
user-scalable：表示用户缩放能力, no表示不允许用户缩放网页
initial-scale：表示设备与视口的缩放比率
maximum和minimum：分别表示缩放的最大最小值, 要注意的是, maximum必须大于或等于minimum

• 跨域（同源策略）

定义：当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
  解决方法：
  1）设置document.domain解决无法读取非同源网页的 Cookie问题
  2）CORS（跨域资源共享）：它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法，
    普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
    带cookie跨域请求：前后端都需要进行设置
  3）webpack本地代理
  4）Nginx反向代理
  5）JSONP
    JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。
	网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

• 浏览器渲染机制

1）处理 HTML 并构建 DOM 树。
2）处理 CSS 构建 CSSOM 树。
3）将 DOM 与 CSSOM 合并成一个渲染树。
4）根据渲染树来布局，计算每个节点的位置。
5）调用 GPU 绘制，合成图层，显示在屏幕上。

• 使用vue.js优缺点

优点：轻量级、双向数据绑定、指令、插件化、MVVM框架、数据驱动、组件化、简洁、高效、快速、模块友好（构建数据驱动的 web 界面的渐进式框架，Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统）
缺点：只支持IE9及以上、可扩展性稍差、生态环境差不如angular和react

• 对vue生命周期的理解

beforeCreate:初始化界面前，data、methods、computed、watch上的数据和方法不能被访问
created:初始化界面后，实例创建完成，可以使用数据，更改数据，但不会更新视图
beforeMount:挂载前，完成编辑模板，虚拟DOM已经创建完成，即将开始渲染.
mounted:挂载完成，将编译好的模板挂载到页面，可以进行异步请求和访问DOM节点
beforeUpdate:更新数据前，组件数据更新之前调用，组件即将更新，准备渲染页面
updated:组件更新后，render重新渲染；此时数据和界面都是新的，避免在此期间更改数据，可能会导致无限循环的更新
beforeDestroy:组件卸载前，实例销毁之前，当前阶段实例完全可以被使用，可以处理收尾工作，比如清除定时器
destroyed:组件卸载后，组件已被拆解，数据绑定被卸除，监听被移除，子实例也被统统销毁
activated:keep-alive专属，组件被激活时调用
deactivated:keep-alive专属，组件被销毁时调用

• vue v-if v-show

v-if:生成或移除一个元素，更高的切换消耗
v-show:显示或者隐藏HTML元素(display:none)，更高的初始渲染消耗， 操作频繁使用

• vue 组件通讯

1）props/$emit、
2）公共js $emit/$on
3) vuex（配合缓存一起使用）
4) 缓存
5）provide/inject（跨组件传递）
6）$parent / $children与 ref

• vue数据双向绑定原理，如果让你实现vue双向绑定，有什么思路

原理：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的

• vue使用过程中优化手段

1）组件拆分
2）使用keep-alive缓存
3）路由懒加载、延时加载、仅渲染可视化部分（懒加载）
4）分批处理
5）按需加载（UI）
6）骨架屏

• 前端性能优化

1）合并资源，减少http请求数量
2）图片懒加载。分批加载，预加载、骨架屏
3）使用字体图标或CSS绘制，来代替部分图片
4）CDN内容分发
5）webP，对图片进行压缩，减少图片体积
6）minify/gzip 压缩，对css、js等文件进行压缩（去除空格、回车等），减少文件体积
7）HTTP协议缓存请求、离线缓存 manifest、本地缓存 localStorage
8）JS优化，如防抖、节流、事件委托、减少重排重绘等。
9）CSS优化，如提取公共样式减少代码量、减少选择器嵌套层数、精灵图等
10）CSS写在文件头部，JS写在文件底部
11）服务器端渲染；客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。​ 服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML，使首屏渲染快，SEO（搜索引擎优化） 好。
12）使用Web Workers

• 虚拟Dom实现原理

1）用JavaScript模拟DOM树，并渲染这个DOM树
2）比较新老DOM树，得到比较的差异对象
3）把差异对象应用到渲染的DOM树。

• js异步编程的理解

阶段1）传统callback回调函数
阶段2）事件发布/订阅模式
阶段3）jQuery $.Deferred() 是一个构造函数，用来返回一个链式实用对象方法来注册多个回调
阶段4）Promise
阶段5）async+await

• js == 和 === 区别

== ：比较两个操作数的值是否相等
===：比较两个操作数的值是否相等，同时检测它们的类型是否相同

• js 深拷贝和浅拷贝，如何实现一个深拷贝

浅拷贝：Object.assign()
深拷贝：JSON.parse(JSON.stringify(obj))、递归

• 实现js继承

1）构造函数继承
2）原型式继承
3）原型链继承
4）class+extends继承（类继承）

• js中this关键字

一般而言，在Javascript中，this指向函数执行时的当前对象
当没有明确的执行时的当前对象时，this指向全局对象window
new关键字后的构造函数中的this指向用该构造函数构造出来的新对象
apply和call能够强制改变函数执行时的当前对象，让this指向其他对象

• 什么是闭包，解决了什么问题，导致了什么问题

定义：函数嵌套了函数，函数内部可以引用函数外部的参数和变量，参数和变量不会被垃圾机制回收
好处：保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突，防止变量污染
坏处：内存消耗大，性能问题

• 立即调用的函数表达式（IIFE）

(function(){ /* code */ })() 或者(function(){ /* code */ }()); // ()

• 前端项目中常用的优化手段，优化过程中，一般都会使用到什么样的工具

1）合并请求，减少浏览器对服务器的请求数
2）压缩css、js、合并图片（雪碧图）、骨架屏
3）缓存（浏览器缓存、keep-alive、http）
4）开启Gzip压缩技术
5）图片延迟，懒加载
6）按需加载

• node.js使用场景，node.js中的同步异步的理解、node.js中的fork是什么

RESTful API、统一Web应用的UI层、大量Ajax请求的应用，NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景
阻塞，非阻塞
node中是用fork方法开启子进程

• 使用npm会有什么样的好处

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题
1）允许用户从NPM服务器下载别人编写的第三方包到本地使用
2）允许用户从NPM服务器下载并安装别人编写的命令行程到本地使用
3）允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

• 对前后端分离的理解

逻辑的分离，有利于逻辑的抽象，有些逻辑既可以在前端实现也可以在后端实现
开发的分离，有利于团队效率的提高，这里需要考虑前后端开发人员角色、职责的划分。
部署的分离，有利于项目的维护、升级、敏捷迭代，以及项目阶段的管理。

• 数据类型判断

export const getObjType = (obj) => {
	var toString = Object.prototype.toString
	var map = {
		'[object Boolean]' : 'boolean',
		'[object Number]' : 'number',
		'[object String]' : 'string',
		'[object Function]' : 'function',
		'[object Array]' : 'array',
		'[object Date]' : 'date',
		'[object RegExp]' : 'regExp',
		'[object Undefined]' : 'undefined',
		'[object Null]' : 'null',
		'[object Object]' : 'object'
	}
	if (obj instanceof Element) {
		return 'element'
	}
	return map[toString.call(obj)]
}

• 对象深拷贝

export const deepClone = (data) => {
	let type = getObjType(data)
	let obj ;
	if (type === 'array') {
		obj = []
	} else if (type === 'object') {
		obj = {}
	} else { 
		// 不再具有下一层
		return data
	}
	if (type === 'array') {
		let len = data.length;
		for (let i = 0; i < len; i++) {
			obj.push(deepClone(data[i]))
		}
	} else if (type === 'object') {
		for (let key in data) {
			obj[key] = deepClone(data[key])
		}
	}
	return obj
}

• 秒杀商品高并发

前端：
  1）秒杀前 页面静态化
  2）防止频繁请求 
后端：
  1）redis缓存
  2）加锁
  3）限流
  4）CDN加速

未完待续。。。