前端性能優化一

前端性能優化分爲以下幾個方面：

1、代碼部署：

一、代碼的壓縮與合併
二、圖片、js、css等靜態資源使用和主站不一樣域名地址存儲，從而使得在傳輸資源時不會帶上沒必要要的cookie信息。
三、使用內容分發網絡 CDN
四、爲文件設置Last-Modified、Expires和Etag
五、使用GZIP壓縮傳送
六、權衡DNS查找次數(使用不一樣域名會增長DNS查找)
七、避免沒必要要的重定向(加"/")

2、編碼

html：

一、使用結構清晰，簡單，語義化標籤
二、避免空的src和href
三、不要在HTML中縮放圖片

css：

一、精簡css選擇器 二、把CSS放到頂部
三、避免@import方式引入樣式
四、css中使用base64圖片數據取代圖片文件，減小請求數，在線轉base64網站：http://tool.css-js.com/base64.html
五、使用css動畫來取代javascript動畫
六、使用字體圖標,圖標庫網站：http://fontawesome.io/icons/，在線製做網站：www.iconfont.cn
七、使用css sprite
八、使用svg圖形
九、避免使用CSS表達式

a {star : expression(onfocus=this.blur)} 

十、避免使用濾鏡

javascript：

一、減小引用庫的個數
二、使用requirejs或seajs異步加載js
三、JS放到頁面底部引入
四、避免全局查找
五、減小屬性查找
六、使用原生方法
七、用switch語句代替複雜的if else語句
八、減小語句數，好比說多個變量聲明能夠寫成一句
九、使用字面量表達式來初始化數組或者對象
十、使用DocumentFragments或innerHTML取代複雜的元素注入
十一、使用事件代理(事件委託)
十二、避免屢次訪問dom選擇集
1三、高頻觸發事件設置使用函數節流，如：onmousemove、onmouseover
1四、使用Web Storage緩存數據
1五、使用Array的join方法來代替字符串的「+」鏈接(先將要鏈接的字符串放進數組)