用 Chrome 下載網頁時, JS 檔的副檔名會被加上 ".下載", 要移除很多檔案的副檔名時, 可以用以下的 Batch

@echo off
for /R "C:\Path\HTML_files" %%f in (*.下載) do (
    ren "%%f" "%%~nf"
)
pause

http://blog.darkthread.net/post-2012-06-09-json-net-performance.aspx

JavaScriptSerializer、DataContractJsonSerializer及Json.NET

比較

目前是使用 Json.NET >  工具 程式褲套建管理員  > Package manager console 

PM>  Install-Package Newtonsoft.Json

​就可以安裝了
 

對於網頁加速的問題，已經被廣泛的討論了
主要在於減少 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

又發現新說法

我們在 front-end 做 scroll event的監聽的時候很常會過度的觸發要執行的事情，因此導致效能不太佳，
我們需要的是固定頻率執行某個function ， 這個原來叫 throttle

另外一種狀況像是autocomplete，不需要每一個keyup 都去ajax 去backend 抓資料回來，所以我們過去，
設一個變數去記住setTimeout 回傳回來的數字，如果下一次的keyup 發生在預設的時間內就去把 setTimeout清掉。
原來這種做法，有一個稱呼叫 debounce

不過jQuery 沒有內建這兩個function。這樣在複雜的 js 中增加易讀性。

這是一篇加密文章，需輸入密碼才可閱讀

使用CSS Media Query可以實現響應式網頁設計（Responsive Web Design）
但是在眾多瀏覽器中唯有IE這個萬惡瀏覽器到 IE9 及之後的版本才支援 CSS Media Query，不過有辦法可以讓 IE6 到 IE8 支援 Media Query 語法，那就是 Respond.js。

要注意的地方是：respond.js要放在css下面(順序有關係)
例：

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<script type="text/javascript" src="js/respond.min.js"></script>

Demo

下載地址：Respond.js
 

當我們將動態效果(例如：.animate)使用於.hover時，由於.hover的特性是會將＂每次＂滑鼠移動到而觸發的事件做完。所以若將滑鼠反覆快速移動而去觸發事件時，就會形成滑鼠停下後，但動態效果仍在持續作用的狀況。

因此為了避免這種狀況，我們可以搭配使用.stop()來停止前一次.animate()的效果。

$(this).stop().animate();

範例：
 http://jsfiddle.net/u8ejtoz9/29/

 


     

 

​

有的時候jquery會用到取代標籤的方式
<div id="testId">我是原本文字</div>

以下兩個都是innerHTML

document.getElementById('testId').innerHTML = "我是之後文字";

$('#testId').html("我是之後文字");

以下兩個都是outerHTML

document.getElementById('testId').outerHTML = "<div id="我是原本Id">我是原本文字</div>";

$('#testId').replaceWith("<div id="我是原本Id">我是原本文字</div>");

但是有時候～我們並不是要取代～而是想單純得到html含標籤的內容～

$('#testId').clone().wrap('<div>').parent().html()

 

這個活動頁左邊 menu 要固定位置 但是不能跑出框框外面
http://www.shopunt.com/tch/event/2014-naked-truth-cc-cream/

所以需要處理scroll物件

<div id="menuContainer">

  <div id="menu">

    <ul>

      <li>menu1</li>

      <li>menu2</li>

    </ul>

  </div>

  <div> ...長內容.... </div>

</div>

js

        var __ContainerHeight = 5000;

        var __ContainerTop = 160;

        var __MenuHeight = 550;

        var __FixedTop = 20;



        $(window).load(function () {



            __ContainerHeight = $("#menuContainer").height();

            __ContainerTop = $("#menuContainer").offset().top;

            __MenuHeight = $("#menu").height();



            $("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });

            $(window).scroll(function () {

                var scrolls = $(this).scrollTop();

                //console.log(scrolls);

                if (scrolls < __ContainerTop) {

                    $("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });

                }

                else if ((scrolls + __MenuHeight + __FixedTop) > (__ContainerHeight + __ContainerTop)) {

                    $("#menu").css({ "top": (__ContainerHeight - __MenuHeight) + "px", "position": "absolute" });

                }

                else {

                    $("#menu").css({ "top": __FixedTop + "px", "position": "fixed" });

                }

            });



        });

 

這是一篇加密文章，需輸入密碼才可閱讀