- 博客(55)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 js不一样的深拷贝思路
MessageChannel 允许两个不同的脚本运行在同一个文档的不同浏览器上下文（例如两个 iframe，文档主体和一个 iframe，使用的两个文档，或两个 worker）来直接通讯，在每端使用一个端口（port）通过双向频道（channel）向彼此传递消息。MessageChannel 是以DOM Event的形式发送消息，所以它属于异步的宏任务。
2023-01-09 14:22:10
375
1
原创 JS垃圾回收与内存泄漏
什么是内存泄漏,什么情况下会产生？因为一些代码操作导致一些需要回收的内容不符合回收机制，导致没有被回收！怎么回收？js的垃圾回收JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃圾回收系统（GC）会按照固定的时间间隔,周期性的执行。回收机制 全局变量不会被回收。 局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西都会被销毁。 只要被另外一个作用域所引用就不会被回收。 回收
2022-03-24 15:33:11
1249
1
原创 Web Worker
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。Web Worker 有以下几个使用注意点：同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。 DOM 限制：Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和lWorker 线
2022-03-24 13:44:22
820
原创 Vue的父子组件生命周期钩子函数执行顺序
<!-- 加载渲染过程 --> <!-- 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted --> <!-- 子组件更新过程 --> <!-- 父beforeUpdate -> 子beforeUpdate -.
2022-03-22 15:47:41
1434
原创 动画的优化:为什么transform 比 margin的性能好?
1.margin是属于布局属性，该属性的变化会导致页面的重排。 对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到GPU中进行渲染2.transform是合成属性，浏览器会为元素创建一个独立的复合层，当元素内容没有发生变化，该层不会被重绘，通过重新复合来创建动画...
2022-03-17 13:10:12
841
原创 实现发布-订阅模式
class EventCenter{ // 1. 定义事件容器，用来装事件数组 let handlers = {} // 2. 添加事件方法，参数：事件名 事件方法 addEventListener(type, handler) { // 创建新数组容器 if (!this.handlers[type]) { this.handlers[type] = [] } // 存入事件 this.handlers[type].push(ha.
2022-02-28 15:52:23
239
原创 将js对象转化为树形结构
// 转换前：source = [{ id: 1, pid: 0, name: 'body' }, { id: 2, pid: 1, name: 'title' }, { id: 3, pid: 2, name: 'div' }].
2022-02-28 15:50:01
1682
原创 手写 Promise、Promise.then、Promise.all、Promise.race
文章目录前言一、手写 Promise二、手写promise.then三、手写promise.all四、手写Promise.race前言提示：以下是本篇文章正文内容，下面案例可供参考一、手写 Promise代码如下（示例）：const PENDING = "pending";const RESOLVED = "resolved";const REJECTED = "rejected"; function MyPromise(fn) { // 保存初始化状态 var self =
2022-02-28 15:29:46
541
原创 手写 new 操作符
在调用new的过程中会发生以上四件事情：（1）首先创建了一个新的空对象（2）设置原型，将对象的原型设置为函数的 prototype 对象。（3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）（4）判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。function objectFactory() { let newObject = null; let constructor = Array.protot..
2022-02-28 15:00:15
128
原创 浏览器的渲染过程
生成DOM 树：首先解析收到的文档(html)，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的网页结构框架。 生成CSSOM 规则树：然后对 CSS 进行解析，生成 CSSOM 规则树,它决定了网页的样式。 构建成渲染树：将 DOM树 和 CSSOM规则树 构建成 渲染树(Render Tree)。 布局阶段：浏览器开始计算布局（元素位置信息，大小等等），计算层级，position z-index会导致产生新的层，渲染还会对区域进行分块。接下来图层绘制（画像素，媒体文件
2022-02-28 14:46:00
265
原创 commonJS和ESModule的区别？
CommonJS是一种模块规范， 最初被应用于Nodejs, 成为Nodejs的模块规范。运行在浏览器端的JavaScript由于也缺少类似的规范，在ES6出来之前，前端也实现了一套相同的模块规范(例如: AMD)，用来对前端模块进行管理。自ES6起，引入了一套新的ES6 Module规范，在语言标准的层面.上实现了模块功能，而且实现得相当简单，有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对ES6 Module兼容还不太好，我们平时在Webpack中使用的export和import，会经过Babe
2022-02-15 13:39:21
786
原创 输入一个url到页面渲染发生了什么
1.浏览器地址栏输入 URL 并回车2.浏览器查找当前 URL 是否存在缓存，并比较缓存是否过期3.DNS 解析 URL 对应的 IP4.根据 IP 建立 TCP 连接（三次握手）5.发送 http 请求6.服务器处理请求，浏览器接受 HTTP 响应7.浏览器解析并渲染页面8.关闭 TCP 连接（四次挥手）。...
2022-02-11 17:00:36
307
原创 js 严格模式下有哪些不同
严格模式下无法再意外创建全局变量。 严格模式会使引起静默失败的赋值操作抛出异常 在严格模式下, 试图删除不可删除的属性时会抛出异常 严格模式要求函数的参数名唯一 严格模式禁止八进制数字语法 严格模式禁用with 严格模式下eval不再为上层范围引入新变量 严格模式禁止删除声明变量 名称eval和arguements不能通过程序语法被绑定或赋值 严格模式下，参数的值不会随argurments对象的值的改变而变化 不再支持arguments.callee 在严格模式下通过this传递给一个
2022-02-11 16:56:03
737
原创 XSS和CSRF攻击
XSS攻击：跨站脚本攻击，是一种代码注入攻击。攻击者把可执行的恶意脚本注入搭配页面中，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。 解决方案：1. 对需要插入到 HTML 中的代码做好充分的转义；2.使用 CSP，建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击 CSRF攻击：跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求，如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕..
2022-02-11 16:53:46
2123
原创 https 加密过程
https是由http通讯，用SSL/TLS（完全传输层协议）来加密数据包的，https主要是提供对网站服务器的身份认证，保护交换数据的隐私和完整性。传输加密过程：（1）客户端先向服务端发起https请求，客户端生成一个随机数发给服务端，传输的时候会带上客户端支持的加密方式套件，还带上协议版本号（随机数 + 加密方式套件 + 协议版本号）（2）服务端收到请求后存放随机数，确认加密方法，也生成一个随机数伴随着公钥（数字证书）一起传给客户端（加密方法+随机数+公钥）（3）客户端确认服务器证书后对
2022-02-11 16:52:40
481
原创 怎么计算元素到浏览器视口顶部的距离
let sum = 0let ele = xxx; // 要求距离的元素while(ele.offsetParent) { sum += ele.offsetTop; // 统计当前到其有定位元素的距离 ele = ele.offsetParent; // 将父设为当前继续求距离}// 输出到视口顶部距离console.log(sum)...
2022-02-11 16:49:20
843
原创 function构造函数和Class的区别
class事实上是一种特殊的funcion，就像可以定义funcion表达式和funcion声明一样，class语法也有2种形式：class表达式和class声明 Function构造函数：可以实例化函数对象，function声明会变量提升。 Class:ES6中的构造语法——Class，在语法上更贴合面向对象的写法。实现继承更加易读、易理解。更易于写java等后端语言的使用。本质是语法糖，使用prototyp。不会变量提升，需要先声明再使用 class的body部分包含在花括号{}中
2022-02-10 15:45:15
884
原创 flex:1 代表了什么意思
flex: 1的组成： flex-grow（放大比例，默认为0） flex-shrink（缩小比例，默认为1） flex-basic（flex 元素的内容盒（content-box）的尺寸，默认auto）的缩写； flex的第三项指的是flex-basis这个属性，这个属性的“0”和“auto”在大多数情况下都会有所不同：数值被解释为特定宽度,因此0将与指定“width：0”相同； 0%就相当于容器内所有项目原本的width不起作用,然后平分宽度； auto就相当于容器
2022-02-10 15:39:53
1717
原创 事件传播机制/事件委托/事件代理
事件传播机制分为三个阶段:第一阶段：从window对象传导到目标节点，称为“捕获阶段” 第二阶段：在目标节点上触发，称为“目标阶段” 第三阶段：从目标节点传导回window对象，称为“冒泡阶段”事件委托（事件代理）本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件委托（事件代理）。好处: 使用事件委托可以不必要为每一个子元素都绑定一个
2022-02-10 15:32:37
558
原创 对 SPA 单页面的理解，它的优缺点分别是什么？
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。优点： 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，SPA 相对对服务器压力小； 前后端职责分离，架构清晰，前端进行交互逻辑，
2022-02-10 15:32:04
327
原创 如何判断一个对象是空对象
1.for...infunction checkObj (obj) { for(let i in obj) { return false } return true}let obj = {}console.log(checkObj(obj))// truelet obj = {a:1}console.log(checkObj(obj))// falsefor...in可以遍历原型上的属性,所以注意到这点let obj = {a:1}let
2022-02-10 15:30:48
2542
原创 HTTP/1.0和HTTP/1.1有什么区别
连接方面，http1.0 默认使用非持久连接，而 http1.1 默认使用持久连接。http1.1 通过使用持久连接来使多个 http 请求复用同一个 TCP 连接，以此来避免使用非持久连接时每次需要建立连接的时延。 资源请求方面，在 http1.0 中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，http1.1 则在请求头引入了 range 头域，它允许只请求资源的某个部分，即返回码是 206（Partial Content），这样就
2022-02-10 15:25:12
1404
原创 css画扇形
/*方式1*/.sector { height: 0; width: 0; border-top: 50px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; border-radius: 50%;}/*方式2*/.sector { height: 0; width: 0; border: 50px sol.
2022-02-10 15:21:12
510
原创 object.freeze()有什么用
Object.freeze() 是 ES5 的新增特性，可以冻结一个对象，冻结的意思是不能向这个对象添加新的属性，不能修改其已有的属性值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。防止对象被修改，但不能防止被修改引用。如果你有一个巨大的数组或 Object，并且确信数据不会修改，使用 Object.freeze() 可以让性能大幅提升，多用于展示。 freeze可以用来实现const object.freeze 可以让 vue 不添加响应...
2022-02-08 16:14:33
1329
原创 setTimeout和setInterval无法按时执行
1.试解释下setTimeout和setInterval定时器无法按时执行的原因JS是单线程,所以异步事件(比如鼠标点击和定时器)仅在线程空闲时才会被调度运行,代码执行时异步事件任务会按照将它们添加到队列的顺序执行,而setTimeout() 的第二个参数只是告诉JS再过多长时间把当前任务添加到队列中。如果队列是空的,那么添加的代码会立即执行;如果队列不是空的,那么它就要等前面的代码执行完了以后再执行。2.为什么用setTimeout模拟setInterval会比较好setInterval会漏执
2022-02-08 16:11:29
1954
原创 webpack构建过程有什么优化手段？webpack优化打包体积，可以怎么做？
提升构建速度个人认为可以从三个维度入手，一个是利用缓存，二是利用机器性能，三是减少需要打包的内容部分内容预打包主要措施有：多⼊⼝情况下，使⽤ CommonsChunkPlugin 来提取公共代码 通过 externals 配置来提取常⽤库 利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但是绝对不会修改的npm包来进⾏预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。 使⽤ Happypack
2022-02-08 16:06:53
486
原创 requestAnimationframe 相比 setTimeout在执行动画时候的优势
requestAnimationframe优点：CPU节能: 当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停 函数节流：在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame 可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销，一个刷新间隔内函数执行多次时没有意义的，因为多数显示器每 16.7ms 刷新一次，多次绘制并不会在屏幕上体现出来 减少dom操作： requ
2022-02-08 16:05:04
556
原创 什么是GPU加速,如何使用GPU加速,GPU加速的缺点
GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率GPU 加速通常包括以下几个部分：Canvas2D，布局合成（Layout Compositing）, CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)。GPU实现动画的优缺点优点：利用了GPU合成图层实现动画，可以做到动画平滑、流畅动画合成工作在GPU线程，不会被CPU的js
2022-02-08 16:03:13
10795
原创 路径转换为base64
const getBase64 = (img)=> { if (!img) return; function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(..
2021-12-21 15:27:12
814
原创 JS快捷全局替换列表(包含树形结构)里得键
const json = JSON.parse(JSON.stringify(options).replace(/name/g,"label"));//name被替换的键//label替换的键
2021-12-10 15:21:43
529
原创 复杂数组排序(包含对象，多维)
// 给定如下数组做从小到大排序 var arr = [15, [1, new Number(10), 2], { a: 3, b: [4, 7, 8], }, [6, 7, 8, 9, [11, 12, [12, { a: new Number(20), b: { c: 30, d: { a: new Number(4...
2021-12-08 15:42:13
337
原创 JS判断对象是否存在某个属性
// 判断对象是否包含某个属性基本方法var obj = {a:undefined}console.log(obj.hasOwnProperty('a')) //true//注意如果一个重写了 hasOwnProperty 的话会改变// 如var obj1 ={ a:'1', hasOwnProperty(){ return false }}console.log(obj1.hasOwnProperty('a')) //falseconsole.log('a' .
2021-12-07 17:29:53
430
原创 手写实现indexOf
String.prototype.myIndexOf = function (str) { var arr = this.split(''); var strArr = str.split('') var index = -1; for (var i = 0; i < arr.length; i++) { if(arr[i] === strArr[0]) { strArr.shift() if(strArr.l
2021-12-06 17:06:32
379
1
原创 求数组中最大值和最小值(包含多维数组)
一维数组// 求一维数组最大值和最小值的几种方式 let arr = [3, 2, 4, 5, 6, 3, 10, 22, -2, -10, 0] let obj; // 第一种 obj = { getMax(arr) { return Math.max(...arr) }, getMin(arr) { return Math.min(...arr) }
2021-12-02 17:41:33
970
原创 JS冒泡排序和选择排序
冒泡排序每一轮比较位置两两都要交换，效率较低，但是稳定；选择排序一轮比较找出最大值和最小值只需要换一次位置，效率相对较高，但是不稳定如 8，10，8，1，12 我们知道第一轮选择第元素8会和1交换，那么原序列中2个8的相对位置前后顺序就破坏了。代码如下：let arr = [2, 3, 4, 1, 6, 0, 5]; // 冒泡排序 function bubbleSort(arr) { var len = arr.length; if (len< ..
2021-11-29 16:45:35
664
原创 数组扁平化(降维)的三种方式
//方法一functionflatArray1(arr){arr.flat(Infinity)return arr}//方法二function flatArray2(arr) { const reducer = ( acc, val) => { return acc.concat( (val instanceof Array) ? flatArray(val) : val) } return arr.reduce(...
2021-11-26 11:04:45
736
原创 JS深度克隆(深拷贝)
深层次递归方式function deepClone(baseObj) { if (typeof baseObj !== "object") return; let newObj = baseObj instanceof Array ? [] : {}; for (let key in baseObj) { if (baseObj.hasOwnProperty(key)) { // 如果原型对象中的key属性存在，进入下一轮 .
2021-11-22 16:12:15
471
原创 JS全排列
给定一个字符串或者数组，输出所有排列的可能。如输入“abc或者['a','b','c']”，输出['abc','acb','bca','bac','cab','cba']。 // 全排列 function fullpermutate(str) { // 验证参数只能是数组或者字符串 var typeValue = Object.prototype.toString.call(str).slice(8,-1).toLowerCase() if(
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人