- 博客(229)
- 资源 (2)
- 收藏
- 关注
原创 解决SPA(单页应用)首屏加载速度慢
SPA是目前流行的前端开发模式,相对于传统的多页面用户体验更好,操作更顺畅,开发效率也更高。但是SPA首屏加载速度慢一直是个致命的问题,由于SPA应用首次打开需要一次性加载大量的静态资源,这就导致了加载速度慢的问题,下面将从静态资源优化和渲染优化两个方面来解决。
2024-06-29 22:41:26
224
原创 认识webSocket长连接
需要前后端定义好心跳数据,客户端用定时器去发送心跳数据,当服务端收到的是客户端发送的心跳数据时,会回复响应数据给客户端,客户端收到响应后,就继续重复上述动作,如果双方超过限定时间未通讯,则服务端会认为连接已断开,停止向客户端发送数据,执行onClose断开连接。客户端和服务端都可以随时发送数据和接收数据,除非客户端或服务端主动关闭连接,至此通讯结束。短链接是通过客户端主动发起请求,无论是发送数据还是请求数据,都是客户端主动发起,服务端收到请求响应状态码及相关数据发送给客户端后,至此通讯结束。
2024-02-12 14:20:53
926
1
原创 echarts-for-weixin只显示折线图,其他不显示解决办法
小程序使用echarts-for-weixin展示图表,结果只展示折线图,其他的统统不显示,百度大法一下午终于知道可能是echarts包内只有折线图。
2022-12-21 18:09:00
362
1
原创 vite 构建,页面打开空白如何解决
比如部署页面最终部署在https//fancylife.github.io/z-mindnote/下,就必须在vue-router中配置以下代码,否则确实会打开白屏。
2022-07-18 17:18:10
2899
原创 vue-element-admin问题code 128,下载依赖问题
在项目中,有时候我们的项目要根据设计图来修改我们的表格的头部,一下就是element提供的两种修改头部的方法:1.Table-column Attributes render-header方法...
2022-04-23 18:11:37
204
转载 vue:将px转化为rem,适配移动端vant-UI等框架(px2rem-loader)
for…in是遍历数组、对象的keylet arr = [1, 2, 3];for (let i in arr) { console.log(i)}let obj = { name: 'wuxiaodi', age: 18,};for (let i in obj) { console.log(i)}
2021-11-03 15:52:44
380
转载 TortoiseGit实现Git本地代码的恢复/还原/回滚
TortoiseGit-->Show log Show log 选择要回滚的版本右击-->选择①或② 选择①的情况,直接在源代码上回滚,会删除源代码: 直接回滚到之前版本.jpg4 . 选择②的情况,导出代码的压缩包,解压后即可使用;导出压缩包.jpg...
2021-06-23 17:43:06
1597
原创 TortoiseGit提交每次都需要输入账号密码的解决办法
正常安装TortoiseGit,安装完成过后在目录: C盘/用户/lidebing(自己的用户名) 找到.gitconfig的文件在其中加上 :[user]name = lidebingemail = lidebing@qq.com[credential]helper = wincred完了第一次提交也需要输入密码,后面就可以记住密码不用输入了...
2021-03-11 19:36:20
1412
转载 使用CSS transition和animation改变渐变状态
特别声明,本文根据@ANA TUDOR的《The State of Changing Gradients with CSS Transitions and Animations》一文所整理。到目前为止,CSS的渐变属性linear-gradient和radial-gradient已经是很成熟的CSS特性了,而且repeating-linear-gradient和conic-gradient也越来越成熟。CSS渐变特性对于我们的帮助已经非常强大了,它们可以帮助我们绘图、创建图片占位符、制作环形进度条等.
2020-12-08 16:25:05
956
原创 小程序文字自动换行
<!-- 文字 --> <view class='list-content'> <text class='title'>{{index+1}}.{{item.title}}</text> <view class='more'> <text class='author'>作者:{{item.au...
2020-04-14 12:00:43
2431
转载 有以下 3 个判断数组的方法,请分别介绍它们之间的区别和优劣Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()
1. Object.prototype.toString.call()每一个继承 Object 的对象都有toString方法,如果toString方法没有重写的话,会返回[Object type],其中 type 为对象的类型。但当除了 Object 类型的对象外,其他类型直接使用toString方法时,会直接返回都是内容的字符串,所以我们需要使用call或者apply方法来改...
2020-03-03 16:46:30
276
转载 js实现深度优先遍历和广度优先遍历
什么是深度优先和广度优先其实简单来说 深度优先就是自上而下的遍历搜索 广度优先则是逐层遍历, 如下图所示1.深度优先2.广度优先两者的区别对于算法来说 无非就是时间换空间 空间换时间深度优先不需要记住所有的节点, 所以占用空间小, 而广度优先需要先记录所有的节点占用空间大 深度优先有回溯的操作(没有路走了需要回头)所以相对而言时间会长一点深度优先采用...
2020-02-29 23:48:02
439
转载 Vue修饰符
为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫啥名字) 表单修饰符填写表单,最常用的是什么?input!v-model~而我们的修饰符正是为了简化这些东西而存在的 .lazy ...
2020-01-13 10:30:39
167
原创 使用 git tag 为项目打标签
查看项目的标签 ,使用用的是 git tag 。在当前提前的这个点上打个标签 git tag v0.1。git show 会显示这个 tag 指向的那个 commit ,git show v0.1。添加一个有注释的 tag ,git tag -a v0.1 -m '注释',加上一个 -a 参数,标签的名字是 v0.1 ,后面再用一下 -m 参数,设置一条注释内容。查看项目在 v0.1 的时...
2020-01-08 19:36:29
444
转载 git中Please enter a commit message to explain why this merge is necessary.
Please enter a commit message to explain why this merge is necessary.请输入提交消息来解释为什么这种合并是必要的git 在pull或者合并分支的时候有时会遇到这个界面。可以不管(直接下面3,4步),如果要输入解释的话就需要:1.按键盘字母 i 进入insert模式2.修改最上面那行黄色合并信息,可以不修改3.按...
2020-01-08 18:58:00
133
原创 CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法web开发中,经常有对列表的3倍数列表项单独设置样式的需求。ul li:nth-child(3n+3) {color: #ccc;}上面的css是干什么用的,它就是在无序列表里面选择是3倍数的列。也就是第3个,第6个,第9个等等。...
2019-12-24 18:31:23
3156
转载 JavaScript new Date()在Safari上的坑
问题描述我们经常用yyyy-MM-dd HH:mm:ss格式表示日期,如2018-11-11 00:00:00,在js开发中也经常会把此格式字符串格式化为javascript Date类型,如new Date('2018-11-11 00:00:00'),不幸的是此操作在Safari浏览器(不论是Mac还是iPhone)上会报错,返回Invalid Date。如下图所示 在Mac S...
2019-12-13 14:47:20
629
转载 Vue使用jsPdf将页面导出成pdf文件
1 、我们要添加两个模块①第一个.将页面html转换成图片npm install --save html2canvasnpm install jspdf --save②第二个.将图片生成pdf2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')在将要导出的页...
2019-11-20 19:56:10
1594
1
转载 vue 父子组件的生命周期顺序
一、加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted二、子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated...
2019-09-10 14:38:57
275
原创 http和http2的主要区别
1,二进制传输http2采用二级制传输,相对于http1的文本传输安全性要高2,多路复用http一个链接只能提交一个请求,而http2能同时处理无数个请求,可以降低连接的数量,提高网络的吞吐量。3,头部压缩http2通过gzip与compress对头部进行压缩,并且在客户端与服务端各维护了一份头部索引表,只需要根据索引id就可以进行头部信息的传输,缩小了头部容量,间接提升了传输...
2019-09-07 16:26:37
4713
1
转载 Vue子组件调用父组件的方法
Vue中子组件调用父组件的方法,这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> import c...
2019-09-03 22:03:43
143862
20
转载 详解vue的diff算法
前言我的目标是写一个非常详细的关于diff的干货,所以本文有点长。也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角。先来了解几个点...1. 当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块do...
2019-08-31 18:00:55
202
转载 grid网格布局
前言现在我们大家在实际的开发中,可能用的最多的就是flex布局,当然还有浮动和定位,除此之外,这两年一直听到网格布局是趋势,即grid布局,但是项目中没有太多的应用,所以特此总结一下,希望对大家也对我自己有帮助。给大家一个直接的效果体验一下:网格布局:就是一个容器内部由一个个的项目组成,是一个二维布局,接下来,我们就会围绕 容器 和项目 来介绍网格布局,目录...
2019-07-29 09:48:15
619
转载 react jsx事件获取event对象
文章目录文章参考一、使用bind函数获取event对象二、 箭头函数获取event对象三、使用高阶函数获取event对象文章参考React学习–JSX与react事件下面我根据使用难易的顺序做了下面三个例子一、使用bind函数获取event对象react事件参数的传递通过绑定来实现,在传递时,绑定的this在前,参数在后,在定义函数时,事件对象e要放在最后/** * 删...
2019-06-24 10:26:27
2339
1
转载 开发 react 应用最好用的脚手架 create-react-app
在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧。大家都是用webpack + es6来结合react开发前端应用。这个时候,我们可以手动使用npm来安装各种插件,来从头到尾自己搭建环境。比如:npm install react react-dom --savenpm install babel babel-loader bab...
2019-06-20 16:07:42
343
转载 vuex中mapState、mapMutations、mapAction的理解
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用mapState辅助函数帮助我们生成计算属性。// 在单独构建的版本中辅助函数为 Vuex.mapStateimport { mapState } from 'vuex' export default { // ... computed: mapState({ ...
2019-06-12 11:41:46
2933
1
转载 同源策略、跨域解决方案
1、先来说说什么是源• 源(origin)就是协议、域名和端口号。以上url中的源就是:http://www.company.com:80若地址里面的协议、域名和端口号均相同则属于同源。以下是相对于http://www.a.com/test/index.html的同源检测• http://www.a.com/dir/page.html----成功• http://www.chil...
2019-06-06 18:29:23
304
转载 TCP三次握手和四次挥手
TCP有6种标示:SYN(建立联机)ACK(确认)PSH(传送)FIN(结束)RST(重置)URG(紧急)一、TCP三次握手 第一次握手 客户端向服务器发出连接请求报文,这时报文首部中的同部位SYN=1,同时随机生成初始序列号seq=x,此时,TCP客户端进程进入了 SYN-SENT(同步已发送状态)状...
2019-06-03 16:12:14
155
转载 全面解析Vue.nextTick实现原理
vue中有一个较为特殊的API,nextTick。根据官方文档的解释,它可以在DOM更新完毕之后执行一个回调,用法如下:// 修改数据vm.msg='Hello'// DOM 还没有更新Vue.nextTick(function(){// DOM 更新了})尽管MVVM框架并不推荐访问DOM,但有时候确实会有这样的需求,尤其是和第三方插件进...
2019-05-17 09:09:08
1000
转载 Js正则表达式数字或者带小数点的数字
function chk() { var patrn = /^\d+(\.\d+)?$/; var result = true; $("input[type=text]").each(function () { if (!patrn.exec(this.value)) { ...
2019-05-17 09:04:52
16955
转载 HTTP 2.0与HTTP 1.1区别
1、什么是HTTP 2.0HTTP/2(超文本传输协议第2版,最初命名为HTTP 2.0),是HTTP协议的的第二个主要版本,使用于万维网。HTTP/2是HTTP协议自1999年HTTP 1.1发布后的首个更新,主要基于SPDY协议(是Google开发的基于TCP的应用层协议,用以最小化网络延迟,提升网络速度,优化用户的网络使用体验)。2、与HTTP 1.1相比,主要区别包括HT...
2019-04-03 16:51:39
3667
原创 正排索引和倒排索引---面试题试解
一个后端朋友发出来的两道面试题,说是考察正排索引和倒排索引的算法(我朋友面试的是大数据),想着用js来试解,废话不多说,上题看题目对于前端同学来说没有读取本地txt文件的方法(nodeJS除外),所以我们暂且把数据源作为一个对象数组来处理:格式如下:let obj = {'001':['aaa','bbb','ccc','ddd'],'002':[ 'fff','eee','ccc'...
2019-03-26 17:37:22
1271
1
转载 回流与重绘:CSS性能让JavaScript变慢?
byzhangxinxufromhttp://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=600目前有有关此文章的介绍(这里),但是只是部分内容。本文为全文翻译,并提供其他的一些页面性能优化方面的资源,希望能对reflow的进一步认识有所帮助。我之前还翻译过一篇关于reflow的文章,您有兴趣可以看看(点击...
2019-03-25 18:07:38
395
转载 CSS水平垂直居中的几种方法
直接进入主题!一、脱离文档流元素的居中方法一:margin:auto法CSS代码:div{ width: 300px; height: 300px; position: relative; border: 1px solid #465468; } img{ position: absolute; marg...
2019-03-14 15:47:46
280
原创 日常填坑系列-url参数的类型一定为字符串
日常填坑系列----爬过的坑往后都会成为你宝贵的经验;背景:上个页面跳转后带过来一个id,本页面是用swiper展示产品信息,要根据这个id去遍历产品列表取到下标index,用swiper的slideTo方法实现展示相关的产品信息。从url取到id参数值后let index = list.map(item => item.id).indexOf(id);坑就在取的参数"i...
2019-03-08 10:10:30
2924
转载 vue-router 路由动态传参 query和params的区别
最近空闲一段时间,就没事看了看vue-router的一些知识,想起了之前做项目遇到的一些不解,也就是当初刚入门,文档看的不详细,理解的不全面导致的。现在虽然不怎么会犯这样的错误了,但是还是写下来,记录一下,也方便有需要的朋友查阅,共勉吧。如果能帮到你,那就更好了.../data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params/data?id=1 /data?i...
2019-03-01 09:06:20
1020
转载 百度员工离职总结:如何做个好员工?(转)
2014 年 7 月 4 日,我从百度离职了。 这是第一次,我不是因为和老板闹翻而离职; 这是第一次,我带着晋升的喜悦而离职; 这是第一次,我带着满满的收获而离职。 我曾经认为,我永远不会成为一个好员工,因为我太独、太挑剔、不喜欢听话的好孩子、而且讨厌一切想要改变我的人。但是三年过去,我改变了不少,我必须承认,所谓“进步”的过程,就是被认可的过程,也是被“驯化”的过程...
2019-02-19 15:28:47
404
转载 彻底理解浏览器缓存机制
先看上图,如果对图中的(a)(b)(c)(d)四个过程的处理方式都很清楚了,那么请不用再看本文了。两个概念 强缓存 用户发送的请求,直接从客户端缓存中获取,不发送请求到服务器,不与服务器发生交互行为。 协商缓存 用户发送的请求,发送到服务器后,由服务器判定是否从缓存中获取资源。 两者共同点:客户端获得的数据最后都是从客户端缓存中获得。 两者的区别:从名...
2019-01-23 17:58:18
405
转载 理解异步JavaScript
写在文章前这篇文章是翻译自Sukhjinder Arora的 Understanding Asynchronous JavaScript。这篇文章描述了异步和同步JavaScript是如何在运行环境中,使用调用栈,消息队列,作业队列,以及事件循环来工作的。文章如有翻译不好的地方还望多多包涵。理解异步JavaScript众所周知,JavaScript 是单线程的编程语言,那就意味着在同一...
2018-12-10 11:16:56
175
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人