W5899-CSDN博客

什么是CLS?累计布局偏移: Cumulative Layout Shift, 简称CLS，是Google提出的一项非常重要的网页性能指标，以用户为中心的内容视觉稳定性指标，因为它有助于量化用户体验到意外布局移位的频率，较低的CLS有助于确保页面用户视觉和交互体验。当用户浏览一个页面的时候，若是想要点击一个按钮或者其他交互时，页面的布局突然出然抖动，可以会造成用户的交互行为造成期望之外的结果。页面内容的意外移动通常发生在资源异步加载或DOM元素被动态添加到现有内容之上的页面上。罪魁祸首

2022-12-30 15:48:39 438

原创 TypeScript类型断言

typescript

2022-07-16 20:37:34 128

原创 tsconfig.js配置属性含义-编译上下文

一、tsconfig.json 的作用用于标识 TypeScript 项目的根路径；用于配置 TypeScript 编译器；用于指定编译的文件。二、tsconfig.json 重要字段 files - 设置要编译的文件的名称；include - 设置需要进行编译的文件，支持路径模式匹配；exclude - 设置无需进行编译的文件，支持路径模式匹配；compilerOptions - 设置与编译流程相关的选项。##三、compilerOptions 选项compilerOpt

2022-04-29 09:03:54 477

原创 JsOperator

链判断运算符（?.）通常获取一个对象多层的属性值时，需要进行多次的判断。如不判断，一个为空则报错，导致后面无法继续下去。 // error const firstName = message.body.user.firstName; // ok const firstName = (message && message.body && message.body.user && message.body.user.first

2022-03-17 09:34:37 340

原创前端埋点说明

一、为什么需要前端监控前端监控的目的是：获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化的方向。前端监控可以分为三类：数据监控、性能监控和异常监控。(1)数据监控数据监控，顾名思义就是监听用户的行为。常见的数据监控包括：- PV/UV:PV(page view)，即页面浏览量或点击量。UV:指访问某个站点或点击某条新闻的不同IP地址的人数- 用户在每一个页面的停留时间- 用户通过什么入口来访问该网页- 用户在相应的页面中触发的行为统计这些数

2021-08-19 23:37:57 322

原创 Vue2.0双向数据绑定原理

概述 Vue.js 的细节 Vue.js 可以说是MVVM 架构的最佳实践，专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对来比较轻量级的JS 库，API 简洁，很容易上手。Vue的基础知识网上有现成的教程，此处不再赘述，下面简单了解一下 Vue.js 关于双向绑定的一些实现细节： Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。当把一个普通 Javascrip

2021-08-17 23:06:49 233

原创 Computed缓存特性

computed的计算属性有缓存机制，只有当其依赖的响应式数据发生变化时才会清空缓存重新计算结果其缓存机制本质是通过一个dirty属性控制的，只有dirty为true时才会重新计算结果替换缓存。dirty只有当其响应式数据发送变化时才会设置为true，重新计算后会再次被设置为false

2021-08-17 22:51:05 1320

原创为什么template下也必须有且只能有一个div呢?

一、先看一看template这个标签，这个标签是HTML5出来的新标签，它有三个特性： 1. 隐藏性：该标签不会显示在页面的任何地方，即便里面有多少内容，它永远都是隐藏的状态； 2. 任意性：该标签可以写在页面的任何地方，甚至是head、body、script标签内； 3. 无效性：该标签里的任何HTML内容都是无效的，不会起任何作用；但是呢,可以通过innerHTML来获取到里面的内容。知道了这个，再来看.vue的单文件组件。其实本质上，一个单文件组件，本质上会被各种各样

2021-02-07 10:02:19 2414 1

原创 webpack-安装和使用Vue的配置过程

一、webpack安装安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具npm1. 查看自己的node版本 node -v2.全局安装webpack(这里可以指定版本号3.6.0,因为vue cli2依赖该版本) npm install [email protected] -g3.局部安装webpack(后续才需要)–save-dev是开发是依赖,项目打包后不需要继续使用的 npm install [email protected] --save-dev4. 为

2020-10-23 08:53:58 1932

原创 Vue-属性绑定&样式绑定

属性绑定:一、Vue如何动态处理属性？ 1.v-bind指令用法 <a v-bind:href='url'>跳转</a> 2.缩写形式 <a :href='url'>跳转</a>二、v-model的底层实现原理分析 <input v-bind:value="msg" v-on:input="msg=$event.target.value"> 例: <body> <div

2020-10-19 20:47:15 1481

原创 Mysql-基础

一、数据库的基本概念1. 数据库的英文单词： DataBase 简称： DB2. 什么数据库？ * 用于存储和管理数据的仓库。3. 数据库的特点： 1. 持久化存储数据的。其实数据库就是一个文件系统 2. 方便存储和管理数据 3. 使用了统一的方式操作数据库 -- SQL 4. 常见的数据库软件 * 参见《MySQL基础.pdf》1. 安装 * 参见《MySQL基础.pdf》2. 卸载 1. 去mysql的安装目录找到my.ini文件 * 复制 datadir="C:/P

2020-09-08 14:22:36 803

W5899的博客

原创 Redux-saga

原创什么是CLS