逆水行舟，不进则退

在处理WebGL场景中，当加载的纹理超过WebGL的最大纹理限制时，会导致纹理缺失或无法显示。为了解决这一问题，本文提出了一种自动压缩图片的算法。该算法首先获取WebGL支持的最大纹理大小，然后根据设定的压缩比率循环压缩图片像素，直到图片尺寸小于最大纹理限制。压缩后的图片以Canvas对象返回，方便第三方库继续处理。此外，算法还支持将Canvas转换为Image对象，并提供了错误处理和性能优化措施，如使用OffscreenCanvas和Worker线程来提升处理效率。此方法，可以有效避免因纹理过大导致无法显

如果用普通的 debounce 去防抖 promise 类型的异步函数，是获取不到返回值的。此时需要使用 Promise 版的防抖函数。

js面试题，版本号排序问题。

首先简单说一下什么是虚拟DOM，虚拟DOM就是一个描述真实DOM的JS对象。渲染器就是把虚拟DOM渲染成真实DOM的功能代码。

瀑布流布局，一般等宽，不等高的列表排列原理是找出高度之和最小的那一列，在高度最小列继续添加元素可以通过absolute定位实现，动态计算每一项的top和left。

栈（Stack）是一种遵循后进先出的原则（LIFO）的有序集合。新保存的或待删除的元素保存在栈的同一端，称作栈顶，另一端叫栈底。操作栈数据都是在栈顶操作。中学数学学过，十进制转二进制，利用的是除余法。得到的余数，逆序串起来就是二进制的转换结果。在十进制转二进制的基础上扩展，允许自定义除数。在js中，可以用数组的。

但是随着时间的推移，这种优化产生的效果越来越弱化，手上的项目体积越来越大，对本地开发热更新速度和生产打包发布速度都有了很大的影响。webpack3升级到webpack4迫在眉睫，这篇博文将记录一些我在升级过程中遇到的坑。......

文章目录用node写一个压缩文件（zip格式）的脚本注意推荐 tar用node写一个压缩文件（zip格式）的脚本缘起日常的发包没有运维自动化，本着不要 DRY 的原则，重复的流程应该写成自动化或半自动化的方式。安装依赖 npm i --global archiver实现逻辑思路：从路径读取文件(或目录)，交给 archiver 处理压缩，输出结果const fs = require('fs')const path = require('path')const archiver = re

Contents1 为什么要使用 debugger2 Chrome debugger 基本用法3 VS Code 调试 SPA 应用4 Chrome 调试 Nodejs5 使用 VS Code 调试 Nodejs6 Conditional Breakpoint 条件断点7 总结JavaScript 断点调试技巧我认为 【Conditional Breakpoint 条件断点】非常有用，在调试循环体的时候。学到了之前没学过的debugger技巧。...

原生js实现瀑布流效果效果图：代码：<!-- 样式部分 --><style> * { margin: 0; padding: 0; } #box { position: relative; height: 1000px; } img { display: block; width: 220px; background-color: #ccc; } .item { box-sh

如果我看得比别人更远，那是因为我站在巨人的肩膀上——艾萨克·牛顿没有使用原生 nodejs 实现上传文件，调用了现成的 ssh2-sftp-client 库，实现 sftp 链接，并进行文件操作。Introductionnodejs 脚本实现上传前端打包目录 dist。用到 ssh2-sftp-client 这个包实现上传功能。在项目根目录运行 upload-dist 把打包后的 dist 目录上传到服务器服务器上的 dist 目录内容会被清空后，再上传Installationn.

这篇看看如何判断为整数类型（Integer）,JavaScript中不区分整数和浮点数，所有数字内部都采用64位浮点格式表示，和Java的double类型一样。但实际操作中比如数组索引、位操作则是基于32位整数。方式一、使用取余运算符判断任何整数都会被1整除，即余数是0。利用这个规则来判断是否是整数。12345function isInteger(obj) {return obj%1 === 0}isInteger(3) // trueisInteger(3.3) // false　

更新接口做了名称重复校验，只修改状态，会校验名称重复，只能提交修改的字段和id 更新内容封装对比函数function diffDataForm(newData, oldData) { let result = {} // 报错修改的字段内容 Object.keys(oldData).forEach(key => { if (oldData[key] !== newData[key]) { result[key] = newData[k.

打包后的代码需要手动上传太费劲，用node写一个自动化上传脚本原理利用 ssh2-sftp-clien 库提供连接，实现删除，上传功能利用 dotenv 实现从配置文件 .env（可自定义） 读取账户密码信息安装npm install -D ssh2-sftp-client dotenv示例代码：vim .envSFTP_SERVER=127.xx.xx.xxSFTP_USER=userSFTP_PASSWORD=passwordSFTP_PORT=22DEBUG=fal.

async/await 更优雅的异常处理方式参考资料：https://blog.grossman.io/how-to-write-async-await-without-try-catch-blocks-in-javascript/使用 async/await 写法可以用同步的方式写异步函数，但是对于异常处理的地方都需要 try...catch这样写代码不够优雅，可以参考一种更优雅的写法参考 async-to-js 工具库，核心源码如下：/** * @param { Promise } pr

由于业务需求要做一个评论功能，评论的时间要求是多久前。评论列表友好显示时间，显示多久时间前评论思路：获取后台返回的时间戳与本地时间戳的差值，差值就是多久前评论的时间通过比较差值与60秒，1小时，2天大小，判断是多少秒前，多少分钟前，昨天，前天，或具体日期具体可看代码代码已经封装，可以放到独立的js文件作为单独的工具函数使用/* eslint-disable */// 分，时，天，转秒const DATE_CONFIG = { m: 60, h: 3600, d: 8640.

js时间格式化处理if(!String.prototype.repeat) { String.prototype.repeat = function(count, seperator) { var seperator = seperator || ''; var a = new Array(count); for (var i = 0; i < count; i++){ a[i] = this; }

作者：洛霞（字节跳动）https://juejin.im/post/6875152247714480136作为前端开发，JS是重中之重，最近结束面试的高峰期，趁着这个时间学习复习，这些都是高频面试题，希望对你能有所帮助。关于源码都紧遵规范，都可跑通MDN示例，其余的大多会涉及一些关于JS的应用题和本人面试过程01.数组扁平化数组扁平化是指将一个多维数组变为一个一维数组const arr = [1, [2, [3, [4, 5]]], 6];// => [1, 2, 3, 4, .

前端生成图片只有一种方法，就是用canvas画图，转成图片格式。使用原生canvas画图，简单的实现画图还可以操作，如果是画海报，画二维码，就比较吃力，一般用现成的库来做。画二维码有专门的二维码生成库 qrcode把dom转成图片有专门库 html2canvas，一般前端生成海报都是用这个库html2canvas 使用直接参考官网，使用比较简单使用过程中我遇到的坑图片资源跨域问题股东页面后，截图不完整图片有背景颜色1.图片跨域可以加useCORS: true经测试，就算加了允.

写出更好代码的5个js技巧1. 使用 .map 或者 .forEach 代替 for 遍历const numbers = [1, 2, 3, 4, 5, 6, 7, 8]// DON'Tfor (i = 0; i < numbers.length; i++) { console.log(i); // 1, 2, 3, 4, 5, 6, 7, 8}// DOnumbers.map(number => console.log(number)); // 1, 2, 3, 4,

有时候前端已经写好了页面，或者维护一些旧功能页，而新增的功能字段和旧的不一样，但功能基本一样，怎么办？想要复用旧的页面功能，转换数据对象key值是个不错的方法。方法一采用 map 映射思维，key->value value->keylet data = { nianling: 18, mingzi: '李四', haizi: [ { biaoji: 1, mingzi: '孩子1', }, { biaoji:.

背景：公司业务需求，要实现分享海报的功能，结果遇到的坑太多了，填不完。记录下来，方便下次查看。H5生成图片的原理是使用 canvas 的 toDataURL 方法生成 base64 图片直接用 canvas 绘图布局不够方便，有一个很好用的库 html2canvas官网demo<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello w.

使用D3.js公司项目有这样一个需求，客户发展的用户关系通过树状图形式展示，该等级是无限级别，用传统的文件数结构展示不够直观于是使用D3的树状图结构一个可缩放的树状图效果图：实现代码如下：https://gitee.com/hotsuitor/learn_d3js.git参考地址：https://observablehq.com/@d3/collapsible-tree...

/*@Author: HotSuitor@Date: 2020-03-09 18:05:17@LastEditors: hs@LastEditTime: 2020-03-10 12:06:16@Description: hotsuitor@qq.com*//**@description: 二分法查找@param {Array} arr=有序数组@param {Number...

桶排序把一系列数据放到 n 个有序划分的桶中，在各个桶中分别排序（快排 or 插排）依次取出桶中数据，排序完成适用场景，大量数据排序且数据浮动不大(数据方差不大)，比如：给高考100万考生按分数排名用了空间换时间的思想代码实现/** * 桶排序 * @param {Array} arr * @param {Number} bucketSize */function ...

排序算法冒泡，插入，选择能用插入排序就用插入排序冒泡排序，两层 for，两两对比，大数交换往后移插入排序，取第一个作为有序区间，待排序的数据在无序区间，从无序区间取数，与有序区间的数比较，插入到合适的位置选择排序，每次选最小的数，依次排列排序算法是否原地排序是否稳定排序算法复杂度(最好，最坏，平均)冒泡是是O(n)，O(n2)，O(n2)插入...

递归1.大问题可以分解为一个个模式相同的小问题，即有递归一般式2.有递归结束条件，不能陷入死循环3.深度在当前系统能承受的范围内，递归深度过深会爆栈优化重复计算问题，用把计算过的值缓存起来很典型的例子，斐波那契数列function fibonacci(n) { // 递归结束条件 if(n ==1 || n==2) return 1; if(!this.cacheMa...

每日一练 Count characters in your stringThe main idea is to count all the occurring characters(UTF-8) in string. If you have string like this aba then the result should be { 'a': 2, 'b': 1 }What if the ...

Chrome DevTools 中调试 JavaScript今天无意打开 google chrome 开发文档，阅读了其中一章 关于 JavaScript 的调试 入门发现有一些以前没有注意到的技巧，比如监听事件断点，监听click，触发click事件都会被打上断点有空多看官方文档，学习优秀的思想和方法，比自己瞎琢磨好多了，学中思，思中学。官方文档传送门：https://develop...

input 属性为 number时maxlength不起作用如何解决？type=text时可以限制input输入内容的长度<input type="text" maxlength="11" /> 但是 type设为 number 类型的时候就不生效了<input type="number" maxlength="5" /> //maxlength失效，长度...

安全模式若创建对象时不使用new关键字，则可能会导致原本为对象的属性和方法创建到全局变量上// 比如：// 这里Book()函数在全局作用域中执行了，而如果Book没有返回值，则instance的值是undefinedvar instance = Book('title','name'); 避免创建无效对象的解决方法是：在定义构造函数时加入判断var Book = function(...

webpack学习总结 @version webpack v4.5.0 cmd vscode 个人建议学习最新的技术还是要看英文官方文档简述webpack是一个现代JavaScript应用程序的静态模块打包器 脚手架是指通过输入简单指令帮助你快速搭建好一个基本环境的工具，「为减少重复性工作而做的重复性工作」的工具.四个核心概念入口（...

使用策略模式校验表单还在使用if else 校验表单？每次增加字段都要加 if，编码体验实在太差，快来使用策略模式// 对象字面量 var strategies = { isNonEmpty: function(value, errorMsg) { if (value === '') { ...

javascript中的parseInt与map函数都是常用的函数，可是 [“1”, “2”, “3”].map(parseInt) 为何返回不是[1,2,3]却是[1,NaN,NaN]？这涉及到是否深入理解两个函数的格式与参数含义。首先根据我对两个函数用法的了解，猜测是由于parseInt(string, radix) 的参数radix必须介于2~36之间，而且字符串string中的数字不能...

npm 发布一个自己的packagenpm 包发布流程注册 npm 账户方式1：npm官网注册方式2：通过终端注册$ npm adduserUsername: YOUR_USER_NAMEPassword: YOUR_PASSWORDEmail: YOUR_EMAIL@domain.com查看 npm 当前使用的用户$ npm whoami在终端登录 np...

昨天遇到一个需求，公司的视频项目都是视频类型，如果是文件类型就直接打开预览，或者下载查看项目把请求的资源都作为视频资源处理，直接赋值给 video 标签解析。所以我新增了一个功能函数，方法很简单文件预览原理：通过 a 标签直接访问，如果是浏览器支持的文件，可以直接打开预览加上 h5 的 download 属性可以实现下载，而不预览。经本人测试，该属性在移动端没效果前端 ifr...

angularjs 全局表单校验器——使用策略模式// 定义一个模块var mainApp = angular.module("mainApp", []);// 创建 factory "Validator" 校验器mainApp.factory('Validator', function() { function Validator(strategies) { if(...

深入理解ES6——迭代器(Iterator)和生成器(Generator)文章目录深入理解ES6——迭代器(Iterator)和生成器(Generator)迭代器生成器生成器对象的方法可迭代对象和 `for-of` 循环访问默认迭代器创建可迭代对象内建迭代器集合对象迭代器字符串迭代器NodeList迭代器高级迭代器的功能给迭代器传参在迭代器中抛出错误生成器返回语句委托生成器异步任务执行简单任务执...

js武器库vue 移动端项目，优先考虑 vux 库loadsh 现代化js工具库vsconsole 一款调试工具eruda https://eruda.liriliri.io/ 一款调试工具mescroll http://www.mescroll.com/ 下拉刷新，上拉加载 库better-scroll 上拉刷新，下拉加载 库vue 拖拽插件...

document.body.clientWidth ==&gt; BODY对象宽度document.body.clientHeight ==&gt; BODY对象高度document.documentElement.clientWidth ==&gt; 可见区域宽度document.documentElement.clientHeight ==&gt; 可见区域高度网页可见区域宽： doc...