js
文章平均质量分 76
Tammyhlf
记录成长每一步
展开
-
ES6及JS基础总结
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。它有三种状态,pending(进行中)、fulfilled(已成功)、reject(已失败)。注:resolved是指完成状态,结果可能包含fulfilled和rejected。...原创 2022-08-18 17:44:30 · 942 阅读 · 0 评论 -
前端错误监控
一、背景和痛点接口层有xlog,但是没有针对某个项目的分析,出现问题的时候太被动了,在服务器开发中,我们常常使用日志来记录请求的错误和服务器异常问题,但是在前端开发中,前端工程师按照需求完成页面开发,通过产品体验确认和测试,页面就可以上线了。但不幸的是,产品很快就收到了用户的投诉。用户反映页面点击按钮没反应而且能复现,我们试了一下却一切正常,于是追问用户所用的环境,最后结论是用户使用了一个非常小众的浏览器打开页面,因为该浏览器不支持某个特性,因此页面报错,整个页面停止响应。在这种情况下,用户反馈的投原创 2022-06-09 18:15:11 · 2190 阅读 · 0 评论 -
关于this
面试中遇到的题目,当场把我问得有点蒙,对严格模式,this的理解还不够深入。function foo(){ console.log(this.a);}var a = 2;foo() //2严格模式:函数调用时,是直接使用不带任何修饰的函数引用进行调用,因此只能使用默认绑定,无法应用其他规则。但是在严格模式下不能将全局对象用于默认绑定所以this会绑定到unde...原创 2021-01-13 16:47:19 · 65 阅读 · 0 评论 -
懒加载
懒加载就是延时加载,当图片出现在可视区域时才进行加载,这样可以优化界面,加快页面初始加载速度。首先需要了解元素偏移量,可视高度等概念,如下图。大概的意思就是:当(Element)的offsetTop= (document.documentElement)对象的clientHeight+scrollTop时,用data-src属性的值替代src。见如下写法<i...原创 2020-03-25 12:05:03 · 134 阅读 · 0 评论 -
前端跨域总结
什么是跨域? 由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题。同源策略是一个重要的安全策略,它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。 只有协议、端口、域名都相同才是同源。如下图URL 结果 原因 http://store.company.com/dir...原创 2020-03-24 23:12:46 · 103 阅读 · 0 评论 -
前端js错误监控
简单记录一下几乎没接触过的前端错误监控。页面运行时的错误window.onerror = function(message, source, lineno, colno, error) { ... }message:错误信息(字符串)。可用于HTMLonerror=""处理程序中的event。 source:发生错误的脚本URL(字符串) lineno:发生错误的行号(数...原创 2020-03-23 11:37:03 · 344 阅读 · 0 评论 -
前端性能优化之白屏时间
前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间,将从白屏时间的概念、重要性以及白屏的过程一一进行阐述,同时提供性能优化的策略与实践。一、概念白屏时间:即用户点击一个链接或打开浏览器输入URL地址后,从屏幕空白到显示第一个画面的时间。白屏时间的长短将直接影响用户对该网站的第一印象。二、白屏时间的重要性当用户点开一个链接或者是直接在浏览器中输入URL开始进行...转载 2019-10-14 17:45:20 · 198 阅读 · 0 评论 -
&&与||
首先&&的优先级会比||会高。&&运算的规则为,左边的为true,无论右true还是flase返回右边。 左边的为false,无论右边true或false都返回左边。4 && 0 //返回04 && 8 //返回80 && false //返回00 &...原创 2019-10-13 10:30:04 · 335 阅读 · 0 评论 -
拖放
ev.preventDefault();调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开);通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。DataTransfer.setData()方法用来设置拖放操作的d...原创 2019-10-06 16:02:16 · 90 阅读 · 0 评论 -
js的垃圾收集以及内存泄漏
JavaScript垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其占用的内存,但是这个过程不是实时的,因为其开销比较大,所以垃圾回收系统(GC)会按照固定的时间间隔,周期性的执行。到底哪个变量是没有用的?所以垃圾收集器必须跟踪到底哪个变量没用,对于不再有用的变量打上标记,以备将来收回其内存。用于标记的无用变量的策略可能因实现而有所区别,通常情况下有两种实现方式:标记清除和引用计数。引用...原创 2019-10-06 16:01:42 · 80 阅读 · 0 评论 -
js继承总结
现在有一个动物对象的构造函数function Animal(){ this.species = "动物";}还有一个猫对象的构造函数function Cat(name,color){ this.name = name; this.color = color;}1.使用构造函数继承function Cat(name,color){ Animal.a...原创 2019-09-23 14:14:35 · 80 阅读 · 0 评论 -
原生js实现瀑布流效果
前言最近在整理js基础知识,接触到了几个常用的页面特效,其中觉得用原生js实现瀑布流的案例十分有趣,于是与大家分享一下。瀑布流瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。1、首先瀑布流所有的图片应该保持宽度一致,高度是由内容决定。左浮动的话,我们可以看到第6个盒...转载 2019-07-16 10:43:08 · 286 阅读 · 2 评论 -
浅谈重绘,回流(重排)
html 加载时发生了什么在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree,但区别很大,因为render tr...原创 2019-07-19 11:47:05 · 126 阅读 · 0 评论 -
x=x+1, x+=1, x++ 哪个效率更高?
解析:x=x+1最低,因为它的执行过程如下:(1)读取右x的地址。(2)x+1.(3)读取左x的地址。(4)将右值传给左边的x(编译器并不认为左右x的地址相同)。x+=1其次,其执行过程如下:(1)读取右x的地址。(2)x+1.(3)将得到的值传给x(因为x的地址已经读出)。x++效率最高,其执行过程如下:(1)读取右x的地址。(2)x自增1。...原创 2019-03-17 22:07:51 · 680 阅读 · 0 评论 -
同步与异步的事件机制
看到一篇受益匪浅的文章,转载记录一下1.1 什么叫异步异步(async)是相对于同步(sync)而言的,很好理解。同步就是一件事一件事的执行。只有前一个任务执行完毕,才能执行后一个任务。而异步比如:setTimeout(function cbFn(){console.log('learnInPro');}, 1000);console.log('sync...原创 2019-05-16 14:28:59 · 4718 阅读 · 0 评论 -
apply()与call()使用与区别
一. apply() 方法调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。语法:func.apply(thisArg, [argsArray]thisArg可选的。在func 函数运行时使用的this值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为null或undefined时会自动替换为指向全局对象,原始...原创 2019-05-20 00:00:24 · 140 阅读 · 0 评论 -
事件冒泡, 事件捕获与事件委托
一.事件冒泡, 事件捕获1.事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事件流。冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。2.在冒泡型事件流中click事件传播顺序为<div>—》<body>...原创 2019-05-21 16:42:03 · 241 阅读 · 0 评论 -
cookie与webStorage
在浏览器查看HTML4的本地存储 cookie浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别:1、保持状态:cookie保存在浏览器端,session保存在服务器端2、使用方式:(1)coo...转载 2019-05-25 15:08:28 · 398 阅读 · 0 评论 -
ES6的尾调用优化
一、什么是尾调用?当函数的最后一步是直接返回调用另一个函数,那么这就叫尾调用。function a(x){ return b(x-1);}上面代码,函数a最后一步是调用函数b,这就叫尾调用。function a(x){ if (x > 0) return b(x) return c(x);}上面代码,函数b和c都属于尾调用,因为它们都是...转载 2019-06-16 17:35:03 · 87 阅读 · 0 评论 -
JavaScript获取对象长度的两种方法
使用.length是无法获取到对象的长度的,所以要用其他方法。第一种方法:使用javascript内建的object类的一个内建函数(ES5以上版本), Object.keys(obj).lengthObject.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in循环遍历该对象时返回的顺序一致 。如果对象的键-值都不...原创 2019-06-17 19:29:03 · 4012 阅读 · 0 评论 -
Set与Map的实现
Set类的实现:Set对象允许存储任何类型的唯一值,无论是原始值或者是对象引用。function Set() { var items = {}; this.add = function(value){ if(!this.has(value)){ items[value] = value; return t...原创 2019-06-17 21:00:59 · 214 阅读 · 0 评论 -
带你全面理解深拷贝与浅拷贝
首先要区分与js的数据类型。基本数据类型:Number, String, Boolean, Null, Undefined。引用数据类型:Array, Object, Function等那么这两类数据类型有什么不一样呢?基本数据类型是指存放在栈中的简单数据段,数据大小确定,内存空间大小可以分配,它们是直接按值存放的,所以可以直接按值访问。引用类型是存放在堆内存中的对象,...原创 2019-09-03 14:48:04 · 341 阅读 · 1 评论