
前端知识加深
前端知识加深
优惠券已抵扣
余额抵扣
还需支付
¥39.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
紫微前端
打造前端的百科全书
展开
-
echars 图表-好看的颜色汇总
【代码】echars 图表-好看的颜色汇总。原创 2024-12-25 16:52:08 · 39 阅读 · 0 评论 -
含有企业微信扫码登录的界面,被重定向为http://xxx.xx.com/xxxxx/[object%20object],解决方案如下
含有企业微信扫码登录的界面,被重定向为http://xxx.xx.com/xxxxx/[object%20object],解决方案如下原创 2024-04-09 10:23:35 · 270 阅读 · 0 评论 -
iview-大型表单(含table表单)表单元素出错定位
【代码】iview-大型表单(含table表单)表单元素出错定位。原创 2023-10-24 15:14:22 · 157 阅读 · 0 评论 -
iview-Table组件横向滚动纵向滚动到指定位置
【代码】iview-Table组件横向滚动到规定位置。原创 2023-10-23 16:05:45 · 422 阅读 · 0 评论 -
函数节流的写法
/** * @desc 函数节流 * @param func 函数 * @param wait 延迟执行毫秒数 * @param type 1 表时间戳版,2 表定时器版 */export const throttle = (func, wait, type) => { if (type === 1) { var previous = 0; } else if (type === 2) { var timeout; } return function() .原创 2021-10-12 17:37:32 · 386 阅读 · 1 评论 -
颜色配色搭配
原创 2021-09-13 09:28:34 · 432 阅读 · 0 评论 -
前端人工智能-身高体重预测
<script src="js/tf.js"></script><script src="js/vis.js"></script><script> window.onload = async() => { const heights = [150, 160, 170]; const weights = [40, 50, 60]; tfvis.render.scatterplot.原创 2021-03-17 11:23:26 · 1093 阅读 · 0 评论 -
不重复的随机数简单示例
<script> var arr=[]; function random(){ var num=Math.floor(Math.random()*30); if(arr.indexOf(num)==-1){ console.log(num+1) arr.push(num) return num; }else{ if(arr.length.原创 2021-03-15 10:28:01 · 385 阅读 · 0 评论 -
经常问到的前端面试题
JS相关JS原型及原型链functionPerson(){}Person.prototype.name='Zaxlct';Person.prototype.sayName=function(){alert(this.name);}varperson1=newPerson();//JS 在创建对象的时候,都有一个__proto__的内置属性,用于指向创建它的构造函数的原型对象。//每个对象都有__proto__属性,但只有函数对象才有prototype...原创 2021-10-09 16:14:46 · 409 阅读 · 0 评论 -
赢在CSDN-如何在csdn赚到钱
前言网上有太多的关于副业的介绍,乍一看,觉得样样可行,实际一操作才发现,那是镜中月水中花,非常难以实施,而且大部分都需要成本,大家作为程序员,深知这一行业的职业寿命太短暂,随着技术更新速度加快,和年龄的增长,工作越来越不好找,焦虑便由此产生,中年危机时时刻刻都在煎熬着内心。赢在CSDN之前就一直在找自己力所能及的副业,后来在一次做项目的过程中,需要做3D方面的应用,这时就在网上搜索相应的教程,结果大量课程都是在CSDN上,而且价格比较亲民并且销量还都挺大,学习的人数多,当时觉得在CSDN上录制课原创 2022-03-02 09:54:34 · 4219 阅读 · 1 评论 -
济南程序员遇到的倒霉事,不看后悔
济南某公司1.每周周六无偿加班,平时也都无偿加班到7点左右无加班费,平台比较老,出差报销很慢,拖2周左右,招聘大量的实习生,项目没有效率,加班严重,面试会问接不接受加班,公司很好,别听别人瞎说2.当时入职在济南总部,派我去东营分公司,那里就是个黑砖窑,虽然管吃管住,但是每天早晨8:00上班,晚上11.00之后甚至更晚下班,两周回一次济南,周末也得去上班,其他分公司不清楚是不是也这样济南某公司拖欠至少五个人工资,员工正常离职需提前一个月辞职公司不给发工资,强制加班,老板说你们没事来加班啊,工作原创 2021-01-20 15:14:51 · 937 阅读 · 0 评论 -
微信朋友圈自动刷评论
先准备好 auto.js先到官方网站下载auto.js App下载地址https://pro.autojs.org/(官方是收费的,想要免费的可以留言) var appName = "微信"; launchApp(appName); sleep(5000); var faxian = text("发现").findOnce(); click(faxian.bounds().centerX(), faxian.bounds().centerY()); ...原创 2021-07-07 15:19:43 · 2284 阅读 · 3 评论 -
剪贴板操作 Clipboard API 教程
一、简介浏览器允许 JavaScript 脚本读写剪贴板,自动复制或粘贴内容。一般来说,脚本不应该改动用户的剪贴板,以免不符合用户的预期。但是,有些时候这样做确实能够带来方便,比如"一键复制"功能,用户点击一下按钮,指定的内容就自动进入剪贴板。目前,一共有三种方法可以实现剪贴板操作。Document.execCommand()方法 异步的 Clipboard API copy事件和paste事件本文逐一介绍这三种方法。二、Document.execCommand() 方法原创 2021-10-08 11:14:25 · 929 阅读 · 0 评论 -
jquery-滑块插件
资源下载地址:https://download.csdn.net/download/liuhao9999/15543268原创 2021-03-03 15:15:33 · 438 阅读 · 0 评论 -
VUE组件注册全局使用
设置一个index.js在main.js中这样就可以实现全局调用原创 2021-03-09 09:12:51 · 436 阅读 · 0 评论 -
javascript点击元素外部事件
//声明需要点击元素外部事件的数组var outsideClick=[{select:"#aa",callback:function(){alert(55555)}}]//全局的点击事件 document.addEventListener("click",function(e){//每次点击循环所有数组项 for(var i=0,len=outsideClick.length;i<len;i++){//判断点击的元素是否在需要外部事件元.原创 2021-03-04 10:35:19 · 1279 阅读 · 0 评论 -
房贷等额本息
// benJin:本金 nianLiLV:年利率 month:多少个月function fangDaiDengErBenXi(benJin, nianLiLv, month) { var yueLiLv = nianLiLv / 12 return benJin * yueLiLv * (Math.pow((1 + yueLiLv), month)) / (Math.pow((1 + yueLiLv), month) - 1)}原创 2022-02-21 08:22:20 · 189 阅读 · 0 评论 -
JavaScript 侦测手机浏览器的五种方法
一、navigator.userAgent最简单的方法就是分析浏览器的 user agent 字符串,它包含了设备信息。JS 通过navigator.userAgent属性拿到这个字符串,只要里面包含mobi、android、iphone等关键字,就可以认定是移动设备。if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { // 当前设备是移动设备}// 另一种写法if ( navigator.userAgent.ma原创 2021-10-08 11:12:30 · 867 阅读 · 0 评论 -
移动端-MUI-滑块-增减按钮
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="app...原创 2021-03-03 15:09:29 · 630 阅读 · 0 评论 -
微信朋友圈自动点赞---一个也不能少
先准备好 auto.js先到官方网站下载auto.js App下载地址https://pro.autojs.org/(官方是收费的,想要免费的可以留言) // 等待获取无障碍权限 auto.waitFor(); // 打开微信 var appName = "微信"; launchApp(appName); sleep(5000); // 点击发现 var faxian = text("发现").findOnce();...原创 2021-07-07 15:10:16 · 877 阅读 · 1 评论 -
javascript 日期工具汇总
let Utils = { /** * 是否为闫年 * @return {Boolse} true|false */ isLeapYear: function(y) { return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0; }, /** * 返回星期数 * @return {Number} */ getWhatDay: function(year, month, day) .原创 2021-10-12 17:35:32 · 415 阅读 · 0 评论 -
如何成为前端架构师
前端架构师学习的好去处,本人做一下推荐,收获颇丰https://edu.csdn.net/course/detail/31501?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161015862616780255237618%2522%252C%2522scm%2522%253A%252220140713.130102334.wap%255Fcourse.%2522%257D&request_id=161015862616780255原创 2021-01-10 07:49:25 · 839 阅读 · 0 评论 -
新的 CSS 功能伪类选择器:is()和:where()
在编写 CSS 时,有时您可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如,如果您想对<b>标题元素中找到的任何标签进行颜色调整,您可以编写:h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b { color: hotpink;}相反,您可以使用:is()并提高易读性,同时避免使用长选择器::is(h1,h2,h3,h4,h5,h6) > b { color: hotpi原创 2021-10-11 17:00:10 · 833 阅读 · 0 评论 -
获取给定一段文字的长度和高度
function getTextWidthAndHeight(str) { var span = document.createElement("span"); span.innerHTML = str; span.style.fontSize = "12px"; span.style.lineHeight = "1em"; span.style.padding = "0px"; span.style.mar..原创 2022-05-17 16:26:28 · 643 阅读 · 0 评论 -
6-6 快速播放音频和视频预加载
更快的播放开始意味着更多的人观看您的视频或收听您的音频。这是众所周知的事实。在本文中,我将探讨可用于通过根据您的用例主动预加载资源来加速音频和视频播放的技术。致谢:版权 Blender Foundation |www.blender.org。我将描述预加载媒体文件的三种方法,从它们的优缺点开始。 这很棒... 但... 视频预加载属性 易于用于托管在 Web 服务器上的唯一文件。 浏览器可能会完全忽略该属性。 当 HTML 文档被完全加载和解析后,资源获取开始。.原创 2021-06-24 09:49:42 · 1463 阅读 · 0 评论 -
4-3 如何延迟加载视频
与图像元素一样,您也可以延迟加载视频。视频通常与元素一起加载(尽管出现了一种替代方法,但实现有限)。但是,如何延迟加载取决于用例。让我们讨论几个场景,每个场景都需要不同的解决方案。对于不自动播放的视频#对于由用户启动播放的视频(即不自动播放的视频),可能需要在元素上指定preload属性:<video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one原创 2021-06-24 09:16:42 · 682 阅读 · 0 评论 -
1-2 如何测量速度?
由于用户设备、网络连接和其他因素的差异,实际性能变化很大。例如,如果您在办公室使用有线网络连接加载您的网站,并将其与在咖啡店使用 WiFi 加载的负载进行比较,体验可能会大不相同。市场上有许多工具可以帮助您收集实验室或现场数据以评估页面性能。实验室数据与现场数据#实验室数据是在具有预定义设备和网络设置的受控环境中收集的性能数据,而现场数据是从用户在野外体验的真实页面加载中收集的性能数据。每种类型都有自己的优势和局限性。实验室数据提供可重现的结果和调试环境,但可能无法捕捉现实世界的瓶颈,也无法原创 2021-06-24 08:35:55 · 136 阅读 · 0 评论 -
3-3 使用Imagemin压缩图片
你为什么要关心?#未压缩的图像会用不必要的字节使页面膨胀。右边的照片比左边的小 40%,但对于普通用户来说可能看起来是一样的。测量#运行 Lighthouse 以检查通过压缩图像来改善页面加载的机会。这些机会列在“有效编码图像”下:Lighthouse 目前仅报告以 JPEG 格式压缩图像的机会。图像最小#Imagemin 是图像压缩的绝佳选择,因为它支持多种图像格式,并且很容易与构建脚本和构建工具集成。Imagemin 可用作CLI和npm 模块。一般来说,npm 模原创 2021-06-24 09:00:12 · 1768 阅读 · 1 评论 -
3-7 WebP 图片的奥秘
你为什么要关心?#WebP 图像比它们的 JPEG 和 PNG 图像小——通常文件大小减少 25-35%。这减少了页面大小并提高了性能。YouTube 发现切换到 WebP 缩略图可使页面加载速度提高 10%。 Facebook的经历为JPEG为25-35%,节省的文件大小和文件大小节省80%的PNG图像时,他们转而使用WebP的。WebP 是 JPEG、PNG 和 GIF 图像的绝佳替代品。此外,WebP 提供无损和有损压缩。在无损压缩中,不会丢失任何数据。有损压缩可减小文件大小,但可能...原创 2021-06-24 09:08:32 · 367 阅读 · 0 评论 -
4-5 使用 lazysizes 来延迟加载图像
浏览器级延迟加载现已可用!请参阅Web文章的内置延迟加载以了解如何使用该loading属性并利用 lazysizes 作为尚不支持它的浏览器的后备。延迟加载是在需要而不是提前加载资源的策略。这种方法在初始页面加载期间释放资源,并避免加载从未使用过的资产。在初始页面加载期间屏幕外的图像是此技术的理想候选者。最重要的是,lazysizes使这是一个非常简单的实现策略。什么是懒惰尺寸?#lazysizes是最流行的延迟加载图像库。它是一个脚本,可以在用户浏览页面时智能地加载图像,并对用户很快会.原创 2021-06-24 09:21:58 · 280 阅读 · 0 评论 -
6-1 如何利用内容交付网络 (CDN)
内容交付网络 (CDN) 通过使用分布式服务器网络向用户交付资源来提高站点性能。因为 CDN 减少了服务器负载,所以它们降低了服务器成本并且非常适合处理流量高峰。本文讨论 CDN 的工作原理,并提供有关选择、配置和优化 CDN 设置的与平台无关的指南。概述#内容交付网络由经过优化以快速向用户交付内容的服务器网络组成。尽管 CDN 可以说以提供缓存内容而闻名,但 CDN 也可以改进不可缓存内容的交付。一般来说,CDN 提供的站点越多越好。从高层次来看,CDN 的性能优势源于几个原则:CDN 服务器原创 2021-06-24 09:37:31 · 330 阅读 · 0 评论 -
5-3 如何删除未使用的代码
像npm这样的注册表允许任何人轻松下载和使用超过50 万个公共包,从而使 JavaScript 世界变得更好。但是我们经常包括我们没有充分利用的库。要解决此问题,请分析您的包以检测未使用的代码。然后删除未使用和不需要的库。分析您的捆绑包#DevTools 可以轻松查看所有网络请求的大小:按Control+Shift+J(或Command+Option+J在 Mac 上)打开 DevTools。 单击网络选项卡。 选中禁用缓存复选框。 重新加载页面。DevTools 中的Coverag原创 2021-06-24 09:27:25 · 517 阅读 · 0 评论 -
6-4 尽早建立网络连接以提高感知页面速度
在浏览器可以从服务器请求资源之前,它必须建立连接。建立安全连接包括三个步骤: 查找域名并将其解析为 IP 地址。 建立与服务器的连接。 加密连接以确保安全。 在这些步骤中的每一步中,浏览器都会向服务器发送一条数据,然后服务器会发回响应。从起点到终点再返回的旅程称为往返。根据网络状况,单次往返可能需要大量时间。连接设置过程可能最多涉及三个往返——在未优化的情况下可能涉及更多。提前处理好所有这些会让应用程序感觉更快。这篇文章解释了如何通过两个资源提示实现这一目标:和.#原创 2021-06-24 09:43:58 · 191 阅读 · 0 评论 -
3-2 选择图像正确的压缩级别
图像通常占网页上下载的大部分字节,并且还经常占据大量的视觉空间。因此,优化图像通常可以为您的网站带来一些最大的字节节省和性能改进:浏览器必须下载的字节越少,客户端带宽的竞争就越小,浏览器下载和呈现有用的速度就越快屏幕上的内容。图像优化既是一门艺术又是一门科学:一门艺术是因为对于如何最好地压缩单个图像没有一个明确的答案,而一门科学是因为有许多成熟的技术和算法可以显着减小图像的大小。为您的图像找到最佳设置需要在许多方面进行仔细分析:格式功能、编码数据的内容、质量、像素尺寸等。优化矢量图像#所有现代浏原创 2021-06-24 08:58:17 · 272 阅读 · 0 评论 -
8-2 如何识别缓慢的第三方 JavaScript
作为开发人员,您通常无法控制站点加载哪些第三方脚本。在您可以优化第三方内容之前,您必须进行一些调查工作,以找出使您的网站变慢的原因。????️在这篇文章中,您将学习如何使用Lighthouse和Chrome DevTools来识别缓慢的第三方资源。这篇文章介绍了越来越强大的技术,这些技术最好结合使用。如果你只有5分钟#LighthousePerformance 审核可帮助您发现加快页面加载速度的机会。缓慢的第三方脚本可能会出现在“减少 JavaScript 执行时间”和“避免大量网络负载审计”下原创 2021-06-24 10:01:05 · 207 阅读 · 0 评论 -
7-1 推迟非关键 CSS
CSS 文件是渲染阻塞资源:它们必须在浏览器渲染页面之前加载和处理。包含不必要的大样式的网页需要更长的时间来呈现。在本指南中,您将学习如何推迟非关键 CSS,以优化关键渲染路径和改进首次内容绘制 (FCP)。以次优方式加载 CSS#以下示例包含一个带有三个隐藏文本段落的手风琴,每个文本段落的样式都不同:此页面请求具有八个类的 CSS 文件,但并非所有类都是呈现“可见”内容所必需的。本指南的目标是优化此页面,以便仅同步加载关键样式,而其他样式(如应用于段落的样式)以非阻塞方式加载。.原创 2021-06-24 09:52:15 · 273 阅读 · 0 评论 -
6-2 什么是优先加载资源
并非通过线路发送到浏览器的每个字节都具有相同程度的重要性,浏览器知道这一点。浏览器具有启发式方法,可以尝试对最重要的资源进行最佳猜测,首先加载,例如在脚本和图像之前加载 CSS。也就是说,与任何启发式方法一样,它并不总是奏效。浏览器可能会做出错误的决定,通常是因为它当时没有足够的信息。有方法,你可以影响使用此决策,和。浏览器中的默认优先级#浏览器根据资源的重要性为不同类型的资源分配不同的相对优先级。因此,例如,您页面中的标签将以高优先级(低于 CSS 的最高优先级)加载到 Chrome 中,但如原创 2021-06-24 09:39:46 · 222 阅读 · 0 评论 -
5-5 为现代浏览器提供现代代码以加快页面加载速度
构建在所有主要浏览器上都能正常运行的网站是开放网络生态系统的核心原则。但是,这意味着需要额外的工作来确保您编写的所有代码在您计划定位的每个浏览器中都受支持。如果您想使用新的 JavaScript 语言功能,您需要将这些功能转换为向后兼容的格式,以供尚不支持它们的浏览器使用。Babel是使用最广泛的工具,可以将包含较新语法的代码编译成不同浏览器和环境(例如 Node)可以理解的代码。本指南假设您正在使用 Babel,因此您需要按照设置说明将其包含到您的应用程序中(如果您还没有的话)。如果您在应用中使用 w原创 2021-06-24 09:31:48 · 149 阅读 · 0 评论 -
5-1 使用 PRPL 模式应用即时加载
PRPL 是一个首字母缩写词,它描述了一种用于使网页加载并变得更快的交互模式:推送(或预加载)最重要的资源。 尽快渲染初始路线。 预缓存剩余资产。 延迟加载其他路由和非关键资产。在本指南中,了解这些技术中的每一种如何组合在一起,但仍然可以独立使用以实现性能结果。使用 Lighthouse 审核您的页面#运行 Lighthouse 以识别与 PRPL 技术一致的改进机会:按Control+Shift+J(或Command+Option+J在 Mac 上)打开 DevTools。 单击原创 2021-06-24 09:24:30 · 316 阅读 · 0 评论 -
2-2 您的第一个性能预算
当您设定个人、企业或家庭预算时,您就是在设定支出限额并确保您保持在限额内。性能预算的工作方式相同,但适用于影响网站性能的指标。通过建立并执行性能预算,您可以确保您的网站将尽快呈现。这将为您的访问者提供更好的体验,并对业务指标产生积极影响。以下是如何通过几个简单的步骤来定义您的第一个性能预算。初步分析#如果您想提高现有网站的性能,请先确定最重要的页面。例如,这些可能是用户流量最高的页面或产品登陆页面。确定关键页面后,就该分析它们了。首先,我们将关注最能衡量用户体验的时间里程碑。在 Ch原创 2021-06-24 08:39:25 · 170 阅读 · 0 评论