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')
四、图片懒加载优化
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、掘金...