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