L.-web-CSDN博客

原创为什么 CSS 动画比 JavaScript 实现动画更高效？

引言讲到动画，当然是非常有意思的啦，你可以往上滑一下，看看上面的封面图，是不是相当的炫酷，以为我是代码写出来的吗？那当然不可能啊，我这么摸鱼，怎么会为了个封面图上号呢废话不多说，其实上面的动图用代码实现也不会很困难，这个图是用 canva 做出来的。本文主要讲以下这些内容浏览器渲染流程回流和重绘 CSS 动画 JS 动画两者对比🍉 1. 浏览器的渲染流程渲染流程主要有4个步骤解析 HTML 生成DOM 树解析 CSS 样式生成 CSSOM 树，CSSOM 树与

2022-03-18 20:52:22 396

原创【源码篇：总结与思考】虚拟节点与DOM Diff算法源码实现

前言文章内容按照一位老师视频学习而来，我们一起来学习一下 dom diff 吧。DOM Diffdom diff 其实就是对比两个虚拟节点，然后对比它们的差异。然后再对应真实 dom 上进行一个打补丁操作。我们的目的就是找到其中的差异，然后用最小的代价来操作 dom。因为操作 dom 相对而言比较耗性能。而对于虚拟节点呢，我们可以简单理解为普通对象。就是将真实节点用对象的方式模拟出来，通过比较两个新老虚拟节点，得到彼此的差异，形成一个补丁，最后再与真实的 dom 进行匹配，将这些补丁打到真实

2021-10-12 15:55:05 225

原创什么是前端工程化

什么是前端工程化？工程化是一种思想，而不是某种技术。其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间等栗子要盖一栋大楼，假如我们不进行工程化的考量那就是一上来掂起瓦刀、砖块就开干，直到把大楼垒起来，这样做往往意味着中间会出现错误，要推倒重来或是盖好以后结构有问题但又不知道出现在哪谁的责任甚至会在某一天轰然倒塌，那我们如果用工程化的思想去做，就会先画图纸、确定结构、确定用料和预算以及工期，另外需要用到什么工种多少人等等，我们会先打地基再建框架再填充墙体这样最后建立

2021-09-25 11:02:34 190

原创搞定三栏布局的七种方法

1.float布局左边元素设置左浮动，中间元素左浮动，右边元素右浮动，中间元素的宽度设置：100% - 左右元素宽度之和<body> <div class="box"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </di

2021-09-19 16:52:15 200

原创一篇文章搞定js数组常用方法

数组基本操作可以归纳为增、删、改、查，需要留意的是哪些方法会对原数组产生影响，哪些方法不会下面对数组常用的操作方法做一个归纳增下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响 push() unshift() splice() concat() push()push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度letcolors=[];//创建一个数组letcount=co...

2021-09-10 20:08:38 50

原创 vue中使用svg-sprite-loader处理svg图片

实现内容：1.vue载入svg 2.能够更改svg样式1.使用的loader：svg-sprite-loader、svgo-loader我们在vue.config.js文件里找到chainWebpack属性，添加如下代码：chainWebpack: config => { // ...... config.module .rule('svg') .exclude.add(resolve('src/assets/icons/svg')) .

2021-09-08 20:32:37 892

原创如何理解浅拷贝和深拷贝

一、数据类型存储JavaScript中存在两大数据类型：基本类型引用类型基本类型数据保存在在栈内存中引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中二、浅拷贝浅拷贝，指的是创建新的数据，这个数据有着原始数据属性值的一份精确拷贝如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址即浅拷贝是拷贝一层，深层次的引用类型则共享内存地址下面简单实现一个浅拷贝functionshallow.

2021-09-07 19:06:11 266

原创 TCP和UDP比较

引言网络协议是每个前端工程师都必须要掌握的知识，TCP/IP 中有两个具有代表性的传输层协议，分别是 TCP 和 UDP，本文将介绍下这两者以及它们之间的区别。一、TCP/IP网络模型计算机与网络设备要相互通信，双方就必须基于相同的方法。比如，如何探测到通信目标、由哪一边先发起通信、使用哪种语言进行通信、怎样结束通信等规则都需要事先确定。不同的硬件、操作系统之间的通信，所有的这一切都需要一种规则。而我们就把这种规则称为协议（protocol）。TCP/IP 是互联网相关的各类协议族的总称，比

2021-09-03 19:33:01 109

原创 js继承的6种方式

一、是什么继承（inheritance）是面向对象软件技术当中的一个概念如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类” 继承的优点继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码在子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能虽然JavaScript并不是真正的面向对象语言，但它天生的灵活性，使应用场景更加丰富关于继

2021-08-30 19:25:13 295

原创彻底理解闭包

一、是什么一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来，作为函数内部与外部连接起来的一座桥梁下面给出一个简单的例子functioninit(){varname="Mozilla";//name是一个被init创...

2021-08-30 19:21:11 133

原创 npm 安装中的 i、-g、--save、--save-dev、-D、-S的区别

i 是 install 的简写-g 是全局安装，不带 -g 会安装在个人文件夹-S 与 --save 的简写，安装包信息会写入 dependencies 中-D 与 --save-dev 的简写，安装包写入 devDependencies 中-S安装的依赖是项目在实际运行时也需要的依赖-D则是项目在开发阶段需要的依赖，例如es6转es5的依赖，我们就只需要用它来获取转译后的代码，但在项目运行过程中并不需要这些...

2021-08-14 11:05:10 877

原创数组去重（算法）

方法一：哈希表思想思路：新建一个结果数组、一个存储标志的对象，遍历数组，对象中arr[i]对应的值为ture的时候不重复添加for…of循环的i代表的是value（多用于数组），for…in循环的是key（多用于对象）；function unique(arr) { var result = []; var hash = {}; for (let elem of arr) { if (!hash[elem]) { result.push(

2021-08-13 11:54:40 212

原创 typeof和instanceof的区别

一、typeoftypeof操作符返回一个字符串，表示未经计算的操作数的类型typeof 1 // 'number'typeof '1' // 'string'typeof undefined // 'undefined'typeof true // 'boolean'typeof Symbol() // 'symbol'typeof null // 'object'typeof [] // 'object'typeof {} // 'object'typeof consol.

2021-08-09 18:12:30 483

原创 CSS3新特性

在项目开发中我们采用的CSS3新特性有 1.CSS3的选择器 1）E:last-child 匹配父元素的最后一个子元素E。 2）E:nth-child(n)匹配父元素的第n个子元素E。 3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。 2. @Font-face 特性 Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。 @font-face { font-family:...

2021-08-08 12:10:51 334

weixin_45601248的博客