- 博客(66)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 HTTP：强缓存优化实践
浏览器收到包含 max-age 的响应后，会根据该值在本地进行缓存，并在过期之前不再向服务器发送请求该资源。值是一个固定时间，因此会受本地时间的影响，如果在缓存期间我们修改了本地时间，可能会导致缓存失效。强缓存是指浏览器在向服务器请求资源时，判断本地是否存在该资源的缓存，并判断是否过期。：服务端返回的响应中包含一个 Expires 头，指定资源缓存的过期时间。头的响应后，会将资源保存在缓存中，并在过期时间之前不会再次向服务器发送请求。如果本地缓存未过期，浏览器就直接使用本地缓存，而不会向服务器发送请求。
2024-04-29 09:50:11
510
原创 长列表优化：简单实现个可以无限滚动的虚拟列表
只渲染用户当前可见的部分内容，即视口中的数据。当用户滚动列表时，动态地加载新的数据块进入视口，并移除离开视口的数据块。用户滚动时加载新的渲染数据列表。可以根据滚动位置来计算当前应该显示哪些数据。滚动事件可以加上节流函数优化性能。将要显示的数据单独拿出来，而不是将所有数据一次性加载到页面上。这可以减少页面渲染时的负担。
2024-04-10 14:39:57
296
原创 你这动画太假了！用好缓动函数好不好啊
在CSS中，可以使用transition属性或者@keyframes关键帧动画来创建动画效果。使用缓动函数则可以让动画更加流畅和生动。以上代码中的就是我们的缓动函数了。
2024-03-06 15:03:56
546
原创 HTML：用对 preload、prefetch提升网页加载速度
在网页加载和数据获取方面，“preload” 和 “prefetch” 都是用来优化性能和用户体验的技术手段，但它们有一些区别。
2024-03-05 18:14:06
622
原创 vue：状态管理库及其部分原理（Vuex、Pinia）
当多个组件需要访问和修改相同的数据时，我们需要在组件之间传递 props或者使用事件总线。例如，修改用户登录状态、添加商品到购物车等。Getter 可以将一些复杂的数据计算逻辑封装起来，并在组件中使用。无法追踪到状态的变化是由何处引起的，使得调试和维护变得困难。当一个组件修改了状态，其他组件可能无法立即得知该变化。例如，获取用户信息的异步请求、添加多个商品到购物车等。当你需要在多个组件之间共享数据时，可以将这些数据放入。例如，保存用户登录状态、购物车中的商品列表等。可以保证状态的变更是可追踪的。
2024-01-18 21:01:16
658
原创 ECharts：Graph图表拖拽节点
问题1：节点的data如下，不使用直角坐标系一切正常，但使用直角坐标系时，节点怎么不见了？问题2：怎么拖拽节点？并且获得节点拖拽的偏移量呢？问题3：直接将坐标与偏移量进行加减，计算出来的坐标再赋值给节点，重新渲染后的节点位置与拖拽结束的位置不一样
2023-11-15 16:01:53
1277
2
原创 PWA：弱网环境、域名失效怎么办？
service worker 运行在独立的线程，可以拦截和处理网络请求，以实现离线缓存、推送通知和后台同步等功能。具体可以看MDN的介绍。
2023-06-06 21:02:30
451
原创 PWA：只需一步，把网站安装到用户的桌面
利用这个工具，可以清楚自己的配置是否有出现问题，有哪些优化点。在入口的html中引入该JSON文件，文件内容根据实际配置。
2023-06-06 18:00:03
930
原创 vue3 + vue-router4：写法正确但接收不到params
同一份代码，在同事的环境跑时正确运行，但在本人的环境运行缺接收不到上一个页面传过来的参数。vue-router 在4.1.4版本有一个更新：删除了未使用的。中的版本是否大于4.1.4，如果不是该问题可以忽略。1、在package.json里，将。，这样安装依赖时只会匹配到。的版本，而不会安装到。......
2022-08-31 11:42:29
3889
2
原创 HTTP协议（超文本传输协议）
1、HTTP报文格式请求报文和响应报文的结构基本相同：起始行（start line）：请求（响应）报文的基本信息头部（header）：详细的说明报文，格式为键值对正文（entity）：传输的数据2、请求行报文格式【请求方法】【空格】【URI】【空格】【协议版本】如：POST /admin/supplier_serve/supplierServeList HTTP/1.1请求方法：GET/POST/HEAD/PUTURI：统一资源标识符，包括URL和URN，几乎所有的URI都是URL
2021-09-01 16:28:19
121
原创 Vue：多文件上传并预览
多文件上传预览基本思路1、获取所上传的文件，input发生change事件时获取 e.target.files，这个变量就是文件列表2、文件上传用的时FormData格式，这里我循环遍历了文件列表，并把文件append到FormData对象里3、提交时把FormData对象提交到服务器即可4、预览功能我用的FileReader的readAsDataURL方法将上传图片转为base64，再将base64这串字符赋给img元素的src，即可显示预览5、读取操作是异步读取，这里用了Promise，读取
2021-07-07 16:35:14
1797
转载 JS：Proxy 支持的13种拦截操作
以下摘自阮一峰ES6入门get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。deleteProperty(target, propKey)
2021-07-05 11:06:54
2556
原创 Python：判断表中的数据在另一张表是否存在
将分表中的相关数据到总表中进行对比，如果数据在总表中存在，则存储到“匹配.xls”import xlrdimport xlwtimport xlutilsfrom xlutils.copy import copy# 打开表格并获取allTable = xlrd.open_workbook("E://总表.xlsx")allShell = allTable.sheet_by_index(0)allCol = allShell.col_values(16)myTable = xlrd.op
2021-03-02 15:54:53
2440
原创 Python：获取url对应的页面中是否存在关键字
import requestsimport ioimport sysimport xlrdmeida = '<script src="/utils.min.js"></script>'sys.stdout = io.TextIOWrapper(sys.stdout.buffer,encoding='utf-8')sum = 0def findMedia(url): global sum r= requests.get(url) r.encod
2021-03-02 10:01:42
222
原创 JS：函数声明与函数表达式
定义一个函数有两种方法一、函数声明二、函数表达式一、函数声明函数声明的function关键字放在最前面函数声明的函数会整体提升到顶部console.log(a) // function a () {/*code*/}function a () {/*code*/}预编译时实际顺序如下：function a () {/*code*/}console.log(a)二、函数表达式在函数表达式中可省略函数名称从而创建匿名函数函数表达式没有提升，使用var关键字时变量提升，而let不进行
2021-02-27 14:32:28
353
原创 JS：事件委托
事件委托：给父节点绑定事件，根据点击的子节点执行相应的代码注意事项：事件冒泡过程会损耗性能，嵌套结构越深损耗越大，所以并非把事件委托给越高层的父节点就越好 <ul id="clickUl"> <li id="1" data-name='one'>1</li> <li id="2" data-name='two'>2</li> <li id="3" data-name='three'>3<
2021-02-27 11:48:35
78
原创 JS：Promise 的 API 作用描述
文章目录Promise创建thencatchfinallyallanyracerejectresolvePromise创建Promise对象是一个构造函数，所以要用new关键字调用const promise = new Promise((resolve, reject) => {});thenthen方法可以为异步操作添加回调函数then()第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，它们都是可选的get(apiUrl).then((reso
2021-02-22 11:33:20
281
2
原创 JS：Objec 的 API 作用描述
文章目录Object.is —— 比较两个值是否相同Object.assign —— 合并对象Object.entries ，Object.keys，Object.values —— 获取键值对、键名、值Object.is —— 比较两个值是否相同比较两个值是否相同，与严格等于===的不同之处有两个：一是+0不等于-0，二是NaN等于自身Object.is(NaN,NaN) //trueObject.is(+0, -0) //falseObject.assign —— 合并对象Object.a
2021-02-21 18:26:14
152
原创 JS：Array 的 API 作用描述
数组APIsortreversejoinconcatfiltermapeverysomeforEachslicespliceindexOfsortsort()可以对当前数组进行排序，它会直接修改数组的位置而不是生成一个新数组功能：自动排序，默认是按Unicode升序排列，sort()函数会接收一个比较函数作为参数let a = [4,3,2,1]let b = a.sort((x,y) => { console.log(`x=${x},y=${y}`) return x-y})
2021-02-20 17:16:55
94
原创 JS：策略模式和状态模式
//策略模式基本结构//优化if-else分支过多function tactics(type,a,b) { let t = { add: function (a,b){ return a+b }, minus: function (a,b){ return a-b }, mul: function (a,b) { return a*b }, division: function (a,b){
2021-02-19 14:06:12
241
原创 算法：冒泡排序
思路：1、比较相邻的两个数，较大的放到右边（升序排序）2、所以第一遍循环的时候，最大的会放到最后一个，所以第二遍循环时最后一个不需要比较，第 i 遍循环时，第e.length - i个不需要比较function sort (e) { for(let i = 0; i < e.length-1; i++){ for(let j = 0;j <= e.length - i -1; j++){ e[j] > e[j + 1] ? [e[j],[e[j+1]]] =
2021-01-23 12:00:52
44
原创 算法：二分查找
对有序数组的查找function search (arr,target) { let start = 0 let end = arr.length - 1 while (start <= end) { let middle = Math.floor((start + end)/2) let maybe = arr[middle] if (maybe == target) { return middle } if (mayb
2020-12-12 15:51:50
58
原创 ES6：函数的新特性
1、参数设置默认值function fn(x = 1, y = '2') { console.log(x, y);}fn() // 1 "2"fn(3) // 3 "2"fn(4, 5) // 4 52、rest 参数rest参数(...变量名)用于获取多余的参数，并将参数放入数组rest 参数之前可以有参数，但rest 参数之后不能再有参数function fn(...values) { for (var item of values) { console.log(it
2020-11-11 14:13:27
104
原创 ES6：模板字符串用法
ES6中引入了模板字符串，让我们告别了使用大量'' 和 +来连接字符串了写法。要创造一个模板字符串，只需要使用反引号``将字符串包起来，模板字符串中的变量用${变量名}替代即可var a = 'o,';var b = 'd!'console.log (`Hell${a}worl${b}`);// Hello,world!1、多行字符串在模板字符串内，换行和空格是会保存并展示出来的var a = 'o,';var b = 'd!'console.log(`Hell${a} worl${b
2020-11-10 14:39:19
477
原创 HTML：学习HTML文档笔记
1、常用于按钮链接等： ››››2、<address> 标签定义文档或文章的作者/拥有者的联系信息。如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。3、<article> 标签规定独立的、完整的、摘自外部的内容。4、<aside> 的内容可用作文章的
2020-11-03 16:16:11
108
原创 JS：对比 for... in ...和 for... of ...
循环类型数组字符串对象for…in…返回下标返回下标返回键名for…of…返回数组元素返回字符报错var arr = ['a','b','c']var obj = {d:'D',f:'F'}var str = 'ghi'一、for… infor… in …遍历数组，返回下标for (let item in arr){ console.log(item) //0,1,2}for… in …遍历字符串，返回下标for (let item in...
2020-11-03 14:01:30
121
原创 CSS：变量的声明和读取
一、变量的声明在变量名前面加个连接号--，这样就成功声明了一个css变量变量只能用作属性值，不能用作属性名。:root{ --color: #fff;}二、变量的读取var()函数用于读取变量。div{ color: var(--color);}var() 还有个可选参数，表示默认值，即不存在该变量时使用该值div{ color: var(--color, #000);}三、变量值的类型1、当变量值类型为字符串，可与其他字符串进行拼接body::after{ -
2020-10-28 16:40:41
1048
原创 js：简单理解栈内存和堆内存
js的数据类型划分方式为 基本数据类型（Undefined，Null，Boolean，Number、String）和 引用数据类型Object（包含 function、Array、Date）基本数据类型的数据存储在栈内存中，引用数据类型的数据存储在堆内存。变量只是将引用数据类型的数据的地址存储到栈内存，使用的时候根据地址去堆内存中操作数据...
2020-10-27 17:55:51
237
原创 css：Grid网格布局常用属性
1、指定容器使用网格布局： display: grid2、指定容器设为行内元素并使用网格布局： display: inline-grid3、定义每一列的列宽：grid-template-columns4、定义每一行的行高：grid-template-row5、重复赋值：repeat(次数,值)6、自动填充：如：repeat(auto-fill,30px)7、比例：fr（如 grid-template-columns: 1fr 2fr;意思是容器分为2列，二列的宽度是一列的2倍)8、长度范围：m
2020-10-23 12:02:12
680
原创 git：从初始化到提交的常用指令
初始化仓库 git inint添加文件 git add （文件名）添加到 git commit -m “修改内容摘要”查看当前仓库的状态：git status查看修改内容：git diff显示提交日志：git log版本回退：git reset --hard “版本id”关联的远程库：git remote add origin [email protected]:(github名)/(git项目名).git删除关联的origin的远程库：git remote rm origin查看关联的远程库信
2020-10-20 18:21:19
238
原创 js：JavaScript的赋值、浅拷贝、深拷贝
赋值：增加了一个指针指向已存在的内存地址浅拷贝：申请了一个新的内存，拷贝第一层对象，不拷贝对象中的子对象深拷贝：申请了一个新的内存，并复制其全部内容
2020-10-19 14:53:29
327
1
原创 js： jquery.lazyload 图片、背景图片加载
图片懒加载<img class="lazyload" data-original="./images/mq10.jpg" width="128" height="24" /> $(function() { $("img.lazyload").lazyload() });背景图片懒加载<div class="lazyload" data-original="img/img.jpg" ></div>$(function() { $("div.
2020-10-16 18:37:05
520
原创 js：rem单位中所需的js
先说下实现思路吧：rem 是根据根元素的字号进行调整，所以可以先获取浏览器可视区域的宽度作为参照，将该宽度数值分为N 等份，每份或每份的倍数定义为根元素的字号，再监听这样一个rem 单位的js 就写好了这段代码中1rem 最大为20px：function reFontsize () { const html = document.querySelector("html") let pageWidth = document.body.clientWidth const maxW = 750;
2020-10-16 16:18:51
139
原创 浏览器：IE11兼容问题
以下内容均是在 IE11 上运行出现的问题1、在ajax提交时，data数据不能简写 $.ajax({ type: 'POST', url:'https://***/Api/PromotionForm', data: { para,//改为 para: para, token: res } ...... })2、页面的倒计时显示NaN（no a number）打断点发现问题出现
2020-10-15 15:23:18
268
原创 vue：axios请求本地json路径错误
本例用的是vuecli4，json等静态资源存放在public文件夹中经验主义使然下写下了这个路径，但返回404this.axios.get('public/redeme.json').then((res) => { console.log(res.data) })其实vue从代码到界面展示还要经过编译，所以路径会有所改变实际路径可以先打包一下，我是这么找到json的路径的打包后的文件目录如下所以我把路径改成：this.axios.get('./redeme.js
2020-10-13 16:39:39
1150
空空如也
输出的数据跟后台返回的数据不一致 vue 2.5.2 axios 0.18
2022-01-08
js 监听动态加载的跨域iframe
2021-03-18
TA创建的收藏夹 TA关注的收藏夹
TA关注的人