![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 86
Neil-
吾日三省吾身~
展开
-
前端blob数据
Blob介绍定义Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。 通常可以用于声音、视频等多媒体文件的存储;构造new Blob(blobParts, options);blobParts:数组类型,可以存放任意个ArrayBuffer、ArrayBufferView、Blob或DOMString(会编码为utf-8);options:可选,可以设置blob的type和endings;原创 2022-10-01 11:04:45 · 3811 阅读 · 1 评论 -
issues: 父级元素包含transform导致fixed定位失效
fixed定位失效, transform影响fixed定位, 包含块原创 2021-12-11 07:37:09 · 1671 阅读 · 0 评论 -
Immutable.js
ImmutableJs出现背景JavaScript中的Plain Object,一般是以引用形式存在的可变数据(Mutable Data),这样设计的目的可能是为了节省CPU与内存的开销;每次进行对象修改时直接改变对象本身(changed in-place rather than return a new object)一般mutable data进行数据操作时比较简单,但是当在一些大型复杂应用中使用mutable data时可能会导致数据无法溯源,因为很多地方都可以修改这个数据,导致难以调试与维护;原创 2021-05-07 21:41:22 · 276 阅读 · 0 评论 -
Chrome调试实用技巧
常用快捷键切换调试台布局Ctrl+ Shift+ D调整数值增加/减少0.1:Alt+↑ Alt+↓增加/减少1:↑ ↓增加/减少10:Shift+↑ Shiift+↓增加/减少100:Ctrl+↑ Ctrl+↓切换Tab在Elements、console、sources等tab中切换时可以使用快捷键,默认是禁用的,在调试台的Setting中开启即可使用快捷命令面板Ctrl+Shift+P可以调起快捷命令行,可以设置面板tab的显示、截屏(node节点截屏/滚动截屏)、CSS O原创 2020-12-27 16:51:30 · 788 阅读 · 1 评论 -
JSbridge原理与实现简析
JSBridge定义定义:正如其命名一样,JSBridge就相当于js与native之间进行全双工通信的一座桥梁,其内部定义了一套用于js与native进行通信的规范(包括协议、方法、传参及回调等);用途:JSBridge可以桥连js与native的通信,从而使基于容器的web开发和优化成为可能,如比较火的hybrid app技术;能够提升页面性能,丰富页面功能等;JSBridge原理简析框架简析:JSBridge框架其实主要由两部分组成:第一部分是Native调用js,主要用于消息推送、原创 2020-08-26 15:12:14 · 6497 阅读 · 3 评论 -
GPU工作原理及WebGL入门
基础坐标系WebGL是一个三维直角坐标系。它的坐标原点比较特殊,是画布的中心位置;x轴向右,y轴向下,z轴朝外,并且x轴和y轴在画布中的范围是-1至1;绘制一个三角形import React, { useEffect, useRef } from "react";import "./styles.css";export default function App() { const canvasRef = useRef(); useEffect(() => { /**原创 2020-07-14 21:23:42 · 1502 阅读 · 0 评论 -
git大小写不敏感,仅修改文件名或文件夹名称无法提交commit
问题描述:在使用git的过程中,有时会遇到仅需要改变文件名大小写或者文件夹名大小写的情况——比如不小心把组件名首字母小写了,需要改为大写。但windows下git默认是忽略大小写的,如果仅改动文件(夹)名,git并不能检测到diff,所以不能进行commit提交;解决方案通常可以使用以下两种方式:通过git配置文件修改配置core.ignorecasegit config core.ignorecase false使用命令git mv:git mv -f OldFileNameCase n原创 2020-07-10 14:56:36 · 2116 阅读 · 0 评论 -
webpack中bundle、chunk、module的区别
webpackWebpack GlossarybundleBundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.译:Bundle:由许多不同的modules生成,包含了源码处理后的最终版本——源码被加载和编译处理;原创 2020-07-05 18:04:09 · 1948 阅读 · 0 评论 -
Chrome devTools笔记
命令概述调起命令菜单:Ctrl+ Shift+P基本命令类型:panel(面板)、Drawer、Appearance、console、Debugger、Elements、Global、Mobile、Navigation、Network、Performance、Rendering、ScreenShoot、Settings、Sources;快速打开DevTools:Ctrl+ Shift+ C 审查元素模式Ctrl+ Shift+ J 控制台模式不同的Pannel切换Ctrl+原创 2020-06-29 14:47:29 · 442 阅读 · 0 评论 -
mobx入门教程
背景React的自身的状态本身由state和setState维护;但是随着应用复杂度的提升(组件间状态共享及状态变更),单纯通过setState进行状态管理的方案不仅变得代码复杂、难以维护,而且影响可扩展性;针对这种状况,React目前主要有Redux和mobx两种解决方案(均可以让状态逻逻辑从展示组件等解耦出来,提高扩展性与复用性);mobx与Redux有什么不同?Redux采用F...原创 2020-03-05 13:39:46 · 1700 阅读 · 0 评论 -
background-clip与box-shadow
background-clip背景裁剪,默认属性值为border-box,常用属性值包括border-box、content-box、padding-box、text等;background-clip:text用于进行包含文字的背景裁剪;要实现下图中外边框和内容间的透明效果,可以通过设置以下代码实现:.box { border: 5px solid lightblue; backgroun...原创 2020-10-03 14:37:14 · 296 阅读 · 0 评论 -
面试疑点解析
HTTP/2的多路复用实现原理:http/2多路复用的机制是基于“帧”和“流”的概念提出的;http/2以前的传输是基于文本分割形式的消息,以换行符进行键值对的分割,服务端接收时无法预估其内存需求,在解析速度和传输效率上都有影响;http/2提出的帧对信息进行了封装,内部包含了帧标识和对应的流ID(流是由一个或多个帧组成的数据流);HTTP/2中的信息是以数据流的方式中进行传输的;这样,在一个T...原创 2019-12-17 15:53:01 · 296 阅读 · 0 评论 -
浏览器垃圾回收
引用计数法浏览器维护一张表,里边保存了所有对象的引用次数;每当引用一次,次数+1;垃圾回收时,将表里引用次数为0的对象空间释放;缺点: 循环引用或者相互引用的对象计数总是不为0,无法被回收,导致内存泄漏;Chrome V8 垃圾回收机制:参考文献https://v8.dev/blog/concurrent-marking...原创 2019-12-04 11:19:51 · 262 阅读 · 0 评论 -
CSS3 animation steps
背景css3引入了transition和animation属性为我们提供了强大的动画效果,也为前端设计和实现提供更多的可能性;需求:利用给定的一组图片,实现动画效果;优势:纯CSS实现,不需要借助gif;更好的性能表现Action:借助animation steps实现;属性介绍用法:steps(n, <jumpterm>)steps其实是一个分段的阶跃函数,n相当于单...原创 2019-12-02 16:37:18 · 421 阅读 · 0 评论 -
LeetCode 20题:括号匹配问题
问题描述Given a string containing just the characters ‘(’, ‘)’, ‘{’, ‘}’, ‘[’ and ‘]’, determine if the input string is valid.An input string is valid if:Open brackets must be closed by the same type o...原创 2019-11-12 16:42:20 · 483 阅读 · 1 评论 -
js调试
GlobalEventHandlers.onError提供了一个全局监控的作用,它可以在JavaScript发生运行时错误时或者某些资源加载失败时触发Error Event的error事件;JavaScript运行时错误:window.onerror;资源加载失败(<img>或<script/>等):这些加载元素上的error事件不会冒泡到window,但是可以被wi...原创 2019-11-04 11:29:57 · 167 阅读 · 0 评论 -
Service Worker简介
介绍Service Workder相当于浏览器与web应用程序之间的代理服务器,可以捕获请求事件并做相应处理;目前主要用于离线应用以及消息推送及后台同步等;特性无法直接访问和操作DOM在长时间不用时会被中止并在下次需要时重启;可以访问和操作indexedDB API推荐使用HTTPS内部实现基于Promise生命周期支持的事件使用注册可以通过serviceWork...原创 2019-10-31 23:30:35 · 431 阅读 · 0 评论 -
JavaScript 工具函数介绍(与数组结合)
Array.prototype.reduce()参数Array.prototype.reduce(callback(accumulator, currentValue[, Index[, array]]) [, initialValue])介绍:该函数接收两个参数callback与initialValue,其中第二个参数可选;callback可以接受四个参数:分别为初始累加器值、当前值、索...原创 2019-10-29 20:08:14 · 172 阅读 · 0 评论 -
CSS图形绘制
圆使用border-radius特性;代码实现,具体可见jsfiddle.net <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS图形绘制</title></head><body> &...原创 2019-10-25 19:47:57 · 325 阅读 · 1 评论 -
React Hooks
引言从React 16.8版本开始,新增的React hooks可以让用户在不用创建react class的同时可以使用state等react属性;React为什么引入hooks?引入hooks可以将很多之前以类的形式表现的组件以函数的形式呈现,也不必从React中引入Component,不用再使用冗余的class语法,代码结构更加简洁;引入hooks之后,可以将React的state...原创 2019-10-12 21:11:51 · 398 阅读 · 0 评论 -
前端实时可视化开发工具——browser-sync安装
1. 安装browser-sync前需要安装node.js;2.打开node.js command prompt,输入命令:npm -install -g browser-sync,自动下载并安装和配置browser-sync;3.启动browser-sync:此处根据文件类型会分为两类不同的模式(网站),对应两种不同的命令启动browser-sync:打翻译 2016-09-27 00:03:18 · 616 阅读 · 0 评论 -
html创建canvas画布失败"cannot read property 'getContext' of null"
自己在使用canvas画布时遇到了这样的错误,最后才知道是script位置引发的问题。一般,script可以放在head中,也可以放在body标签结束前,但是两者是有一定的区别的。在head标签中时,一般只是进行加载,并不立即自动执行,需要被触发后才会执行。因此,当script标签位于此位置时,不会进行javascript中的变量初始化,因此可能出现上述错误;在body标签结束前,原创 2016-09-28 14:03:19 · 10284 阅读 · 1 评论 -
jS实现兼容的div拖放功能
前几天腾讯共享桌面面试,出了一道题: 页面内有一个正方形元素,实现对其拖拽和放下。要求兼容IE8及以上/Firefox/Chrome。由于当时在学习浏览器兼容性方面并没有留意,所以现在补充实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tmp.html</title> <s原创 2017-04-12 15:13:50 · 1090 阅读 · 0 评论 -
Javascript获取浏览器类型和版本
代码如下,来自犀牛书第6版:var ibrowser = function() { var s = navigator.userAgent.toLowerCase(); var match = /(webkit)[\/]([\w.]+)/.exec(s) || /(opera)(?:.*version)?[\/]([\w.]+)/.exec(s) || /(msie)原创 2017-04-17 19:34:07 · 248 阅读 · 0 评论 -
javascript笔记
字符串:字符串内容不可变,多行字符串(反引号`)、模板字符串($(variable));方法返回一个新字符串toUpperCase()、toLowerCase()、indexOf()、substring(start, end);数组:长度可以通过arr.length改变;方法有indexOf()、slice()(与String的substring方法不同,该方法可以不传入参数,表示数组的复制,而s原创 2017-04-10 12:06:18 · 338 阅读 · 0 评论 -
requestAnimationFrame
requestAnimationFrame可以用来解决循环等代码执行时间长,造成浏览器组塞页面的渲染的问题。 基本使用方法如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding:原创 2017-04-19 22:33:42 · 396 阅读 · 0 评论 -
css3 images
图片响应式布局使用CSS3中images新特性,设置如下:img { max-width: 100%; height: auto;}同时,可以使用@media查询,针对不同的媒介类型定制表现不同的样式。图片贺卡<style>body {margin:25px;}div.polaroid { width: 80%; background-color: white;翻译 2017-04-22 14:17:19 · 529 阅读 · 0 评论 -
CSS的四种布局方式static/relative/fixed/absolute
本文所翻译的原文地址点击此处static static布局是HTML元素默认的布局方式,并且static布局的元素不会受到top/left/bottom/right属性的影响。布局元素的位置即其在标准文档流中的位置。relative 相对布局是相对其在标准文档流中的位置而言的。设置其top/left/bottom/right属性会使该元素脱离标准文档流,但是其在标准文档流中的位置依然被保留,不翻译 2017-04-22 18:02:38 · 7922 阅读 · 0 评论 -
CSS伪类和伪元素
所有伪元素 ::after/ ::before/ ::first-letter/ ::first-line/ ::selection(被用户选中的元素部分),前四个用于标签。常用的伪类 :link/ :hover/ :active/ :visited/ :checked/ :disabled/ :enabled(input标签)/ :focus/ :empty(作用于)/ :first-chi翻译 2017-04-23 00:17:32 · 232 阅读 · 0 评论 -
CSS 水平和垂直居中对齐
点此查看原文水平居中对齐元素 可以使用margin: auto水平居中对齐块级元素。设置元素宽度可以防止其延伸到容器边缘外侧。 注意: 当width属性不设置或设置为100%时居中对齐不会生效。文字居中对齐 这个很常见,都知道的text-align: center居中对齐图片 可以使用display使其显示为block,然后使用margin: auto;display: block;原创 2017-04-22 21:50:22 · 841 阅读 · 0 评论 -
CSS属性选择器
本文讲述的为CSS原生的选择器: 1. element[attribute]: 选择具有所有特定attribute属性的HTML元素,不论其属性值是什么; 2. element[attribue=”value”]: 3. element[attribue~=”value”]: 选择HTML的element的attribute属性中含有属性值为value的eleme原创 2017-04-23 15:32:42 · 747 阅读 · 0 评论 -
CSS响应式布局
响应式网页仅使用HTML+CSS进行设计,其内容会随着设备尺寸自动的resize以适应设备显示能力。通常它能够在各种类型的媒介上均呈现出很好的布局效果,可以为绝大多数或所有的用户带来最好的用户体验。viewport是指用户对网页的可视区域。HTML5引入的新方法控制viewport。即在head中引入以下标签:<meta name="viewport" content="width=device-翻译 2017-04-23 17:24:47 · 1177 阅读 · 0 评论 -
最小化重绘和重排之批量修改DOM
批量修改DOM的出发点是减少重绘和重排次数,基本思路是当需要对DOM进行多种修改操作时,首先让DOM脱离文档流;然后让其进行批量修改,修改的过程不会触发浏览器重排和重绘;最后将修改后的DOM重新加入文档中。这样只会在DOM脱离和重新加入文档流时触发重排和重绘操作两次,对于批量修改这样的操作有效降低重排和重绘次数。DOM脱离文档流的方法改变DOM元素的可见性:前边的博客已经提到隐藏的DOM节点不会出原创 2017-06-16 00:13:26 · 864 阅读 · 0 评论 -
最小化重绘和重排之缓存布局信息
浏览器有其自身的最小化重绘和重排的策略,即使用一个队列将需要重排的操作保存,然后进行批量执行以减小reflow和repaint的次数。然而,我们在操作DOM或者编写交互的JavaScript脚本时通常需要动态获取以下信息:offsetTop、offsetLeft、offsetWidth、offsetHeight等;clientTop、clientLeft、clientWidth、clientHe原创 2017-06-16 00:55:35 · 351 阅读 · 0 评论 -
git使用笔记
git是一种分布式的版本控制工具。相比集中式的版本控制工具,其可以离线操作,并且可以在计算机上保存一个独立的版本,因此更加安全便捷。安装 由于使用的是Windows系统,需要先在这里下载msysgit。 安装完成后,可以在相应目录打开git bash,输入以下命令进行配置: “` git config –global user.name “xxx” git config –global u原创 2017-06-05 19:00:33 · 293 阅读 · 0 评论 -
JS arguments对象
arguments是所有函数内部可以使用的一个局部变量,是一个类数组对象。之所以说是类数组对象,是因为它具有Array一样的length属性,但是其不具备Array的其它属性。var arr = [];arr instanceof Array; // true;function f() {console.log(arguments instanceof Array);}f(); //falsea原创 2017-06-20 01:45:59 · 283 阅读 · 0 评论 -
Array.prototype.reduce统计数组中各元素出现次数
Array.prototype.reduce可以实现很多功能,统计数组中各元素出现次数也是其中一个,代码如下:var arr = [1,2,35,33,5,3,3,23,5,6,1,44,33,6];var count = arr.reduce(function(allElements, ele){ if (ele in allElements) { allElements[原创 2017-06-29 13:04:55 · 2207 阅读 · 0 评论 -
HTML5 Web Workers
JS脚本运行和UI交互不能同时进行,有时候在脚本运行时间较长的情况下,浏览器会出现假死状态,严重影响了用户交互的体验。Web Workers的出现一定程度上解决了此问题。每个Worker都有自己完全独立的全局运行环境,并且不占用浏览器UI线程的时间。因此,可以把一些计算量大的数据处理任务交给Web Workers处理而不影响用户交互(一般,认为浏览器端脚本运行时间超过100ms即会影响用户体验。此时原创 2017-06-20 17:04:27 · 257 阅读 · 0 评论 -
DOM文档加载顺序及readyState的状态
readyState共有四种状态,分别是:uninitialized:未开始加载loading:载入中interactive:已加载并可与用户交互complete:全部加载完成 DOM文档加载顺序:解析HTML结构加载外部脚本和样式表文件(loading)解析并执行脚本DOM树构建完成(readyState:interactive)加载外部资源文件(图片等)页面加载完成(rea原创 2017-04-17 13:23:14 · 1924 阅读 · 0 评论 -
JavaScript提高效率之编程实践
避免双重求值 所谓的双重求值是指一段JS代码在另一端JS代码中执行,常见的Function()构造函数、eval()、定时器(setTimeout和setInterval)就是典型的例子。 通过双重求值代码执行速度比直接执行代码速度慢很多,应尽量避免这种情况。使用Object/Array直接量 使用直接量或字面量会使代码执行速度更快。避免重复工作 下边的例子中每次调用addHandler原创 2017-06-26 19:31:11 · 339 阅读 · 0 评论