![](https://img-blog.csdnimg.cn/20190829091245383.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
面试必看
文章平均质量分 86
猫老板的豆
旁观自己 善待朝夕
展开
-
优化SPA首屏加载速度
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节通过或者来计算出首屏时间// 方案一:});原创 2023-09-14 12:00:45 · 245 阅读 · 0 评论 -
如何一次性渲染十万条数据
虚拟滚动(也称为窗口化、无限滚动或按需加载)是一种优化技术,用于在大量数据需要渲染到滚动容器中时,仅渲染当前视口(viewport)内可见的部分数据,从而大大提高页面性能。它允许开发者在浏览器的绘制过程中同步执行动画或渲染操作,从而实现更高效的动画和渲染性能,这有助于避免强制同步布局和降低性能开销。在虚拟滚动中,需要维护一个与视口大小相对应的固定数量的 DOM 元素,并随着用户滚动动态地更新这些元素的内容。的技术来优化性能,只需要渲染少部分区域的内容,减少重新渲染组件和创建 dom 节点的时间。原创 2024-05-30 18:40:51 · 812 阅读 · 0 评论 -
WebSocket 断网重连、心跳检测功能封装
WebSocket协议是基于TCP协议上的独立的通信协议,在建立WebSocket通信连接前,需要使用HTTP协议进行握手,从HTTP连接升级为WebSocket连接。浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。一旦WebSocket连接建立,服务器和客户端就可以通过发送消息来进行实时通信。这种双向通信机制。Websocket 协议与 HTTP 协议没有关系,它是一个建立在 TCP 协议上的全新协议。原创 2024-05-27 12:07:52 · 1026 阅读 · 0 评论 -
JavaScript Cookie 详解
JavaScript 中的 Cookie 是一种用于在浏览器和服务器之间传递数据的机制。它通常用于跟踪用户的会话信息,如登录状态、购物车内容等。原创 2017-08-28 17:53:44 · 7123 阅读 · 1 评论 -
require和import的区别
require和import都是用于引入其他模块的关键字,它们的主要目的是为了实现代码的可重用性和模块化。当需要在一个文件中引用另一个文件或模块时,可以使用这两个关键字来实现这个功能。不过,它们之间存在着一些明显的区别。原创 2024-04-08 15:53:56 · 269 阅读 · 0 评论 -
axios详解
Axios 是一个功能强大且易于使用的基于 Promise 的 HTTP 客户端库。可以用在浏览器和 node.js 中。这意味着它结合了 Promise 的特性和 HTTP 客户端的功能,为用户提供了一个强大且灵活的工具来发送 HTTP 请求和处理响应。原创 2024-03-29 17:19:15 · 2209 阅读 · 1 评论 -
对SPA单页面的理解
SPA(single-page application),翻译过来就是单页应用SPA是一种网络应用程序或网站的模型,它通过,这种方法。在单页应用中,所有必要的代码(HTML、JavaScript和CSS)都通过单个页面的加载而检索,或者举个例子来讲:就是一个杯子,早上装的牛奶,中午装的是开水,晚上装的是茶。我们发现,变的始终是杯子里的内容,而杯子始终是那个杯子结构如下图我们熟知的JS框架如reactvueangularember都属于SPA。原创 2023-09-14 09:57:19 · 163 阅读 · 0 评论 -
CSS选择器和优先级权重
对于选择器的优先级标签选择器、伪元素选择器:1类选择器、属性选择器、伪类选择器:10id 选择器:100内联样式:1000选择器格式优先级权重id选择器#id100类选择器.class10属性选择器a[ref=“eee”]10伪类选择器div:last-child10标签选择器div1伪元素选择器div:after1相邻兄弟选择器h1+p0子选择器ul>li0后代选择器ul li0原创 2023-08-31 18:18:11 · 332 阅读 · 0 评论 -
HTML5离线储存
离线存储指的是:在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。原创 2023-08-31 17:52:48 · 706 阅读 · 0 评论 -
script标签中defer和async的区别
一个标签同时使用了async和defer,则执行async,忽略defer。async优先于defer一个标签只使用defer,且,则脚本将在页面完成解析时执行。defer延迟async和defer都不使用,遇到脚本即会马上载入和执行脚本,此时会阻塞页面继续向下解析渲染。(默认同步)只使用async且,则脚本相对于页面的其余部分异步地执行。async异步,和DOM同时加载)原创 2023-08-31 17:28:04 · 293 阅读 · 0 评论 -
彻底理解浏览器的缓存机制
我们第一次进入页面,请求服务器,然后服务器进行应答,浏览器会根据来判断是否对资源进行缓存,如果响应头中expires或者字段,代表这是强缓存,浏览器就会把资源缓存在或disk cache中。第二次请求时,浏览器判断请求参数,如果符合强缓存条件就直接返回状态码200,从本地缓存中拿数据。否则把响应参数存在request header请求头中,看是否符合协商缓存,符合则返回状态码304,不符合则服务器会返回全新资源。原创 2023-08-30 17:57:26 · 3552 阅读 · 0 评论 -
前端知识点梳理
HTML语义化的理解meta标签和的区别link 和 @import 有什么区别defer 和 asyncHTML5离线储存CSS3 新特性CSS选择器和优先级权重CSS 中哪些属性可以继承CSS 预处理器盒子模型居中常见方法BFCflex布局grid布局em 和 rem的区别CSS中position定位三栏布局transition和animation的区别伪元素和伪类字符串 数组处理数据类型检测ES6新特性作用域闭包原型和原型链继承thisPromiseasync 和 await事件循环:宏任务、微任务深原创 2023-08-29 18:54:33 · 446 阅读 · 0 评论 -
Vue 项目性能优化 — 实践指南
Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验本文通过以下三部分组成:Vue 代码层面的优化、webpack 配置层面的优化、基础的 Web 技术层面的优化;来介绍怎么去优化 Vue 项目的性能。原创 2023-08-29 18:53:38 · 896 阅读 · 0 评论 -
整理大厂高频核心前端面试题,五万多字,面试必考
如果 Vue 组件中的 data 是个对象,那么所有复用这个组件的地方,都在使用这个组件里面唯一的一个 data,所有使用组件的地方的 data 都会指向栈内这一个 data 的地址,那么会造成。等待执行栈和微任务队列都执行完毕才会执行,并且在执行完每一个宏任务之后,会去看看微任务队列有没有新添加的任务,如果有,会先将微任务队列中的任务清空,才会继续执行下一个宏任务。异步:是指不进入主线程,而进入任务队列的任务,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程。原创 2021-09-13 11:07:08 · 2441 阅读 · 2 评论 -
JS实现数组扁平化的几种常见方式
1. 利用es6新方法2. 利用递归2.1 利用 some 递归2.2 利用 map 递归2.3 利用 reduce 递归3. 利用 toString4. 利用 join原创 2021-09-13 10:57:22 · 744 阅读 · 0 评论 -
3分钟理解BFC
简介BFC(Block Formatting Context)块级格式化上下文,是用于布局块级盒子的一块渲染区域。MDN上的解释:BFC是Web页面 CSS 视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域。一个BFC的范围包含创建该上下文元素的所有子元素,但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明,一个元素不能同时存在于两个BFC中。BFC的形成根元素(即<html>标签)浮动元素 float 不为 none (为 left、right)原创 2020-05-28 15:13:32 · 706 阅读 · 0 评论 -
手写常见JS方法
手写判断数据类型手写深拷贝手写对象是否全等手写防抖手写节流手写数组扁平化手写数组去重手写new函数手写ajax原创 2021-08-17 11:57:04 · 655 阅读 · 0 评论 -
JavaScript字符串 数组处理
/*字符串处理*/vara="Helloworld!"console.log(a.indexOf("e"))//1l的index不存在-1lastIndexOf()console.log(a.search("w"))//6l的index原创 2015-11-23 17:46:57 · 1134 阅读 · 1 评论 -
细说 async/await
async/await 是 JavaScript 中用于处理异步操作的一对关键字。它们提供了一种更直观、更易于理解的方式来编写异步代码,使异步代码看起来更像同步代码。原创 2021-08-02 17:16:20 · 833 阅读 · 0 评论 -
彻底掌握 Promise
一、Promise 出现的原因在 Promise 出现以前,我们处理一个异步网络请求,大概是这样:// 请求 代表 一个异步网络调用。// 请求结果 代表网络请求的响应。请求1(function(请求结果1){ 处理请求结果1})看起来还不错。但是,需求变化了,我们需要根据第一个网络请求的结果,再去执行第二个网络请求,代码大概如下:请求1(function(请求结果1){ 请求2(function(请求结果2){ 处理请求结果2 })})看起来原创 2021-06-15 14:48:03 · 2557 阅读 · 3 评论 -
实现三栏布局的8种方式
三栏布局:两侧宽度固定,中间宽度自适应的公共样式:* { padding: 0; margin: 0; height: 100%;}.left { width: 200px; background-color: aqua;}.right { width: 200px; background-color: burlywood;}.main { background-color: chartreuse;}1. 浮.原创 2020-06-12 13:19:47 · 3071 阅读 · 3 评论 -
JS 跨域与同源
jsonp跨域jsonp是一种跨域通信的手段,它的原理其实很简单:利用<script>标签的src属性跨域由于使用script标签的src属性,因此只支持get方法function jsonp(req){ // 动态创建script标签 var script = document.createElement('script'); var url = req.url + '?callback=' + req.callback.name; script.src =原创 2020-06-05 13:19:04 · 1037 阅读 · 1 评论 -
浏览器从输入URL到渲染完页面的整个过程
一、获取IP地址IP地址对应一台真实的物理机器,而且IP地址就像人的身份证是唯一的,用户请求服务器,只需要输入为该服务器分配的唯一的IP地址即可。但由于IP地址不便于记忆,因而使用较为语义化的域名来替代IP地址,而且一个域名可能对应了对个IP地址,比如用户输入www.baidu.com,该域名下对应了多个IP,域名解析服务器会根据一定的规则分配给用户其中一个IP地址。首先会在浏览器的缓存中查找,是否缓存了URL,如果有,就直接向该URL对应的服务器发送请求;如果没有则进行下一步;在本地的hosts文原创 2020-06-01 16:04:38 · 3041 阅读 · 0 评论 -
js检测数据类型的几种方法总结
当我们把Array自身的toString()方法删除之后,再次使用它时,由原型链它会向上查找这个方法,即Object的toString(),也便将Object上的toString()方法作用在数组上,得出其数据类型[object Array]这里声明了一个Fn的构造函数,并且把他的原型指向了Array的原型,所以这种情况下,constructor也显得力不从心了。因此,在想要得到对象的具体类型时,应该调用。方法(返回对象的具体类型),所以采用。来判断类型看起来是完美的,然而,方法时,根据原型链的知识,原创 2020-05-25 16:44:25 · 1802 阅读 · 1 评论 -
Javascript 本地存储:cookie、sessionStorage、localStorage、indexedDB
同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的(不同浏览器、同一个页面也是不共享的)。虽然 Web Storage对于存储较少量的数据很有用,但对于存储更大量的结构化数据来说,这种方法不太有用。的小型文本数据,它由一个名称(Name)、一个值(Value)和其它几个用于控制 cookie有效期、安全性、使用范围的可选属性组成。存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存的cookie,不同的浏览器有不同的处理方式。原创 2020-05-20 15:36:03 · 594 阅读 · 1 评论 -
css居中常见方法总结
块级元素居中 html代码部分<div class="parent"> <div class="child">child</div></div>行内元素居中 html代码部分<div class="parent"> <span class="child">child</span></div>水平居中01. 行内元素 text-align: center;.parent {原创 2020-05-15 10:57:27 · 644 阅读 · 1 评论 -
CSS中position属性详解
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流,分别是:浮动(float)、绝对定位(absoulte)和固定定位(fixed)。属性是否脱离文档流是否占位定位原点static否是没有特定的原点,按照正常的文档流进行定位relative否是相对于它在正常文档流中的原始位置进行定位absoulte是否最近的已定位祖先元素 或 初始包含块(通常是视口)fixed是否浏览器窗口sticky否是。原创 2020-05-13 11:16:53 · 556 阅读 · 2 评论 -
ES6之新特性汇总
ES6之 let 和 const 关键字ES6之 解构赋值ES6之 扩展运算符ES6之 字符串String新特性ES6之 数值Number新特性ES6之 数组Array新特性ES6之 函数优化(默认参数、剩余参数、 箭头函数)ES6之 PromiseES6之 async/awaitES6之 Class(类)ES6之 Map、Set 和 WeakMap、WeakSetES6之 Module 语法(import 和 export)ES6之 Generator 函数ES6之高阶函数ES6之 for…of 循环原创 2020-05-09 21:35:30 · 563 阅读 · 1 评论 -
vue中对axios的封装
文件中,这样可以把api统一管理起来,以后维护修改只需要在。把封装的方法放在一个。在本地调试的时候,还。原创 2019-01-24 11:33:16 · 1405 阅读 · 2 评论 -
ajax、axios、fetch的区别
axios不是xhr的子集,axios利用xhr进行了二次封装的请求库,xhr只是axios中的其中一个请求适配器,axios在nodejs端还有个http的请求适配器;axios和vue没关系,axios也不是随着Vue的兴起才广泛使用的,axios本身就是独立的请求库,跟用什么框架没关系;很多小伙伴可能会误以为 Ajax 是发请求的一种方式,或者把 XMLHttpRequest 与 Ajax 划等号,其实这是错误和片面的。,是一个概念模型,它囊括了很多技术,并不特指某一技术,它很重要的特性之一就是。原创 2020-05-09 17:32:16 · 996 阅读 · 1 评论 -
JavaScript中的继承方式
一、call与apply①function Class2 (){ this.name ='class2'; Class1.apply(this, [name]); //Class2继承 Class1的属性和方法 this的指向改为Class1 //Class1.call(this, name); //Class1.apply(this); /...原创 2019-03-11 22:21:28 · 738 阅读 · 1 评论 -
深入理解javascript原型和原型链
prototype(原型)下面的就是原型(也叫显式原型),它是一个对象,我们也称它为原型对象。Person.prototype.say = function () { // 通过原型添加方法// 原型对象say: ƒ(), // 原型上共享的方法,不会反复开辟存储空间,减少内存浪费。上面这个对象,就是大家常说的原型对象。原创 2019-03-11 17:39:39 · 1554 阅读 · 1 评论 -
ES6之高阶函数
JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。Array扩展:forEach、map、reduce、filter、sort 、every 、some 、find 、findIndex。原创 2018-03-15 15:53:13 · 1565 阅读 · 1 评论 -
JavaScript中的深拷贝和浅拷贝
深拷贝和浅拷贝的区别深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。1.深复制在计算机中开辟了一块内存地址用于存放复制的对象2.浅复制仅仅是指向被复制的内存地址,如果原地址中对象被改变了,那么浅复制出来的对象也会相应改变。浅拷贝对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对...原创 2018-03-08 17:32:03 · 772 阅读 · 1 评论 -
关于在for循环中绑定事件打印变量i是最后一次
在for循环中绑定事件打印变量i是最后一次,其原因是函数引用的外部变量都是最后一次的值。html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> #box{ width:100px; height:100px;原创 2017-11-09 17:24:39 · 1240 阅读 · 0 评论 -
JavaScript闭包
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。闭包的特性闭包有三个特性:1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收闭包的定义及其优缺点闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部...原创 2017-08-07 13:52:09 · 5664 阅读 · 1 评论 -
彻底理解JavaScript中this指向
如果要判断一个运行中函数的 this 绑定, 就需要找到这个函数的直接调用位置。找到之后new 调用:绑定到新创建的对象,注意:显示return函数或对象,返回值不是新创建的对象,而是显式返回的函数或对象。call、apply、bind调用:严格模式下,绑定到指定的第一个参数。非严格模式下,null和undefined,指向全局对象(浏览器中是window),其余值指向被new Object()包装的对象。对象上的函数调用:绑定到那个对象。普通函数调用。原创 2017-11-09 14:23:20 · 1303 阅读 · 1 评论 -
JavaScript中call,apply,bind方法的总结
三者都可以改变函数的 this 对象指向。三者第一个参数都是 this 要指向的对象,如果如果没有这个参数或参数为 undefined 或 null,则默认指向全局 window。三者都可以传参,但是apply 是数组,而call 是参数列表,且 apply 和 call 是一次性传入参数,而 bind 可以分为多次传入。bind 是返回绑定 this 之后的函数,便于稍后调用;apply 、call 则是立即执行。bind()会返回一个新的函数。原创 2017-11-09 15:34:32 · 896 阅读 · 1 评论 -
JavaScript中 for of 和 for in 的区别?
先说结论:for...in 循环出的是 key, for...of 循环出的是 value 。for...of 是 ES6 新引入的特性,修复了 ES5 引入的 for...in 的不足。for...of 不能循环普通的对象,需要通过和 Object.keys() 搭配使用。推荐在循环对象属性的时候使用 for...in ,在遍历数组的时候的时候使用 for...of 。let ...原创 2019-03-20 15:27:48 · 721 阅读 · 0 评论 -
ES6之 Map、Set 和 WeakMap、WeakSet
Map、WeakMap、Set和WeakSet都是JavaScript中用于存储数据的结构,但它们之间存在一些关键的区别。Map和Set都是普通的键值对或值的集合。Map是一个键值对的集合,其中的键和值可以是任何类型的对象,且键是唯一的。Map允许你通过键来存储和检索值,因此可以通过get方法获取值。同时,Map的键值对可以通过迭代器进行遍历。Set则是一个值的集合,它的值也是唯一的,因此可以用于数组去重。Set中的元素不可重复且会自动排序。WeakMap和WeakSet是Map和Set的“弱”版本。原创 2019-03-20 16:45:58 · 640 阅读 · 1 评论