Mark

178 阅读4分钟

Vue & React

一、生命周期

思路: 创建前、创建后、挂载前、挂载后、更新前、更新后、销毁前、销毁后,还有针对keep-alive组件的activated和deactivated

二、性能优化

vue相关:
1、使用单文件.vue,避免动态编译模板
2、Object.freeze可以冻结一个对象
3、扁平化Store数据结构
4、组件懒加载
5、服务器渲染
6、预渲染

react相关:
1、使用PureComponent
2、react.memo
3、shouldComponentUpdated
4、更改key值属性,直接渲染

react:getDerivedStateFromProps(组建实例化时或props变化会被调用)、getSnapshotBeforeUpdate (DidUpdate前使用)

react和vue的异同:
1、vue可以修改prop达到更新组件的目的
2、vue有compiled和watch
3、vue的生命周期不可控,react的生命周期可控
4、diff算法不同
5、vue有指令系统,v-if,v-show
6、vue有keep-alive组件,react没有

基础

一、判断变量类型

常用:Object.prototype.toString.call(variable)

思路:typeof 判断基础类型,instanceof、constructor、[prototype].isPrototypeOf、getPrototypeOf(var) === 右值、判断是否存在某个原型链上的方法

二、Symbol的用途

常用:模拟类的私有用法和私有变量

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

思路:箭头函数的this指向作用的上下文, 箭头函数没有prototype(原型),所以箭头函数本身没有this;箭头函数的参数不能使用arguments来访问;箭头函数的this指向普通函数时,它的argumens继承于该普通函数;无论箭头函数的thsi指向哪里,使用new调用箭头函数都会报错,因为箭头函数没有constructor;

性能优化

一、linked属性优化开启预加载

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">
<link rel="preload" href="style.css" as="style">
<link rel="prefetch">  // 已经被许多浏览器支持了相当长的时间,但它是意图预获取一些资源,以备下一个导航 / 页面使用

dns-prefetch、preload、prefetch

二、css注入html

控制html文件大小在14.6KB,原因是TCP发送的最大分段数据为14.6KB 同理还有base64

三、PWA

serviceWorker:在页面中注册并安装成功后,运行于浏览器后台,不受页面刷新的影响,可以监听和截拦作用域范围内所有页面的 HTTP 请求。结合 Fetch API、Cache API、Push API、postMessage API 和 Notification API,可以在基于浏览器的 web 应用中实现如离线缓存、消息推送、静默更新等 native 应用常见的功能

install -> installed -> actvating -> Active -> Activated -> Redundant

navigator.serviceWorker.register('/sw/sw.js')

lzw.me/a/pwa-servi…

四、图片懒加载优化

1、引入web worker

var worker = new Worker("worker.js");  //实例化对象

//第一种传递方式
worker.postMessage(message,taransferList);

//第二种传递方式
worker.postMessage({ 
     operation: "list_all_users", 
     //ArrayBuffer object 
     input: buffer, 
     threshold: 0.8, 
}, [buffer]);

//方法一
worker.onmessage = function(event){
    var data = event.data;        //通过event.data来获取传入的参数
}

//方法二
worker.addEventListener("message",target)

2、引入IntersectionObserver,取代传统的滚动事件

var io = new IntersectionObserver(callback, options)

io.observe(document.querySelector('img'))  开始观察,接受一个DOM节点对象
io.unobserve(element)   停止观察 接受一个element元素
io.disconnect() 关闭观察器

const io = new IntersectionObserver(()=>{ // 实例化 默认基于当前视窗

})  

let ings = document.querySelectorAll('[data-src]') // 将图片的真实url设置为data-src src属性为占位图 元素可见时候替换src

function callback(entries){  
	entries.forEach((item) => { // 遍历entries数组
		if(item.isIntersecting){ // 当前元素可见
			item.target.src = item.target.dataset.src  // 替换src
			io.unobserve(item.target)  // 停止观察当前元素 避免不可见时候再次调用callback函数
		}	
	})
}

imgs.forEach((item)=>{  // io.observe接受一个DOM元素,添加多个监听 使用forEach
	io.observe(item)
})

五、升级协议

1、websocket实时通讯专用
更好的二进制支持、头部很小(服务器和客户端都是),主动推送,没有同源限制

2、升级http2 头部开销更小(20B)、多路复用(打破浏览器4-8之间的并发数,通常是6)、服务器推送、二进制帧

六、优化图片格式

1、webp: ios不支持
2、腾讯出品的图片格式TPG 3、jpg保存时能选择渐进渲染方式,从上到下,淡入

未来

一、最大的能力

能解决一些困难问题,还没遇过什么解决不了的问题

二、前端越来越难开发,还是越来越好开发

1、效率方面越来越快了,比如vue/react的出现,少写很多代码,比如emmet,少打很多代码,比如统一的框架mpvue
2、技术知识同时要求也越来越高了

三、怎么学习前端

1、掘金...