- 博客(96)
- 收藏
- 关注
RSS订阅原创 重绘和回流有什么区别?如何避免和减少重绘和回流
浏览器的渲染机制:解析html,生成dom树,解析css,生成css树,将dom树和css树相结合生成渲染树,根据渲染树进行布局,这一步涉及到回流,最后将绘制的所有内容显示到页面上,这一步就是重绘。对dom元素的样式进行修改,比如color和background-color,浏览器不需要重新计算几何属性的时候,直接绘制了该元素的新样式,那么这里就只触发了重绘。对dom元素的大小,位置进行修改后,浏览器需要重新计算元素的几何属性，就会触发回流,删除或添加一些dom元素时也会触发回流。
2023-12-05 21:33:12
426
原创 css3有哪些基础单位
rem单位是相对于根元素（html元素）的字体大小的倍数。视口宽度（vw）和视口高度（vh）：视口宽度单位（vw）表示相对于视口宽度的百分比，视口高度单位（vh）表示相对于视口高度的百分比。例如，设置元素的宽度为50vw，表示该元素的宽度为视口宽度的50%。百分比：百分比是相对于父元素的计算单位，用来定义相对于父元素的尺寸或位置。例如，设置元素的宽度为50%，表示该元素的宽度为父元素宽度的50%。自动（auto）：自动是CSS中的一个特殊值，表示由浏览器自动计算或根据上下文决定元素的尺寸。
2023-12-05 20:52:11
423
原创 在vscode中，react项目的js文件如何快速生成一个结构
安装并启用React相关的插件扩展。例如：ES7 React/Redux/GraphQL/React-Native snippets 或者 JavaScript (ES6) code snippets 等。在VSCode中，可以使用一些扩展或者代码片段来快速生成React项目的基本结构。在你需要创建React组件的文件中，输入片段的前缀。按下Tab键，即可自动生成React组件的基本结构。
2023-07-10 09:28:49
919
原创 手机如何进行拍摄才能拼接出全景照片(后期使用ptgui进行拼接)
此时手机向上仰45°，拍摄第13张图片，保持向上仰的角度不变，再向右旋转30°拍摄第14张，以此类推，转一圈再次拍摄了12张图片，此时手机向下俯45°，拍摄第25张照片，保持向下俯拍的角度不变，再向右旋转30°拍摄第26张，以此类推，转一圈再次拍摄了12张图片，此时共有了36张图片。手机向上仰90°（与天空平行），拍摄一张，手机转90°，再拍摄一张，此时共有38张图片，手机向下俯拍90°（与地面平行），拍摄一张，手机转90°，再拍摄一张，此时共有40张图片。拼接教程在网上搜ptgui的使用教程即可。
2023-06-28 11:22:53
613
1原创 https是如何进行加密的？
HTTPS协议在通信时，首先会采用公钥加密的方式，把密钥进行公钥加密，然后传输给服务器，服务器使用私钥解密出密钥后，客户端和服务器即可建立起安全的访问通道。在接下来的通信就会采用速度更快的共享密钥加密的方式进行数据传输。这样HTTPS协议就既拥有公钥加密的安全性，同时也拥有了通用加密的高速的两个优点。对称加密：加密和解密用同一个密钥，客户端对数据加密，服务端解密拿到数据非对称加密：使用公钥和私钥，公钥加密的内容只能私钥解开，私钥加密的内容所有公钥都能解开；私钥只保存在服务器端，公钥可以发送给所有客户端
2021-12-26 12:29:51
3962
原创 http与https的区别：
HTTP协议传输的信息都是明文的，因此使用HTTP协议传输隐私信息非常不安全，SSL协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。简单来说，HTTPS协议是由SSL+HTTP协议，要比http协议安全。http和https用的端口也不一样，前者是80，后者是443。http的连接很简单，是无状态的，无状态的意思是其数据包的发送、传输和接收都是相互独立的。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。而且HTTPS协议可认证用户
2021-12-26 12:28:06
1070
原创 http长链接
http1.0版本的缺点就是每个tcp链接只能发送一个请求，发送数据完毕，链接就关闭，如果还要请求其他资源，就必须再新建一个链接，解决办法：用一个非标准的connection字段，connection：keep-alive，这个字段要求服务器不要关闭tcp链接，以便其他请求复用，但这个不是标准字段，不是根本的解决办法http1.1增加了持久链接的特性，允许复用tcp链接，但是同一个tcp链接里面，所有的数据通讯都是按照次序进行的，服务器只有处理完一个，才会进行下一个，要是前面的处理的特别慢，后面就会有许
2021-12-26 12:27:18
835
原创 前端常见的攻击及防御方法
Xss攻击：跨站脚本攻击，它允许恶意web用户将代码植入页面中，这样当别人访问到该页面时，也执行了嵌入的那部分代码，可以简单的理解为JavaScript代码注入（防御：转义用户的输入，就是把用户的输入解读为数据而不是代码，对用户的输入及请求都进行过滤检查，设置输入域的匹配规则等，使用cookie的httpOnly属性，加上这个属性的cookie字段，js就无法进行读写了）CSRF攻击：跨站请求伪造，是一种对网站的恶意利用。比如说你登录了一个普通网站，然后CSRF攻击者在你已经登录目标网站之后，诱使你访问
2021-12-26 12:25:00
4220
原创 Js对象属性的遍历方法
Object.keys(obj)返回对象自身的可以枚举的属性Object.getOwnPropertyNames(obj)可以遍历到所有得自身属性。包括不可枚举的属性for...in，不仅可遍历到自身的属性，还可以循环遍历到原型链中的属性，都是可枚举的...
2021-12-26 12:21:09
326
原创 Js检测属性位于对象本身还是来自于其原型链
1、in操作符in操作符会在通过对象能够访问给定属性时返回true，无论该属性存在于对象本身还是其原型链上。2、obj.hasOwnProperty(prop)hasOwnProperty()方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性。...
2021-12-26 12:20:19
525
原创 地址栏中传递带有特殊字符的参数如何进行转义
Js中编码有三种方法：escape，encodeURI，encodeURIComponentEscape：不推荐使用，因为escape只能对ASCII符号正确编码，而encodeURI、encodeURIComponent可以对所有的Unicode符号编码EncodeURI:用于对网址编码，因为不对url中的冒号（：）斜杠（/）进行编码，所以如果参数中包含冒号，斜杠就会解析出错，所以此方法就不能对参数进行编码EncodeURIComponent：用于对网址参数进行编码，因为这个方法对中文，空格，
2021-12-26 12:18:51
828
原创 动静资源分离
动静分离是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。1、动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上。2、将静态资源全部存放在CDN服务器上。因为之前项目中的JavaScript,CSS以及img文件都是存放在CDN服务器上，将HTML文件一起存放到CDN上之后，可以将静态资源统一放置在一种服务器上，便于前端进行维护；（CDN系统能够实时地根据网络流量和各节点的连接、负载状
2021-12-25 19:54:37
456
原创 http常见的状态码
状态码就是网站返回结果的一个代号，1xx （信息性状态码） 接受的请求正在处理（101状态码表示服务器应答客户端升级协议的请求对协议进行切换。）2xx （成功状态码） 请求正常处理完毕（200：成功）3xx （重定向）（301:永久跳转302：临时跳转304：客户端有缓存情况下服务端的一种响应。）4xx （客户端错误） 客户端请求出错，服务器无法处理请求（403:权限不足404：没有找到）5xx （服务器错误） 服务器处理请求出错（500：服务器端内部错误，502：服务端网关错误，50.
2021-12-25 19:53:27
692
原创 http请求的组成
http请求由请求行，请求头，请求体组成请求行由请求方法、请求url、http协议及版本组成。请求方法：get、post、head、put、delete、trace、connect、options get用来请求指定页面的内容，并返回实体主体，post向服务器提交资源数据进行请求处理，post请求可能会导致新的资源的建立或者已有资源的修改，post比get更安全，因为get方法数据存放在请求行里的url末尾，而post方法数据存放在请求体里，get有url的...
2021-12-25 19:51:35
3820
原创 如何检测出Localstorage储存空间的大小
if (!window.localStorage) { console.log('当前浏览器不支持localStorage!')}var test = '0123456789';var add = function (num) { num += num; if (num.length == 10240) { test = num; return; } add(num);}add(test);var.
2021-12-25 16:29:15
1030
原创 Js的几种设计模式
单例模式概念：每一次new出来的对象都是一模一样的，用===符号判断，结果是true应用场景：网站的弹出层alert()或者右下角的广告页面，一个网站不可能只弹出一次这个界面，不能每次弹出就创建一个，每次弹出的都是之前创造好的，只是内容发生变化组合模式概念：举一个简单的例子，就像家里每个电器都有单独的开关，而组合模式就是设置一个总开关，这个开关可以控制家中所有电器的开关,这就是组合模式。实现思想：先定义控制不同电器的开关，是一个个构造函数，这里的每一个构造函数都需要一个启动方法，然后再定
2021-12-25 16:27:35
79
原创 多线程的串行和并行
我面试面到一半，电话来了，我一直等面试完了以后才去接，这就说明我不支持并发也不支持并行。并发:我面试面到一半，电话来了，我停了下来接了电话，接完后继续面试，并发的关键是你有处理多个任务的能力，不一定要同时。并行：我面试面到一半，电话来了，我一边打电话一边面试。并行的关键是你有同时处理多个任务的能力。它们的主要区别就是是否是『同时』。并发就是同步的串行，串行是指多个任务时，各个任务按顺序执行，完成一个之后才能进行下一个。并行指的是多个任务可以同时执行，异步是多个任务并行的前提条件...
2021-12-25 16:26:31
595
原创 js为什么采用单线程而不采用多线程
JavaScript是单线程的，也就是说同一个时间只能做一件事。JavaScript的单线程，与它的用途有关。Js作为浏览器脚本语言，主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂问题。比如，JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？HTML5允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质
2021-12-25 16:24:26
678
原创 Js的运行机制（线程进程/事件循环/宏微任务）
参考文章：https://juejin.cn/post/6844904050543034376#heading-0线程与进程的理解1）进程，是系统进行资源分配的基本单位。进程可以通过Windows任务管理器查看，CPU可以有很多进程，我们的电脑每打开一个软件就会产生一个或多个进程，电脑运行的软件多就会卡，是因为CPU每启动一个新的进程必须分配给它独立的地址空间，但是一个CPU一共就那么多资源，分出去越多，越卡。但是也因为进程有独立的地址空间，所以进程安全性比较高，一个进程崩溃后，不会对其它进程产生影
2021-12-25 16:22:05
274
原创 Js事件委托机制
事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。这样做的优势有：1.减少DOM操作，提高性能。2.随时可以添加子元素，添加的子元素会自动有相应的处理事件。//应用举例 document.addEventListener("click", function (event) {var target = event.target; switch (target.id) { case
2021-12-25 16:15:08
391
原创 Js继承的几种方式
1、原型链继承子类原型对象指向父类new出来的实例，从而实现子类可以访问到父类构造函数以及原型上的属性或者方法缺点：父类构造函数中的引用类型（比如对象，数组），会被所有子类实例共享。其中一个子类实例进行修改，会导致所有其他子类实例的这个值都会改变2、构造函数继承通过修改父类构造函数this实现的继承。我们在子类构造函数中使用call将父类构造函数的this修改为子类的this。优点：解决了原型链继承中构造函数引用类型的数据会共享的问题，同时可以通过call向构造函数传参缺点：所有方法
2021-12-25 16:12:40
257
原创 JS垃圾回收方式
JS执行环境中的垃圾回收器怎样才能检测哪块内存可以被回收有两种方式：标记清除、引用计数标记清除：当变量进入执行环境（函数中声明变量）的时候，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”，在离开环境之后还有的变量则是需要被删除的变量。引用计数：就是跟踪一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，当这个变量指向其他一个时该值的引用次数便减一。当该值引用次数为0时就会被回收。...
2021-12-24 15:37:06
77
原创 promise的优点promise.all(),promise.race(),promise.allSettled()的原理
Promise也是使用回调函数，只不过是把回调封装在了内部，使用上一直通过 then 方法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及理解上会更直观和简洁一些。Promise出现之前都是通过回调函数来实现，回调函数本身没有问题，但是嵌套层级过深，很容易掉进回调地狱。1、promise.all()Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulf...
2021-12-24 15:31:31
1362
原创 Commonjs模块化和es6模块化的区别
commonjs模块化暴露：模块内部的变量其他模块是无法访问，如果想要其他模块进行访问，需要进行接口的暴露，Commonjs模块化利用module.exports进行接口的暴露，module是一个对象，每个模块都拥有这个对象，exports属性是用于将当前目录信息传递到其他模块，其默认值是一个空对象引用：require（模块）1. 当模块为自定义模块的时候，参数为文件路径。require('./a.js')2. 当模块为内置模块的时候，参数为模块名称。require('http')3.
2021-12-24 15:26:57
92
原创 vue中组件之间的通信有哪几种方法？
（1） props /emit父组件通过props向子组件传递数据，子组件通过$emit和父组件通信父组件向子组件传值props只能是父组件向子组件进行传值，子组件的数据会随着父组件不断更新。 props可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。子组件向父组件传值$emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。（2）依赖注入（provide / inject）在层数很.
2021-12-24 15:23:43
183
原创 AJAX状态码说明
1**：请求收到，继续处理2**：操作成功收到，分析、接受3**：完成此请求必须进一步处理4**：请求包含一个错误语法或不能完成5**：服务器执行一个完全有效请求失败100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本200——交易成功201——提示知道新文件的URL202——接受和处理、但处理未完成203——返回信息不确定或不完整204——请求收到，但返回信息为空205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件206——服务器已经完成
2021-12-24 15:21:29
249
原创 ajax使用方法
// 1. 初始化let xhr = new XMLHttpRequest();// 2. 设置请求行let method = "GET"let url = "http://121.199.29.84:8001/carousel/findAll"xhr.open(method,url)// 3. 设置请求头let token = ""xhr.setRequestHeader('Authorization',token)// 4. 设置请求体，并发送请求xhr.send()// 5. .
2021-12-24 15:20:41
49
原创 Object.defineProperty() 和proxy的区别
Object.defineProperty 监听不到数组下标和长度的变化。而且监测不到对象的属性添加或删除Vue3 使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能。相对于Object.defineProperty()来说，Proxy 可以监听数组的变化。而且Proxy 直接代理整个对象而非对象属性，这样只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性。let obj = {name: 'Eason',age: 30}let handler .
2021-12-23 20:57:39
347
原创 @import与link的区别
两者都是外部引用CSS的方式<link rel="stylesheet" type="text/css" href="*.css"><style type="text/css">@import "*.css"</style>link除了加载CSS外，还可以定义其他事务，@import只能加载CSS。link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后加载。link无兼容问题；@import是在CSS2.1提出的，低版本的.
2021-12-23 20:44:56
83
原创 用css隐藏元素的方法有哪些
display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
2021-12-23 20:43:09
62
原创 Css媒体查询
媒体查询就是根据不同的设备宽度设置断点，然后书写css样式覆盖之前的样式。媒体类型：screen：计算机屏幕，print：打印，all：所有设备媒体属性：多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。媒体属性必须用括号()包起来width | min-width | max-width height | min-height | max-height逻辑操作符：and，or，not，onlyand用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当
2021-12-23 20:39:39
166
原创 消除浮动问题（拓展：伪元素与伪类的区别）
消除浮动问题浮动溢出：容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。1、给父级div定义height属性2、包含浮动元素的父级标签添加overflow:hidden或者overflow:auto3、使用 ::after 伪元素。ul::after{display:block;content:””;clear:both}伪元素::和伪类:的区别伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部
2021-12-23 20:35:28
191
原创 margin重叠问题
两个块级元素的上外边距和下外边距可能会合并为一个外边距，这种行为就是外边距折叠。浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。折叠合并后外边距的计算原则如下：如果两者都是正数，那么就取最大者 如果是一正一负，就会正值+负值 两个都是负值时，用0减去两个中绝对值大的那个解决办法：对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠（1）兄弟之间重叠底部元素变为行内盒子：display: inline-block 底部元素设置浮动或定位（2）父..
2021-12-23 20:32:10
70
原创 BFC（块级格式化上下文）
BFC是（box formatting context ）块级格式化上下文的缩写，会形成一个独立的渲染区域，内部元素的渲染不会影响外界触发BFC的条件：元素设置浮动：float 除 none 以外的值；overflow 值为：除visible的值；元素设置定位：position (absolute、fixed)；Flex布局；display：inline-block元素BFC的作用：解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，
2021-12-23 20:26:36
264
原创 HTML语义化有以下几个好处？
让页面呈现出清晰的结构；有利于和浏览器建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页；便于团队开发和维护，语义化更具可读性。...
2021-12-23 14:23:25
214
原创 如何用css设置一个三角形
CSS绘制三角形主要用到的是border属性，也就是边框。平时在给盒子设置边框时，往往都设置很窄，就可能误以为边框是由矩形组成的。实际上，border属性是由三角形组成上三角div{ border: 100pxsolidtransparent; width: 0; height: 0; border-top-color: red; }左上三角形div{ ...
2021-11-19 08:46:26
383
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人