對於網頁加速的問題，已經被廣泛的討論了
主要在於減少 request 數以及減低網路傳輸的時間
也因此發展出一些技巧或技術，例如 css sprite, 資料gzip 等
瀏覽器也把連線數限制從2條變成6條，以加快網頁顯示的速度
然而若要網頁能有本質上的提升，則是該把 HTTP 這個老通訊協定升級了
(目前是HTTP/1.1, 1999年)

由Google Chrome推廣的 SPDY 標準，已經改良並訂為 HTTP/2 的標準 (2015年初定案)
他的重點在於 (如果我理解得沒錯的話，歡迎指正)
1. http header 也可壓縮 (HTTP1.1 header 無法壓縮)
2. 一個 connection 可以傳輸多個Content (HTTP1.1 一個request 一個 content)
3. 可以 Server Push 資料
4. 可以向下相容 1.1
實測上，可以讓網頁載入速度提升約 30%

目前，大部分瀏覽器已經支援 HTTP/2 標準，然而 Server 端的步調就緩慢許多
微軟的 IIS 要到 10 才支援，目前只有 windows 10 才有
Windows Server則要明年 2016 才有支援
相反於微軟，其他非微軟的開發速度上就快多了 例如 Node.js

---------------------------------------------------------
測試上，可以用 Chrome 的開發模式 把 protocol 欄位勾選顯示



h2 就是 http/2

設定 --> 隱私權 --> 內容設定 --> 彈出式視窗 --> 管理例外情況

 
 

自製input 的 radio button 和 checkbox 之前常見的做法是，在input旁邊加入:not(old)的選擇器，如下所例 (以下寫法為SCSS格式)

input[type="radio"]:not(old){

width:28px;

margin:0;

padding:0;

@include opacity(0);

}

input[type="radio"]:not(old) + label{

display: inline-block;

margin-left: -28px;

padding-left: 18px;

background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;

width:auto;

line-height: 12px;

}

input[type="radio"]:not(old):checked + label{

background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;

width:auto;

}

但是chrome的新版本(39版)後開始，不能直接在input旁邊加:not(old)，這段語法，點擊後，會無法正常顯示，所以解決的方法有兩個
1. 要使用:not(old)這段語法，不能在input旁邊加，必須是在他的外層上加，如下所例

.r-btn:not(old){

    input[type="radio"]{

     width:28px;

     margin:0;

     padding:0;

     @include opacity(0);

    }

    input[type="radio"] + label{

     display: inline-block;

     margin-left: -28px;

     padding-left: 18px;

     background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;

     width:auto;

     line-height: 12px;

    }

    input[type="radio"]:checked + label{

     background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;

     width:auto;

    }

}

2. 不使用:not(old)，改用:not(:checked)寫法，Selectors 4也建議使用此語法，如下所例

input[type="radio"]:not(:checked), input[type="radio"]:checked {

    position: absolute;

    left: -9999px;

}

input[type="radio"]:not(checked) + label{

display: inline-block;

margin-left: 4px;

padding-left: 18px;

background: url("//www.shopunt.com/images/eng/btn/radio.png") no-repeat;

width:auto;

line-height: 12px;

}

input[type="radio"]:checked + label{

background: url("//www.shopunt.com/images/eng/btn/radio-r.png") no-repeat;

width:auto;

}

 

location.reload()

Chrome 最新的版本 
會把 本來的表單重送，所以我在 
UW.WU.ShowMessageAndRefresh 
 

System.Web.HttpContext.Current.Response.Write("location.reload()" & vbCrLf)

更改為

System.Web.HttpContext.Current.Response.Write("location.href=location.href" & vbCrLf)

 

對於PC版大尺吋的螢幕，當網站要 feed 資料到 facebook 時，可以使用 javascript SDK 的
FB.ui => method:'feed' 方式處理，參考位置。此方法會popup小視窗讓user可以分享資料出去。

但是遇到手機版網頁就有點麻煩，實測上手機版的 chrome 會出現轉不停的情況，無法分享；而iPhone則是另開新頁面處理，可以成功但是會多一個分頁。所以手機版網頁建議使用 redirect 方式處理分享機制，參考位置
​

    var fbUrl = "https://www.facebook.com/dialog/feed?" +

    "app_id=122465741241119&display=touch" +

    "&link=" + encodeURIComponent("http://www.shopunt.com/tch/FixPage.aspx?id=525") +

    "&picture=" + encodeURIComponent("http://www.shopunt.com/tch/event/2014-nail-enrollment/fb_200x200.jpg") +

    "&description=" + encodeURIComponent("市價不斐的光療DIY教學，UNT傾囊相授！10場巡迴免費教學，讓妳輕鬆掌握光療DIY訣竅，並搶先體驗秋冬最新流行色！現場打卡，再送時尚美甲工具組") +

    "&redirect_uri=" + encodeURIComponent("http://www.shopunt.com/tch/event/2014-nail-enrollment/Handler.ashx?fun=FBCallback");

​

當然以 redirect 處理與 javascript 方式處理是兩種不同的方式，redirect 方式的 callback 網址 (redirect_uri)要接收facebook 導回的 post_id , javascript 方式則是 callback function 處理 post_id

calc()是CSS3的一個計算長度單位的新功能，能使用數學四則運算方式。

1. 使用“+”“-”“*”“/”四則運算；

2. 可以使用百分比、px、em、rem等單位；

3. 可以混合使用各種單位進行計算。

例：
.thing {
  width: 90%; /* fallback if needed */
  width: calc(100% - 10px);
  width: calc((100% - 12px) / 2);
  width: calc(100%/3 - 2*1em - 2*1px);
}

4. 使用時，"+" & "-" 兩邊需加空格(一定要加)， "*" & "/"兩邊是不用加空格(要加也是可以)

5. 瀏覽器的支援：IE9+ , Firefox4.0+ , Chrome , Safari , iOS Safari6.0+ , Android Browser 4.4+
   寫法： width: -moz-calc((100% - 12px) / 2);
              width: -webkit-calc((100% - 12px) / 2);
              width: calc((100% - 12px) / 2);
 

今天在觀察 Chrome 怎麼處理網頁中的 <script type="text/javascript" src="/scripts/unt.14.04.10.19.05.42.js"></script>  時，終於明白何時才會 200 (From Cache) (unt.14.04.10.19.05.42.js 是假的，實際會被重導到 scripts.aspx 來處理。)

1. 在網址列，同網址再按一下  Enter 載入時，Chrome 會對相同的網址再次送出 request。

2. 若是點選頁面中的連結或是在網址列輸入其它網址，才有可能看到 200 (From Cache)

在情況 1 時，若是有使用 Response.Cache.SetLastModified(Now) 則會看到 304 ，否則會把 Script 重新載入一次。

所以在 Server 最佳的(我覺得)寫法是:

Response.Cache.SetCacheability(HttpCacheability.Private)

Response.Cache.SetExpires(Now.AddYears(1))  '一年後才會到期，沒有這個就不會有 200 (From Cache)

Response.Cache.SetLastModified(Now)  '若是 Browser 送出了一個新的 Request, 有可能會回 304

不過有趣的是，在 scripts.aspx 收到帶有 ​If-Modified-Since 的 Request 時，是怎麼判斷要回應 304 的，我在 .vb 裡面沒有加上這個處理吔。

 
IE若沒反應，改用Chrome即可。

 
貼上IIS產生的CSR文字內容。PS.若Email無法通過，改選擇File Based Authentication即可。

 
確認URL是否正確。

 
送出後，等待Email通知憑證通過。

收到憑證檔案，再到IIS中，匯入CRT檔案。
 

 

 
確認CRT匯入成功。

 
設定完成。

若是用 Chrome 開了一個 fancybox ，在 iframe 中的網頁執行了 history.back 會把 fancybox 關掉而不是回到上一頁，這會造成 UW.WU.ShowMessageAndBack 等等利用 history.back 的 function 無法使用。
 
在多次測試後，很神奇的發現，若是在 iframe 中再進入第二頁，第二頁就可以用 history.back 了。

所以寫了一個 UW.WU.DelayRedirect()，若是某個頁面是要在 fancybox 的 iframe 中執行，就在 PageLoad 加一個

If UW.WU.GetValueFromQueryStringOrForm("Action").ToLower = "delayredirect" Then

            UW.WU.DelayRedirect()

End If

在 a 的 href 中多加一個 Action=DelayRedirect，預設就會在 500 ms 之後重新載入這個頁面 (新網址是 UW.WU.UrlWithNewTFWithoutAction)。
 

我找到了我一直很想要的用滑鼠滑一滑就可以關掉頁面和上一頁下一頁的擴充套件啦~​​​

Smooth Gestures 

是這裡分享的>>​幸運草的吉光片羽

他還有分享其他很好用的套件,大家可以安裝來用用唷~