- 博客(22)
- 资源 (35)
- 收藏
- 关注
RSS订阅原创 前端部署如何提高性能
在二者部署的时间间隔内，如果有用户访问页面，就会在新的页面结构中加载旧的资源，并且把这个旧版本的资源当做新版本缓存起来，其结果就是：用户访问到了一个样式错乱的页面，除非手动刷新，否则在资源缓存过期之前，页面会一直执行错误。看上图，用文件的摘要信息来对资源文件进行重命名，把摘要信息放到资源文件发布路径中，这样，内容有修改的资源就变成了一个新的文件发布到线上，不会覆盖已有的资源文件。全套做下来，就是相对比较完整的静态资源缓存控制方案了，而且，还要注意的是，静态资源的缓存控制要求在。
2024-04-16 09:14:42
720
原创 防止狗上沙发，写一个浏览器实时识别目标检测功能
该方案通过以下步骤实现了一个基于网页的实时物体检测系统，专门用于识别画面中的狗并播放特定音频以驱赶它离开沙发。具体实现过程包括以下几个核心部分：调用摄像头：使用浏览器提供的 navigator.mediaDevices.getUserMedia API 获取用户授权后调用手机摄像头，并将视频流设置给 video 元素展示。加载物体检测模型：使用 TensorFlow.js 和预训练的 COCO-SSD MobileNet V2 模型进行对象检测，加载模型后赋值给 dogDetector 变量。
2024-04-10 09:58:42
1667
1
原创 前端Chrome调试技巧最全汇总
console占位符描述%cCSS样式占位符，值就是CSS样式，如下示例，可用来自定义log的样式%oor%O打印 JavaScript 对象。在审阅器点击对象名字可展开更多对象的信息。%dor%i打印整数。支持数字格式化。例如，console.log("Foo %.2d", 1.1) 会输出有先导 0 的两位有效数字：Foo 01。%s打印字符串。%f打印浮点数。支持格式化，比如 console.log("Foo %.2f", 1.1) 会输出两位小数：Foo 1.10。
2024-04-09 08:41:38
869
原创 数字人解决方案——Wav2lip本地部署
执行安装包.bat命令 ，本地化安装运行环境包，launcher.py，安装包.bat,代码在文章末尾，复制到Wav2lip文件夹下新建文件，复制源码进去即可。下载地址：https://www.adrianbulat.com/downloads/python-fan/s3fd-619a316812.pth。将下载的模型文件放置在face_detection/detection/sfd目录下，并重命名为s3fd.pth。使用conda创建新的虚拟环境并激活。准备Wav2Lip模型文件。
2024-04-08 08:48:02
703
原创 说说我为啥不喜欢用 forEach
在箭头函数中，this关键字引用的是定义该函数时所在的对象。在普通函数中，this关键字引用的是调用该函数的对象。如果需要确保this关键字的作用域正确，可以使用bind()方法来绑定函数的作用域。但是，在使用普通函数或箭头函数作为参数时，方法会等待异步函数完成并返回结果，因此我们可以正确地处理异步函数。方法来绑定函数的作用域，或使用箭头函数来定义回调函数。方法中使用普通函数时，该函数的作用域并不是调用。方法来绑定函数的作用域，将该函数的作用域绑定到。关键字引用的是定义该函数时所在的对象。
2024-04-07 08:39:43
616
原创 前端接口防止重复请求实现方案
前言前段时间老板心血来潮，要我们前端组对整个的项目都做一下接口防止重复请求的处理（似乎是有用户通过一些快速点击薅到了一些优惠券啥的）。。。听到这个需求，第一反应就是，防止薅羊毛最保险的方案不还是在服务端加限制吗？前端加限制能够拦截的毕竟有限。可老板就是执意要前端搞一下子，行吧，搞就搞吧。虽然大部分的接口处理我们都是加了的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做。
2024-04-03 09:50:38
898
原创 理解Three.js的相机
Three.js创建的场景是三维的，而我们使用的显示器显然是二维的，相机就是抽象的定义了三维空间到二维显示器的投影方式。canvas的宽度设置为了600px*400px，若要保持横竖比例，照相机的水平距离是6、垂直距离是4（小编理解的类似给DOM元素设置背景图片一样，图片的宽高比要与元素的宽高比一致，不然图片会变形）。相机位置变化后（右上角轻微移动），观察物体的方向也改变了，故设置它看向原点方向，会有俯视感，看到更多的线；而设置相机初始化参数，只是改变了视景体，相机位置并未变化，一直看向原点，因此无变化。
2024-04-02 08:30:07
965
原创 前端 JavaScript 动画库
JavaScript 动画库已成为开发人员的必备工具，旨在用引人入胜的交互式视觉元素丰富 Web 应用程序。这些库的发展大大简化了动画过程，使其更易于访问。通过利用适当的库，开发人员可以制作令人印象深刻的动画，增强网站和应用程序的参与度和用户体验。动画有可能极大地改变网站的美学和氛围。当明智地利用它们来增强用户体验时，它们将成为宝贵的资源。动画在吸引注意力和增加网站停留时间方面特别有效，从而增加流量。
2024-04-01 08:33:00
1028
原创 前端是什么
3.1 互联网技术岗位详解，涉及到前段开发、后端开发、移动端开发、大数据、项目管理、测试、运维、技术管理等八大领域。2、熟悉W3C标准和各主流浏览器在前端开发中的差异，能熟练运用DIV+CSS，提供针对不同浏览器的前端页面解决方案；4、与产品、后台开发人员保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作；5、了解服务器端的相关工作，在交互体验、产品设计等方面有自己的见解。3、负责相关产品的需求以及前端程序的实现，提供合理的前端架构；2.1 前端设计和前端架构。2.2 前端开发分类。
2024-03-29 08:46:56
1162
原创 JavaScript 中的 7 个逆天 console 方法
在浏览器控制台上支持清空，但 Node 终端支持度不够，调用该方法将不会产生任何效果（也不会报错）。来自哪里呢，这是计数器的标签，在count方法里面有一个内部字典，其中包含每个标签键的计数器值。循环次数比较少时 for 循环性能是最差的，当循环次数变大时，性能优于另外两种循环。里面每个新标签从0开始计数，每次调用后，它将计数器加1并记录它...: 可以很轻松的将对象数组显示为表格，每个对象一行，每个属性一列。这是将一堆控制台信息组合在一起的绝佳组合，通过缩进优化日志展示。方法将标签的内部计数器重置为0。
2024-03-28 09:24:06
522
原创 微信⼩程序嵌套H5⽹⻚
微信⼩程序以其轻量级、即⽤即⾛的特点在移动端应⽤中占据了⼀席之地。但在某些场景下，我们可能需要在⼩程序中嵌套H5⽹⻚来满⾜特定的功能需求。本⽂将探讨微信⼩程序嵌套H5⽹⻚时遇到的技术问题、提供解决⽅案，并通过代码示例展示如何实施，最后分析其与原⽣小程序的优劣势。
2024-03-26 08:46:27
583
原创 10 个 JavaScript 单行代码
在使用需要一定程度随机化的算法时，您经常会发现洗牌数组是一项非常必要的技能，在 JavaScript 中，我们没有像 python 那样的模块，如果您希望显示的内容尊重使用您网站的人的配色方案，JavaScript 包含一种检测某人是否正在使用深色模式的方法，以便您可以相应地调整颜色。您可以在互联网上找到各种解决方案，但下面的解决方案可能是最小和最智能的解决方案之一。尚未被某些主流浏览器支持，并且定义它的规范尚未被任何标准组织采用（具体来说，它不是W3C或WHATWG发布的任何规范的一部分）。
2024-03-25 08:32:48
395
原创 什么是WebGL和为什么用Three.js
Three.js是一个在浏览器里创造3D内容的 JavaScript库，它让我们能够更加轻松的为网页创建3D体验。
2024-03-22 08:51:26
1010
原创 Threejs 开发技巧
19. 着色器中尽量不用Perlin noise，会影响性能，除非用在动画中。可以使用烘焙的灯光或者自带的AmbientLight, DirectionalLight。如果变量不需要改变，我们使用全局定义代替在uniforms定义。20. 着色器代码中尽量避免使用if语句，用 clamp代替。当把模型进行UV拆分的时候，删除隐藏的面，并应用缩放。如果添加或者删除灯光，所有相关的材质都将重新编译。6. 少用阴影，可以用烘培的阴影替代。如果需要顶点动画，在顶点着色器里进行。10. 贴图 Textures。
2024-03-21 17:28:38
248
原创 前端项目如何准确预估个人工时
可能有同学觉得自己就是个小码农甚至因为自己是外包，不敢发表自己的想法和见解，其实大可不必，只要你就事论事，有理有据，完全可以大方说出来，你不说出来，你永远只能从自己的角度看这个问题，你无法确认自己是对的还是错的。没有考虑思考时间，对于复杂的业务逻辑，或者没做过的界面形态，或者复杂的界面形态等，必须将思考时间计算进来，或者说，在已经基本想明白怎么去实现的基础上，再去评估工时。不要duang的一下，对整个界面/模块进行评估，应该对行列，表单项，逻辑点，进行评估，然后将总的时间加起来，就是这个界面的预估工时。
2024-03-18 09:56:44
1002
原创 前端入职第一天的工作环境搭建
办理入职入职当天，HR小姐姐会带领你签署入职合同、办理员工档案（企业如有经营管理系统，会告知你账号密码）、录入门禁等。而大公司大概率会在你入职的当月前后，组织近期刚入职的员工，进行新员工培训，帮助你理解包括但不限于企业文化/愿景/价值观、公司的组织架构、行政制度、财务制度等。认识团队签署完劳动合同后，一般HR小姐姐会带你熟悉公司及周边环境，并介绍你认识团队成员，把你交付给直属领导（一般是面试你的）。
2024-03-15 08:58:18
980
原创 Three.js 创建 3D 地球
Three.js经常会和WebGL混淆， 但也并不总是，Three.js其实是使用WebGL来绘制三维效果的。WebGL是一个只能画点、线和三角形的非常底层的系统。想要用WebGL来做一些实用的东西通常需要大量的代码， 这就是Three.js的用武之地。它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让你不必要再从底层WebGL开始写起。
2024-03-14 09:43:10
1171
原创 Vue项目中使用Three.js开发三维IT机房
为了便于访问和区分模型，需要对模型进行规范命名，如机房中的IT机柜都是按照cabinet-001、cabinet-002、cabinet-003 命名的。假设IT机柜的名称都是唯一的，那我们便可以基于这个名称从后端获取相应机柜的详细信息。GLTF 模型文件包含了整个场景的数据，比如几何体、材质、动画、相机等。在建模软件中，同一类型的模型文件可以放入一个数组里，数组可以多层嵌套。当前的机房模型比较简单，没有使用数组，所有的Mesh对象都是平展开的。简化模型，能用贴图表现的细节，就用贴图。建模和导出gltf。
2024-03-13 09:53:19
1186
原创 Three.js 实现年会3D抽奖页面(含源码)
先存下照片墙、球、散乱三种状态的坐标点，然后切换抽奖状态时，同时切换，通过tween切换照片的位置，这样就实现了动画。代码几年前写的，挺垃圾的，没考虑性能，也没有做啥优化。写之前的那段时间，刚好逛博客，看到别个大神写的threejs版《元素周期表》，这效果大体有点近似。高清的星空壁纸，太大了，如果是有点动效的gif，那体积更大。中奖时的音乐，一段布灵布灵的铃声。抽奖嘛，光效果是不够的，还得有点音乐才好。抽奖的照片，还得在照片球的中间，位置。这个时候的动画，主要是两个：照片切换、照片球的转动。
2024-03-12 11:23:26
901
arcgis js api 4.1版本不能加载星空
2016-12-17
ArcGIS JS 实现仿百度地图的距离量测和面积量测
2016-10-17
arcgis js api最优路径分析
2016-10-14
arcgis javascript api 加载天地图
2016-09-23
arcgis api for javascript
2016-08-05
krpano全景高级编辑
2024-03-15
北斗网格位置码+图形分幅详解
2024-03-12
Three.js 实现年会3D抽奖页面
2024-03-12
Three.js-webgl物联网粮仓3D可视化
2024-03-12
Three.js 创建3D 地球
2024-03-12
Vue项目中使用Three.js开发三维IT机房
2024-03-07
OL-RouteAnimate-master.zip
2020-05-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人