Jmtbai's Technology Space

漫漫长路的情况下，懒惰是一件很可怕的事。

16
05/2012
jmtbai
【转】新浪微博前端解析
文章图片

　　题记：搞前端的同学也许都知道一个数字——4 秒，有研究表明，如果一个网站没有在4 秒之内加载完成，用户就会感到焦躁不愉快，并离开这个网站。网站的内容、搜索引擎优化、用户体验?哪个更重要呢?在速度面前，也许这些都相对更次要。所以提高网页效率，是我们在新版微博的第一目标。从四个方面来浅谈我们新版微博的优化。

互联网的一些事

　　一、 HTTP 请求数的权衡

互联网的一些事

　　1、为什么要关心http请求?互联网的一些事

　　当浏览器向Web服务器发出请求时，它向服务器传递了一个数据块，也就是请求信息。在用户打开一个页面的初初，包括等待时间、请求时间、建立响应时间、渲染时间……，都是消耗在前端的。比如下载图片、下载样式表、JavaScript脚本、flash等文件。大家应该都经历过那个“多图杀猫”的时代，加载那样一个网页会花费大量的时间。减少这些资源文件的请求数将是提高网页显示效率的重点。 互联网的一些事

　　假设用户家的网速是1M/秒，那么他打开一个网页时，如果网页文件小于1M，理论上他可以在一秒之内打开网页。下载网页的快慢在显示速度上占了很大比重，所以，网页本身体积越小，浏览速度就会越快。这就需要产品、交互、设计，从最初就遵循尽量精简的

阅读全文评论(0)转载(0)
08
05/2012
jmtbai
javascript CDATA的意义

CDATA 内部的所有东西都会被解析器忽略。

假如文本中包含了大量的 "<" 和 "&" 字符 - 就像编程代码中经常出现的情况一样 - 那么这个 XML 元素就可以被定义为一个 CDATA 部分。

CDATA 区段开始于 "<![CDATA["，结束于 "]]>"：

<script type="text/javascript">

<![CDATA[

function compare(a,b)

{

if (a < b)

   {alert("a小于b");}

else if (a>b)

   {alert("a大于b");}

else

   {alert("a等于b");}

}

]]>

</script>

在上面的例子中，在 CDATA 区段中的所有东西都会被解析器忽略。

关于 CDATA 区段的注释:

CDATA 区段不能包含字符串 "]]>"，所以，CDATA 区段的嵌套是不被允许的。

同时也需要确保在 "]]>" 字符串中没有空格或折行。

为什么要使用CDATA:

       XHTML的第二个改变是使用CDATA段。XML中的CDATA段用于声明不应被解析为标签的文本（XHTML也是如此），这样就可以使用特殊字符，如小于（<）、大于（>）、和号（&）和双引号（"），而不必使用它们的字符实体。考虑下面的代码：

<script type="text/javascript">

function compare(a,b)

{

if (a < b)

   {alert("a小于b");}

else if (a>b)

   {alert("

阅读全文评论(0)转载(0)#Javascript
18
04/2012
jmtbai
【转】css3 -webkit-animation与-webkit-keyframes

-webkit-transform定义了元素的变形，-webkit-transition定义了元素的属性变化样式，-webkit-animation与-webkit-keyframes则真正的让元素动起来（不只是变到什么状态，更定义了中间过程）

让元素动起来

-webkit-animation定义一段动画属性，比如名字，持续时间，当前状态等。-webkit-keyframes则对每一个动画定义时间轴，可以设置某个时间动画作用的元素是什么状态。

--

@-webkit-keyframes rotateA {0%{ -webkit-transform: rotateY(0deg);}100%{ -webkit-transform: rotateY(360deg);}} #circle{ -webkit-animation-name: rotateA; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}

--

上面的代码中，定义了元素#circle的动画属性：名字是rotateA等。@-webkit-keyframes rotateA 针对name是rotateA的动画设置时间轴：0%位置时什么样，100%位置时什么样。

css3 animation的所有属性及详细解释在http://www.w3.org/TR/css3-animations/

阅读全文评论(0)转载(0)
01
04/2012
jmtbai
在同一站点下，跨子域进行ajax通信的一种解决方法

处于安全的考虑，浏览器对于ajax请求是有限定的，他要求发起和相应请求的双方处于相同的域名。

一种比较容易的方式就是在当前的域名下设置一个代理页面，通过它来发送请求和转接回复的数据，从而实现ajax的跨域请求。这种方式的优势在于可以跨站点而不仅限于跨子域，不过这样做还有一个弊端就是客户端的session信息将会丢失，在一些需要session的情形(比如需要用户登录验证的情况)就不能适用。

这里介绍的是另一种方法。

解决办法其实和上面的代理页面方式有些类似，上面的方式我们实际上是借用代理页面来发送请求和接受数据，从而绕开浏览器的安全设定。而在这里我们将借用代理页面所处的环境，通过它来实现功能。首先在想要进行通信的那个子域下设置一个"代理"页面，在这个页面中我们是能对这个子域下的数据进行ajax请求的。

接着就是需要建立一个通道来使用"代理"页面的这一权限，我们在需要使用跨子域的页面中通过iframe引入代理页面，然后通过javascript就能获得代理页面的javascritp环境(iframeEle.contentWindow)，不过这里有个前提就是代理页面需要和当前页面处于同一域中(document.domain需要一致)。由于对于document.domain的值设定时有一个规定就是，域只能提升，不能降低层级或者跳到

阅读全文评论(0)转载(0)#Javascript
30
03/2012
jmtbai
【转】关于各浏览器对CSS伪类以既(selector)选择器的支持

说明：√的意思就是全支持

           Δ的意思就是支持但有些部题存在

          Χ的意思很明显就是不支持了

一.对CSS伪类的支持：

二：对(selector)选择器的支持

看完上面的列表不知道大家有没有发现一个问题，IE6对.class选择器的支持竟然是Δ，很纳闷平时在IE6下用.class并没有发现任何问题啊。这里怎么会是Δ，后来看了说明才知道原来是对双重类的解析上的确存在问题。不明白我说什么？好，直接给代码，分别在IE6和其它的浏览器下过行看看就知道结果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

    .red.green { color:blue;}

    .green { color:green; }

    .red { color:red;}

</style>

</head>

<body>

<p class="green red">test</p>

</body>

</html>如果你对css的优先级的计算有点了解的话，就应该知道P里的test的颜色应该是蓝色，.red.green

阅读全文评论(0)转载(0)
11
12/2011
jmtbai
【转】javascript中的moveStart和moveEnd方法，createTextRange()方法和createRange()方法

详探TextRange对象--查找与选择

TextRange对象是动态HTML(DHTML)的高级特性，使用它可以实现很多和文本有关的任务，例如搜索和选择文本。文本范围让您可以选择性的将字符、单词和句子从文档中挑选出来。TextRange对象是在HTML文档将要显示的文本流上建立开始和结束位置的抽象对象。

下面是TextRange的常用属性与方法：

属性

boundingHeight 获取绑定TextRange对象的矩形的高度

boundingLeft 获取绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的距离

offsetLeft 获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置

offsetTop 获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置

htmlText 获取绑定TextRange对象的矩形的宽度

text 设置或获取范围内包含的文本

方法

moveStart 更改范围的开始位置

moveEnd 更改范围的结束位置

collapse 将插入点移动到当前范围的开始或结尾

move 折叠给定文本范围并将空范围移动给定单元数

execCommand 在当前文档、当前选中区或给定范围上执行命令

select 将当前选择区置为当前对象

findText 在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。

使用TextRange对象通常包括三个基本的步骤:

1.创建文本范围

2.设置开始点和结束点

3.对范围进行操作

----------

阅读全文评论(0)转载(0)
30
11/2011
jmtbai
【转】Open Graph Protocol（开放内容协议）（一）

　　前一阵子在分析竞争对手时，看到某个英文外贸B2C页面<head>代码中有一段：

　　　<meta property="og:title" content="**’s Facebook" />

　　　<meta property="og:type" content="product"/> 

　　　<meta property="og:url" content="http://www.******.com" /> 

　　　<meta property="og:image" content="http://www.******.com/logo.gif" /> 

　　　<meta property="og:site_name" content="******.COM" /> 

　　　<meta property="og:description" content="CoolGadgets at the RightPrice - Worldwide Free Shipping -******" /> 

　　　<meta property="fb:admins" content="100001422224225" /> 

　　　<meta property="fb:page_id" content="241333394220" /> 

　　不理解Meta Property=og标签是什么意思，以及对SEO的影响，就查了些资料。

Meta Property=og标签是什么呢?

　　og是一种新的HTTP头部标记，即Open Graph Protocol：

　　The Open Graph Protocol enables any web page to become a rich object in a social graph.

　　即这种协议可以让网页成为一个“富媒体对象”。

　　用了Meta Property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用

阅读全文评论(0)转载(0)
29
11/2011
jmtbai
【转】JS编写又一工具(JetBrains WebStorm)

JetBrains WebStorm(话说我是地道的DW控...不过貌似现在高手都使用各种IDE了...不然显得不专业不是~哈哈哈~)

D2发现 Hedger 的js编辑器是webStorm，便下载来试试，结果发现：

虽然WebStorm的js的提示远远不如aptana那么强悍(输入字母d不提示document)，但是做为 IntelliJ IDEA 的js缩水版，其它功能也是比较期待的。

具体的有：

1. 文件不用保存，敲完直接看演示(ff也有类似的一款插件，罗浮宫abcd曾推荐过)。

2. 自带有svn，如果不用服务器版的svn的话，本地自身带一个版本管理的。非常方便。

3. 编辑右侧有各浏览器浏览快捷方式，更是快中快。

说不好的一点，就是吃内存。

官方网站：http://www.jetbrains.com/webstorm/ 

ps：压缩包包含：WebStorm-1.0.2，注册机，主题文件[内附安装说明]（效果类似上一篇DW主题~我真是大爱这样的配色呀~哇哈哈~）

今天使用js提示比较迟缓。

发现在设置-> Code Completion -> Autopopup 下 1000改为0, 右边Parameter Info中的1000 也改为 0

阅读全文评论(0)转载(0)
23
11/2011
jmtbai
ie6下并排的li宽度无法自适应

下面是网页设计中最常用的导航栏设计代码

Java代码  

<ul>  

        <li><a href="#">xxxxxxx</a></li>  

        <li><a href="#">xxxxxx</a></li>  

        <li><a href="#">xxxxx</a></li>  

        <li><a href="#">xxxxx</a></li>  

        <li><a href="#">xxxxxxxx</a></li>  

</ul>  

当上面代码的<li>标签设置float:left属性后，在IE6下li的宽度不能自动适应，解决的方法就是将<a>标签也添加float:left属性

阅读全文评论(2)转载(0)#div+css
jmtbai
jmtbai
性别：女年龄：25岁
现居：北京海淀区
粉丝：126
关注私信相册
Ta关注的人(109)
  • Hi_精彩
  • 百度空间
  • hrbufccu
  • 55380855
  • wdd987987
  • 茉莉茶水香
  • seny1988
  • wang87400819