自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(238)
  • 问答 (1)
  • 收藏
  • 关注

原创 link与@import引入CSS的区别及FOUC

FOUC(Flash of Unstyled Content):用户定义样式表加载之前浏览器使用默认样式显示文档,用户样式加载渲染之后再重新显示文档,造成页面闪烁,在网速较慢或过多使用@import时出现,影响用户体验。link标签优于@import方法。

2023-03-29 22:19:18 498 1

原创 vue实现支持v-model的component

一个组件上的v-model默认会利用名为value的 prop和名为input的事件,但是像单选框、复选框等类型的输入控件可能会将valueattribute用于不同的目的。model选项可以用来避免这样的冲突

2022-11-23 14:37:05 522 1

原创 前端渲染优化思路

前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数。对于一些小图标,可以使用base64位编码,以减少网络请求。但不建议大图使用,比较耗费CPU。用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。网页gzip,CDN托管,data缓存 ,图片服务器。

2022-10-24 13:50:45 391

原创 webpack打包流程

【代码】webpack打包流程。

2022-10-08 01:22:34 265

原创 Vue如何进行权限管理

接口权限、路由权限、菜单权限、视图权限

2022-09-22 21:35:37 1590

原创 路由query和params参数的区别

接收参数的形式不一样,分别为和query支持path和name两种形式,params仅支持name形式生成url的格式不同,query产生的url带问号且包含参数的key和value,params仅携带参数的value使用params需要将路由设置为的形式。

2022-09-22 16:12:14 507

原创 js实现数组扁平化的五种方法

扩展运算符是ES6的新特性之一,用它操作数组可以直接展开数组的第一层,利用这个特性,我们可以不使用递归来实现数组的展平,这是因为每一次递归都是对当前层次数组的一次展开,而扩展操作符就是干这工作的。方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

2022-09-19 21:01:46 569

原创 promise实现请求重试

使用promise实现请求重试:若请求失败,则延迟n秒之后重新发送请求,有最大重试次数。

2022-09-18 14:15:23 813

原创 Vue2升级到Vue3应该知道的事

Vue2升级到Vue3应该知道的事

2022-09-17 14:26:10 2576 1

原创 JS实现简易观察者模式

JS实现简易观察者模式

2022-09-15 20:03:31 387

原创 react性能优化方案

react性能优化方案

2022-09-03 23:18:31 231

原创 理解受控组件和非受控组件

受控组件和非受控组件

2022-09-03 22:26:46 621

原创 浅谈react组件间通信方式

react组件间通信方式

2022-09-03 16:44:44 419

原创 详解react生命周期和在父子组件中的执行顺序

挂载阶段 :组件实例被创建和插入 DOM 树的过程更新阶段 :组件被重新渲染的过程卸载阶段 :组件从 DOM 树中被删除的过程下文分别从上述三个阶段解读react的生命周期。

2022-09-03 12:04:20 3387

原创 常用hooks用法总结

在react16.8版本之后,由于hooks的出现,函数组件得到了扩展,完全不使用"类",就能写出一个全功能的组件。

2022-09-01 17:44:31 1274

原创 react中setState更新状态的两种方式

react中的状态更新方法setState()是异步的

2022-08-31 23:44:06 550

原创 redux入门详解

redux是一个专门用于做状态管理的js库它可以用于原生js,react,vue,angular等项目中,但基本与react配合使用作用:集中式管理react应用中多个组件共享的状态。

2022-08-31 17:17:05 499

原创 纯函数和高阶函数

纯函数和高阶函数

2022-08-29 20:35:25 157

原创 react指定ref的三种方式

一,字符串方式;二,回调函数方式;三,createRef方式

2022-08-22 00:13:48 416

原创 react路由传递参数的几种方法

react路由传递参数的几种方法

2022-08-20 23:12:53 718

原创 10分钟读懂数据vue响应式和双向绑定原理

数据响应式和双向绑定的主要区别在于:数据响应式是数据驱动视图更新,双向绑定是数据和视图相互驱动更新。

2022-08-18 14:18:44 1867

原创 后端返回数万条数据,前端如何高效渲染

本文给出了三种写法,是按照性能和效率由低到高依次改进的,建议按照顺序来一步步加深理解。

2022-08-13 14:57:45 1270 1

原创 浅谈路由懒加载的实现与原理

当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

2022-08-11 00:00:31 2183

原创 async-pool实现控制并发请求

假设有6个待办任务要执行,而我们希望限制同时执行的任务个数,即最多只有2个任务能同时执行。当正在执行任务列表中的任何1个任务完成后,程序会自动从待办任务列表中获取新的待办任务并把该任务添加到正在执行任务列表中。...

2022-08-10 22:40:14 1385

原创 vue启动报错: 【Error: listen EADDRINUSE: address already in use :::8099】

启动服务的地址端口已被占用,需要kill目标进程。

2022-07-27 10:47:15 470

原创 谈谈DOM0,DOM1,DOM2,DOM3

在W3C协会制定的DOM标准中,DOM标准可以分为DOM1,DOM2,DOM3三个版本。事实上,DOM0级标准是不存在的,所谓DOM0只是DOM历史坐标中的一个参照点。

2022-07-25 19:00:30 2373

原创 JSX语法规则

React JSX语法规则

2022-07-09 15:27:43 189

原创 如何理解区分HTTP状态码401和403

401和403的主要区别

2022-07-07 16:18:17 10724 1

原创 JS判断一个对象是否为空

1. for...in2. JSON.Stringify()3. Object.keys()

2022-07-07 10:57:17 367

原创 JS中为什么基础数据类型可以调用方法

为什么string这种基础数据类型可以调用方法,方法调用不是对象才有的能力吗 ?

2022-07-06 09:52:06 308

原创 Promise知识点拾遗

本文大部分内容来自阮一峰所著ES6入门教程,原文链接在文尾。本文权为个人整理的简洁版。对象的状态不受外界影响。 Promise有三种状态,(进行中)、(已完成,又称fulfilled)和(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。一旦状态改变,就不会再变,任何时候都可以得到这个结果。 Promise对象的状态只可能有两种改变可能:从变为或者从变为。只要这两种情况发生,状态就不会再变了。Promise对象是一个构造函数,用来生成Prom...

2022-06-27 19:49:40 185

原创 详解为什么v-if和v-for不能同时使用

在Vue官方文档中,明确说明了。因为两者作用在同一个元素时,优先级是不同的。在Vue2中,v-for的优先级是高于v-if的,如果作用在同一元素上,输出的渲染函数中可以看除会先执行循环再判断条件,哪怕只渲染列表中一小部分元素,也得在每次重渲染的时候遍历整个列表,这会造成性能的浪费而在Vue3中,v-if的优先级时高于v-for的,因此v-if执行时要调用的变量可能还不存在,会导致报错。通常有两种情况导致需要v-if和v-for同时使用:为了过滤列表中的项目,例如 。此时可以定义出一个计算属性,例如,让其返回

2022-06-19 22:56:12 9282

原创 浅谈substr(),substring(),slice()的用法区别

浅谈substr(),substring(),slice()的用法区别

2022-06-12 23:56:44 397

原创 前端SEO解决方案

通常在"HTML语义化的好处",这样的问题中,有一点是“有利于SEO”,那什么是SEO呢?

2022-06-08 19:28:27 735 1

原创 解决iview中tooltip文字显示不下的问题

tooltip提示文字显示不下

2022-06-07 14:22:03 553

原创 作用域和作用域链

理解作用域与作用域链

2022-06-06 19:54:04 101

原创 HTTP请求头中Referer的作用

RefererHTTP请求中,Referer是header的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器该网页是从哪个页面链接过来的,服务器因此可以获得一些信息用于处理。例如,在www.google.com 里有一个www.baidu.com 链接,那么点击这个www.baidu.com ,它的header 信息里就有: Referer=http://www.google.com作用1.防盗链只允许我本身的网站访问本身的图片服务器,假如域名是www.goog

2022-05-26 15:18:28 6000

原创 JS数组去重的几种方式

let arr = [1,1,"1","1",true,true,"true",{},{},"{}",null,null,undefined,undefined]// 方法1let uniqueOne = Array.from(new Set(arr)) console.log(uniqueOne)// 方法2let uniqueTwo = arr => { let map = new Map(); //或者用空对象 let obj = {} 利用对象属性不能重复得特性 l

2022-05-20 13:47:45 154

原创 如何对axios二次封装

步骤引入axios创建axios实例设置请求拦截器(request interceptors)设置响应拦截器(response interceptors)暴露出去具体代码//1. 先引入axios依赖包import axios from "axios"; //2. axios创建对象const Server = axios.create({ baseURL: "", //管理后台要使用的接口的基地址 withCredentials: true, //请求跨域时携带c

2022-05-15 21:44:30 212

原创 浅谈async,await

asyncasync函数返回一个 Promise对象,可以使用then方法添加回调函数。只要使用async,不管函数内部返回的是不是Promise对象,都会被包装成Promise对象。// async基础语法async function fun0(){ console.log(1); return 1;}fun0().then(val=>{ console.log(val) // 1,1})async function fun1(){ console.

2022-05-15 21:18:32 261

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除