前端性能优化
龙马啊
人要有理想,没有理想就不是人啦。
展开
-
策略模式-前端设计模式
策略模式解决代码里面的 if else 的堆叠不同策略,分开处理,而不是混合在一起符合开放封闭原则 class User { constructor(type) { this.type = type } buy() { if (this.type === "ordinaryUser") { console.log('普通原创 2022-05-10 23:05:24 · 132 阅读 · 0 评论 -
手写promise源码分析
promise就是构造函数使用是发布订阅模式我们定义三个状态// pendingconst PENDING = "pending"// 成功的回调状态const FULFILLED = "fulfilled"// 失败的回调状态const REJECTED = "rejected"代码里面的注释,可以看下class Promise { constructor(executor) { this.status = PENDING // 成功传递原创 2022-05-08 20:49:19 · 421 阅读 · 2 评论 -
代理模式-前端设计模式
从字面了解意思代理: 别人来帮我实现,比如经纪人就是明星的代理服务器跨域使用的就是代理讲解之前写一个关于模式之间的区别代理模式VS适配器模式适配器模式: 提供一个不同的接口(如不同版本的插头)代理模式: 提供一模一样的接口代理模式VS装饰器模式装饰器模式: 扩展功能,原有功能不变,且可以直接使用代理模式: 展示原有的功能, 但是经过限制或者阉割之后的 class ReadImg { constructor(fileName) {原创 2022-05-05 22:22:08 · 174 阅读 · 0 评论 -
装饰器模式-前端设计模式
首先装饰器这个词语所谓的装饰 就是在原有的基础进行改进,不会破坏原有的结构比如手机壳, 它就是一个装饰品有这样的一个功能需要在一个圆上添加一个红色边框 class Circle { draw() { console.log('画一个圆'); } } let circle = new Circle() circle.draw()我们有两种选择第一种, 不美观的写法 cl原创 2022-05-04 21:23:29 · 515 阅读 · 0 评论 -
适配器模式-前端设计模式
适配器模式首先了解这个词语 适配让我想到了插头, 有些插头是不适配的,需要一个转换器来适配的,在开发过程中也是的 有些后端返回的数据,前端需要处理成自己需要的数据格式前端需要建立一个 model 层将后端的数据处理后返回出来 <script> class Unqualified { unqualified () { return '20v电压' } }原创 2022-05-02 21:01:10 · 490 阅读 · 4 评论 -
发布订阅模式-前端设计模式
首先理解 发布和订阅利用报刊的场景小时候,家里人有看报刊的习惯, 会和联系送报刊的人 告诉他,我需要什么类型的报刊。 - 这个可以被称为订阅接着报刊到了,送报刊的人,会把报刊送到我家。-这属于发布在程序中怎么来定义的呢?还是利用数组的方法是实现type 是 你定义报刊的类型fn 是一个函数,可以理解为报刊的内容 let event = { add(type, fn) { if (!this[type]) {原创 2022-04-26 21:59:11 · 1334 阅读 · 0 评论 -
单例模式-前端设计模式
首先简单的了解单例这个词语单 :是单个的例:是实例, 既然是实例那一定和 new的过程有关在new 的过程中我们都是会生成一个 空的对象,开辟一个空间, 如果一个构造函数被new多次的话那是不是要开辟多个空间,生成多个对象。单例模式就是解决这个问题的,只生成一个对象来解决这个问题下面这段代码体现了 每一次 new 都会生成不一样的实例,不一样的对象 function Fn() { } let a1 = new Fn() let a2 =原创 2022-04-25 23:06:28 · 278 阅读 · 0 评论 -
前端性能优化
1. 图片的优化1. png 无损压缩 支持透明 颜色色彩好 体积大适合 矢量图标 logo2. jpg jpeg 有损压缩 不支持透明 体积小适合轮播图和背景图3. svg 无损压缩 体积小 兼容性好svg的体积小于 jpg 小于 png 本身类似于 html一样缺点 浏览器的渲染成本高4. base64 小图标解决方案 依赖编码实现用于大图的话,编码的体积会大于原来图片的体积可以减少网络请求,提高页面的性能5. webp 有损压缩和无损压缩 支持透明 gif动图原创 2022-04-06 00:09:46 · 766 阅读 · 0 评论