![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js高级
文章平均质量分 67
Mark sheng
一切阻挡你成功的都是借口
展开
-
Vue项目中实现图片懒加载(marksheng)
实现方法(使用vue的vue-lazyload插件)1.安装插件npm install vue-lazyload --save-dev 2.在入口文件main.js中引入并使用import VueLazyload from 'vue-lazyload' 直接使用Vue.use(VueLazyload) 或者添加自定义选项Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png...原创 2021-01-06 15:25:19 · 298 阅读 · 0 评论 -
预加载和懒加载得区别(marksheng)
懒加载也就是延迟加载。具体表现为:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。好处:很多页面,内容很丰富,页面很长,图片较多。比如瀑布流,图片数量多且大,如果一次性加载完毕,用户等待时间过长。 懒加载页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好。技术原理:页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通原创 2021-01-06 15:12:24 · 313 阅读 · 0 评论 -
js实现图片懒加载原理(marksheng)
有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片,并发情况下,达到1000并发,即同时有1000个人访问,就会产生1个G的带宽。为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。vue项目中的打包,是把html、css、js进行打包,还有图片压缩。但是打包时把css和js都分成了几部原创 2021-01-06 14:52:19 · 195 阅读 · 0 评论 -
什么是跨域?跨域解决方法(重中之重)
跨域 以前也不懂,但是慢慢就会理解了,咱们学习的前端大概一部分就是网站域名交互一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(prot...原创 2021-01-06 07:35:14 · 159 阅读 · 0 评论 -
一个页面从输入URL到页面加载发生什么?
一般会经历以下几个过程:1、首先,在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。3、在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。5、握手成功后,浏览器向服务器发送http请求,请求数据包。6、服务器处理收到的请求,将数据返回至浏览器7、浏览器收到HTTP响应8、读取页面内容,浏览器渲染,解原创 2020-12-31 09:10:40 · 177 阅读 · 0 评论 -
虚拟dom的理解(摘自网络,如有模范,敬请原谅)
vue2.0加入了virtual dom,有点向react靠拢的意思。vue的diff位于patch.js文件中,复杂度为O(n)。 了解diff过程,我们先从虚拟dom开始。到这里人可能会问,模拟DOM是干嘛为什么要这样做?虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTextNode创建的就是真实节点。我们可以做个试验。打印出一个空元素的第一层属性,可以看到标准让元素实现的东西太多了。如果每次都重新生成新的元素,对性能是巨大的浪费原创 2020-12-30 21:58:12 · 132 阅读 · 0 评论 -
javascript的this的指向(Marksheng)
1:在全局作用域下 this对象指向的是window对象例如:结果如下:2:在函数作用域下在非严格模式下: this的指向依旧是window对象例如:结果如下:在严格模式下:this的指向是undefined例如:结果如下:所以在函数里面,在严格模式下,this的指向或者值为undefined3:在对象里面this的指向是当前该对象例如:结果如下:关于this指向有个经典的问题:请看:在非严格...原创 2020-12-16 17:08:06 · 83 阅读 · 0 评论 -
arguments的理解?
arguments是一个内置对象,伪数组,看似数组但是不能用数组的方法function fun(){ console.log(arguments);}fun('tom',[1,2,3],{name:'Janny'}); 可以看到下面打印出来的结果,arguments是有值的,它的值就是我们传递进去的参数,虽然我们没有给fun函数定义形参,但是我们还是可以通过arguments来调用传递给函数fun的实参。此外,我们可以看到arguments还有属性callee,length和迭.原创 2020-12-16 17:00:27 · 349 阅读 · 0 评论 -
let ,const, var 的区别?
//let var 语法类似 声明变量let重复声明变量块级作用域变量提升暂时性死区原创 2020-12-16 16:44:47 · 208 阅读 · 0 评论 -
ajax封装(精简篇)
一、什么是AjaxAjax(Asynchronous JavaScript And XML)是2005年新出现的技术,它的出现是为了解决这样一个场景:整个页面中,只有一小部分的数据需要进行更新,按照传统的前后端交互,我们需要向服务器请求该网页的所有数据,然后再在客户端重新渲染,这无疑是非常低效的操作。因此,Ajax就可以做到只向服务器请求我们想要的那一小部分数据,而不用请求全部数据,进而在刷新整个页面的前提下更新那部分的数据。举个例子,我们去饭店吃饭,然后点了一桌子菜,后来发现其中有一道菜太咸了,因原创 2020-12-08 20:38:41 · 7443 阅读 · 1 评论 -
深拷贝浅拷贝(总结)
01.对象拷贝有哪些对象拷贝(Object Copy)就是将一个对象的属性拷贝到另一个有着相同类类型的对象中去。在程序中拷贝对象是很常见的,主要是为了在新的上下文环境中复用对象的部分或全部数据。 Java中有三种类型的对象拷贝:浅拷贝(Shallow Copy)、深拷贝(Deep Copy)、延迟拷贝(Lazy Copy)。02.理解浅拷贝2.1 什么是浅拷贝浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。 如果属性是基本类型,拷贝的就是基本类型的值;原创 2020-12-04 08:25:25 · 689 阅读 · 0 评论 -
控制台输出——键盘图形
// 用字符串返回一个键盘图形console.log()(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b...原创 2020-12-04 07:47:57 · 460 阅读 · 1 评论 -
史上最全常用正则表达式(救命锦集)
很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下。给自己留个底,也给朋友们做个参考。校验数字的表达式数字:^[0-9]*$ n位的数字:^d{n}$ 至少n位的数字:^d{n,}$ m-n位的数字:^d{m,n}$ 零和非零开头的数字:^(0|[1-9][0-9]*)$ 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$ 带1-2原创 2020-12-03 13:49:32 · 142 阅读 · 0 评论 -
你还在用乞丐版的深拷贝么
你还在用乞丐版的深拷贝么乞丐版:JSON.parse(JSON.stringify());这种写法非常简单,而且可以应对大部分的应用场景,但是它还是有很大缺陷的,比如拷贝其他引用类型、拷贝函数、循环引用等情况。基础版本如果是浅拷贝的话,下面的很容易:function clone(target){ let cloneTarget = {}; for (const key in target) { cloneTarget[key] = target[...原创 2020-12-03 13:42:28 · 424 阅读 · 0 评论 -
Web前端面试题(全锦集)
1 第一部分:前端基础(HTML CSS JS基础)1. 怎么让一个不定宽高的 DIV,垂直水平居中?答:1.使用 CSS 方法: 父盒子设置:display:table-cell; text-align:center;vertical-align:middle;Div设置: display:inline-block;vertical-align:middle; 2.使用 CSS3 transform: 父盒子设置:display:rela...原创 2020-12-03 13:07:59 · 12329 阅读 · 0 评论 -
(前端面试题)css到小程序
css如何让一个盒子在水平方向和垂直方向都居中flex display:flex;justify-content:center;//水平居中align-items:center;//垂直居中 grid /* 这里引用复用代码 */.outer { display: grid;}.inner { justify-self: center; /* 水平居中 */ align-self: center; /* 垂直居中 */} absolu...原创 2020-12-03 13:02:39 · 596 阅读 · 0 评论 -
闭包(简单理解为函数内的局部变量)
1、概念闭包函数:声明在一个函数中的函数,叫做闭包函数。闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。2、特点 让外部访问函数内部变量成为可能; 局部变量会常驻在内存中; 可以避免使用全局变量,防止全局变量污染; 会造成内存泄漏(有一块内存空间被长期占用,而不被释放)3、闭包的创建:闭包就是可以创建一个独立的环境,每个闭包里面的环境都是独立的,互不干扰。闭包会发生内存泄漏,每次外部函数执行的时 候,外...原创 2020-12-03 09:10:31 · 796 阅读 · 0 评论 -
41道精简前端必备面试题(置顶中)
目录组件通信自定义指令Vue中双向数据绑定是如何实现简述虚拟DOM和diff算法keep-alive是什么生命周期共有几个?分别在什么时候使用?路由守卫vuex是什么闭包作用域原型和原型链作用域继承深拷贝浅拷贝let,const,var的区别解构赋值箭头函数和普通函数的区别什么是promiseasync和await双向数据绑定 原理输入url到页面加载完成发生了什么HTTP 状态码组件通信父传递子如何传递.原创 2020-12-09 20:20:14 · 961 阅读 · 0 评论 -
浅拷贝与深拷贝的区别(详解)
浅拷贝与深拷贝的区别html浅拷贝与深拷贝一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型。基本数据类型的特点:直接存储在栈(stack)中的数据引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。二、浅拷贝与深拷贝深拷贝和浅拷原创 2020-12-01 10:36:31 · 83049 阅读 · 10 评论 -
promise(简约)
什么是promise?1.基本来说,promise是一个容器2.是一个实例对象(能获取异步的成功与失败状态)3.是构造函数(自身有all,resolve,reject,原型上有.then,catch,race方法)状态?初始化 pedding 成功 fulfiled 失败 reject写法上?Promise 构造函数 promise 实例对象 promises 规范地狱回调?解决地狱回调链式调用?.then 方法就是把原来...原创 2020-11-27 09:22:30 · 64 阅读 · 0 评论 -
vue+element-ui电商管理之项目实战(1)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结前言电商管理之项目实战是当代前端新手开发网站必备的一套练习题,也是帮助自己飞速提升的一个过渡提示:以下是本篇文章正文内容,下面案例可供参考一、运用到的技术1.使用vue-cli2.x搭建的开发环境;2.使用vue-router做路由转换;3.使用element-ui做界面美化;4.使用...原创 2020-11-26 20:54:43 · 1134 阅读 · 2 评论 -
promise使用及实现、async,await、generator函数(详解)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、promise使用及实现、async,await、generator函数的概念二、使用1.Promise2.async,awaitgenerator函数总结前言这节课给大家介绍一下promise使用及实现、async,await、generator函数(详解),具体见下文提示:以下是本篇文章正文内容,下面案例可供参考一、promise使用及实现、async,await、generator函数的概念Promise原创 2020-11-25 21:21:08 · 1019 阅读 · 0 评论