项目实例
文章平均质量分 86
猫老板的豆
旁观自己 善待朝夕
展开
-
优化SPA首屏加载速度
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节通过或者来计算出首屏时间// 方案一:});原创 2023-09-14 12:00:45 · 259 阅读 · 0 评论 -
如何一次性渲染十万条数据
虚拟滚动(也称为窗口化、无限滚动或按需加载)是一种优化技术,用于在大量数据需要渲染到滚动容器中时,仅渲染当前视口(viewport)内可见的部分数据,从而大大提高页面性能。它允许开发者在浏览器的绘制过程中同步执行动画或渲染操作,从而实现更高效的动画和渲染性能,这有助于避免强制同步布局和降低性能开销。在虚拟滚动中,需要维护一个与视口大小相对应的固定数量的 DOM 元素,并随着用户滚动动态地更新这些元素的内容。的技术来优化性能,只需要渲染少部分区域的内容,减少重新渲染组件和创建 dom 节点的时间。原创 2024-05-30 18:40:51 · 899 阅读 · 0 评论 -
假如有几十个请求,如何去控制并发?
创建一个请求队列,将所有的请求按照优先级或依赖关系放入队列中。这样可以确保请求按照预期的顺序执行,并有效地防止同时发送过多的请求。使用 async/await 和 Promise 结合队列(Queue)来实现请求的并发控制。浏览器的最大并发连接数限制因浏览器和版本而异,大多数浏览器限制每个域名的最大并发连接数为6个。当运行这个示例时,会看到请求按照预期的顺序执行,并且同时运行的请求数量不会超过设定的并发限制。上例中创建了一个 RequestQueue 类,它可以限制同时运行的请求数量。原创 2024-05-20 17:14:36 · 303 阅读 · 0 评论 -
图片懒加载
懒加载也叫做延迟加载、按需加载,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。这样可以减少初始页面的加载时间,提高网站的响应速度,尤其对于移动设备和网络条件较差的用户,可以显著地提高用户的体验。原创 2024-05-10 19:10:53 · 735 阅读 · 0 评论 -
前端大文件分块上传、断点续传
大文件上传是一个复杂的过程,尤其是在前端,我们需要考虑用户体验、网络状况、文件完整性等多个方面。以下是一个使用HTML5的File API和进行大文件分块上传的详解和示例代码。原创 2024-04-11 16:25:35 · 484 阅读 · 0 评论 -
js实现放大镜
效果图实现原理借助宽高等比例放大的两张图片,结合js中鼠标偏移量、元素偏移量、元素自身宽高等属性完成;左侧遮罩移动Xpx,右侧大图移动X*倍数px;其余部分就是用小学数学算一下就OK了。完整事例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"原创 2021-11-24 09:52:37 · 313 阅读 · 1 评论 -
轻松搭建自己专属CDN
一、背景前段时间笔者搭建一个博客系统放在服务器上,为了提高访问速度和减轻服务器访问压力,决定将页面中的静态资源使用 CDN 进行加速访问。二、选择方案常见的 CDN 方案有 BootCDN 和 jsDelivr,笔者选择后者。因为笔者编写的 jQuery 自定义插件,但无法上传到 BootCDN 上进行加速使用。而 jsDelivr 不同,它很强大,通过 GitHub 搭配 jsDelivr 可以搭建自己专属的 CDN 库。三、实战接下来将介绍 jsDelivr 与 GitHub 如何搭配使原创 2021-01-28 11:19:19 · 4457 阅读 · 0 评论 -
echarts map(地图) 省份名称居中显示
修改echarts中的china.js文件中省份经纬度,使省份名称居中显示。亲测可用,更新于2020-12-10china.js 点击下载修改前,省份名称并不居中显示:修改后:具体修改方法(替换china.js):china.js 点击下载vue项目替换:node_modules\echarts\map\js\china.js其他项目直接引入:<script src="../js/china.js"></script>...原创 2020-12-10 15:48:17 · 5706 阅读 · 1 评论 -
vue axios 导出功能
请求后台接口后台返回二进制流前端实现浏览器自动下载成exlce文件如下图:主要方法如下:/** * download方法 * @param {String} type [请求的方式] * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] * @param {String} fileTy...原创 2019-04-25 15:19:42 · 798 阅读 · 0 评论 -
微信浏览器返回并强制刷新
实现微信浏览器返回并强制刷新效果解决IOS上微信浏览器返回不刷新问题//方法一$(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(原创 2017-12-29 16:46:04 · 8809 阅读 · 0 评论 -
禁止微信浏览器长按出菜单(亲测可用)
禁止微信浏览器长按出菜单iso安卓 亲测可用img{ //元素不能成为鼠标事件的target pointer-events:none; -webkit-pointer-events:none; -ms-pointer-events:none; -moz-pointer-events:none;}原创 2018-01-11 12:10:49 · 7785 阅读 · 2 评论 -
JavaScript中浏览器打开或下载app
浏览器打开或下载app以下代码以打开百度贴吧app为例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="apple-itunes-app原创 2017-08-28 15:09:26 · 6124 阅读 · 0 评论 -
jquery点击其他地方隐藏菜单
JQ://点击其他地方隐藏菜单$.fn.autoHide = function(){ var ele = $(this); $(document).on('touchend',function(e){ if(ele.is(':visible') && (!$(e.target)[0].isEqualNode(ele[0]) && ele.has(e.target).原创 2017-12-23 16:10:58 · 932 阅读 · 0 评论 -
一个简单的提示框
CSS:/*提示框*/.dialog-box { max-width: 300px; background: #000; opacity: 0.8; color: #fff; display: inline-block; padding: 25px 35px; position: fixed; top: 40%; left:原创 2017-12-23 12:15:53 · 315 阅读 · 0 评论 -
一个简单的loading
一个简单的无图片loadingCSS(无图片):/*loading*/.preloader-indicator-modal {position:fixed;left:50%;top:40%;padding:0.4rem;transform:translate(-50%,-50%);;background:rgba(0,0,0,0.8);z-index:11000;border-radius:0.2原创 2017-12-23 11:33:52 · 732 阅读 · 0 评论 -
jQuery倒计时进度条
效果如下图:代码如下:<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery倒计时进度条</title> <script src="js/jquery.min.js" type="text原创 2017-12-14 10:00:29 · 2349 阅读 · 0 评论 -
JS实现文字向上无缝滚动轮播
效果图:全部代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-原创 2017-12-12 16:04:07 · 11861 阅读 · 7 评论 -
ajaxfileupload.js异步上传文件插件(完整demo)
ajaxfileupload.js异步上传文件插件HTML:<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" name="photo" class="file" id="fileField" size="28" value="业务员ID"><input type="button" value原创 2017-08-04 15:38:01 · 12896 阅读 · 0 评论 -
js简单时分秒毫秒倒计时
js简单时分秒毫秒倒计时效果图 直接copy就能运行<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>js时分秒毫秒倒计时</title> </head> <body> <div> <span id="_d">00原创 2017-09-19 19:02:36 · 11727 阅读 · 1 评论 -
手把手教你在Github Pages搭建自己写的页面
手把手教你在Github Pages搭建自己写的页面原创 2017-08-07 11:47:30 · 18322 阅读 · 6 评论 -
微信js-sdk分享详解及demo实例
步骤一:绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。点击查看大图 步骤二:引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js<script src="http://res.wx.qq.com/open/js/jweixin-1.原创 2017-08-16 15:31:54 · 19002 阅读 · 0 评论 -
关于微信自定义分享的链接、标题、描述、图片都未生效问题详解
之前写了一篇关于微信js-sdk分享详解及demo实例(图文并茂很详细)的文章 很多人有这样的问题,为什么debug都返回ok但微信自定义分享的链接、标题、描述、图片却都未生效先附上一段标准且通俗易懂的ajax(获取微信JSAPI的配置参数)var urls = window.location.href;$.ajax({ type: "GET", url: Global.p原创 2017-08-30 18:18:34 · 12402 阅读 · 1 评论 -
H5移动端判断手势滑动方向
移动端判断手势滑动方向原创 2017-08-23 17:55:37 · 2535 阅读 · 3 评论 -
JavaScript实现图片上传并预览并提交ajax(完整demo)
图片上传并预览HTML<div class="file-box"> <img id="preview" /> <input type="text" id="imgfield" class="txt" placeholder="预览"> <input type="file" name="file" id = "input_file" accept="image/gif,imag原创 2017-08-04 17:36:28 · 72813 阅读 · 19 评论 -
JS获取图片的原始尺寸和上传图片大小
JS获取图片的原始尺寸一、html5 中新的naturalWidth和naturalHeight属性在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性,分别为naturalWidth 和 naturalHeight属性,例子如下:var myimage = document.getElementById("myimage");var rw = myimage.naturalWidth;原创 2017-12-05 18:14:46 · 11945 阅读 · 0 评论 -
用原生javascript写出jquery中slideUp和slideDown效果
<body> <header id="header" style="height: 60px;background-color: #272c35;"></header> <input type="button" id="ipt_btn" value="slide" /> <script type="text/javascript"> var slide原创 2017-09-18 15:09:53 · 3333 阅读 · 0 评论 -
H5获取地理位置
H5获取地理位置<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />原创 2017-08-07 11:51:01 · 5845 阅读 · 0 评论 -
JavaScript判断是否为微信浏览器或支付宝浏览器
判断是否为微信浏览器或支付宝浏览器if (/MicroMessenger/.test(window.navigator.userAgent)) { alert('微信客户端'); } else if (/AlipayClient/.test(window.navigator.userAgent)) { alert('支付宝客户端');} else { alert('其原创 2017-08-04 17:52:07 · 13628 阅读 · 0 评论 -
jquery动态数字翻滚计数到指定数字的文字特效代码
动画效果: 具体代码:<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery动态数字翻滚计数到指定数字的文字特效代码</title> <script src="http://l原创 2017-10-16 14:51:11 · 3755 阅读 · 0 评论 -
jq文字无缝滚动代码(鼠标悬停停止滚动)
jq实现文字无缝滚动代码鼠标悬停停止滚动效果图 直接copy就能运行<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">原创 2017-09-19 17:51:52 · 5009 阅读 · 0 评论 -
纯css三角形 带边框
HTML:<p class="tooltip">定义:连接设备的用户数<br>当前:正在连接设备的用户数<br>今日:到最近整点时间连接设备的用户数<br>昨日:昨天24小时内所有连接设备的用户数<br>最高:在历史记录中,展示连接设备用户数<br>最高值及发生日期</p>CSS:.tooltip{position:absolute;bottom:-148px;right:0;background-原创 2017-08-04 15:27:56 · 5795 阅读 · 0 评论