1.非同步載入圖片，設定圖片寬高一樣，同時避免加載出來的圖片抖動

W3C標準中，當設定padding-top值為100%時，就是相對於盒子寬度的100%，這樣可以保證高度跟寬度一樣，寬高相等的容器。所以，當非同步載入圖片時，為了避免圖片加載出來時出現抖動，可以設定外部容器的padding值，保證容器的寬高相等，再將圖片絕對定位。

                <div class="image-header">
                    <img src="...">         
                </div>

        .image-header
 
 {
            position: relative;
            width: 100%;
            height: 0;
            padding-top: 100%;
            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }

2.JSON格式的資料轉換為物件 JSON.parse(‘JSON格式的資料’)；

{"name": "xiaoni", "age": 18, "sex": "female"}

JSON.parse('{"name": "xiaoni", "age": 18, "sex": "female"}');
結果就轉換為一個物件：
{name: "xiaoni", age: 18, sex: "female"}

這時，就可以說使用.屬性名來獲取對應的屬性值了。

3.左右兩列高度自適應且相等

<div class="clearfix column">
        <div class="left">
            DPR 便是 device Pixel Ratio 的簡稱，即裝置畫素比，它反映了裝置上的物理畫素與裝置獨立畫素對應關係，也就是說 DPR 可以讓我們知道當前裝置下邏輯畫素與物理畫素的對應情況。它的值可以按照下面的公式計算出來:

裝置畫素比 =
 
 物理畫素 / 裝置獨立畫素
在JavaScript中我們可以直接通過以下window上的屬性獲取裝置畫素比
window.devicePixelRatio
而在CSS中，可以通過以下屬性獲得:

-webkit-device-pixel-ratio;
-webkit-min-device-pixel-ratio;
-webkit-max-device-pixel-ratio;
        </div>
        <div class="right">
            右邊內容
        </div>
    </div>

.column {
    width: 980px;
    margin: 20px auto;
    position: relative;
}

.left {
    width: 650px;
    background: #ddd;
    float: left;
    line-height: 30px;
}

.right {
    width: 300px;
    background: #ddd;
    float: right;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}或者
.right {
    width: 300px;
    background: #ddd;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}