自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(17)
  • 收藏
  • 关注

原创 React Hooks 实现虚拟列表无限滚动与自适应输入框

利用 IntersectionObserver 实现虚拟列表无限滚动设计背景: 用于实现长列表的无限滚动 DOM 渲染的性能,使用虚拟列表,在滚动过程中只展示特定的视野左右的列表项。一. 核心技术:原生的交叉观察者(IntersectionObserver)利用交叉观察者可以监听元素在滚动过程中和祖先元素的相交情况,利用这个API可以避免对滚动的监听和频繁的计算。创建一个 Observer 实例,分别观察列表头尾元素,传入相应的配置,这里头部有个 fixed 定位的 header 所以设置祖

2020-07-24 17:11:40 1662

原创 【JavaScript基础】深入了解JS的闭包

闭包是JS中一个重要的概念,也是面试中的重点,相信大家在面试中都会碰到这样的几个问题: 1. 请你说说什么是闭包? 2. 请你说说闭包有哪些应用? 3. 请你说说闭包有哪些优缺点? 大家都是怎么回答这几个问题的呢?在网上的文章中对闭包的概念都有不同的说法,导致很多人对闭包没有一个清晰的概念,接下来就和我一起探究什么是闭包。 首先...

2020-04-16 22:40:44 212

原创 虾皮前端岗面经

整理的有点晚,有些可能没记清楚(本来懒得写的,发现shopee真的很抢手,不下十个人和我要面经,这就是 kpi 产物吧)一面(大概3-40分钟)js事件机制,如何阻止事件冒泡,事件委托原理 跨域方案 闭包原理应用 列举http 状态码/请求头(这里聊了挺多,基本上把我知道的都挖出来了,捂脸.jpg) cookie 的一些字段属性 cookie,session的区别...

2020-03-13 00:24:19 7841 2

原创 小程序底层框架原理

开发模式由于小程序宿主是客户端的App,如果采用纯客户端的原生技术来编写,那小程序的代码需要和App代码一起发布,这种开发节奏不符合小程序的需求所以要像 web 技术一样存放一份随时可以更新的资源包放在云端,下载到本地动态执行后即可渲染出页面。选择Hybrid的渲染方式。双线程模型可以阻止开发者使用一些浏览器提供的跳转页面,操作 DOM ,动态执行脚本等开放性接口。渲染层: 多个 Web...

2019-07-08 21:28:07 1235

原创 字节跳动前端实习一面二面HR面面经

16号做完笔试,后来约了21号一面,25号二面,一面面试官看起来比较和蔼,一来就是自我介绍,他说前端的问题我也没准备多少,我就知道他不是前端的了,瞬间有点方。一面一开始是数据结构的题,二叉树相关,已知前序遍历和中序遍历的结果,求树的结构,这个讲了一下思路面试官就给过了。http请求方法有哪些?跨域问题遇过吗?什么办法可以解决?讲了一下cors,jsonp,websocket,postme...

2019-03-29 22:37:39 6157

原创 实现 es6 Promise 原理

const PENDING='pending'const RESOLVED='resolve'const REJECTED='rejected'function myPromise(fn){    var that=this    this.value=''    this.resolveCal...

2019-03-19 16:31:37 363

原创 LeetCode二叉树相关部分题目——js解法

写好递归函数,二叉树的简单问题就基本解决了,以下整理了二叉树的一些简单题目,难度递增。数据结构:function TreeNode(val) { this.val = val; this.left = this.right = null;}1.相同的树题目描述:给定两个二叉树,编写一个函数来检验它们是否相同。如果两个树在结构上相同,并且节点具有相同的值,则认...

2019-03-07 19:15:35 451

原创 js算法题/前端面经总结(一)

1.实现链表的反转(function (){ var node3 = { name:'obj3', next:null } var node2 = { name:'obj2', next:obj3 }...

2019-03-03 15:26:16 365

原创 JavaScript里的深浅拷贝原理及方法

深浅拷贝是在复制复杂类型的值引用时的概念,我们在对象和数组中讨论它的深浅拷贝浅拷贝概念:浅拷贝既只拷贝对象的基本类型的值,并不复制引用类型的值而是引用它的指针,看以下的例子:可以看到当a改变时b也不得不跟着改变,这就是“拿人手短”,因为它只是引用了原来对象的指针,取了它的基本类型的值。深拷贝概念:深拷贝可以拥有一个对象的所有属性和方法,实现真正的“独立自主”,不引用原来对象的指针,开辟...

2019-01-14 15:27:09 729

原创 前端性能优化总结(二)

CSS选择符在大多数人的观念中,都觉得浏览器对 CSS选择符的解析式从左往右进行的,例如#toc A { color: #444; }这样一个选择符,如果是从左往右解析则效率会很高,因为第一个 ID选择基本上就把查找的范围限定了,但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符,浏览器必须遍历查找每一个 A标签的祖先节点,效率并不像之前想象的那样高,所以在写选择符的时候需要注意很多事...

2019-01-12 19:21:05 194

原创 前端性能优化总结(一)

一.减少http请求消耗资源1.Css Spritescss sprites是将多幅图融合到一张图片里,这样可以减少图片的请求数量,再通过css技术把想要的图片样式展示在浏览器页面上,虽然合成的图片会比较大,但这样做确实可以减少请求资源的消耗。2.Inline Image使用 data: URL scheme的方式将图片嵌入到页面或 CSS中,scheme有:data:image/...

2019-01-12 18:26:37 205

原创 JS数组去重的几种实现方法

//使用indexOf function unique1(arr) { var result=[]; for(var i=0;i<arr.length;i++){ if(result.indexOf(arr[i])==-1){ result.push(arr[i]); } } return result; } //利用对象属性不能重...

2019-01-12 13:18:30 152

原创 js杨辉三角控制台输出两种解法

1 1 1 1 2 1 1 3 3 1 1 4 6 4 11 5 10 10 5 1........观察这样的一组数,找出规律,用控制台输出这样规律的数规律:这是杨辉三角,每一行头尾的数都是1,其余的数是上一行对应的数字相加。一.使用递归算法。js代码如下: function combination(m,n...

2019-01-12 13:12:15 554

原创 关于JS的事件机制、EventLoop、线程模型

事件机制分为:事件捕获阶段、目标阶段和冒泡阶段。冒泡是指一个事件的目标由里层向外层冒泡,以点击事件onclick举例,用事件绑定onclick的写法会出现事件冒泡,可以用事件监听的写法Object.addEventListener('click',(e)=>{...},boolean),第三个参数是布尔值,true为事件捕获,false为事件冒泡,IE浏览器的兼容写法是Object.at...

2018-12-31 16:00:13 219

原创 微信小程序利用animation实现元素翻转到背面

效果如图,正反面分别写两个元素,布局让两个元素重叠wxml的代码:<view class='rotateCtn'> <!--正面的框 --> <view class='{{frameClass1}}' data-id='1' bindtap='rotateFn' style='background-color:yellow'> ...

2018-08-03 22:32:18 3757 4

原创 微信小程序实现历史搜索记录的本地储存和删除

输入框和搜索按钮表单的wxml,没啥特别的,这里绑定了输入框的输入值,样式我就不放上来了 <form class='searchForm' bindsubmit='searchSubmitFn'> <input value="{{searchValue}}" class='topInput' name='input'/> <butt...

2018-07-19 16:06:38 19969 4

原创 Google浏览器上安装 Vue Devtools

第一步:到github上下载devtool压缩包,地址: https://github.com/vuejs/vue-devtools 解压后我们得到vue-devtools-master文件夹,在文件夹里打开cmd命令行,依次输入npm install 命令与npm run build 命令,速度较慢,为了加快速度,我们安装一下淘宝镜像(PS:淘宝把外网的东西下载好了,放在它的服务器上,使我们能

2018-04-14 21:31:10 590

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除