2020年06月_LuckXinXin

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月

原创协商缓存相关设置

Exprires：服务端的响应头，第一次请求的时候，告诉客户端，该资源什么时候会过期。Exprires的缺陷是必须保证服务端时间和客户端时间严格同步。Cache-control：max-age：表示该资源多少时间后过期，解决了客户端和服务端时间必须同步的问题，If-None-Match/ETag：缓存标识，对比缓存时使用它来标识一个缓存，第一次请求的时候，服务端会返回该标识给客户端，客户端在第二次请求的时候会带上该标识与服务端进行对比并返回If-None-Match标识是否表示匹配。Last-mod.

2020-06-29 09:17:59 564

原创说一下浏览器的缓存机制

浏览器缓存机制有两种，一种为强缓存，一种为协商缓存对于强缓存，浏览器在第一次请求的时候，会直接下载资源，然后缓存在本地，第二次请求的时候，直接使用缓存。对于协商缓存，第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，如果失效则使用缓存...

2020-06-29 09:16:59 354

原创说说从输入URL到看到页面发生的全过程

首先浏览器主进程接管，开了一个下载线程。然后进行HTTP请求（DNS查询、IP寻址等等），中间会有三次捂手，等待响应，开始下载响应报文。将下载完的内容转交给Renderer进程管理。Renderer进程开始解析css rule tree和dom tree，这两个过程是并行的，所以一般我会把link标签放在页面顶部。解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容，遇到时候缓存的使用缓存，不适用缓存的重新下载资源。css rule tree和dom t.

2020-06-29 09:16:16 279

原创实现Storage，使得该对象为单例，并对localStorage进行封装设置值setItem(key,value)和getItem(key)

var instance = null;class Storage { static getInstance() { if (!instance) { instance = new Storage(); } return instance; } setItem = (key, value) => localStorage.setItem(key, value), getItem = key => localStorage.getItem(ke

2020-06-28 11:52:28 486

原创请简单实现双向数据绑定mvvm

<input id="input"/>const data = {};const input = document.getElementById('input');Object.defineProperty(data, 'text', { set(value) { input.value = value; this.value = value; }});input.onChange = function(e) { data.text = e.target

2020-06-28 11:51:49 349

原创实现效果，点击容器内的图标，图标边框变成border 1px solid red，点击空白处重置

const box = document.getElementById('box');function isIcon(target) { return target.className.includes('icon');}box.onClick = function(e) { e.stopPropagation(); const target = e.target; if (isIcon(target)) { target.style.border = '1px solid

2020-06-28 11:51:13 447

原创描述一下this

this，函数执行的上下文，可以通过apply，call，bind改变this的指向。对于匿名函数或者直接调用的函数来说，this指向全局上下文（浏览器为window，NodeJS为global），剩下的函数调用，那就是谁调用它，this就指向谁。当然还有es6的箭头函数，箭头函数的指向取决于该箭头函数声明的位置，在哪里声明，this就指向哪里...

2020-06-27 10:33:22 246

原创说说事件流

事件流分为两种，捕获事件流和冒泡事件流捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找执行到目标节点冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，直到查到到根节点事件流分为三个阶段，一个是捕获节点，一个是处于目标节点阶段，一个是冒泡阶段...

2020-06-27 10:32:48 168

原创说说event loop

首先，js是单线程的，主要的任务是处理用户的交互，而用户的交互无非就是响应DOM的增删改，使用事件队列的形式，一次事件循环只处理一个事件响应，使得脚本执行相对连续，所以有了事件队列，用来储存待执行的事件，那么事件队列的事件从哪里被push进来的呢。那就是另外一个线程叫事件触发线程做的事情了，他的作用主要是在定时触发器线程、异步HTTP请求线程满足特定条件下的回调函数push到事件队列中，等待js引擎空闲的时候去执行，当然js引擎执行过程中有优先级之分，首先js引擎在一次事件循环中，会先执行js线程的主任务，

2020-06-27 10:32:10 163

原创谈谈变量提升？

当执行 JS 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境接下来让我们看一个老生常谈的例子，varb() // call bconsole.log(a) // undefinedvar a = 'Hello world'function b() { console.log('call b')}变量提升这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误...

2020-06-26 10:36:53 266

原创防抖/节流

防抖在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。可以通过函数防抖动来实现// 使用 underscore 的源码来解释防抖动/** * underscore 防抖函数，返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行 * * @param {function} func 回调函数 * @param {number} wait 表示时间窗口的间隔 * @param {boolean} immediate 设

2020-06-26 10:35:43 93

原创深浅拷贝

浅拷贝Object.assign或者展开运算符深拷贝可以通过 JSON.parse(JSON.stringify(object)) 来解决let a = { age: 1, jobs: { first: 'FE' }}let b = JSON.parse(JSON.stringify(a))a.jobs.first = 'native'console.log(b.jobs.first) // FE该方法也是有局限性的会忽略 u

2020-06-26 10:34:27 73

原创数组去重方法总结-利用[...new Set(arr)]

[...new Set(arr)]//代码就是这么少----（其实，严格来说并不算是一种，相对于第一种方法来说只是简化了代码）

2020-06-25 11:25:50 4074

原创数组去重方法总结-利用reduce+includes

function unique(arr){ return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(uniqu

2020-06-25 11:24:11 598

原创数组去重方法总结-利用Map数据结构去重

function arrayNonRepeatfy(arr) { let map = new Map(); let array = new Array(); // 数组用于返回结果 for (let i = 0; i < arr.length; i++) { if(map .has(arr[i])) { // 如果有该key值 map .set(arr[i], true); } else { map .set(arr[i], false); // 如果没有该ke

2020-06-25 11:22:44 1116

原创数组去重方法总结-利用递归去重

function unique(arr) { var array= arr; var len = array.length; array.sort(function(a,b){ //排序后更加方便去重 return a - b; }) function loop(index){ if(index >= 1){ if(array[index] === array[index-1]){ array.splic

2020-06-24 19:49:28 1308

原创数组去重方法总结-利用filter

function unique(arr) { return arr.filter(function(item, index, arr) { //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素 return arr.indexOf(item, 0) === index; });}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN

2020-06-24 19:48:01 141

原创数组去重方法总结-利用hasOwnProperty

function unique(arr) { var obj = {}; return arr.filter(function(item, index, arr){ return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true) })} var arr = [1,1,'true','true',true,true,15,15,false,fals

2020-06-24 19:47:31 720

原创数组去重方法总结-利用includes

function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } var array =[]; for(var i = 0; i < arr.length; i++) { if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值

2020-06-23 19:55:37 847

原创数组去重方法总结-利用对象的属性不能相同的特点进行去重

function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } var arrry= []; var obj = {}; for (var i = 0; i < arr.length; i++) { if (!obj[arr[i]]) { arrry.push(arr[i])

2020-06-23 19:53:46 229

原创数组去重方法总结-利用sort()

function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return; } arr = arr.sort() var arrry= [arr[0]]; for (var i = 1; i < arr.length; i++) { if (arr[i] !== arr[i-1]) { arrry.

2020-06-23 19:53:14 1569

原创数组去重方法总结-利用indexOf去重

方法三、利用indexOf去重function unique(arr) { if (!Array.isArray(arr)) { console.log('type error!') return } var array = []; for (var i = 0; i < arr.length; i++) { if (array .indexOf(arr[i]) === -1) { array .

2020-06-22 08:52:47 709

原创数组去重方法总结-利用for嵌套for

方法二、利用for嵌套for，然后splice去重（ES5中最常用）function unique(arr){ for(var i=0; i<arr.length; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个 arr

2020-06-22 08:51:48 428

原创数组去重方法总结-利用ES6 Set去重

方法一、利用ES6 Set去重（ES6中最常用）function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr)) //[1, "true", t

2020-06-22 08:51:16 535

原创什么是单线程，和异步的关系

单线程 - 只有一个线程，只能做一件事原因 - 避免 DOM 渲染的冲突浏览器需要渲染 DOMJS 可以修改 DOM 结构JS 执行的时候，浏览器 DOM 渲染会暂停两段 JS 也不能同时执行（都修改 DOM 就冲突了）webworker 支持多线程，但是不能访问 DOM解决方案 - 异步...

2020-06-21 11:12:59 713

原创尽可能多的说出你对 Electron 的理解

** 最最重要的一点，electron 实际上是一个套了 Chrome 的 nodeJS程序**所以应该是从两个方面说开来Chrome （无各种兼容性问题）；NodeJS（NodeJS 能做的它也能做）

2020-06-21 11:12:13 226

原创 WebSocket

由于 http 存在一个明显的弊端（消息只能有客户端推送到服务器端，而服务器端不能主动推送到客户端），导致如果服务器如果有连续的变化，这时只能使用轮询，而轮询效率过低，并不适合。于是 WebSocket被发明出来相比与 http 具有以下有点支持双向通信，实时性更强；可以发送文本，也可以二进制文件；协议标识符是 ws，加密后是 wss ；较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~1...

2020-06-21 11:11:37 121

原创协商缓存

Last-Modified（值为资源最后更新时间，随服务器response返回）If-Modified-Since（通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存）ETag（表示资源内容的唯一标识，随服务器response返回）If-None-Match（服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存）...

2020-06-20 09:36:56 136

原创强缓存

Expires（该字段是 http1.0 时的规范，值为一个绝对时间的 GMT 格式的时间字符串，代表缓存资源的过期时间）Cache-Control:max-age（该字段是 http1.1的规范，强缓存利用其 max-age 值来判断缓存资源的最大生命周期，它的值单位为秒）...

2020-06-20 09:36:28 134

原创浏览器缓存

** 浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下**先根据这个资源的一些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，称为http再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；强缓存和协商缓存共同之处在于，如果命中

2020-06-20 09:35:45 74

原创项目做过哪些性能优化？

减少 HTTP 请求数减少 DNS 查询使用 CDN避免重定向图片懒加载减少 DOM 元素数量减少DOM 操作使用外部 JavaScript 和 CSS压缩 JavaScript 、 CSS 、字体、图片等优化 CSS Sprite使用 iconfont字体裁剪多域名分发划分内容到不同域名尽量减少 iframe 使用避免图片 src 为空把样式表放在link 中把JavaScript放在页面底部...

2020-06-19 12:24:43 698

原创怎么判断两个对象相等？

obj={ a:1, b:2}obj2={ a:1, b:2}obj3={ a:1, b:'2'}可以转换为字符串来判断JSON.stringify(obj)==JSON.stringify(obj2);//trueJSON.stringify(obj)==JSON.stringify(obj3);//false

2020-06-19 12:23:14 272

原创封装一个函数，参数是定时器的时间，.then执行回调函数

function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time));}

2020-06-19 12:22:34 716

原创使用js实现一个持续的动画效果

定时器思路var e = document.getElementById('e')var flag = true;var left = 0;setInterval(() => { left == 0 ? flag = true : left == 100 ? flag = false : '' flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`}, 1000 / 60)request

2020-06-18 12:04:07 489

原创 Javascript全局函数和全局变量

全局变量Infinity 代表正的无穷大的数值。NaN 指示某个值是不是数字值。undefined 指示未定义的值。全局函数decodeURI() 解码某个编码的 URI。decodeURIComponent() 解码一个编码的 URI 组件。encodeURI() 把字符串编码为 URI。encodeURIComponent() 把字符串编码为 URI 组件。escape() 对字符串进行编码。eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。isFi

2020-06-18 12:02:40 124

原创想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）

给需要拖拽的节点绑定mousedown, mousemove, mouseup事件mousedown事件触发后，开始拖拽mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置mouseup时，拖拽结束需要注意浏览器边界的情况...

2020-06-18 12:00:05 780

原创获取页面所有的checkbox

var resultArr= [];var input = document.querySelectorAll('input');for( var i = 0; i < input.length; i++ ) { if( input[i].type == 'checkbox' ) { resultArr.push( input[i] ); }}//resultArr即中获取到了页面中的所有checkbox

2020-06-17 18:45:01 180

原创 addEventListener()和attachEvent()的区别

addEventListener()是符合W3C规范的标准方法; attachEvent()是IE低版本的非标准方法addEventListener()支持事件冒泡和事件捕获; - 而attachEvent()只支持事件冒泡addEventListener()的第一个参数中,事件类型不需要添加on; attachEvent()需要添加’on’如果为同一个元素绑定多个事件, addEventListener()会按照事件绑定的顺序依次执行, attachEvent()会按照事件绑定的顺序倒序执行.

2020-06-17 18:44:25 283

原创 window.onload和$(document).ready

原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕function ready(fn){ if(document.addEventListener) { //标准浏览器

2020-06-17 18:43:49 151

原创 Javascript中callee和caller的作用？

caller是返回一个对函数的引用，该函数调用了当前函数；callee是返回正在被执行的function函数，也就是所指定的function对象的正文那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）var result=[]; function fn(n){ //典型的斐波那契数列 if(n==1){ return 1; }el.

2020-06-16 10:13:07 250