- 博客(80)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 如何理解页面的重排和重绘
重排和重绘是浏览器关键渲染路径上的两个节点，浏览器的关键渲染路径就是 DOM 和 CSSOM 生成渲染树，然后根据渲染树通过 Layout的步骤来确定页面上所有内容的大小和位置，确定布局之后，就是将像素绘制到屏幕之上。 在这之中，重排就是当元素的位置发生改变的时候，浏览器重新执行 Layout 这个步骤，来重新确定页面上内容的大小和位置，确定完后就会重新进行绘制到屏幕上，所以重排一定会导致重绘。
2023-02-19 23:21:24
314
原创 JavaScript ES6知识点汇总（上）
reflect是ES6引入的一个新的对象，他的主要作用有两点，一是将原生的一些零散分布在object、function或者全局函数里的方法（如apply、delete、get、set等等），统一整合到Reflect上，这样可以更加方便更加统一的管理一些原生API，其次就是因为Proxy可以改写默认的原生API，而Reflect也起到了一个备份原生API的作用。简单介绍下，js es6的一些新特性。这里是万物之恋，我们下次再见了。
2023-02-16 19:54:45
416
原创 怎么解决首屏加载速度过慢的问题
图片资源索然不在编码的过程中，但它却是影响页面加载性能的最大因素，而对于这类资源，我们可以进行适当的压缩。再者，对于页面上使用到的icon，可以使用在线字体图标（如：iconfont），或者使用雪碧图（也叫精灵图） ，将众多的小图标合并到同一张图上，以减轻http的请求压力。值得注意的是此时整个网页不一定要全部渲染完成，只需展示当前视窗所需要的内容，这个环节也是影响用户体验最重要的一个环节。除上述几种方法外，还有静态资源本地缓存，减少入口文件体积，开启Gzip压缩等等都可以合理有效的解决这个问题。
2023-02-15 21:01:25
2681
原创 为什么要求将JS代码写到页面的最底部？
在学习 JavaScript 时，我们了解到 js 代码可以写到绘制页面的 HTML 代码的头部、底部或者标签中等其他位置。但为什么在实际制作项目往往会要求将 js 代码写到底部或者另起一个文件并在最后引入呢？想要搞清楚这个问题我们首先需要明白页面渲染的流程。
2022-11-14 14:29:07
457
原创 几个简单的JavaScript面试题
默认对象是 window，所有函数都可以直接调用，也可以通过指定 window 来调用 history、screen、location等 window 的不同属性。与其他面向对象的编程语言中的“this”是由于类实例化的对象不同，在JavaScript中“this”是一个对象，是方法的所有者。（2）var 变量可以在其范围内更新和重新声明，let 变量可以更新但不能重新声明，const 变量即不能更新也不能重新声明；（1）用 let 和 const 声明的变量是块范围（多指作用域）的；
2022-09-19 20:40:24
2813
原创 GET和POST的区别
而对于 POST 方式的请求，浏览器会先发送 header，服务器对此响应100，continue，然后浏览器再发送 data，服务器响应200，返回数据。首先，我们知道 HTTP 的底层是 TCP/IP，由此可以得知 GET 和 POST 的底层实际也是 TCP/IP。也就是说 GET/POST 都是 TCP 链接，二者所能做的事情是相同的（给 GET 添加 request body，让 POST 携带 URL 参数，都是完全行得通的）。这里是万物之恋，我们下次再见了！
2022-09-19 00:35:35
378
原创 一些封装好的常用JavaScript方法（下）
封装一些常用JavaScript方法（下）上篇在这里：一些封装好的常用JavaScript方法（上）封装原生js的 Ajaxfunction ajax(method, url, callback, data, flag) { var xhr; flag = flag || true; method = method.toUpperCase(); if (window.XMLHttpRequest) { xhr = new XMLHttpRequest
2022-05-26 21:52:00
117
原创 一些封装好的常用JavaScript方法（上）
一些封装好的常用JavaScript方法（上）函数柯理化function curryItem(func) { var length = func.length, args = []; var result = function (arg) { args.push(arg); length--; if (length <= 0) { return func.apply(this, args);
2022-05-26 13:55:36
122
原创 简单了解下深拷贝
简单了解下深拷贝什么是深浅拷贝JSON方法拷贝的缺陷很复杂但不容易出错的一种方法在了解深拷贝之前，我们需要对浅拷贝有一定的理解。什么是深浅拷贝浅拷贝：简单来说，浅拷贝就是创建一个新的对象，这个对象有着原始对象属性值的拷贝。如果不进行深拷贝，那么一个对像的值改变了就会影响到另一个对象的值。深拷贝：了解了浅拷贝的概念，我们就可以将深拷贝理解为在内存中开辟一个新的空间，存放新对象，并且修改新对象的值不会影响原对象。JSON方法拷贝的缺陷说到深拷贝，相信很多人首先就会想到 JSON 方法：let ob
2022-05-20 14:00:42
237
1
原创 SDK和API的区别
SDK和API的区别一、API的概念二、SDK的概念三、SDK和API的区别在正式了解它们的区别之前，我们得先知道 SDK 和 API 分别是什么？一、API的概念我们先来看这样一张图：（图画的很烂就请不要在意了）API 的全称为 Application Programming Interface，翻译过来的意思就是应用程序编程接口。实际上，API 是一些预先定义的函数，目的是提供应用程序与开发人员基于某个软件或硬件，得以访问一组进程的能力。不需要直接去访问源码，或去深刻理解内部工作机制的细节。
2022-05-13 13:54:36
41984
5
原创 常见的移动端兼容问题以及解决方案
常见的移动端兼容问题以及解决方案禁止ios识别长串数字为电话解决方法：添加 meta 属性<meta content="telephone=no" name="format-detection">禁止 ios 弹出各种窗口解决方法：添加全局 CSS 样式-webkit-touch-callout:none;禁止 Android 手机识别邮箱解决方法：添加 meta 属性<meta content="email=no" name="format-detect
2022-05-05 23:32:55
3015
原创 浅谈null和undefined的区别
浅谈null和undefined的区别简单来说，在 JavaScript 中 null 和 undefined 都代表空。主要的区别在于：undefined 表示尚未初始化的变量值；null 表示该变量有意缺少对象指向。null 就是值定义了，但它并没有指向任何内存中的对象，它是声明式的空值；undefined 就是这个变量压根就没有定义，它是隐藏式的空值。在具体点就是，null 是一个字面量，它不像 undefined，不是全局对象的一个属性；null 是表示缺少的标识，指示变量为指向
2022-05-04 23:43:24
1122
原创 JavaScript中检测数据类型的几种方式
javaScript中检测数据类型的几种方式1.typeoftypeof 的缺陷2.instanceof3.Array.isArray()4.Object.prototype.toString.call()1.typeof主要用于判断基本数据类型，使用方式：typeof(表达式) / typeof 变量名。第一种是对表达式做运算，第二种是对变量做运算值对应类型undefined未定义的变量或值boolean布尔类型的变量或值string字符串类型的变量或值
2022-05-04 17:26:51
771
原创 常见的几个JavaScript兼容问题及解决方案
常见的几个JavaScript兼容问题及解决方案事件对象的兼容e = ev || window.event;滚动事件的兼容scrollTop = document.documentElement.scrollTop || document.body.scrollTop;阻止冒泡事件的兼容if(e.stopPropagation){ e.stopPropagation();}else{ e.cancelBubble = true;}阻止浏览器默认行为的兼容
2022-05-02 12:24:15
1131
原创 JavaScript判断用户使用的浏览器
JavaScript判断用户使用的浏览器填坑之判断用户使用设备问题，上篇请看这里如何使用JavaScript来判断用户设备类型。在这里，我们用到的还是 JavaScript 中的 navigator 对象。因为比较简单，我就直接上代码了。<script type="text/javascript"> let userBrowser = navigator.userAgent.toLowerCase(); console.log(userBrowser); if
2022-05-01 23:15:26
1636
原创 应该了解的一些跨越问题和解决方法
应该了解的一些跨越问题和解决方法同源策略在遇到跨域问题的时候，我们首先应该想到的就是同源策略这个概念。同源策略 same-origin policy，在1995年由 Netspace 公司引入浏览器的一种安全策略，现在市面上的所有浏览器都必须遵守同源策略。是现代浏览器的安全基石。这里需要注意的就是，同源策略针对的仅是浏览器，也就是说只有在浏览器中才会受到同源策略的影响，而在服务器中则不受限制什么是同源？同源指的就是协议相同、域名相同和端口号相同，这同时也是最重要的三个元素。如下所示：以 htt
2022-05-01 18:18:04
260
原创 十个冷门的HTML属性
十个冷门的HTML属性1. contenteditable 网页内容可编辑2. spellcheck 拼写检查3. download 资源下载4. accept 上传文件5. translate 翻译指定6. poster 视频封面图7. inputmode 键盘选择8. pattern 添加正则表达式9. autocomplete 自动获取完成10. multiple 多种输入来自五一节回不了家的万物之恋。1. contenteditable 网页内容可编辑使用 contenteditable属性可
2022-04-30 10:57:54
319
原创 VMware15.5虚拟机软件安装教程（多图流步骤详细）
VMware15.5虚拟机软件安装教程软件获取学会安装软件的前提是要学会寻找资源，这里我就不多说了，有需要的小伙伴可以私信获取。安装需要的只有一个简单的.exe文件，如果你发现自己下载的压缩包中还要其他的东西（例如破解软件之类的），还是谨慎使用吧。安装步骤双击打开安装文件，或者右键点击以管理员身份运行（有些小伙伴把电脑权限限制的比较死，那就必须用这个方法才能正常执行安装程序），执行程序后如图：直接点击下一步后，接受用户协议，然后再次点击下一步：进入安装路劲设置，自定义更改安装路径，这里有个
2022-02-01 15:35:23
7319
原创 一些有关HTTP和HTTPS的问题（容易忽略的前端面试题）
一些有关HTTP和HTTPS的问题（容易忽略的前端面试题）http和https有什么联系？它们的默认端口号都是多少？为什么HTTPS更加安全？什么是HTTP/2？完整的HTTP事务流程是怎样的？什么是HTTP无协议状态？如何克服HTTP无状态的缺陷？HTTP1.1的新特性有哪些？什么是反向代理？http和https有什么联系？它们的默认端口号都是多少？http通常承载于tcp之上，在http和tcp之间，添加一个安全协议层（SSL或者TSL）就成为了我们常说的https；http默认的端口号为80，
2022-01-26 22:20:47
1776
原创 vue2项目中使用swiper插件
vue2项目中使用swiper插件在昨天码完上一篇文章后，突然想起来自己写vue项目时，用的轮播都是element-uI里的。并不是说element-uI里的不好用，但毕竟swiper人家是专业的。安装步骤首先简单创建一个vue2项目，配置什么的我都是随便选的，具体使用时还是要以项目要求为准；vue create test_demo然后就是通过node来安装swiper插件。这里需要注意的是，swiper默认的话，安装是最新版的swiper7。虽然说swiper7中新增了许多轮播效果，但
2022-01-25 22:18:48
7701
3
原创 Swiper插件的使用
Swiper插件的使用一、使用版本与下载地址使用版本：swiper3官网地址：Swiper3|Swiper中文网下载地址：下载Swiper - Swiper3|Swiper中文网官方API文档：中文api - Swiper3|Swiper中文网二、初始化建立项目中的Swiper获取文件：压缩包下载：解压后找到dist文件夹，复制到自己的项目中；单独文件下载引入文件：以获取到dist文件夹的项目为例引入CSS文件： <link rel="
2022-01-24 21:54:19
922
原创 JavaScript数组去重的五种方法
JavaScript数组去重的五种方法先简单准备一个数组，用于方法的实验：let array = [1,1,2,3,4,4,1,5,6,6,7,7,7];console.log(`去重前的数组：`+array);使用ES6中的Set（高效单但存在兼容性）let array1 = [...new Set(array)];console.log("去重后："+array1);使用filter + indexof两种方法配合使用(同样高效快捷)let array2 = array.f
2022-01-23 22:05:58
2126
原创 JavaScript中将数组元素从小到大排序的四种方法
JavaScript中将数组元素从小到大排序的四种方法冒泡排序法for (var i = 0; i < array.length - 1; i++) { for (var j = 0; j < array.length - i - 1; j++) { // 1.对每一个值和它的下一个值进行比较 if (array[j] > array[j + 1]) { // 如果第一个值更多，则将其赋予自定义计数值 count var count = a
2022-01-22 22:17:05
14421
原创 JavaScript中10种常用的数组操作方法
JavaScript中10中常见的数组操作数组删除最后一位元素：array.slice(0,-1);往数组的第一位添加元素，并返回新数组：function prepend(arr, item) { let arr1 =[...arr]; arr1.unshift(item); return arr1; }删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组：function curtail(arr) { return arr.sl
2022-01-22 21:51:48
394
原创 简单理解js中的防抖和节流
简单理解js中的防抖和节流 就结果而言，防抖和节流就是为了防止事件在短时间内多次触发而产生的两种解决方案。防抖防抖是将多次操作合并为一次来完成操作。其原理就是维护一个定时器，在规定的时间后触发函数；但是在该规定时间内再次触发的话，就会取消之前的定时器，再重新设置，保证了只有最后一次操作能够被触发。具体操作步骤大致为：利用闭包保存一个变量，然后返回一个定时器函数（这个函数就是后续频繁操作触发调用的函数）；根据标记条件判断是否第一次需要立即执行（根据使用场景自行设置）；当有新的触发操作时，如果存
2022-01-21 22:32:36
483
原创 JS中的栈内存和堆内存
JS中的栈内存和堆内存JS的内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。其中栈存放变量，堆存放复杂对象，池存放常量，所以也叫常量池。栈数据结构栈是一种特殊的列表，栈内的元素只能通过列表的一端访问，这一端称为栈顶。 栈被称为是一种后入先出（LIFO，last-in-first-out）的数据结构。 由于栈具有后入先出的特点，所以任何不在栈顶的元素都无法访问。 为了得到栈底的元素，必须先拿掉上面的元素。堆数据结构堆是一种经过排序的树形数据结构，每个结点都有一个值。 通常我
2022-01-21 22:22:33
1056
原创 如何使用JavaScript来判断用户设备类型
如何使用JavaScript来判断用户设备类型通过JS来实现判断当前用户所使用的设备类型。这里我们主要会使用到 navigator 对象，它是 JavaScript中的一个独对象，用于提供当前用户所使用的浏览器，操作系统等信息。相关信息数据会以 navigator对象属性的形式展现出来，目前市面上的所有主流浏览器都支持该对象的使用。而在 navigator对象中存在一个 userAgent属性，它会返回用户的设备操作系统，以及使用浏览器的信息。比较特殊的是，在APP应用不支持navigator对象的使用
2022-01-20 21:48:07
3755
原创 简单理解cookie、sessionStorage和localStorage
简单理解cookie、session、sessionStorage、localStorage前端本地存储数据的方式有三种，也就是是cookie，localstorage和sessionStorage 。三者的异同生命周期：cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效localStorage：除非被手动清除，否则将会永久保存。sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。存放数据大小：cookie：4KB左右localStorag
2022-01-20 21:15:03
1530
原创 一些简单的HTML+CSS面试题
HTML+CSS 面试题网络中使用最多的图片格式有哪些请简述css盒子模型视频/音频标签的使用HTML5新增的内容有哪些HTML5 新增的语义化标签有哪些如何理解HTML语义化标签CSS3 新增的特性清除浮动的方式有哪些？请说出各自的优点各种定位属性的区别水平垂直居中的方式标准盒子模型和怪异盒子模型如何让chrome浏览器显示小于12px的文字?CSS选择器有哪些，优先级如何计算？哪些CSS属性可以继承网络中使用最多的图片格式有哪些JPEG，GIF，PNG。最流行的是jpeg格式，可以把文件压缩到最小，
2022-01-19 21:54:24
321
原创 VUE基础面试题（三）vue最后补充+部分JavaScript面试题
VUE基础面试题（三）vue最后补充+部分JavaScript面试题VUE部分Vue的优点什么是单页应用？说说对SPA单页面的理解，它的优缺点分别是什么？vue的单页面应用（SPA）的优缺点SPA首屏加载速度慢的怎么解决？Vue权限管理JavaScript部分JQuery一个对象可以同时绑定多个事件，这是如何实现的？什么是webkit， 怎么用浏览器的各种工具来调试代码前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?Promise 和async
2022-01-19 21:41:44
219
原创 HTTP和HTTPS的区别
HTTP和HTTPS的区别数据传输安全性：HTTP是明文传输，数据都是未加密的，安全性较差；HTTPS 即 SSL+HTTP，数据传输过程是加密的，安全性较好。使用 HTTPS协议需要得到 CA认证，CA就是 Certificate Authority即颁发数字证书的机构。是负责发放和管理数字证书的权威机构，并作为电子商务交易中受信任的第三方，承担公钥体系中公钥的合法性检验的责任。一般免费的证书较少，因而需要一定的费用。HTTP 页面响应的速度比 HTTPS要快，主要是因为 HTTP使用 TCP三次
2022-01-18 21:00:08
1648
原创 px、rpx、em、rem、vw、vh各种像素单位的区别
px、rpx、em、rem、vw、vh各种像素单位的区别px：px就是 pixel的缩写，意味像素。px就是一张图片最小的一个点，一张位图就是无数个这样的点构成的，是web开发中最常用的像素单位。rpx：由微信小程序官方推出的新单位，适用于移动端的 uni-app或者微信小程序的开发。可以根据屏幕宽度进行自适应，1rpx实际上等于相对于屏幕宽度的1物理像素。在设计时可以将1px约等于2rpx。em：相对单位，参照物是父元素的 font-size字体大小，具有继承的特点。如果自身定义了 font-si
2022-01-18 13:56:40
9637
原创 JavaScript实现数组扁平化的五种方法（有效完成数组降维操作）
方法一：flat(参数) 方法 参数：需要降低的维度，设置为 Infinity（无限）可以将任意维度的数组变为一维数组。let arr = [1,2,[3,[4,5,[6,[7]]]]]console.log(arr.flat(Infinity));方法二：reduce 方法 + 递归调用function flatFn(arr){ return arr.reduce((result,item)=>{ return result.concat(Array.isA.
2022-01-17 17:13:24
477
原创 如何取消axios的重复请求
如何取消axios的重复请求什么是axios取消axios请求判断重复请求如何取消重复请求 在 web项目开发的过程中，经常会遇到客服端重复发送请求的场景，如果开发者不对重复的请求进行相应的处理，可能会导致项目崩溃，服务器瘫痪等各种各样的问题出现。通过 axios为例，了解解决重复请求的问题答案。什么是axios axios是一个基于 Promise的 HTTP客户端，同时支持浏览器和 node.js环境。是一个十分优秀的 HTTP客户端，被广泛运用在大量的 web项目中。取消axios请求
2022-01-17 11:28:00
3751
5
原创 VUE基础面试题（二）
VUE基础面试题（二）怎样理解 Vue 的单向数据流？Vue初始化过程中（new Vue(options)）都做了什么？对MVVM的理解？Vue数据双向绑定原理Vue的响应式数据原理Vue3.x响应式数据原理Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢Vue3.0 里为什么要用 Proxy API替代 defineProperty API？Proxy 与 Object.defineProperty 优劣对比vue中组件的data为什么是一个函数？而new Vue 实例里，data 可以直接
2022-01-16 17:11:20
501
原创 对版本控制的简单理解
对版本控制的简单理解含义 简单来说，版本控制，是维护工程蓝图的标准做法，能追踪工程蓝图从立项诞生一直到定案发布的过程。 此外，版本控制也是一种软件工程的开发技巧。依此能在软件开发的过程中，确保由不同开发者开发的同一程序文件能在最短时间内得到同步。透过版本控制，可以记录所有工程项目内各个模块的改动历程，并为每次改动编上序号。作用 版本控制的作用，是为项目设计者提供了将设计恢复到之前任意状态的选择权。简言之，在项目开发过程中，只要将每一阶段的修改提交到了版本控制系统中，就基本都可以找回，将项目恢
2022-01-16 12:01:21
580
原创 VUE基础面试题（一）
VUE基础面试题（一）v-if 和 v-show 区别vue常用的修饰符js中的冒泡是什么？vue中如何阻止冒泡事件vue中常用的一些指令vue的自定义指令vue的指令周期vue循环中 key值的作用v-for循环遍历时为什么要加上 “:key”?为什么避免 v-if 和 v-for 一起使用？Vue的生命周期Vue组件间参数的传递Vue的父组件和子组件生命周期钩子函数执行顺序methods、computed、watch的区别可以在哪个生命周期内调用异步请求？在vue生命周期的什么阶段才能访问操作DOMvu
2022-01-15 14:08:52
1059
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人