合併JS和合併CSS文件

浏览页面的时候,把页面保存下来,便能看到这个页面含有的文件。文件太多,会大大降低浏览速度。而WordPress的插件系统使得JS和CSS文件很多,所以,应当合并一下JS和CSS文件。

手动合并是一个方法,但是容易弄错,而且不太好修改。另一个方法是建立一个新的all.js.php文件,内容是:

<?php
require_once(‘目录/wp-blog-header.php’ ) ;
include (“/blog/a.js” ) ;
include (“/b.js” ) ;
?>

就是将header.php里面的那些js文件都include到all.js.php,然后在header里面包含all.js.php文件即可:

<script xsrc=”all.js.php” type=”text/javascript“/>

另外还要做的一件事情是需要把原来那些js文件从head里面去掉。通常这些js文件都是通过add_action(‘wp_head’,’fun’ ) ;这样的钩子添加到head里面的。在fun函数的定义处去掉对应的代码,或者直接把这条语句删除即可。

对CSS文件也可以用同样的处理方式。CSS文件一般都不多,这时候可以直接手动把它们都贴到一起。

另外js文件的载入位置也很重要,放在越后面越好,让浏览器先下载html代码。像Google Analytics的js代码最好放在文件最后。

[轉載]http://zhiqiang.org/blog/posts/wordpress-accelerate-the-pace-of-pages-printed-in-the-generation-and.html

Yahoo14條優化規則

1. 尽可能的减少 HTTP 的请求数 [content]
2. 使用 CDN(Content Delivery Network) [server]
3. 添加 Expires 头(或者 Cache-control ) [server]
4. Gzip 组件 [server]
5. 将 CSS 样式放在页面的上方 [css]
6. 将脚本移动到底部(包括内联的) [javascript]
7. 避免使用 CSS 中的 Expressions [css]
8. 将 JavaScript 和 CSS 独立成外部文件 [javascript] [css]
9. 减少 DNS 查询 [content]
10. 压缩 JavaScript 和 CSS (包括内联的) [javascript] [css]
11. 避免重定向 [server]
12. 移除重复的脚本 [javascript]
13. 配置实体标签(ETags) [css]
14. 使 AJAX 缓存 [content]

詳細解释:http://www.scribd.com/doc/2230023/YAHOO14

word-wrap, word-break, white-space, text-overflow 的區別和用法

存在的問題:

  1. 如果是全英文字符串,中间不包含任何符号(包括空格),不自动换行;
  2. 中英文混写,则在英文字符串的开始处换行(英文长度>div长度),结尾处不换行;
  3. 英文整个单词换行。等等,可能还有一些问题,这里只列出了常见的几个;

介绍下面几个css属性功能的简单用法:
word-wrap:normal | break-word;(内容换行)
 normal: 默认的属性值(允许内容顶开指定的容器边界)
 break-word: 内容将在边界内换行(不截断英文单词换行,截断英文单词下面的属性才具备这个功能。)
=====================
word-break:normal | break-all | keep-all(词内换行)
 normal: 如果是中文则到边界处的汉字换行,如果是英文整个词换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示。
 break-all: 强行换行,将截断英文单词
 keep-all: 不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示。

Continue reading →

Yahoo的純CSS圓角

以前看純代碼的圓角都是一條綫一條綫排出來的(如下圖),有些就使用JS,當中curvycorners-2.0.3.rar就是做比較好的。

curvy corners

而這次在一篇文章看到Yahoo做法有點不一樣,在4個角上面“下功夫”,原理也很好理解,請看下文。
轉載自:http://www.neoease.com/round-corners-with-html

1. 做一个直角的 DIV, 给他画上边框. (以下图片都以左上角为例)
div-css_round_corners_0.jpg

2. 在 DIV 内部画第二个 DIV, 背景色与页面背景颜色相同.
div-css_round_corners_1.jpg

3. 将第二个 DIV 挪到边界上, 使它能与页面背景连接, 这样看上去就像一个缺角的框框.
div-css_round_corners_2.jpg

4. 在第二个 DIV 内画第三个 DIV, 在这里其实就是一点.
div-css_round_corners_3.jpg

5. 将第三个 DIV 挪到右下角的位置, Done.
div-css_round_corners_4.jpg

我在 Yahoo! 截取了这段代码, 改了一下. 下载点击
最终效果如下图所示:

div-css_round_corners_preview.jpg

  基本上光看截圖就大概明白了它的原理,的確很好理解,出來效果也很不錯,但結構中仍然要使用很多 無内容的空標籤,一般純CSS的圓角都存在這個問題,是一個大難題!!

網頁常用英文命名(中英文翻譯)

用戶界面 UserInterface
流覽器 Browser-side
用戶端 Client-side
服務端 Server-side
頁 page
網頁 webpage
網/網頁 web
站點/網站 site
網站 website
訪問網站 visit website
最新評論 Last Comments
最近新聞 Recent News
我們推薦 We Recommend
推薦資源 Recommended Resources
獲取更多 learn more
文章標題 ArticleTitle
文章日期 ArticleDate
文章內容 ArticleContent

即將舉行的活動 Upcoming Events
為什麼選擇我們 Why Choose Us
最熱門的分類 Most Popular Categories

列 columens,Columns
內容 content
下拉 dropdown
全球/全局 global
佈局 layout
邏輯佈局 layoutLogic
內容佈局 layoutContent
搜索 search
用戶 user
簡要/摘要 Brief
描述 description
詳細/細節/詳情 Detail
分類 Categories
類別 Category
未歸類 uncategorized
當前的   current
作用域 scope
未命名 untitled
永久鏈結 Permalink
看不到FLASH時提示內容
Welcome to ***.com
We have detected that you do not have the Flash 8/9/10+ player installed.
Please Click Here to download the Flash plugin.