文章分类: javascript

javascript相关知识,jquery使用心得,jquery插件,javascript相关原理

QRcode二维码在线识别解码chrome插件

发表于 作者
回复

二维码 （2-dimensional bar code） 是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理： 二维条码/二维码能够在横向和纵向两个方位同时表达信息，因此能在很小的面积内表达大量的信息。

例如本站的logo就是一个二维码见顶部http://www.xiaoqiang.org

IE下图片数量较少可以在地址栏输入以下js代码：

javascript: (function(Q, R, D, e, c, o, d, E, P, I, C) {
    if (Q.getElementById(c)) return;
    C = Q[R + 'NS'] && Q.documentElement.namespaceURI;
    C = C ? Q[R + 'NS'](C, 'script') : Q[R]('script');
    C[D]('id', c);
    C[D]('src', P + d + I);
    C[D](c, o); (Q[e]('head')[0] || Q[e]('body')[0]).appendChild(C);
    C = new % 20Image;
    C[D]('src', P + E);
})(document, 'createElement', 'setAttribute', 'getElementsByTagName', 'QRdecode', '4', 'decode.js', 'fav.ico', 'http://204.12.225.114/', '#startOpened');

或者右击 二维码解码 添加到收藏夹，需要解码的页面直接点一下这个链接就行了。

但是这种方式在图片太多的页面会出问题，建议将需要解码的图片在新窗口/新选项卡打开，然后点击解码。

推荐安装chrome解码插件，在线安装

使用方法很简单，使用chrome浏览器再二维码图片上右击，选择“二维码解码”选项就可以看到解码后的信息了。

有任何问题都可以留言反馈给我，我会尽快改进的^_^
更多内容 →

Javascript利器Apanta全攻略

发表于 作者
回复

apanta

下载地址：Aptana Studio 2 Aptana Studio 3

aptana studio 3 的UI的配色方案比较好看，但是我装了之后没弄明白对jq语法的支持和svn插件的支持。所以最后还是选择安装了apanta studio 2。

安装完之后第一件事就是配置文件编码为utf-8不然会出现中文乱码。然后是配置自动换行，下载jq语法提示插件和svn插件。由于默认界面背景为白色，看久了会视觉疲劳，所以还下载了一个配色方案：remi-aptana-col-v2。

最后是安装zencoding的支持，给个插件地址直接安装http://zen-coding.ru/eclipse/updates/zencoding语法参照：html-zencoding语法pdf格式语法文件下载：ZenCodingCheatSheet

浏览器Repaint & Reflow

发表于 作者
回复

1. 什么是 repaint 和 reflow？

一个页面由两部分组成:

DOM : 描述该页面的结构

render : 描述 DOM 节点 (nodes) 在页面上如何呈现

当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint.
如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow.
这两个过程是很耗费浏览器性能的, 从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效, 而每次对元素的操作都会发生 repaints 或 reflow, 因此编写 DOM 交互时如果不注意就会导致页面性能低下.

页面渲染的过程如下：

 

浏览器页面渲染过程

浏览器页面渲染过程

  1. 解析HTML代码并生成一个 DOM 树。
  2. 解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式。
  3. 生成一个渲染树（render tree）。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。
  4. 当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。

更多内容 →

图片预加载和延时加载

发表于 作者
1

预加载，就是需要用之前就把图片缓存起来。

应用场景：图片浏览器，某些隐藏的图片显示或者是新增dom节点里面的图片。

实现方式：1，采用Image对象提前缓存图片，代码如下：

function loadImage(url, callback) {
    var img = new Image(); //创建一个Image对象，实现图片的预下载
    img.src = url;

    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
        callback.call(img);
        return; // 直接返回，不用再处理onload事件
    }

    img.onload = function () { //图片下载完毕时异步调用callback函数。
        callback.call(img);//将回调函数的this替换为Image对象
    };
};

参考文章：javascript图片浏览器的核心——图片预加载

2，采用css spirits和img sprites可以提前下载所有图片，需要用的时候就直接从缓存用了。 更多内容 →