blog
blog copied to clipboard
LiuL0703
## 函数去抖(debounce) 函数去抖核心是指：为了不让一个函数单位时间内执行次数太多 从而导致性能问题 限制其在一定时间的连续的函数调用只让其执行一次 ### 应用场景 + resize/scroll 触发统计事件 + 文本输入验证 (输入完成后只验证一次) + 监听滚动事件判断是否到底部以自动加载更多 (用户停止滚动 判断是否到底部) ### 基本思想 某些代码不可以在没有间断的情况连续重复执行，第一次调用函数创建一个定时器 在指定的时间间隔之后运行代码 当第二次调用该函数时 就会清除前一次的定时器并设置另外一个 如果前一个定时器已经执行过了这个操作就没有意义了 然而如果前一个定时器尚未执行 其实就是将其替换为一个新型的定时器 目的是只有在执行函数的请求停止一段时间后才执行(高程3 P614) 经典实现代码如下： ```js...
## 原型 我们创建每一个函数 都有一个prototype属性 该属性指向一个对象 这个对象就是原型 我们创建一个对象时候 可以根据自己的需求 选择性的将一些方法属性通过prototype属性 挂载在原型对象上 而每一个new出来的实例都有一个__proto__属性 该属性指向构造函数的原型对象 通过这个属性 让实例方法能够访问 到原型对象上的这方法 ## 闭包 当函数可以记住并访问所在的词法作用域时，就产生了闭包，这个函数持有对该词法作用域的引用，这个引用就叫做闭包 闭包本质还是函数，只不过这个函数绑定了上下文环境（函数内部引用的所有变量） 缺点：常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。 作用(使用场景)：可以用来管理私有变量和私有方法，将对变量（状态）的变化封装在安全的环境中，使得这些变量不能被外部随意修改，同时又可以通过指定的函数接口来操作。 闭包有三个特性： 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收 ## 继承 + ### 原型链继承...
**null表示"没有对象"，即该处不应该有值** 简单的用法如： + 作为函数的参数，表示该函数的参数不是对象。 + 作为对象原型链的终点。 **undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义** + 变量被声明了，但没有赋值时，就等于undefined。 + 调用函数时，应该提供的参数没有提供，该参数等于undefined。 + 对象没有赋值的属性，该属性的值为undefined。 + 函数没有返回值时，默认返回undefined。 **其他** ```js null === undefined // false null == undefined // true null === null...
# Largest Contentful Paint 一直以来，如何能准确的衡量一个页面从初始化到页面的主要内容已对用户可见的这个过程所耗时长是一个非常棘手的问题。以前的一些指标如load或者DOMContentLoaded都无法准确的描述用户所看到的内容，较新的一些指标如First Contentful Paint(FCP)只能捕获到首次加载时间，如果这个页面的展示的一个进度条或者开机动画，那么这个时间其实就和用户毫无关联。 在过去我们比较推荐的性能指标比如First Meaningful Paint(FMP)和Speed Index(SI)来帮助我们测算在初始渲染后页面内容加载所需的时间，但是这些指标通常都比较复杂很难解释清楚，甚至于有些时候是错误的，所以这就意味着它也不能准确表示到底什么时候页面的主要内容被加载渲染了。就FMP而言，对于不同类型的页面内容FMP其实并不相同,比如一个博客更重要的部分应该是文章的标题和内容简介对用户可见，所以其FMP应该是文本内容，但是对于一些商品站点或者电商而言，图片才是至关重要的关注点，所以它的FMP应该是图片加载完成。所以这也是为什么FMP至今无法被标准化的原因。 现在我们有一种全新的方案来衡量页面主要内容何时加载更准确，这个方案就是查看页面中最大元素的呈现时间，即Largest Contentful Paint (LCP) ## 什么是LCP ? Largest Contentful Paint (LCP) 是一个非常重要的用来衡量页面加载速度的指标，它标志着页面的主要内容的加载时长，LCP所需时间越短用户体验越好 LCP这个指标是用来表述在视口中可见的最大内容元素的渲染时间。 ### 哪些元素会被考虑 ？ 根据目前的[Largest Contentful Paint...
## 快排 ```js function quickSort(arr){ if(arr.length === 0) return []; var l = []; var r= []; var m = ~~(arr.length/2); var flag = arr.splice(m,1); for(let i = 0; i...
## Git git 删除远程分支：git push origin --delete{} git查看远程分支：git branch -r git 切换远程分支：git checkout [name] git stash 保存当前修改 但不提交commit git stash apply{stash@{n}} 回到某个stash状态 **将某次提交应用到指定分支** git checkout {branch-name} git cherry-pick {hash} ####...
常见的面试题
# CSS ### 左边固定，右边自适应 ```html ``` 1. position + margin-left ```css .box{ display: relative } .left{ position: absolute; width:100px } .right{ margin-left:100px } ``` 2. flex ```css .box{display:flex;} .left{width:100px; }...
说到缓存其实分很多种，比如CDN缓存，代理服务器缓存，数据库缓存，浏览器缓存等等。这里我们主要说浏览器的缓存。其中重点部分是HTTP的缓存策略。当一个请求发出后，浏览器接收到响应，需要根据响应头里的缓存策略来决定是否使用以及如何使用缓存。我们以Chrome为例，Chrome在很多抽象层面都实现了缓存，通常可以大致分为三类： - HTTP cache - Service Worker Caches - Blink cache 本文主要介绍HTTP缓存部分。关于HTTP缓存最为熟知和关键，通过网络发出的每个请求都严格遵循RFC的HTTP规范标准，其中直接决定HTTP缓存的几个规则是`Cache-Control、ETag、Last-Modified、Expires` 。 ## HTTP Cache ### Cache-Control Cache-Control的可取值有如下两种类型值，需要注意的一点是request请求头里带的值并不代表最终响应值。最终值仍需要服务端决定，请求头中的值只会作为一个参考，所以我们会重点关注响应头字段的内容。 `Cache-Control : cache-request-directive | cache-response-directive` **cache-request-directive**： `no-cache | no-store | max-age...
[上篇](https://github.com/LiuL0703/blog/issues/32)我们大致分析了在处理JavaScript阶段和Style阶段需要注意的问题，这篇我们就来看下在Layout、Paint、Composite阶段以及处理用户行为的时候，应该关注的问题所在。 ## 避免大型的复杂的布局和布局限制 Layout阶段浏览器将计算元素的大小，在页面中的位置，其他元素的影响等等，与样式计算(Style calculation)类似，基本限制因素如下： - 需要Layout的元素数量 - Layout的复杂度 **TL;DR** - Layout适用于整个文档流 - DOM的数量直接影响Layout的性能消耗，尽量避免触发Layout - 避免强制同步修改Layout，造成反复Layout。即读取style的值然后修改style ### 尽可能的避免触发Layout 当更改样式时，浏览器会去检查需不需重新计算触发Layout，一般来说修改元素的几何属性(geometric properties)例如：宽高，布局定位都会触发Layout ```css .box { width: 200px; height: 200px; } // 改变元素宽高...
如今大部分设备的刷新频率数60fps，什么意思呢？意思就是每秒屏幕刷新60次。举个例子：页面上出现动画或者渐变的效果，又或者用户滚动页面，那么浏览器渲染动画或页面的每一帧的频率也需要跟设备屏幕的刷新率保持一致。每帧的预算时间是16.66ms，这个时间段中浏览器要处理很多事情，所以最好的情况是在10ms内将所有工作做完，如果超出预算时间，那么帧率会下降，就会出现常见的卡顿现象，对用户体验带来负面影响 ## 渲染过程 要想在预期时间内完成页面更新则主要有5个关键点需要关心，这些点决定了页面的渲染时间  - JavaScript : 一般来说，JavaScript通常用来实现一些视觉变化的效果，比如来处理一些动画效果，或者对一个数据集排序，又或者修改页面的DOM元素等。当然除了JavaScript，还有一些常用的方法也可以实现类似的效果，比如：CSS Animation、Transitions、Web Aninations API。 - Style : 这个过程主要是样式计算。是根据样式匹配选择器计算出哪些元素需要应用哪些属性规则的过程，知道规则后计算出每个元素的最终的样式。 - Layout : 知道了各个元素对应的规则后，浏览器开始计算元素要占据的空间大小和在屏幕中的位置，页面布局模式意味着一个元素可能会影响其他元素，例如元素的宽一般会影响其子元素的宽度以及树中各处的节点。 - Paint : 绘制是填充像素的过程。它涉及绘制出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分，绘制一般在多个图层上完成 - Composite : 由于页面的各部分内容可能被绘制在多个图层，因此需要按照正确的顺序绘制到屏幕上，特别是对于重叠在一起的元素来说，这个顺序是非常重要的。 这些部分都是很重要的，处理不当就会导致页面出现卡顿情况，所以为了做好这一点必须要确切的知道你的代码到底会影响渲染的哪个阶段 1....