翾的博客

分享一段看到的挺有意思的代码只要打开了devtools, 由于有debugger的存在, 导致页面的交互失效了. 并且即使点了放开debugger, 后面的reload又会导致页面刷新. 这样的对于页面的需要二次交互的部分, 算是隐藏了, 因为触发不了页面的事件. 可以有效防止嫖代码, 或者在network上分析接口.对于正常使用的用户, 不打开devtools, 不会触发debugger浮层, setInterval也中断在了第一次执行时, 没影响.// 放在页面main.js之前插入这段scrip

CSS rule @layer 在chrome99已经发布了, 这个主要用来解决样式冲突问题, 特别对于大的组件库之类的感觉会很有用. 比如组件库的样式全都写到不同的@layer里, 这样用户自定义样式可以无感知覆盖.语法@layer <layer-name> { <stylesheet>}...

背景: 起因我是想看看能不能获取的到撤回的图片, 于是在*\WeChat Files\*\FileStorage\Image这个文件下发现了聊天记录储存的文件, 却发现文件已被加密… 也就有了这篇文章…关于撤回的图片这个问题, 结论是获取不到, 聊天记录里加密的图片也删除了…, 不过该文章的方法可以获取到原来聊天记录的图片图片文件的每个字节 异或 机器随机的一个值, 对此进行的加密下图为普通JPG文件. JPG文件的文件头为 0xFF, 0xD8下图为image文件夹下某Dat文件, 文件头为

之前整理过一份分析Performance的博文: 利用Performance API分析网站性能这次还是拿优快云的performance来举例说明, 这几个名词的含义, 供自己遗忘和不会的同学方便查看FP (First Paint) 首次绘制: 标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点.FCP (First Contentful Paint) 首次内容绘制 标记浏览...

首先看一个例子, 这是一个连接字符串的常用方法.str += "one" + "two";此代码运行时, 会经历4个步骤: 在内存中创建一个临时字符串.连接后的字符串”onetwo”被赋值给临时字符串.临时字符串与str当前的值连接.结构赋值给str 这是浏览器完成此任务的大概步骤.以下代码在大多数浏览器中这样做会提速10%-40%;str = str + "one" + "two"赋值

xhr的progress事件在XMLHttpRequest2级中添加了一个progress事件, 这个事件会在浏览器接收新数据期间周期性的触发. 而onprogress事件处理程序会接收到一个event对象, 其target属性是XHR对象, 但会额外包含三个属性: lengthComputable, position和totalSize. 其中, lengthComputable是一个表示进度信息

如下图所示画的有点不太好看, 但是关系还是很清楚的

理由有时候开发者会需要注册一些回调函数在浏览器的scroll和resize事件上, 但是scroll和resize这类事件触发非常频繁, 而实际用户并不需要感知这么多的事件产生, 造成大量函数触发, 而如果这些函数和动画有关, 会给浏览器造成巨大压力, 节流函数可以很好的解决这个问题.节流函数原理是设置一个阈值, 在一定时间内的触发但并不真实调用函数, 从而做到性能的优化, 实现的方式有反跳和节流.

效果 看下面我们已经成功上传到了根文件目录下 思路前端图片展示使用的是FileReader, 使用Ajax向后台发送数据; 后台配置比较简陋, 用的express和multer.代码&lt;!--html--&gt; &lt;div class="row"&gt; 头像: &lt;a href="javascript:void(0...

定义简单来说，一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。这么说肯定比较抽象，我们把它掰开来看：函数的返回结果只依赖于它的参数。函数执行过程里面没有副作用。const a = 1const foo = (b) =&gt; a + bfoo(2) // =&gt; 3foo 函数不是一个纯函数，因为它返回的结果依赖于外部变量...

substrstr.substr(start[, length])start 开始提取字符的位置, 不改变原字符串。如果为负值，则被看作 strLength + start，其中 strLength 为字符串的长度（例如，如果 start 为 -3，则被看作 strLength + (-3)）。length 可选。提取的字符数。// 例子const a = '12345...

绑定规则下面几种绑定方式, 除了es6的箭头函数, 都属于动态作用域, es6箭头函数里面的this采用的静态作用域默认绑定function foo() { console.log(this.a);}var a = 2;foo(); // 2其实很简单, 这里只要看foo这个函数是由谁来调用的即可, 明显是window, 所以输出的是2, 如果使用严格模式(str...

最近这一阵子由于写项目好久没写博客了, 现在我又回来了~ajax为什么要设置requestHeader理由默认情况下, 服务器对POST请求和提交web表单的请求并不会一视同仁. 因此, 服务器端必须有程序来读取发送过来的原始数据, 并从中解析出有用的部分. 不过我们可以使用xhr来模仿表单提交: 首先将Content-Type头部信息设置为application/x-www-form-urlenc

不得不说MDN网站真心好用, 里面例子真心不错.附上MDN网址: https://developer.mozilla.org/zh-CN/本文地址: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty转载仅出于学习目的.Object.defineP

脚本位置由于脚本会阻塞页面其他资源的下载, 因此推荐将所有的< script >标签尽可能放到< body >标签的底部, 以尽量减少对整个页面下载的影响. 组织脚本Steve Souders发现, 把一段内嵌脚本放在引用外链样式表的< link >标签之后会导致页面阻塞去等待样式表的下载. 这样做是为了确保内嵌脚本在执行时能获得最精确的样式信息. 因此, Souders建议永远不要把内嵌脚本紧跟

关于javascript正则表达式的使用请参考我的这篇博客http://blog.youkuaiyun.com/c_kite/article/details/53959534为了更高效的使用正则表达式, 首先要理解它的工作原理. 下面是一个正则表达式处理的基本步骤. 基本步骤第一步: 编译当你创建了一个正则表达式对象(使用正则直接量或RegExp构造函数), 浏览器会验证你的表达式, 然后把它转化为一个原生代码

使用定时器来处理数组//参数: 待处理的数组, 对每一个数组项调用的函数, 处理完成后运行的回调函数.function processArray(items, process, callback) { var todo = items.concat(); setTimeout(function() { process(todo.shift()); if

简介web worker 是运行在后台的 JavaScript，不会影响页面的性能。例如处理类似高斯函数处理图片这种处理信息量比较庞大时有可能会造成页面阻塞, 因此这种时候就可以通过Worker创建一个线程在后台处理信息, 当处理完成时会把信息返回回来.兼容性Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.

简介这项技术非常类似动态脚本注入. 使用JavaScript创建一个新的Image对象, 并把src属性设置为服务器上的脚本URL. 该URL包含了我们要通过GET传回的键值对数据. 请注意并没有创建img元素或把它插入DOM. var url = '/status_tracker.php';var params = [ 'step=2', 'time=124802

本篇博客为”高性能JavaScript”一书部分知识点学习笔记摘录.作用域链及和标识符解析每一个JavaScript函数都表示为一个对象, 要确切的说, 是Function对象的一个实例. Function对象同其他对象一样, 拥有可以编程访问的属性, 和一系列不能通过代码访问而仅供JavaScript引擎存取的内部属性. 其中有一个内部属性是[[Scope]].内部属性[[Scope]]包含了一

本文例子和方法来源于阮一峰es6入门http://es6.ruanyifeng.com/#docs/function.真是大神级的人物, 必须膜拜. 虚心学习尾递归函数调用自身，称为递归。如果尾调用自身，就称为尾递归。递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。例

避免多次提交表单var form = document.getElementById("myform");form.addEventListener("submit", function(event) { var event = event || window.event; var target = event.target; var btn = target.el

最简单循环查找去重var array = [1, 1, '1'];function unique(array) { var res = []; for (var i = 0, len = array.length; i &lt; len; i++) { var current = array[i]; if (res.indexOf(curre...

前言该篇博客涉及__proto__, prototype属性, 如果不是太了解, 参见下面这篇博客 https://blog.youkuaiyun.com/c_kite/article/details/78484191ES3 继承在JavaScript中，所谓的类就是函数，函数就是类。一般情况下，我们在函数的prototype上面定义方法，因为这样所有类的实例都可以公用这些方法；在函数内部...

序言: 上个月换工作了, 从网易来到了阿里巴巴, 感觉同事都是冰冷; 也知道了研发工程师和开发工程师的区别; 现在冒出了想去读研学算法和AI的打算.预览图老规矩, 先放图第一个红格子是DOM渲染的, 第二个带边框的红格子是用html的代码在canvas画出来的, 没有使用canvas的api哦. 本文最后贴出了代码.原理本文转化的实现, 以及本文下半部分所介绍的ht...

`scheduler`这个包主要是在react做diff做任务分配机制, 核心机制类似于[requestidlecallback](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback),>`window.requestIdleCallback()`会在浏览器空闲时期依次调用函数， 这就可以让开发者在主事件循环中执行后台或低优先级的任务，而且不会对像动画和用户交互这样延迟敏感的事件产生影响。

原文地址: https://dbaron.org/log/20100309-faster-timeouts作者: David Baron浏览器零延时定时器 (function() { var timeouts = []; var messageName = "zero-timeout-message"; // 类似setTimeout,...

javascript设计模式读书笔记1. 节流模式这个单独找了搞了篇文章https://blog.youkuaiyun.com/c_kite/article/details/904467252. 惰性模式减少每次代码执行时的重复性的分支判断，通过对象的重定义来屏蔽原对象中的分支判断。下面来个浏览器的事件绑定兼容问题例子：...

中文原文链接： https://jinlong.github.io/2016/04/24/Debouncing-and-Throttling-Explained-Through-Examples/英文原文链接： https://css-tricks.com/debouncing-throttling-explained-examples/1. 序言防抖（Debounce）和节流（thrott...

javascript设计模式读书笔记模板方法模式父类定义一组操作骨架，而将一些实现步骤推迟到子类中。这节自己没有想到很好用到生产中的例子// e.g.const Alert = function (data) { this.content = data.content; this.panel = document.createElement('div'); this.pane...

这节书中讲的个人感觉不是很清晰。。。还是转载一篇大神的把原文链接：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html作者：阮一峰日期：2015年2月 1日文章目录1. MVC1.1. 互动模式1.2. 实例：Backbone2. MVP3. MVVM1. MVCMVC模式的意思是，软件可以分成三个部分。视图（View）：...

简单工厂模式为了尽量减少地创建全局变量，同一类对象在不同需求中的重复性使用。通过对简单工厂来创建一些对象，可以让这些对象共用一些资源而又私有一些资源。对于简单工厂模式来说，它的使用场合通常也就限制在创建单一对象。// e.g.function createPop(type, text) { const o = {}; o.content = text; o.show = func...

javascript设计模式读书笔记外观模式这个很简单，就是指当一个复杂的系统提供一系列复杂的接口方法时，对接口的二次封装隐藏其复杂性。// e.g.const api = { getabc: () => { // 调用各种函数 // 处理很多 return 'gkd'; }}适配器模式一样很容易理解，将一个对象的方法或者属性转化为另外一个接口，以满足用户的需...

类似操作像素的博主还写过一篇文章：原生JavaScript + Canvas实现图片局部放大器1. 效果图2. 实现原理滤镜效果主要使用的均为canvas的getImageData以及putImageData。（以上两个api详细介绍可以点击蓝色链接，跳转到MDN查看）操纵getImageData函数返回的ImageData图片的像素信息来给图片增加滤镜效果。2.1 负片滤镜负片滤...

文章目录1. 效果图2. 原理2.1. 拖拽放大2.2. hover放大3. 代码1. 效果图有两种放大模式，分别为拖拽放大以及单纯的hover放大，已下是效果图：2. 原理两种局部放大效果主要使用的均为canvas的getImageData以及putImageData。（以上两个api详细介绍可以点击蓝色链接，跳转到MDN查看）操纵getImageData函数返回的ImageDa...

最近又温习了一下H5的知识，因此小小整理一下效果图asd那个就是文件上传请求说明此处应用到的知识点只要是H5的拖放操作，有两种缩略图展示方式，一种为使用URL，另一种是使用FileReader,详情见下面代码代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt...

博主才疏学浅, 刚研究此项目没多久, 以下内容主要以实用角度, 略带一些概念自己的理解, 如果有错误, 麻烦大佬们多多指点.代码传送门, 安装即用, 记得给老弟点个starhttps://github.com/TheKiteRunners/face-recognition-browser测试, 用下文章地址, 稍后补齐文章效果图...

Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理. Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源。你可以完全控制应用在特定情形（最常见的情形是网络不可用）下的表现。Service worker运行...

开启严格模式方法"use strict";, 如果放在文件开头就是全局开启严格模式, 还可以在函数内声明, 这么做的话就是这个函数开启严格模式.严格模式下无法再意外创建全局变量。在普通的JavaScript里面给一个拼写错误的变量名赋值会使全局对象新增一个属性。严格模式中意外创建全局变量被抛出错误替代："use strict";a = 1; // 报错, 因为找不到a的声明在严格模...

序言最近看了些面试题, 发现大多数都会问一个问题就是JavaScript生成二叉树, 本来想偷懒百度看看算了, 可是发现好多网站博客的代码都是一样的, 并且生成的还是平衡二叉树………. 如果我不输入数字你给我生成一个试试. so, 看起来只能自己搞一下了.百度百科–平衡二叉树定义百度百科–二叉树定义我之前写过一篇基于C++的二叉树创建以及遍历方法, 本片博客算法就是基于之前的C++...