使你的網站快速跑起來

時間 2019-11-19

標籤網站快速起來欄目網站開發简体版

原文原文鏈接

性能真的很重要嗎？javascript

性能很重要，這個你們都知道。爲何咱們還要作出速度很慢的網站，給用戶一個糟糕的體驗呢？呵呵，讓咱們進入重點。css

HTMLhtml

一.避免內鏈/嵌入式代碼：前端

1) 內聯式: 在HTML標籤的style屬性中定義樣式，在onclick這樣的屬性中定義Javascript代碼;java

2) 嵌入式: 在頁面中使用<style>標籤訂義樣式，使用<script>標籤訂義Javascript代碼;css3

3) 引用外部文件: 在<style>標籤中定義href屬性引用CSS文件，在<script>標籤中定義src屬性引入Javascript文件.瀏覽器

1,2雖然減小了http請求數，可是增長了html的大小，相比3的整體大小甚小，便於分工操做，便於維護。緩存

二.樣式在上，腳本在下：框架

<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>Browser Diet</title>
　　　　
　　　　<link rel="stylesheet" href="style.css" media="all">
　　</head>
　　<body>
　　　<a>hello</a>
　　　
　　　<script async src="script.js"></script>
　　</body>
</html>dom

1）樣式在head裏面，頁面渲染很快，會使用戶感受頁面加載很快。反之，會先看到錯亂的頁面佈局，給人感受很差。

2）腳本在上會影響html的渲染或並行加載，而且首屏加載，用戶通常不須要看到功能，因此腳本在下爲好。嘗試用異步加載腳本的屬性：async

三.壓縮html

爲了保持代碼的可讀性，最好的方法是在代碼中添加註釋和使用縮進。

可是對於瀏覽器來講，這些都是不重要的。正由於如此，經過自動化工具壓縮你的HTML是很是有用的。

經過移除多餘的空白符、註釋和一些與內容結構無關的的不須要的字符，可以節省一些字節。嘗試用gzip壓縮方式。

四.減小dom結點

用語義化的標籤來代替萬能的div。

五.《html寫法對gzip壓縮率的影響》
http://img01.taobaocdn.com/tps/i1/T1fd81FileXXcBgZH6-1263-2056.png

書寫標籤屬性時，最好多個相同標籤屬性值順序一致。可使gzip壓縮更快。

CSS

一.壓縮css

經過自動化工具壓縮css，同壓縮html。重複性的代碼學會提煉。

二.合併多個css

廣泛經過cdn合併或公司的合併工具進行合併，有效減小http請求數量。

三.合理使用css表達式

不是全部人都能合理使用css表達式的。因此把功能都交給javascript。css咱們要休息一下嘍。

IMAGES

一.使用css sprite

將psd裏面小的圖層整合到一張圖層裏面，佈局完成。佈局要緊促。對於有些圖片有毛邊的，能夠設置雜邊的顏色。也能夠將png-8設置成png-24(ie6濾鏡處理)

二.用base64圖片編碼替代普通css sprite圖片

使用前：

.img {
background-image: url('image.png');
}

使用後：

.img {
background-image: url('data:image/png;base64,iVBORw0KGgo');}

base64圖片編碼只針對於單獨的圖片，而不是css sprite圖片，支持主流瀏覽器及ie8以上。能夠減小http請求數量，可是對於沒有gzip壓縮的html,css來講，減小http請求得來的大文件是不可取的。

三.優化圖片

圖片格式要控制好，在圖片質量ok的狀況下，png,jpg,gif格式根據狀況合理利用。通常css sprite用png格式，動畫圖片用gif格式，色彩鮮豔的廣告圖片用jpg.

圖片大小要控制好，網站能夠緩存圖片。通常一張廣告圖片要在100k左右，若是圖片實在太大，能夠將一張圖片切成幾塊，拼接而成。

某前端css網站聲明，凡是必須用圖片來佈局的都是耍流氓。隨着css3的流行，這句話將成爲一句座右銘。

四.《Progressive JPEG 解析》

http://img03.taobaocdn.com/tps/i3/T1MpCRXuJfXXbBVMZR-600-1938.jpg

綜述，連續的jpg格式對性能更好。

JAVASCRIPT

一.異步加載文件

var vst = document.createElement('script');
    vst.type = 'text/javascript';
    vst.async = true;
    vst.src =srcIndex;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(vst, s);

當一些第三方文件等下載成了問題，或是致使頁面加載負重。咱們就須要異步加載這些文件，async是個好的方式。

二.將循環的對象存儲

使用前：

var str = "nanananana";
for (var n = 0; n < str.length; n++) {}

使用後：

　var str = "nanananana",
strLgth = str.length;
for (var n = 0; n < strLgth ; n++) {}

循環對性能的消耗是很大的，將循環的對象存儲，減小每次循環都要進行對象的計算。

三.最小化減小回流和重繪

使用前：

var coored = document.getElementById("ctgHotelTab");
document.getElementById("ctgHotelTab").style.top = coored.offsetTop + 35 + "px";

使用後：

var coored = document.getElementById("ctgHotelTab"),
offetTop = coored.offsetTop + 35;
document.getElementById("ctgHotelTab").style.top = offetTop + "px";

當一個元素的佈局不變，外觀發生改變時，就會引發重繪。

當你設置style.top時，瀏覽器須要從新計算佈局，咱們每次請求offsetTop時，都會使瀏覽器從新計算佈局，改變一個佈局，就會致使迴流。

四.壓縮javascript

經過自動化工具壓縮js。同html和css。

五.合併多個js文件

廣泛經過cdn合併或公司的合併工具進行合併，有效減小http請求數量。

六.源生js和框架js相比，針對循環，for比each要好。

性能測試工具

我常常使用的是YSLOW。page speed也不錯。都會給你一些性能上的建議。

總結

性能很重要，毋容置疑。個人只是工做上的分享，僅供參考。詳見：http://browserdiet.com/zh/

但願你們多分享，共同窗習進步。