当前位置: 网站建设 > 网页设计 > 建站经验 >

让Web应用程序飞起来的秘诀

时间:2013-03-02 04:14来源:未知 作者:admin 点击:

标签:让Web应用程序飞起来的秘诀 起来(5)应用程序(2)chrome(5)开发(17)职员(2)Web(57)秘诀(2)一个(102)
图 1 是一个Chrome开发职员工具剖析一个页面的示例。(要拜访这些工具,在你的阅读器中单击 Tools Developer Tools。) 通过YUI,以下优化将在JavaScript文件中履行: 图 2. Firebug 插件 删除分号。像压缩CSS一样,一些不重要的分号(;)将被从JavaScript代码中删除。 Tag:秘诀 起来 应用程序 秘诀 起来 应用程序 删除空白。从JavaScript代码中删除所有不重要的空白,包含新行。 其他抉择。--line-break 选项对于分别文件可能是重要
让Web应用程序飞起来的秘诀》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234T22013.htm

  图 1 是一个Chrome开发职员工具剖析一个页面的示例。(要拜访这些工具,在你的阅读器中单击 Tools > Developer Tools。)

  通过YUI,以下优化将在JavaScript文件中履行:

  图 2. Firebug 插件

  删除分号。像压缩CSS一样,一些不重要的分号(;)将被从JavaScript代码中删除。

Tag:秘诀   起来   应用程序     秘诀   起来   应用程序    

  删除空白。从JavaScript代码中删除所有不重要的空白,包含新行。

  其他抉择。--line-break 选项对于分别文件可能是重要的,因此这一行不能太长。(优化时 YUI Compressor会删除换行符。)

  删除注释。从 JavaScript文件中删除所有注释,除了这些C作风的注释,以 /*! 序列开端的。如果公司版权或者其他信息必须保存在文件中,务必使用该序列包含注释内容。

  YUI Compressor是一个可以用来优化CSS和JavaScript源文件的工具,让IE浏览器支持CSS3圆角属性的方法,使它们变得更小。小的原文件会带来了许多利益,节省了带宽、为访问提供更快的加载时光。尽管对一个文件节俭仿佛微不足道,但是如果大批使用,累计起来相称可观。如果增加到分段步骤中,YUI Compressor将可以在不影响文件开发和保护的情形下优化CSS和JavaScript文件。必须强调的是,压缩CSS和JavaScript文件只是优化资源,使Web应用程序更轻巧的整体工作中的两个技术。

  斟酌这样一个文件,其中额外空白总计5KB。如果网站天天的点击率是1000,每天节省5KB每个月就可以勤俭大概146 MB((5K * 1000 * 30) / 1024作为粗略估计)。就这而言,该文件的点击量仍是绝对守旧的估量,实际空白本钱可能还会增添。

  要解决问题并从小资源获益,一个不言而喻的解决方案是从CSS和JavaScript文件删除额定元素,比如解释和空白。但是,让DIV设置Float后高度不自动增加,因为在开发进程中从文件删除正文和空白不可行,一个较好的解决方案是 “分级” 的网站资源、优化它们、而后将其宣布。

  如果使用一个自动工具,就可轻松地获取一个使用旧文件的URL和另一个包括压缩文件的URL(例如, 和

  停止语

  YUI Compressor

  此外,下载文件的用户必需等候文件的下载。只管很多用户在他们第一次访问网站后可能就有缓存的CSS或JavaScrip文件,性能依然会对他们的第一次访问造成负面影响。假如可以减少CSS和JavaScript文件,即便每次1KB,都可以减少数千字节的浏览器必须加载的数据。

  从这一点上来说,将文件变得更小作为问题的一个长期解决方案是不可行的,由于文件很有可能在未来会被修正。如果将空白内容和注册全体删除,CSS和 JavaScript代码就很难浏览。

  当开发人员使用CSS或JavaScript文件工作时,空白内容通常是一件好事。空白内容包括缩进文件所使用的字符,加强可读性的间距、以及为了在文章的不同局部增添一个可视距离而插入的额外空行。空白内容使文件易于阅读和维护。如果CSS文件中有恰当数目的空白内容(和注解),将有助于开发人员懂得CSS代码的用意。

  问题:空白内容

  问题是逐步增长的空白导致文件一直增大。每个空白行、缩进和括号之间的空格至少占用一个额外字符,这对于CSS或JavaScript代码的准确解析来说实际上并不需要。首先,一两个空白不什么大不了的,但是小数量乘以一个很大倍数时就变成很大的数量了。

  重命名 Method-scoped 变量。除非使用YUI Compressor 命令的 --nomunge选项,否则YUI Compressor将主动缩短JavaScript文件中的变量名。(将变量申明独自留在函数外,假设它们可能会用于其他处所)。因为JavaScript语言中的变量名仅需至少一个字符,就能为JavaScript文件节省相称多字符。调换变量略微混杂JavaScript代码,但是由于不须要修改代码版本,应当问题不大。

  编写一个删除空白字符的定制脚本最初听起来是一个可行的解决计划,然而在CSS和JavaScript文件中自身都有很重要的空缺。因而任何删除空白和压缩文件的工具必须是足够智能,可以差别哪些语言中哪些空白是重要的。

  要想查看压缩的优势,可以使用不同的工具,让div+css的div居中而里面的文字不居中的做法,其中两个是构建在浏览器中,这使得使用它们比使用分析工具便利得多:Google Chrome Web浏览器的开发人员工具和Mozilla Firefox的Firebug插件。这两个工具都展现了下载的附加资源以及文件大小和下载它们浏览器所用的时间。

  图 2 展示了 Firefox 中的 Firebug 插件分析统一页面 。

  荣幸的是,在社区中已经可以找到这种工具了,它们已经经由资源(好比 CSS 和 JavaScrip 文件)压缩测试了。其中一个工具就是 YUI Compressor,一个来自Yahoo! Developer Network的可用工具。

  看看上风

  图 1. Chrome 浏览器附带的开发人员工具

--> [网站建设之]让Web运用程序飞起来的秘诀

 导读:通过进步Web资源的性能,让它们变得更小,使得网站的访问者将可以更快地加载较小的源文件,而且将能够节俭网站所用的带宽。本文先容了如何通过对CSS和JavaScript文件——两种易于优化的常见资源,使用社区中供给的工具即可实现优化—&mdash,认识HTML5:对于HTML5的7个误解;优化空间应用来实现更高的机能。然而,在持续之前,有一点是很主要的,紧缩CSS跟JavaScript文件只是为了让Web利用程序&ldquo,认识CSS3的column属性;轻盈”的诸多操作其中的两个技术。对于优化其余资源(比方,HTML和图像)的技巧,可以从其他书籍或网络资源等参考材料中获取更多信息。本文内容由CSDN编纂节选并收拾了IBM developerworks而来。

  YUI压缩器是一个使用Java编写的程序,领有Berkeley Software Distribution允许证。YUI Compressor可以缩小(压缩)CSS和JavaScript代码,这样无需本人编写工具就可以享受小资源带来的好处了。首先,可以下载YUI Compressor,然后提取文件,放置到一个轻易访问的地位。归档文件包括完全源代码和一个用于构建YUI Compressor的Apache Ant 脚本(build.xml)。在原文中,作者以代码实例诠释了如何CSS和JavaScript文件(您可以点击这里查看更多代码实例)。

  解决方案:压缩


(责任编辑:网站建设)
让Web应用程序飞起来的秘诀相关文章
上一篇:让IE浏览器支持CSS3圆角属性的方法 下一篇:让你永远受用的10个CSS简写技巧
回到顶部