五月, 2009 的归档

  • 网页尽可能的快速加载对网站非常重要；用户希望快速的查看他们想要看的页面，假如你不能满足他们，他们就会另寻它处。在这篇文章中，你会看到五种为你的网页加速的简单而有效的技术的相关讨论。 1. 使用Yslow概览与测量网站加载时间 在决定什么出问题之前，知道网站的加载时间是第一步。它也能让你知道你是否需要为网站加速进行更改。 在我们开始之前，如果你还没有安装YSlow, 请安装。他是Mozilla Firefox的一个扩展，你可从下面的链接找到它： https://addons.mozilla.org/en-US/firefox/addon/5369 第一，让我们浏览Six Revisions网站，我们都使用相同的例子进行测试（仅需要在新的标签或者浏览器窗口中打开）。 在浏览器的有效叫，有里程表的一栏（如图1）。在其旁边，当网页完成加载以后，你会看到”YSlow”和数字。数字代表浏览器加载网站所花费的时间(以秒计)。我们希望这个数字保持尽可能低的水平。 图 1: YSlow图标和显示网页加载时间的里程表 多数情况下，导致网页加载时间长的一个或者一组原因如下： 太多的HTTP请求 非压缩的 (或未经缩小的) JavaScript文件 No expiration headers for静态图片文件 我们一会将要讨论这些。 为了fimilarize自己网站加载时间的表现，浏览一些网站。看看Google，facebook,和一些你喜欢的博客与网站。你会注意到网站利用越多的图片与js网页的响应时间越久。

    五招加速网页响应时间

    在 2009年05月31日 上发表 | 一条评论
    网页尽可能的快速加载对网站非常重要；用户希望快速的查看他们想要看的页面，假如你不能满足他们，他们就会另寻它处。在这篇文章中，你会看到五种为你的网页加速的简单而有效的技术的相关讨论。 1. 使用Yslow概览与测量网站加载时间 在决定什么出问题之前，知道网站的加载时间是第一步。它也能让你知道你是否需要为网站加速进行更改。 在我们开始之前，如果你还没有安装YSlow, 请安装。他是Mozilla Firefox的一个扩展，你可从下面的链接找到它： https://addons.mozilla.org/en-US/firefox/addon/5369 第一，让我们浏览Six Revisions网站，我们都使用相同的例子进行测试（仅需要在新的标签或者浏览器窗口中打开）。 在浏览器的有效叫，有里程表的一栏（如图1）。在其旁边，当网页完成加载以后，你会看到”YSlow”和数字。数字代表浏览器加载网站所花费的时间(以秒计)。我们希望这个数字保持尽可能低的水平。 图 1: YSlow图标和显示网页加载时间的里程表 多数情况下，导致网页加载时间长的一个或者一组原因如下： 太多的HTTP请求 非压缩的 (或未经缩小的) JavaScript文件 No expiration headers for静态图片文件 我们一会将要讨论这些。 为了fimilarize自己网站加载时间的表现，浏览一些网站。看看Google，facebook,和一些你喜欢的博客与网站。你会注意到网站利用越多的图片与js网页的响应时间越久。

    继续阅读...

  • 先来说eval的用法，内容比较简单，熟悉的可以跳过。 eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执行结果是一个值，则返回此值，否则返回undefined。 需要特别注意的是对象声明语法“{}”并不能返回一个值，需要用括号括起来才会返回值，简单示例如下： var code1='"a" + 2'; //表达式 var code2='{a:2}'; //语句 alert(eval(code1)); //->'a2' alert(eval(code2)); //->undefined alert(eval('(' + code2 + ')')); //->[object Object] 可以看到，对于对象声明语句来说，仅仅是执行，并不能返回值。为了返回常用的“{}”这样的对象声明语句，必须用括号括住，以将其转换为表达式，才能返回其值。这也是使用JSON来进行Ajax开发的基本原理之一。在例子中可以清楚的看到，第二个alert语句输出的是undefined，而第三个加了括号后输出的是语句表示的对象。 现在来说本文的重点，如何在函数内执行全局代码。为了说明这个问题，先看一个例子： var s='global'; //定义一个全局变量 function demo1(){ eval('var...

    js中eval函数详解

    在 2009年05月25日 上发表 | 2 条评论
    先来说eval的用法，内容比较简单，熟悉的可以跳过。 eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执行结果是一个值，则返回此值，否则返回undefined。 需要特别注意的是对象声明语法“{}”并不能返回一个值，需要用括号括起来才会返回值，简单示例如下： var code1='"a" + 2'; //表达式 var code2='{a:2}'; //语句 alert(eval(code1)); //->'a2' alert(eval(code2)); //->undefined alert(eval('(' + code2 + ')')); //->[object Object] 可以看到，对于对象声明语句来说，仅仅是执行，并不能返回值。为了返回常用的“{}”这样的对象声明语句，必须用括号括住，以将其转换为表达式，才能返回其值。这也是使用JSON来进行Ajax开发的基本原理之一。在例子中可以清楚的看到，第二个alert语句输出的是undefined，而第三个加了括号后输出的是语句表示的对象。 现在来说本文的重点，如何在函数内执行全局代码。为了说明这个问题，先看一个例子： var s='global'; //定义一个全局变量 function demo1(){ eval('var...

    继续阅读...

  • jQuery性能优化指南（1） jQuery性能优化指南（2） jQuery性能优化指南（3） 8，尽量使用ID代替Class。 前面性能优化已经说过，ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。 看下面的一个例子： // 创建一个list var $myList = $('#myList'); var myListItems = '<ul>'; for (i = 0; i < 1000; i++) { myListItems += '<li class="listItem' +...

    jQuery性能优化指南（3）

    在 2009年05月22日 上发表 | 一条评论
    jQuery性能优化指南（1） jQuery性能优化指南（2） jQuery性能优化指南（3） 8，尽量使用ID代替Class。 前面性能优化已经说过，ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。 看下面的一个例子： // 创建一个list var $myList = $('#myList'); var myListItems = '<ul>'; for (i = 0; i < 1000; i++) { myListItems += '<li class="listItem' +...

    继续阅读...

  • jQuery性能优化指南（1） jQuery性能优化指南（2） jQuery性能优化指南（3） 4，对直接的DOM操作进行限制 这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM 。 这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。 例如，你想动态的创建一组列表元素，千万不要这样做,如下所示： var top_100_list = [...], // 假设这里是100个独一无二的字符串 $mylist = $("#mylist"); // jQuery 选择到 <ul> 元素 for (var i=0, l=top_100_list.length; i<l; i++){ $mylist.append("<li>"...

    jQuery性能优化指南（2）

    在 2009年05月22日 上发表 | 没有评论
    jQuery性能优化指南（1） jQuery性能优化指南（2） jQuery性能优化指南（3） 4，对直接的DOM操作进行限制 这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM 。 这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。 例如，你想动态的创建一组列表元素，千万不要这样做,如下所示： var top_100_list = [...], // 假设这里是100个独一无二的字符串 $mylist = $("#mylist"); // jQuery 选择到 <ul> 元素 for (var i=0, l=top_100_list.length; i<l; i++){ $mylist.append("<li>"...

    继续阅读...

  • jQuery性能优化指南（1） jQuery性能优化指南（2） jQuery性能优化指南（3） 1，总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。 例如有一段HTML代码： <div id="content"> <form method="post" action="#"> <h2>交通信号灯</h2> <ul id="traffic_light"> <li><input type="radio" class="on" name="light" value="red" /> 红色</li> <li><input type="radio" class="off" name="light" value="yellow" /> 黄色</li> <li><input type="radio"...

    jQuery性能优化指南（1）

    在 2009年05月22日 上发表 | 没有评论
    jQuery性能优化指南（1） jQuery性能优化指南（2） jQuery性能优化指南（3） 1，总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。 例如有一段HTML代码： <div id="content"> <form method="post" action="#"> <h2>交通信号灯</h2> <ul id="traffic_light"> <li><input type="radio" class="on" name="light" value="red" /> 红色</li> <li><input type="radio" class="off" name="light" value="yellow" /> 黄色</li> <li><input type="radio"...

    继续阅读...

Page 1 of 3123