JavaScript记忆函数

最近在做关于JS图像处理的事情,性能瓶颈遇到很多。今天上课舍友突然告诉我说找到一个方法可能能对性能进行优化。这个东西就是记忆函数,说的挺高端,其实就是__闭包的原理__。

无记忆斐波那契函数

直接上代码:

/**

* 无记忆斐波那契函数

*/

function fabonacci_noMemory(x) {

if (x < 2) {

return 1;

}

return fabonacci_noMemory(x - 1) + fabonacci_noMemory(x - 2);

}

var startTime = +new Date();

var noMemoryResul......

js高斯模糊算法问题

高斯模糊有两种方案做:

直接用二维公式进行二重循环,复杂度为O(xy(2r)^2)

用一维公式分别对x、y循环,复杂度为O(2xy(2r))

测试结果:

用二重循环:

图像大小:500*800

模糊半径:20

运行时间:4566ms

分别循环:

图像大小:500*800

模糊半径:20

运行时间:237ms

可以发现刚好差20倍左右,也就是radius模糊半径的值,整个刚好和我们刚才所说的复杂度对应起来。

结果图:

实现代码如下:

代码较长,建议移步到我的博客看代码

html:

......

script异步加载async和defer异同

用法

<script async src="myAsync.js"></script>

<script defer src="myDefer.js"></script>

异步加载的好处

如果不选择异步加载script的话,当浏览器在解析HTML源文件时如果遇到外部的script,那么解析过程会暂停,并发送请求来下载script文件,只有script完全下载并执行后才会继续执行DOM解析。

而如果选择异步加载的话:

Both async and defer scripts begin to......

事件若干理解

__事件__指文档或浏览器窗口中发生的一些特定的交互瞬间。

那么哪一部分页面拥有这部分事件呢,(这个问题类似于在纸上画一系列同心圆,当你手指按在最里面圆的圆心的时候,同时也按在了其他圆上)。

__事件流__描述的是从页面中接受事件的顺序。而IE和Netscape团队提出了差不多完全相反的事件流概念。

IE:事件冒泡流

Netscape:事件捕获流

事件冒泡

从最具体的元素(文档中嵌套层次最深的节点)接受,然后逐级向较不具体的节点(文档)传播。

事件捕获(由于老版本浏览器不支持,较少使用)

正好与事件冒泡相反。从最不具体的元素开始接受,逐级向深处传播。

令人迷惑的JS作用域

关于JS作用域,必须知道的几条内容

JavaScript的变量作用域是基于其独有的作用域链的。

在函数体内部,同名的局部变量比全局变量的优先级高。

JavaScript只有函数作用域,没有块级作用域。

函数中声明的变量在整个函数内部都有定义。

未使用var定义的变量都是全局变量。

全局变量都是window对象的属性。

JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里。

关于JS作用域链的深入理解,请见这里。

例子:第一个系列

1.

function bar(){

return foo;

}

console.log(ty......

前端零碎优化

这是篇总结帖,欢迎大家补充指正。

减少HTTP请求次数:

使用_CSS Spirit_:

将网页中零碎的图片拼成一张大图,然后在网站中利用位置取出需要图片。这样多张图片只需要请求一次,从而达到优化目的。

优化方案:

- Spirite中水平排列图片,垂直排列会增加文件大小;

- Spirite中将颜色相近的图片放在一起;

- 不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素,1000×1000就是100万像素。

使用_DATA URI_(......

JavaScript变量类型检测问题

String类型变量检测(字符串)String类型变量生成方式

var str1 = "hello world";

var str2 = new String("hello world");

String类型变量检测function IsString(str){

return (typeof str == "string" || str.constructor == String);

}

那么这里为什么需要进行两种判断呢?仅仅一种难道不够嘛,答案确实是不够的。详细看下面的示例,你就会明白了。

一些示例:

1.第......

基于Javascript的人脸探测技术(翻译)

_来源_:http://www.attuts.com/javascript-based-face-detection-method/

我一直都对于基于摄像头或者图片的人脸特征提取和识别的技术理论很感兴趣。虽然我知道运用算法写一个人脸识别的软件或者插件超出了我的能力范围。但是我发现了一些JavaScript库,可以用来识别人脸的五官结构,于是我就想写关于这些库的一个入门教程。其实有很多相关的人脸识别库,有的是纯用JavaScript,有的是夹杂了java,它们各有优缺点。

今天我们想要了解一下tracking.js这个库,这是一个是由Eduardo Lundgren开发的轻量的J......

时间轴插件源码

源码链接

源码以及注释(function($){

/*

* initStyle : 根据图画的长宽属性定义其CSS属性

*/

var initStyle = function(arg){

var options = arg.data().timeline; // options : {width : XX; height : XXX ...; daysNo : XXX}

var rail = arg.find(".timeline-rail");

var railLeft = arg.find(".timeline-rail-left");

var ......

CSS布局中的position

记得从大一开始做Web前端的时候就被position这个属性搞得头晕脑胀,网上看了几篇文章也都不是十分精准,有的时候说的还互相冲突,导致我在接下来的两年时间里都是对这个属性敬而远之。但是今天又想重新过一遍CSS布局中的相关知识,看到position下定决心啃一啃,结果发现原来并没有那么困难。

position家族的几个兄弟姐妹

static

relative

fixed

absolute

假设

在开始讲这些属性值含义前,我们脑海中可以认为每个元素都有一个标签,这个标签表明了这个元素是否处于被定位的状态。我们姑且称之为定位标签,这个概念在接下来的阐述中会使用。

stat......

时间轴插件

示例

demo

使用方法

引用css文件timeline-main.css。

<link rel="stylesheet" type="text/css" href="css/timeline-main.css">

引入js文件jquery-1.11.1.js和timeline.js。

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<......