welefen » 前端开发

如何减少代码上线过程中对线上服务的影响

welefen — Thu, 09 Sep 2010 11:29:24 +0000

目前现状

在一些大公司中，每个服务几乎都有CDN，也就是说一个服务都有很多很多的服务器。并且一般做服务优化的话往往是把程序和静态资源放在不同的服务器上。

在实际开发中，一般是按功能将代码分成不同的模块。上线时OP一般是一个模块一个模块的上线。虽然上线时是并行上线的，但每个模块以及模板与静态资源生效是有时间差的。尤其是模块之间依赖程度很高，如：模板和静态资源依赖程度很高，上线有时间差极有可能出现JS报错或者一些点击不能响应。所以在上线这个时间差内，用户在操作过程中极有可能出现问题。

解决方案

改变已有的一个模块一个模块的上线方案，而是先将所有要上线的文件都传到各个机器上去，并不是直接覆盖线上文件，而是通过一个的规则成为新建的文件。

如：我要上线覆盖的文件夹为 vote，那么先将代码都拷贝到vote.online文件下（各个机器），其他模块的代码拷贝到其他对应的文件夹下。待所有要上线的代码都准备好后，然后执行mv的操作，将要上线的代码覆盖到真正的文件夹下。在这个过程中，虽然要有时长，但这个时间要小很多。

借助自动化上线，这种方式要比现有的上线要快很多。上线时间差越小，对线上服务的影响越小。

特殊情况

上面讲的方式虽然将时间差缩小了很多，但还是有一些很小的时间差。对于一般的服务大家都是可以接受的，但对于一些交易类的服务（如：电子商务，金融），这种时间差还是不能接受的。对于这种要求非常严格的服务估计还是只能夜里停服务上线了。

如何减少前端异步请求的数量

welefen — Tue, 07 Sep 2010 01:57:25 +0000

开发模式

在前端开发中，一条很重要的优化原则就是减少HTTP请求数。但在实际开发中，有时候不得不用大量的异步请求。这里的异步请求所指的都是页面加载时的，之后用户操作过程中所发生的异步请求并不影响加载的速度。

在百度这边，由于FE需要写模板。所以很多时候有些功能如果有接口了，RD同学就要你使用异步接口。但异步接口使用多了就会影响页面的性能。比如说百度空间个人中心在页面加载时差不多要处理10个异步请求。这个数量是非常大的。如果减少这些异步请求的数量成为了优化的重点之重。

实现方案

目前想到一条比较可行的实现方案是通过一个公用的代理页面，前端在处理时将这些异步请求分组去处理。代理页面获取到打包的URL，然后服务器端去请求，最后将合并后的数据输出。

在服务器端去请求，由于数据是服务器对服务器的，数据网络传输时间可以忽略不计。

实现代码

if(typeof Space == 'undefined') window.Space = {};
Space.asynJs = function(){
var _isStart = false,
stack = [];
function start(){
if(_isStart){
throw new Error('asynJs request is start.');
return false;
}
_isStart = true;
for(var i = 0, len = stack.length; i < len; i++){
if(!stack[i]) continue;
setTimeout(function(){
//如果该组只有一条记录，就不用走通用代理了。
if(stack[i].length == 1){
baidu.sio.callByServer(decodeURIComponent(url));
}else{
var url = 'url[]=' + stack[i].join('&url[]=');
baidu.page.loadJsFile('http://hi.baidu.com/st/asynproxy.php?' + url);
}
},0)
}
}
function load(url, group){
group = group | 0;
url = encodeURIComponent(url);
if(!stack[group]){
stack[group] = [url];
}else{
stack[group].push(url);
}
}
return {
load:load,
start:start
}
}()

该实现方式就是提供了2个方法load和start，load用于填充要请求的异步接口，start在页面底部启动请求。因为页面一般都分成头，中，尾3个部分，所以start方法可以在尾部文件里直接调用就可以了。

Space.asynJs.load('http://pageurl1', 1)
Space.asynJs.load('http://pageurl2', 1)
Space.asynJs.load('http://pageurl3', 2)
//在页面最底部启动请求
Space.asynJs.start();

PHP端的实现

//url is array
$urls = $_GET['url'];
//经过白名单过滤后的URL
$urls = apply_domain_filter($urls);
//实例化Curl类
$curl = new Curl();
$contents = array();
foreach($urls as $url){
//需要配置对应URL的transmit
//请求时带上传递过来的Cookie
$contents[] = $curl->get($url, $_COOKIE);
}
echo join(';', $contents);
?>

额外的收益

目前一些框架(tangram)里domready时执行一些函数时并没有提供函数排序的功能，这样就不能实现重要的异步请求先加载不重要的请求后加载的功能。目前百度空间app平台这边实现方式是通过setTimeout延时来执行。如果设置的时间较短，各个浏览器表现的不一样。如果设置的时间比较长，有会影响页面加载的时间。

通过现在的这种方式后，不光实现了异步接口分组的功能，同时实现了重要的先加载，不重要的后加载。
先加载的东西只要第二个参数传值小一些就可以了。

风险

由于通用代理管理的是获取URL然后请求的工作，所以如果在后端不做一些判断的话可能引发一些风险，甚至XSS漏洞。目前想到的主要是2点。

1、通用代理要判断域，非白名单制定域不予请求
2、返回时必须设置header为application/javascript来阻止直接请求的XSS漏洞

巧用XSS为实际需求服务

welefen — Sat, 26 Jun 2010 01:39:14 +0000

昨天早上和JerryQu骑车上班的途中聊天，他这几天遇到一个特殊的需求。

页面中调用一个通过CMS发布的callback，callback返回一段字符串内容，然后页面拿到内容后直接innerHTML塞到某个ID里面去。本身这是个很简单的需求。

但是现在需求复杂了，希望callback返回内容中有一段脚本，用来操作页面的DOM。不想改变页面的原因是，要走整套上线流程，非常麻烦，你们懂的。

也就是本事返回的内容是“这是返回的内容”，现在变成“这是返回的内容”，但是这样直接innerHTML进去的话是不被执行的。

一种解决方案是，将script标签变成iframe,嵌套一个新的页面（这个页面也是通过CMS发布，所以也很方便），然后iframe的页面用来操作父页面的DOM（当然是在同一个域下）。

后来想到了一种解决方案。利用XSS经常用的方式，插入一个img标签，设置src为一个不存在的URL，然后再onerror事件里操作页面的DOM，如：

返回内容为“这是返回的内容”。

经测试，一切OK。

按字节截取字符串

welefen — Tue, 09 Mar 2010 04:02:58 +0000

在JS中，由于中文和英文是同等对待的，但有时候我们希望是一个中文按两个字节算，这就出现了按字节截取字符串的功能。下面列举了 2种实现方式。

循环检测

这种实现方式来自于Tangram，具体实现如下：

baidu.string.getByteLength = function (source) {
return String(source).replace(/[^\x00-\xff]/g, "ci").length;
};
/*
* Tangram
* Copyright 2009 Baidu Inc. All rights reserved.
*
* path: baidu/string/subByte.js
* author: dron, erik
* version: 1.1.0
* date: 2009/11/30
*/
/**
* 对目标字符串按gbk编码截取字节长度
*
* @param {string} source 目标字符串
* @param {number} length 需要截取的字节长度
* @return {string} 字符串截取结果
*/
baidu.string.subByte = function (source, length) {
source = String(source);
var getLen = baidu.string.getByteLength, i, len, current, next, currentLen, nextLen;
if (length < 0 || getLen(source) <= length) {
return source;
}
len = source.length;
for (i = Math.floor(length / 2) - 1; i < len; i++) {
current = next || source.substr(0, i);
currentLen = nextLen || getLen(current);
if (currentLen == length) {
return current;
}
else {
next = source.substr(0, i + 1);
nextLen = getLen(next);
if (nextLen > length) {
return current;
}
}
}
return source;
};

baidu.string是字符串常见操作的对象。

正则替换

这种方式的实现原理是先将中文替换成中文加个空格，这样变相的将一个中文变成了2个字节，然后在这个基础上截取，截取完成后在将中文加空格变成中文。

baidu.string.subByte1 = function(source, length){
return (source+'').substr(0,length).replace(/([^\x00-\xff])/g,'$1 ').substr(0,length).replace(/([^\x00-\xff]) /g,'$1');
}

这种实现方式不管是从代码量上还是从效率上都要比第一种高很多，这里有个测试案例。

js动态创建类和实例化

welefen — Wed, 24 Feb 2010 08:39:34 +0000

在js中，创建一个类和实例化该类一般方式是：

var cls = function(){}
cls.prototype = {
attr:'',
method:function(){}
}
var clsInstance = new cls;

这种方式简单明了，但如果类很多的话就比较痛苦了，并且代码看起来不够优化。

动态创建类

动态创建类实际上类似于一种代理的模式，代码如下：

var Fath = function(methods){
var cls = function(){
return new fn(arguments);
},
fn = function(args){
return this.init && this.init.apply && this.init.apply(this,args);
};
fn.prototype = cls.prototype = methods || {};
try{
return cls;
}finally{
cls = null;
}
}

创建一个类：
var TestClass = Fath(methods) //这里的methods是方法或者属性集合，是一个静态对象
实例化该类：
var testInstance = TestClass(params) //这里的params是传进去的形参
通过这种方式后，一个好处就是实例化类的时候不用再使用new了，当然使用new也是可以的，作用的等价的。避免了到处是new和prototype的好处。
性能上在1K数量级上没有很大的区别。

select节点clone全解析

welefen — Fri, 18 Dec 2009 03:01:35 +0000

在开发ns-log项目中，统计分类有复制的功能。由于之前的统计分类中的数据是通过JS赋值进去的，之后用户可能又进行了修改，发现进行节点克隆时，出现了无法复制select下拉框值的怪异现象。本文对这个怪异现象进行解析和给出解决办法。

问题现状

使用节点的cloneNode(true/false)进行克隆时，目前是下面的表现情况：

select为设置初始值或者初始值是第一个option。
表现：各大浏览器都没什么问题。
select初始值不是在第一个option。
表现：IE下无法克隆，其他内核的浏览器没什么问题。
select的值被用户或者JS修改。
表现：各个浏览器均无法克隆到真确的值。值结果跟第二条结果相同。

IE的特殊处理

对于上面第二条，初始值不在第一个option时无法克隆的情况，确实是IE的一个Bug，相信不少人都遇到过这样的问题。并且IE下使用cloneNode方法时，还有Event方面的问题，所以差不多可以放弃使用这个方法。

IE下可以使用节点的outerHTML属性解决这个问题，它能够实时的获取节点的内容，哪怕是select的值被用户或者程序改变。下面给出简单的实现。

function clone(node){
var div = document.createElement(‘div’);
div.innerHTML = node.outerHTML;
return div.childNodes[0];
}

其他内核浏览器的处理

既然IE内核的浏览器可以通过outerHTML属性来解决这个问题，那FF等浏览器可以通过类似的方法来实现吗？虽然FF等浏览器没有outerHTML属性，但是可以通过innerHTML属性实现，如：

function getOuterHTML(node){
var div = document.createElement(‘div’);
div.appendChild(node);
try{
return div.innerHTML;
}catch(e){
div = null;
}
}

答案是否定。

为什么会这样呢？难道是FF等浏览器的bug？

下面还是从W3C中对cloneNode方法,select标签，属性的定义进行说明。

下面引用的资料都是来自HTML5草案，HTML4或者XHTML对这些没有太多详细的定义。虽然是HTML5的，但这些节点跟以前没什么变化。

W3C中的cloneNode

具体链接：http://www.w3.org/TR/DOM-Level-2-Core/core.html

里面有2点比较重要：

克隆时会拷贝节点的所有属性和对应的值。
如果cloneNode方法的参数为true，会通过递归的方法克隆子节点。

W3C中的select节点

具体链接：http://dev.w3.org/html5/spec/forms.html#the-select-element

W3C对于属性的定义有2种，一种是内容性属性（Content attributes），另一种是操作性属性（未给出具体的命名，这里暂时使用这个名字）。

对于select标签，内容性属性主要有：Global attributes，autofocus，disabled，form，multiple，name，size。其中Global attributes包含一些常用的属性(accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,itemid,
itemprop,itemref,itemscope,itemtype,lang,spellcheck,style,tabindex,title)，这些属性是所有标签里都包含的，具体的见http://dev.w3.org/html5/spec/dom.html#global-attributes

而selectedIndex和value都属于操作性属性，这两个属性获取值的方式如下：

select . selectedIndex [ = value ]

Returns the index of the first selected item, if any, or −1 if there is no selected item.

Can be set, to change the selection.

select . value [ = value ]

Returns the value of the first selected item, if any, or the empty string if there is no selected item.

Can be set, to change the selection.

内容性属性和操作性属性的区别

给节点添加属性有两种方式，如下面所示：

var div = document.createElement(‘div’)
div.id = ‘welefen’; //直接加属性
div.setAttribute(‘id’,'welefen’); //通过setAttribute方法添加属性

对于内容性属性，这两种方法是完全相同的。

但对于操作性属性，第一种方式只会将属性添加在操作范围内，当把节点添加到DOM中，属性就失效了。

由于selectedIndex和value都是操作性属性，如果select的值被用户或者程序改变，clone时当前的值是无法带过去的。所以才会出现了无法克隆值的情况。并且也无法使用innerHTML来克隆值，因为innerHTML的原理跟这个是一样的。

innerHTML实现原理请看这里：http://www.w3.org/TR/2008/WD-html5-20080610/serializing.html#html-fragment

FF等浏览器解决方案

目前有2中解决方案，第一种是在select绑定change事件，触发change的时候，改变options里的selected属性，当然这种方法是很不可取的。另一种方案就是在克隆时获取元素的值，然后再赋值到克隆后的对象上去。

总结

当前出现这个情况的时候，以为是FF等浏览器的bug。当后来仔细想想，应该不会这样的情况，后来反复查看W3C相关的文档，终于确认了这一问题。下面给出完整的解决方案：

function cloneSelect(select){
if(document.all){
var html = select.outerHTML,
div = document.createElement(‘div’);
div.innerHTML = html;
return div.childNodes[0];
}
var cloneSelect = select.cloneNode(true);
cloneSelect.selectedIndex = select.selectedIndex;
cloneSelect.value = select.value;
return cloneSelect;
}

javascript中toInt的几种方法

welefen — Wed, 16 Dec 2009 08:20:26 +0000

在javascript中，如果要将一个字符串转变成数字，一般是通过parseInt这个函数进行。但如果对输入串有很高确定性的话，其实可以用更简单的方法。如：只是将字符串“123”变成数字123。下面给出具体的说明。

parseInt函数

parseInt函数是专门用来处理将字符串变成整型的。具体请见：ECMA-262 P114。

支持八进制和十六进制，如：’0111′，’0×111′。
支持非正数。如：’-111′。
支持数字后还有字符串，如：’111abc’。
支持第二个参数，是传递的转换进制，数值为2到36。如：parseInt(’111′,2)，即将111转换为二进制。
忽略前面的空白字符，如：\n，\t，\r。
如果无法将字符串转换为一个数值，则返回NaN。

一元操作符“+”

在javascript中，“+”号即可以作为二元操作符，又可以作为一元操作符。作为一元操作符的时候，就是将对象变成数值形式的。具体见：ECMA-262 P82。

其实执行+的时候，调用JS引擎的ToNumber函数。

true/false转成1/0。
null转成0。
支持非正数。
忽略前面的空白字符。
支持16进制，八进制会当十进制处理。
“111″转换成111，其他情况基本都是 NaN。

Number构造器

当number构造器当函数使用时，是将其他对象转化成数值。转换原理跟一元操作符”+”完全一样，因为都是调用JS引擎ToNumber函数。所以这个方式基本不用，因为使用它比使用“+”要多7个字符。

二进制操作符“|”

使用二进制操作符“|”结合0可以将对象转换成整形的。如’111′|0。

true/false转换成1/0。
忽略前面的特殊字符。
支持16进制，八进制会当十进制处理。
null转成0。
支持非正数。
不能转换成整型的，则返回为0。如：’111abc’结果为0。

二进制操作符“>>”

使用二进制操作符“>>”结合0可以将对象转换成整形的。如’111′>>0。

true/false转换成1/0。
忽略前面的特殊字符。
支持16进制，八进制会当十进制处理。
null转成0。
支持非正数。
不能转换成整型的，则返回为0。如：’111abc’结果为0。

二进制操作符“>>>”

使用二进制操作符“>>>”结合0可以将对象转换成整形的。如’111′>>>0。

true/false转换成1/0。
忽略前面的特殊字符。
支持16进制，八进制会当十进制处理。
null转成0。
非正数的时候则转换为2^32-概数的绝对值。如：’-111′>>>0为4294967185。
不能转换成整型的，则返回为0。如：’111abc’结果为0。

测试结果

对于转换的对象数字加字符或者其他类型的，只能用parseInt转换。

对于一般的转化，如将“123”转化成123时，有如下的测试结果：

	parseInt	+	\|	>>	>>>
IE8(执行10^5次)	96ms	65ms	61ms	59ms	58ms
FF3.5(执行10^7次)	49ms	48ms	52ms	48ms	53ms
Safari4(执行10^5次)	38ms	15ms	15ms	15ms	16ms
Chrome(执行10^5次)	25ms	33ms	37ms	38ms	37ms
Opera10(执行10^5次)	113ms	61ms	63ms	63ms	66ms

从上面可以看出，除了FF和Chrome下parseInt和其他的没什么差别，其他的使用parseInt函数都要比操作符慢。

所以有时候可以使用“|”操作符来完成字符到数值的转换工作，并且转换默认是0，而不是NaN。

javascript数组唯一化实现方式

welefen — Mon, 07 Dec 2009 05:10:18 +0000

到目前为止，javascript中array还没有内置的unique方法，本来这篇文章很早就写了，但由于之前的虚拟主机忘记续费导致数据丢了，前几天JerryQu问了我这个问题，觉得可能还有其他人要，这里在写出来，备大家参考。

实现方式

这里给出2中实现方式。一种是大家应该都知道的indexOf检测的方式，另一种是结合lastIndexOf和splice实现方式。

下载: array_unique.js

//首先给Array对象原型上添加indexOf和lastIndexOf方法.(如果没有的话)
if(!Array.prototype.indexOf){
   Array.prototype.indexOf = function(element, index){
   var length = this.length;
   if(index == null){
   index = 0;
   }else{
   index = +index || 0;
   if(index < 0) index+= length;
   if(index < 0) index = 0;
   }
   for(var current;index<length;index++){
   current = this[index];
   if(current === element) return index;
   }
   return -1;
   }
}
if(!Array.prototype.lastIndexOf){
   Array.prototype.lastIndexOf = function(element, index){
   var length = this.length;
   if(index == null){
   index = length - 1;
   }else{
   index = +index || 0;
   if(index < 0) index+= length;
   if(index < 0) index = -1;
   else if(index >= length) index = length - 1;
   }
   for(var current;index>=0;index--){
   current = this[index];
   if(current === element) return index;
   }
   return -1;
   }
}
//很常见的实现方式
var arrayUnique1 = function(arr){
   for(var i=0,len=arr.length,result=[],item;i<len;i++){
   item = arr[i];
   if(result.indexOf(item) < 0) {
   result[result.length] = item;
   }
   }
   return result;
}
//通过lastIndexOf和splice方法实现方式
var arrayUnique2 = function(arr){
   var length = arr.length;
   while(--length){
   //如果在前面已经出现，则将该位置的元素删除
   if(arr.lastIndexOf(arr[length],length-1) > -1) {
   arr.splice(length,1);
   }
   }
   return arr;
}

测试结果

测试数据：var arr = [1,2,3,1,2,3,2,1,3,4,2,232];
IE7循环10,000次：
arrayUnique1为460ms，arrayUnique2为190ms。
FF3.5循环100,000次：
arrayUnique1为170ms，arrayUnique2为63ms。

从测试结果上可以看出，通过lastIndexOf和splice的方式的速度是普通方式的2-3倍。

其他实现方式

除了上面描述的2中实现方式外，其实还是有其他实现方式的。jQuery中就一种实现方式。我们可以看下具体的代码：

unique: function( array ) {
   var ret = [], done = {};
   try {
   for ( var i = 0, length = array.length; i < length; i++ ) {
   var id = jQuery.data( array[ i ] );
   if ( !done[ id ] ) {
   done[ id ] = true;
   ret.push( array[ i ] );
   }
   }
   } catch( e ) {
   ret = array;
   }
   return ret;
}

这种是通过创建一个临时的对象，然后获取元素的ID保存在对象的key中。但这种实现方式只能针对对象，对于普通的直接量（如：数字，字符串等）是无用的。并且经过测试，这种方式在执行速度上和lastIndexOf结合splice还是有点差距的。

javascript中关于try,finally控制语句的使用

welefen — Mon, 26 Oct 2009 15:17:40 +0000

几乎每个脚本语言都有try,catch,finally控制语句。try,catch控制语句主要是对有异常的程序控制，这里不在详细描述。主要讲述下try,finally的妙用。

在正文之前，给出2个已有的两个应用（2篇文章都是在51JS中），如下：

1、try finally 妙用,防止内存泄漏。

2、月影发的“某人发给我的邪恶代码”，可以看#16楼 lifesinger的回复。

问题的表面

也许你对上面2个应用还没有真正的明白，也可能你看到这样的代码心里忍不住和我一样惊叹一声“绝”。那么为什么能够写出这样的代码，这样的代码又是怎样工作的呢？一切从ECMA-262开始说起。

揭开面纱

如果你还不知道什么是ECMA-262或者还没有阅读过这个标准，那么我建议你还是尽快花点时间好好看看，有兴趣更要研究。你可以从它的官方网站下载，如果不想看PDF版本的话可以打印出来的。我以前看的时候就是打印出来慢慢研究的。

在ECMA262的12.14 (P70)The try statement有：

The production TryStatement : try Block Finally is evaluated as follows:
1. Evaluate Block.
2. Evaluate Finally.
3. If Result(2) .type is normal, return Result(1).
4. Return Result(2).

上述中第一步和第二部分别是计算Block和Finally的值。第三步是进行第二步结果类型的判断，如果类型是normal的话，返回第一步的结果否则返回第二步的结果。

这里有两点比较特殊，一个是返回结果在进行计算Finally块后才进行的，二是第二步的结果类型是normal的时候，返回第一步的结果，否则返回第一步的结果。

对于第一点，前面的防止内存泄露就是一个很好的应用。充分使用了这一特性。

那第二步的结果类型什么时候是normal呢。这里的类型是实现JS引擎层面上的类型，用JS是获取不到的。

JS引擎层面的类型在ECMA262中的8.9进行了定义：

8.9 The Completion Type
The internal Completion type is not a language data type. It is defined by this specification purely for
expository purposes. An implementation of ECMAScript must behave as if it produced and operated upon
Completion values in the manner described here. However, a value of the Completion type is used only as
an intermediate result of statement evaluation and cannot be stored as the value of a variable or property.
The Completion type is used to explain the behaviour of statements (break, continue, return and throw) that perform nonlocal transfers of control. Values of the Completion type are triples of the form
(type, value, target), where type is one of normal, break, continue, return, or throw, value is any
ECMAScript value or empty, and target is any ECMAScript identifier or empty.
The term “abrupt completion” refers to any completion with a type other than normal.

也就是说，在JS引擎中，有break, continue, return, throw和normal五种完成类型。那么我们就可以知道当finally语句块含有break, continue, return, throw语句被执行时，返回值是第二步的结果，否则为第一步的结果。

上面提到的第二个应用就是基于这一特性的，虽然应用中提到的知识简单的返回结果。但在实际项目中，可以根据这一特性得到不同的返回值。