2012年6月15日 星期五

使用JSMin批次壓縮所有的Javascript,提升網站效能

JSMin是一套指令型的工具,方便的是你可以編輯一個批次檔,快速的將網站所有的Javascript一次性的壓縮。


網站:http://www.crockford.com/javascript/jsmin.html
下載:http://www.crockford.com/javascript/jsmin.zip

使用方法: D:\JS\jsmin.exe < project.js > project.jgz

透過上面的指令可以將 project.js 壓縮成 project.jgz,為了能批次的壓縮專案中所有的Javascript,在此撰寫一個Batch檔

 
D:\JS\jsmin.exe < project.js > project.jgz
D:\JS\jsmin.exe < project1.js > project1.jgz
D:\JS\jsmin.exe < project2.js > project2.jgz
D:\JS\jsmin.exe < project3.js > project3.jgz
D:\JS\jsmin.exe < project4.js > project4.jgz
D:\JS\jsmin.exe < project5.js > project5.jgz

將以上內容另存成 jscompress.bat 即可,另外在載入壓縮過後的Javascript請記得以下2個原則

1. 請於網站頁尾再載入
2. 請將其放置於</body>之前



相關閱讀

如何有效的提升網站的效能 - 12項建議



2012年6月8日 星期五

Slowcop - 免費網頁載入速度測試網站

Slowcop提供免費的網頁載入速度測試服務,使用簡單,在頁面中輸入你的網址,然後點後面的綠色按鈕,等待Slowcop對你的網頁進行測試,然後即可獲得你的網頁測速報告。從中你可以看到哪部分元素影響你的網頁載入速度,並且會給出你的網頁各個測試項目的評分以及如何優化你的網頁載入速度的建議。
   
Slowcop 是基於Google Page Speed ​​技術建立的網頁速度測試服務,感覺測試報告比Google Page Speed ​​更直觀,可讀性更強,大家可以互相參考使用。


網址:
http://slowcop.com



如何有效的提升網站的效能 - 12項建議



很多網友在使用網站服務時,常常是不願意等待的。同樣類型的服務網站,網友們總是傾向於使用較快速而穩定的網站。尤其是商務型網站更是如此。
建置一個即時而快速的網站是每個開發人員都應該有的觀念,影響網站速度的原因有很多,在這裡提供幾個建議:
  1. 減少靜態檔的存取次數,如Javascript, CSS, image這些類型的檔案,最好的方法就是將多個JS檔,、CSS檔 合併成一個,在網站載入的時候自然可以減少存取的次數,image的部份則可以使用sprite的技巧來解決
  2. 在使用Javascript Framwork時,盡量使用Javascript Library CDN的服務,什麼是CDN的服務呢,也就是內容分散傳遞服務,如目前的Google Libraries API,CSNJS 等..
  3. 將Javascript、CSS等檔案進行壓縮
  4. 將 CSS 檔案放置於表頭,Javascript則盡量於頁面最後再載入
  5. 不要同時將檔案於置於太多的Domain上,以減少domain解析的時間
  6. 不要在網站進入點就做轉址的動作
  7. 移除重覆的Javascript及CSS檔案,有時開發者會無意的將同樣功能的Javascript及CSS重覆載入,這將導致多餘的載入時間
  8. 在使用Ajax時,請盡量以GET的方式進行請求,以POST的方式將造成雙倍的要求次數,當然使用POST方式造成的安全性考量也是要考慮的
  9. 請避免不必要的404錯誤,讀取不到的情形請盡量避免
  10. 降低Cookie的大小,減少與伺服器溝通的成本
  11. 減少縮圖的發生,多一份縮圖的動作,會造成額外的Loading
  12. Favicon檔儘量的小,如果可以Cache會更好


相信遵從以上幾個小小的建議,應該可以大大的提升網站的速度。如果您有什麼建議,也歡迎多多交流。

2012年4月30日 星期一

Google Maps API V3 使用示範 - 以台北101為例

Google發佈Google Maps API V3, 在此做點簡單的介紹及實作範例.

第三版API的主要功能:

1、支持Chrome、iPhone Safari和Android手機上使用。
2、不在需要API keys,這樣用戶可以將代碼集成進入RSS閱讀器,並且不會出現錯誤。
3、基於MVC(Model-View-Controller)的框架,這將減少JavaScript的下載量,並且簡單易用。
4、自動開啟默認的UI界面,提供默認的UI控件和方法,這可以讓用戶開發的界面自動更新為最新的格式,當然用戶也可以禁用這個功能。
5、命名空間。所有的一切都在google.maps.*的命名空間,沒有以“G”為前綴的全局變量。
6、Geocoding API已經根據用戶的反饋進行了重寫。

第三版API的範例:
在此以台北101為範例,以下為Javascript部份, 為了能更快速的查詢地址的坐標, 可使用以下網站進行查詢 MyGeoPosition.com

    
    

    


以下為HTML的部份
    


當使用者點擊button之後,會立即顯示目前坐標上的地點.







2012年4月28日 星期六

使用Facebook PHP SDK發佈訊息至facebook留言版

Facebook允許開發者使用facebook php sdk發佈訊息至留言版,以下提供簡單的示範。

參數說明:

◎YOUR_FACEBOOK_SDK_PATH : 放置facebook api的伺服器位置
◎YOUR_APP_ID : facebook應用程式的App ID
◎YOUR_APP_SECRET : facebook應用程式的App Secret
◎YOUR_MESSAGE : 發佈訊息
◎YOUR_PICTURE_URL : 發佈圖片
◎YOUR_LINK with : 發佈網址連結
◎YOUR_LINK_NAME : 發佈連結文字顯示
◎YOUR_CAPTION : 發佈訊息備註


require_once "YOUR_FACEBOOK_SDK_PATH/src/facebook.php";
 
$app_id = "YOUR_APP_ID";
$app_secret = "YOUR_APP_SECRET";
 
//初始化facebook api
$facebook = new Facebook(array(
        'appId' => $app_id,
        'secret' => $app_secret,
        'cookie' => true
));
 
//取得登入facebook網址,並取得發佈權限
$login_url = $facebook->getLoginUrl(
    array('scope' => 'publish_stream')
);
 
//未授權則導向至登入網址
if (! $facebook->getUser()) {
    echo ';';
    exit;
}
 
//發佈訊息
$facebook->api("/me/feed", "post", array(
    message => "YOUR_MESSAGE",
    picture => "YOUR_PICTURE_URL",
    link => "YOUR_LINK",
    name => "YOUR_LINK_NAME",
    caption => "YOUR_CAPTION"
));


2012年4月26日 星期四

[PHP] Require & Include 的區別


摘自:
http://msdn.microsoft.com/zh-tw/library/cc295228.aspx

Include   網頁每次參考到檔案時,即包含該檔案。
Include_once   網頁第一次參考到檔案時,包含該檔案。
Require   必須在傳回網頁前先處理檔案,而且網頁每次參考到檔案時,即包含該檔案。
Require_once   必須在傳回網頁前先處理檔案,而且網頁第一次參考到檔案時,即包含該檔案。


‧require
   這個語法通常使用在程式檔案的一開頭,載入程式時,會先讀取require引入的檔案,使其變成程式的一部分。
   語法為:
   require("function.php");
   或
   require("header.inc");

‧include
   這個函式的功能跟require一樣,只不過通常使用在程式中的流程敘述中,例如if…else…、while、for等敘述中。
   語法為:
   include("function.php");
   或
   include("header.inc");

‧require_once和include_once
   使用方法跟require、include一樣,差別在於在引入檔案前,會先檢查檔案是否已經在其他地方被引入過了,
   若有,就不會再重複引入。

‧require和include的不同
   require適合用來引入靜態的內容,例如版權宣告,而include則適合用來引入動態的程式碼。
   include在執行時,如果include進來的檔案發生錯誤的話,會顯示警告,不會立刻停止;
   而require 則是會顯示錯誤,立刻終止程式,不再往下執行。
   include可以用在迴圈;require不行。

2012年4月24日 星期二

[C#] streamwriter亂碼問題


今天在將操作記錄寫入文字檔時,遇到寫入文字後的中文變成亂碼,目前找到的解決方案,Encoding.Default 可有效解決這個問題


public static void WriteTxtLog(string strLog, string Path, string FileName)
{
    StreamWriter txtwrite = default(StreamWriter);
    DirectoryInfo createdir = default(DirectoryInfo);
    FileInfo logfile = new FileInfo(Path + "\\" + FileName);
    //建log檔
    createdir = new DirectoryInfo(logfile.DirectoryName);
    if (createdir.Exists == false)
    {
        createdir.Create();
    }
    //使用與系統一致的編碼方式
    txtwrite = new StreamWriter(logfile.FullName, true, Encoding.Default);
    txtwrite.WriteLine(strLog);
    txtwrite.Close();
}


Related Posts Plugin for WordPress, Blogger...