火兰-CSDN博客

原创详解clientWidth，scrollWidth，offsetWidth，innerWidth，outerWidth

3.document.documentElement.offsetWidth：元素的内容宽度（不只是你能看到的部分，含滚动条/包含border）2.document.documentElement.scrollWidth：内容可滚动宽度（不只是你能看到的部分，不含滚动条）1.document.documentElement.clientWidth：可视区屏幕宽度（你能看到的页面部分，不含滚动条）5.window.outerWidth：窗口的整个实际宽度（包含你查看console.log时这样的控制台边栏）

2022-11-25 00:23:44 3102 1

原创 vue-router路由元信息详解

2、if (to.matched.some(record => record.meta.requiresAuth) )，如果对这类写法不熟悉，可以去看看es6的箭头函数，这句话就是返回遍历的某个路由对象，我们定义为为record，检测这个对象是否拥有meta这个对象，如果有meta这个对象，检测它的meta对象是不是有requiresAuth这个属性，且为true，如果满足上述条件，就确定了是这个/foo/bar路由。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录。

2022-11-07 10:53:27 3780

原创前端移动端的rem适配计算原理

1 屏幕宽为 clientWidth(px)。6 则有 w/clientWidth(px) = ruleW(px)/750(px) 单位化简===> w/clientWidth(px) = ruleW/750。7 化简 w = (clientWidth/750)*ruleW(px) 化简==> w = n*ruleW(px) 转换 w = ruleW * n(px)3. 则有 n2(px) = 1(rem) , n (px) * 100 = 1(rem) , n(px) = 1/100 (rem);

2022-10-30 20:29:14 2785

原创渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？

好了，我们现在已经分析完了整个渲染流程，从 HTML 到 DOM、样式计算、布局、图层、绘制、光栅化、合成和显示。下面我用一张图来总结下这整个渲染流程：完整的渲染流水线示意图渲染进程将 HTML 内容转换为能够读懂的DOM 树结构。渲染引擎将 CSS 样式表转化为浏览器可以理解的，计算出 DOM 节点的样式。创建布局树，并计算元素的布局信息。对布局树进行分层，并生成分层树。为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。

2022-10-15 12:56:09 287

原创渲染流程（上）：HTML、CSS和JavaScript，是如何变成页面的？

好了，今天正文就到这里，我画了下面这张比较完整的渲染流水线，你可以结合这张图来回顾下今天的内容。渲染流水线图从图中可以看出，本节内容我们介绍了渲染流程的前三个阶段：DOM 生成、样式计算和布局。浏览器不能直接理解 HTML 数据，所以第一步需要将其转换为浏览器能够理解的 DOM 树结构；生成 DOM 树后，还需要根据 CSS 样式表，来计算出 DOM 树所有节点的样式；最后计算 DOM 元素的布局信息，使其都保存在布局树中。

2022-10-15 12:55:10 464

原创导航流程：从输入URL到页面展示，这中间发生了什么？

服务器可以根据响应头来控制浏览器的行为，如跳转、网络数据类型判断。Chrome 默认采用每个标签对应一个渲染进程，但是如果两个页面属于同一站点，那这两个标签会使用同一个渲染进程。浏览器的导航过程涵盖了从用户发起请求到提交文档给渲染进程的中间所有阶段。导航流程很重要，它是网络加载流程和渲染流程之间的一座桥梁，如果你理解了导航流程，那么你就能完整串起来整个页面显示流程，这对于你理解浏览器的工作原理起到了点睛的作用。

2022-10-12 13:25:56 336

原创 HTTP请求流程：为什么很多站点第二次打开速度会很快？

本篇文章的内容比较多、比较碎，但是非常重要，所以我先来总结下今天的主要内容。为了便于你理解，我画了下面这张详细的“HTTP 请求示意图”，用来展现浏览器中的 HTTP 请求所经历的各个阶段。HTTP 请求流程示意图从图中可以看到，浏览器中的 HTTP 请求从发起到结束一共经历了如下八个阶段：构建请求、查找缓存、准备 IP 和端口、等待 TCP 队列、建立 TCP 连接、发起 HTTP 请求、服务器处理请求、服务器返回请求和断开连接。

2022-10-11 17:37:38 236

原创 TCP协议：如何保证页面文件能被完整送达浏览器？

好了，这一节就到这里，下面我来做一个简单的总结。互联网中的数据是通过数据包来传输的，数据包在传输过程中容易丢失或出错。IP 负责把数据包送达目的主机。UDP 负责把数据包送达具体应用。而 TCP 保证了数据完整地传输，它的连接可分为三个阶段：建立连接、传输数据和断开连接。其实了解 TCP 协议，是为了全方位了解 HTTP，包括其实际功能和局限性，之后才会更加深刻地理解为什么要推出 HTTP/2，以及为什么要推出 QUIC 协议，也就是未来的 HTTP/3。

2022-10-11 13:13:51 347

原创 Chrome架构：仅仅打开了1个页面，为什么有4个进程？

计算机中的并行处理就是同一时刻处理多个任务，比如我们要计算下面这三个表达式的值，并显示出结果。A = 1+2B = 20/5C = 7*8复制代码任务 1是计算 A=1+2；任务 2是计算 B=20/5；任务 3是计算 C=7*8；任务 4是显示最后计算的结果。正常情况下程序可以使用单线程来处理，也就是分四步按照顺序分别执行这四个任务。如果采用多线程，会怎么样呢？我们只需分“两步走”：第一步，使用三个线程同时执行前三个任务；第二步，再执行第四个显示任务。

2022-10-11 13:12:26 540

原创 json.stringify()的妙用，json.stringify()与json.parse()的区别

localStorage/sessionStorage默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用json.stringify()将对象转为字符串，而在取缓存时，只需配合json.parse()转回对象即可。其次，JSON.stringify()的受众更多是对象，而toString()虽然可以将数组转为字符串，但并不能对{name:'天子笑'}这类对象实现你想要的操作，它的受众更多是数字。需要注意一点，由于此方法是将JSON字符串转换成对象，所以。

2022-09-11 20:39:32 308

原创【JS】深拷贝与浅拷贝的区别，实现深拷贝的几种方法

壹 ❀ 引如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子：let a=[0,1,2,3,4], b=a;console.log(a===b);a[0]=1;console.log(a,b);嗯？明明b复制了a，为啥修改数组a，数组b也跟着变了，这里

2022-09-11 19:54:26 173

原创 JS 从内存空间谈到垃圾回收机制

在上述代码中，当dom元素renderer被移除时，由于是周期定时器的缘故，定时器回调函数始终无法被回收，这也导致了定时器会一直对数据serverData保持引用，好的做法是在不需要时停止定时器。在js中堆内存一般用于存储引用类型的数据，需要注意的是由于引用类型的数据一般可以拓展，数据大小可变，所以存放在堆内存中；当我们创建数组a时，栈内存中只保存了变量a与指向堆内存中数组的地址指针，而当我们将a复制给变量b时，其实只是复制了一份地址指针，两者还是指向同一数组，无论谁修改，都会影响彼此。

2022-09-09 18:35:08 242

原创 uniapp scroll-view组件隐藏滚动条

这时候一般就会隐藏了滚动条，如果还没反应，就重新编译一下。在App.vue的style标签里增加CSS样式。在pages.json增加如下配置。

2022-08-29 10:43:02 1457 2

原创 TypeSprict -- interface 接口

接口不止能定义变量值也可以定义函数// 定义了一个信息接口，里面有姓名，年龄和一个吃的方法返回的类型是string类型}age:99,}}只定义方法的接口1.对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配2.函数的参数会逐个进行检查，要求对应位置上的参数类型是相同的}}

2022-08-24 13:38:49 839

原创 TypeSprict -- 基础类型

声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都可以是任意值。我们用ts严格规范类型的意义，所以在项目中尽可能少用any定义类型。如果是一个普通类型，在赋值过程中改变类型是不被允许的。但如果是 any 类型，则允许被赋值为任意类型。使用 number 定义数值类型。

2022-08-24 11:12:51 365

原创 Vue3 Composition API（setup函数）

不知道各位在之前使用 Vue 开发的时候，是否感觉到在代码量很少的时候，逻辑结构还是蛮清晰的。但是随着代码量越来越大，即使我们把相关功能抽出来变成一个个的功能组件，但是功能组件也是越来越多，整体内容全部放在其中也是会相当臃肿，而且必不可少的还会使用到各种形式的组件间通信。这就导致了，每个功能模块的代码会散落分布在各个位置，让整个项目的内容难以阅读和维护（尤其是团队开发的时候，各种各样的命名和组件间通信，让人摸不着头脑）。

2022-08-23 09:55:21 443

原创 Vue3 setup语法糖使用简易教程（下）

在vue2中是使用this.refs.子组件名称.xxx方法，即可拿到子组件定义的值或者方法，在vue3中没办法这么拿取，必须子组件暴露后父组件才可以拿取到，具体实现看代码。在新的vue3中，肯定也猜到了，不是使用this.$store调用的了，是引入调用，下面就是教大家如何在vue3中如何使用vuex。同时也可以使用分发(...mapActions,...mapState等方法)，具体参照。父元素传递给子元素的数据，子元素使用defineProps进行接收。1.3 defineEmits传值（子传父）

2022-08-23 09:28:13 632

原创 Vue3 setup语法糖使用简易教程（上）

ref在vue3中是将数据转换成响应式数据结构的一种，因为vue3中没有了data(){},那么就没办法劫持数据做到响应式数据，那么怎么办呢？在vue3中新出现了ref这个新方法，可以将数据变成响应式数据为了区别使用ref和不使用ref的区别，我写了下面两个demo做对比//不使用ref定义let num=1复制代码我们定义了一个不使用ref的数据，可以看出视图也渲染成了我们想要的状态但是如果我们加上一个按钮，每次让num+1，又是什么效果呢？

2022-08-23 09:24:58 1769

原创 vue混入(mixin)的详解

混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。1.钩子函数同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将在组件自身钩子之前调用。2.数据对象合并3.普通方法合并当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对。4.局部混入5.全局混入。...

2022-08-13 14:24:25 1858

原创浅析ES6六种声明变量的方法

ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已，constructor方法就是构造方法，而this关键字则代表实例对象。，这个时候，你就从action.js中获取到了一个叫 Button 的变量，既然获取到了，你就可以对Button里的代码为所欲为了。用于加载文件，在大括号接收的是一个或多个变量名，这些变量名需要与你想要导入的变量名相同。所以，ES6 一共有 6 种声明变量的方法。...

2022-08-05 16:01:11 1040

转载 px、em、rem的区别

在做项目的时候用什么单位长度取决于你的需求，我一般是这样的：1、像素（px）：用于元素的边框或定位。2、em/rem：用于做响应式页面，不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），所以在计算的时候不方便，相比之下rem就只有一个参照物（html元素），这样计算起来更清晰。1、rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。2、em 单位基于使用他们的元素的字体大小。3、rem 单位基于 html 元素的字体大小。...

2022-08-03 18:48:10 5650

原创 BFC、IFC、GFC、FFC概念理解、布局规则、形成方法、用处浅析

接着聊一下BFC、IFC，与FFC、GFC，GFC是一种二维度的布局方式，现在也蛮火，但是因为兼容性问题比较大，现在用的不多。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。不同类型的 Box，会参与不同的 Formatting Context。的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器。...

2022-08-03 13:55:28 1614

原创你以为border-radius只是圆角吗？【各种角度】

6、border-radius:10px 20px 40px/20px 50px 斜杠前面和后面每一组分别表示的是四个角水平半径和四个角垂直半径。，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如下图），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。斜杠前面的一组四个值分别表示四个角的。...

2022-08-03 12:23:53 486

原创 css3新单位vw、vh、vmin、vmax的使用介绍

有时为了突出弹出框，或者避免页面元素被点击。我们需要一个覆盖整个可视区域的半透明遮罩，这个使用。)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。）单位除了可以用来设置元素的宽高尺寸，也可以在文本中使用。），在竖屏和横屏状态下显示的字体大小是不一样的。是相对于父元素的大小设定的比率，）大小来决定的，单位。：视窗宽度的百分比（...

2022-08-03 10:32:54 3563

原创浅析什么是伪类和伪元素？伪类和伪元素的区别解析

1、伪类种类伪类作用对象是整个元素尽管这些条件不是基于DOM的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，div等等。2、伪元素种类伪元素作用于元素的一部分：一个段落的第一行或者第一个字母}伪元素其实相当于伪造了一个元素，例如 before，first-letter 达到的效果就是伪造了一个元素，然后添加了其相应的效果而已；而伪类没有伪造元素，例如 first-child 只是给子元素添加样式而已。伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但。...

2022-08-02 23:23:49 9062

原创浅析css动画知识：用法介绍（规则与关键帧）animation-delay为负值提前进行动画、动画函数（三次贝塞尔曲线与步骤缓动函数）补间动画与逐帧动画效果、如何控制动画运行或暂停及控制元素各阶段状态

因此，两种动画效果都是很有必要掌握的，在实际使用的时候灵活尝试，选择更适合的。forwards：一句话总结，元素在动画开始之前的样式为 CSS 规则设定的样式，而动画结束后的样式则表现为由执行期间遇到的最后一个关键帧计算值（也就是停在最后一帧）我们都知道，正常情况下，动画应该是运行状态，那如果我们将一些动画的默认状态设置为暂停，只有当鼠标点击或者 hover 的时候，才设置其。这个其实是不准确的，不全面的。但是，在动画的前 2s，另外两个元素是不会动的，只有 2s 过后，整个动画才是我们想要的。...

2022-08-02 23:08:47 3766

原创什么是浮动？什么是文档流？清除浮动的几种方式及原理？什么是BFC，如何触发BFC,BFC的作用

float是css样式中的定位属性，用于设置标签对象（如标签盒子、标签、标签、标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（floatleft;理解BFC属于普通流，相当于一块独立的渲染区域，BFC看成是元素的一种属性，当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。...

2022-07-30 13:28:27 298

原创 (border-box)盒子模型w3c、IE的区别

主要看这两种盒子模型的优缺点及适用场景。

2022-07-30 12:44:41 2922

原创深度解析 z-index

没有使用z-index该元素的position是否是static，如果是static，那么这个元素就称为；反之，如果position值是relative,absolute,fixed,或sticky则称positioned。positioned元素享受特权，会覆盖元素。而元素中，有float样式的元素覆盖没有float的。元素的“出场”顺序——即在html中的顺序，同类型元素遵循后来者居上的原则。z-index属性设定了一个定位元素及其后代元素或flex项目的z-order。z-indexz轴。...

2022-07-28 23:11:29 1535

个人主页、个人简介、网页设计与制作 HTML+CSS（全文件源码）

高频面试题(偏向Vue).md

前端基础面试题(必学知识点).md

空空如也