基础
关注
分享
扫一扫
文章平均质量分 67
前端忍者（Frontend Ninja）
不忘初心很难，希望我可以坚持.我的个人网站：
https://ivory-brittney-94.tiiny.site/
展开
-
js精彩代码集锦
收集一些基础的、精彩的JavaScript代码片段。more。原创 2025-02-07 13:31:32 · 351 阅读 · 0 评论 -
后台任务协作调度API
::: tip文章参考自MDN。后台任务协作调度 API（Cooperative Scheduling of Background Tasks API，也叫后台任务 API，或者简单称为 requestIdleCallback() API）提供了由用户代理决定的，在空闲时间自动执行队列任务的能力。:::浏览器的主线程中心逻辑就是事件循环，主线程需要做的事情太多，其中事件处理和屏幕更新是用户关注性能最明显的两种方式，对于应用来说，防止在事件队列中出现卡顿是很重要的。后台任务API提供了一个新的接口：Idl原创 2025-02-07 13:30:35 · 661 阅读 · 0 评论 -
log控制台美化输出
console 对象可以从任何全局对象中访问到，如 浏览器作用域上的 Window，以及通过属性控制台作为 worker 中的特定变体的 WorkerGlobalScope。对象提供了浏览器控制台调试的接口（如：Firefox 的 Web console）, 是一个用于调试和记录信息的内置对象，提供了多种方法，可以帮助开发者输出各种信息，进行调试和分析。这里可用的css属性是一部分，并不是全部的css都支持，不过background全写版本支持，可以值为一个图片😀，那就可以放很神奇的内容了。原创 2025-02-07 13:29:09 · 939 阅读 · 0 评论 -
今天才知道html原生有template和slot
现在项目开发都是使用各种框架，写dom结构也基本上就是div、span来回那么几个，已经很少去关注原生html还有多少精彩的标签支持了，其实说到底这些所谓的js框架、css框架都是为了更方便的使用html、css，框架的升级演进一定是跟着原生html、css主线的，所以，对于基础的html、css、js深入了解使用是很有必要的，知道原生的功能，才能更清楚框架实现的逻辑和思路。原创 2025-02-07 13:26:50 · 802 阅读 · 0 评论 -
CSS属性计算逻辑
首先，假设在 HTML 中有这么一段代码，在 body 中有一个 h1 标题：原创 2024-04-07 10:09:13 · 943 阅读 · 0 评论 -
reFlow和rePaint
浏览器为了避免连续的多次操作导致布局树反复计算，比如第一行修改了元素宽度，第二行修改了元素高度，第三行修改了其他尺寸，浏览器会合并这些操作，并放到消息队列，等 JS 代码全部完成后再进行统一计算。但是代码书写过程中，我修改完可能需要立即获取当前的最新宽度，此时当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息，浏览器在反复权衡下，最终决定当有获取属性的代码时立即 reFlow。，此时能拿到网络返回的HTML字符串文本，接下来开始浏览器渲染的8个大步骤。原创 2024-04-03 12:01:02 · 1046 阅读 · 0 评论 -
TS基本概念
ts基本理论概念原创 2023-08-17 17:04:50 · 1024 阅读 · 0 评论 -
git工作常用命令
git提交文件，本来是首字母小写的文件，改成大写，git提交之后，放到linux报错。手动更新package-lock.json。git忽略和查看已经被忽略的文件。远程某分支已经删除，本地还存在。本地某一个文件修改不需要提交。原创 2022-11-07 16:55:20 · 372 阅读 · 0 评论 -
前端 浏览器 IndexDB
前端 浏览器 IndexDB原创 2022-07-13 14:46:04 · 353 阅读 · 0 评论 -
PWA之server-worker
前端页面性能优化，页面缓存方案PWA之server-worker原创 2022-07-13 14:22:22 · 327 阅读 · 0 评论 -
读张鑫旭老师的《CSS世界》总结
css特性原创 2022-07-13 10:19:14 · 330 阅读 · 0 评论 -
2021-08-13 css 炫酷的loading图
<!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-UA-Compatible" content="ie=edge"> <title>Document&l.原创 2021-08-19 10:51:13 · 379 阅读 · 0 评论 -
2021-08-13 css-项目布局的时候左侧菜单和内容高度不一样 怎么对齐呢？
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> span{ width: 300px; display: inline-block; } </style></head><body> <div style="overflow: hidden;"> <div .原创 2021-08-19 10:51:27 · 167 阅读 · 0 评论 -
2021-08-13 css-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-UA-Compatible" content="ie=edge"> <title>Document&l.原创 2021-08-13 14:48:00 · 261 阅读 · 0 评论 -
2021-08-13 今年你家商品有优惠券吗
<!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-UA-Compatible" content="ie=edge"> <title>Document&l.原创 2021-08-13 14:46:25 · 134 阅读 · 0 评论 -
2021-08-13 js-有时候也需要原生js解析地址栏参数的哟
// 获取地址栏参数function getQueryString(name) { let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') let r = window.location.search.substr(1).match(reg) if (r != null) { return unescape(r[2]) } return null}// 调用getQueryString('id'原创 2021-08-13 14:44:09 · 141 阅读 · 0 评论 -
2021-08-13 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-UA-Compatible" content="ie=edge"> <title>放大原创 2021-08-13 14:43:16 · 102 阅读 · 0 评论 -
2021-08-13 js-你还在为不同浏览器兼容问题而烦恼吗
// 创建一个对象，封装兼容的DOM 2级 事件处理函数 的添加/删除，获取事件对象，阻止事件冒泡，取消默认行为// 对象下只包含属性和方法，属性用于存储数据即变量，方法用来书写功能语句，即函数。var eventUntil = { // 兼容添加事件处理函数 addHandler: function(dom, type, fn) { if (dom.addEventListener) { dom.addEventListener(type, fn原创 2021-08-13 14:40:49 · 144 阅读 · 0 评论 -
2021-08-13 canvas+js超好看的随机验证码呀
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2021-08-13 14:39:27 · 143 阅读 · 0 评论 -
2021-08-13 canvas 超好看的动态粒子背景
<!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-UA-Compatible" content="ie=edge"> <title>Document<原创 2021-08-13 14:37:10 · 416 阅读 · 0 评论 -
2021-08-13 cavas实现旋转五角星
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> canvas { border: 1px solid #000; } </style></head><body> .原创 2021-08-13 14:32:25 · 221 阅读 · 0 评论 -
2021-08-13原生div+css实现下拉菜单
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS下拉菜单实例模块</title> <style> body, ul, li {原创 2021-08-13 14:29:33 · 254 阅读 · 0 评论 -
算法-翻转整数
翻转整数给出一个 32 位的有符号整数，你需要将这个整数中每位上的数字进行反转。示例：示例 1:输入: 123输出: 321示例 2:输入: -123输出: -321示例 3:输入: 120输出: 21思路32位的整数，取值范围为Math.pow(-2, 31) - （Math.pow(2, 31) - 1）超出取值范围 返回0两种方案js方法翻转1实现const resolve = (x) => { if (typeof x !=='numbe原创 2021-07-09 15:44:40 · 179 阅读 · 0 评论 -
算法-斐波那契数列
什么是斐波那契数列数据这个数列有关十分明显的特点，那是：前面相邻两项之和，构成了后一项。f(0) = 0f(1) = 1f(n + 1) = f(n) + f(n-1)实现console.log(f(1450));//可以计算到1450位，不溢出普通递归 function fib (n) { if (n === 0) return 0 if (n === 1) return 1 return fib(n - 1) + fib(n - 2)} ...原创 2020-10-26 10:59:35 · 108 阅读 · 0 评论 -
webpack4搭建项目环境
webpack发展史在没有ajax和jQuery之前，前端是不存在打包这个说法的，js没有大规模使用，只做简单的时钟、mp3等效果，直接弄一个js文件引入就行 之后，人们开始使用iframe和flash等于服务器通信，因为这两种方式太过于tricky（棘手），直到google退出gmail的时候，人们发现了XMLHttpRequest，也就是AJAX，从此开始，前端出现了jquery等各种插...原创 2020-02-17 14:09:03 · 210 阅读 · 0 评论 -
css实现元素居中
定位 + top:50% + translateY(-50%) 父元素text-align:center;子元素display：inline-block； 浮动加相对定位实现.兼容性强，扩展性强。实现原理复杂 父元素的父元素相对定位，父元素绝对定位left为50%，子元素左浮动，相对定位，right为50% 弹性盒居中：display：flex； C3的fit-conte...原创 2020-02-17 14:08:33 · 124 阅读 · 0 评论 -
获取link链接样式(非行间样式)的方法
javascript中获取非行间样式的方法我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的，但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.attr获取就是一个空字符。今天我们来介绍下要获取节点计算后的样式就是不一定写在行间样式的方法。1：window.getComputedSty...原创 2020-01-14 11:48:52 · 441 阅读 · 0 评论 -
http理论
跨域资源共享（CORS）是一种机制 http是tcp/ip协议族的子集tcp/ip协议族tcp/ip协议族分为：应用层、传输层、网络层、数据链路层 为什么分层：如果互联网只由一个协议统筹，某个地方需要改变设计时，就必须把所有部分整体替换掉。而分 层之后只需把变动的层替换掉即可。把各层之间的接口部分规划好之 后，每个层次内部的设计就能够自由改动了。 应用层 决定了向用户提供应用服务...原创 2020-01-14 11:48:14 · 239 阅读 · 0 评论 -
基础的HTML+css+js
HTML1.HTML 指的是？您的回答：超文本标记语言（Hyper Text Markup Language）2.Web 标准的制定者是？您的回答：万维网联盟（W3C）3.在下列的 HTML 中，哪个是最大的标题？您的回答：<h1>4.在下列的 HTML 中，哪个可以插入折行？您的回答：<br>5.在下列的 HTML 中，哪个可以添加背景...原创 2020-01-14 11:47:08 · 456 阅读 · 0 评论 -
数据的扁平化处理
递归方式扁平化处理数据：4、数据的转化：原创 2020-01-14 11:41:59 · 2610 阅读 · 0 评论 -
socket和webSocket
webSocket使用场景社交聊天、实时弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、共享实时位置、在线教育、智能家居等。它们的共同点：都要求高实时性webSocket的诞生最开始的轮询polling每隔一段时间就询问一次，每次发送请求都会有http的header缺点：耗流量、耗CPU改进版长轮询long polling客户端发送...原创 2020-01-14 11:39:48 · 193 阅读 · 0 评论 -
js小技巧
一、移动端多行文本省略 无效问题// 多行文本省略@mixin ellipsis_duo($n) {display: -webkit-box;-webkit-line-clamp: $n;word-break: break-all;text-overflow: ellipsis;overflow: hidden;/*! autoprefixer: off */ 加上...原创 2020-01-14 11:38:40 · 183 阅读 · 0 评论 -
常见面试问题
地理定位 先百度地图申请成为开发者，获取key。然后在Index.html页面引入百度/腾讯地图的一个js文件。 在需要定位的页面里面new qq.map.geoLocation(key, myID) ，可以拿到当前所在位置的经纬度 把经纬度传递给后台，后台向地图发起请求，根据经纬度返回附近建筑信息，最后传递给前端进行渲染 Iframe的src属性可以输出整个百度/腾讯地图 R...原创 2020-01-14 11:17:31 · 551 阅读 · 0 评论 -
面试题--1元7角1分
js的valueOf方法在ES6中，只有在值改变的时候才触发，返回布尔对象的真实值 字符串可以通过数组索引的方式找对应的值 改变ES6的toString原型，在js中，用字符串模板``也是在调用toString方法Cash里面定义了一个add属性方式的函数，定义了一个static静态add方法。 其中，当new Cash出来的实例调用add方法的时候，调用的是add属性方法 ...原创 2020-01-14 11:16:08 · 759 阅读 · 0 评论 -
常用正则表达式
一、校验数字的表达式数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$ 零和非零开头的数字：^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$ 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$ 正数、负数、和小...原创 2019-07-16 10:17:48 · 165 阅读 · 0 评论 -
javascript中获取非行间样式的方法
我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的，但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.attr获取就是一个空字符。今天我们来介绍下要获取节点计算后的样式就是不一定写在行间样式的方法。1：window.getComputedStyle(obj,false)['attr']方法...原创 2019-07-16 10:18:45 · 537 阅读 · 0 评论 -
css实现元素居中
定位 + top:50% + translateY(-50%)父元素text-align:center;子元素display：inline-block； 浮动加相对定位实现.兼容性强，扩展性强。实现原理复杂父元素的父元素相对定位，父元素绝对定位left为50%，子元素左浮动，相对定位，right为50% 弹性盒居中：display：flex； C3的fit-content实现水平...原创 2019-07-16 10:22:16 · 182 阅读 · 0 评论 -
数组方法
数组方法：concat() 连接两个或更多的数组，并返回结果。copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。 every() 检测数值元素的每个元素是否都符合条件。 fill() 使用一个固定值来填充数组。 filter() 检测数值元素，并返回符合条件所有元素的数组。 find() 返回符合传入测试（函数）条件的数组元素。 findIndex() 返...原创 2019-07-16 10:23:06 · 101 阅读 · 0 评论 -
webSocket和socket
webSocket使用场景社交聊天、实时弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、共享实时位置、在线教育、智能家居等。它们的共同点：都要求高实时性webSocket的诞生最开始的轮询polling每隔一段时间就询问一次，每次发送请求都会有http的header缺点：耗流量、耗CPU改进版长轮询long polling客户端发送...原创 2019-07-16 10:23:59 · 294 阅读 · 0 评论 -
python与JavaScript对比
数据类型js和python都是动态语言，a = 1; a = 'abc'，a这个变量是动态的，类型是随时可以被更改的。而在java中就是静态语言变量，int a = 1；a = 'abc' 就会报错基本命令输出 js里面的console.log()、document.write()、window.alert()、document.writeIn() python里面是pri...原创 2019-07-16 10:26:43 · 6948 阅读 · 1 评论