欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使你的網(wǎng)站快速跑起來(lái)

  發(fā)布時(shí)間：2016-12-21 12:54:50   作者：佚名   我要評(píng)論
這篇文章主要介紹了性能很重要，這個(gè)大家都知道。為什么我們還要做出速度很慢的網(wǎng)站，給用戶一個(gè)糟糕的體驗(yàn)?zāi)?需要的朋友可以參考下

性能真的很重要嗎？

性能很重要，這個(gè)大家都知道。為什么我們還要做出速度很慢的網(wǎng)站，給用戶一個(gè)糟糕的體驗(yàn)?zāi)?？呵呵，讓我們進(jìn)入重點(diǎn)。

HTML

一.避免內(nèi)鏈/嵌入式代碼：

1) 內(nèi)聯(lián)式: 在HTML標(biāo)簽的style屬性中定義樣式，在onclick這樣的屬性中定義Javascript代碼;
2) 嵌入式: 在頁(yè)面中使用<style>標(biāo)簽定義樣式，使用<script>標(biāo)簽定義Javascript代碼;
3) 引用外部文件: 在<style>標(biāo)簽中定義href屬性引用CSS文件，在<script>標(biāo)簽中定義src屬性引入Javascript文件.

1,2雖然減少了http請(qǐng)求數(shù)，但是增加了html的大小，相比3的總體大小甚小，便于分工操作，便于維護(hù)。

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

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

1）樣式在head里面，頁(yè)面渲染很快，會(huì)使用戶感覺(jué)頁(yè)面加載很快。反之，會(huì)先看到錯(cuò)亂的頁(yè)面布局，給人感覺(jué)不好。
2）腳本在上會(huì)影響html的渲染或并行加載，并且首屏加載，用戶一般不需要看到功能，所以腳本在下為好。嘗試用異步加載腳本的屬性：async

三.壓縮html

為了保持代碼的可讀性，最好的方法是在代碼中添加注釋和使用縮進(jìn)。

但是對(duì)于瀏覽器來(lái)說(shuō)，這些都是不重要的。正因?yàn)槿绱?，通過(guò)自動(dòng)化工具壓縮你的HTML是非常有用的。

通過(guò)移除多余的空白符、注釋和一些與內(nèi)容結(jié)構(gòu)無(wú)關(guān)的的不需要的字符，能夠節(jié)省一些字節(jié)。嘗試用gzip壓縮方式。

四.減少dom結(jié)點(diǎn)

用語(yǔ)義化的標(biāo)簽來(lái)代替萬(wàn)能的div。

五.《html寫法對(duì)gzip壓縮率的影響》

書寫標(biāo)簽屬性時(shí)，最好多個(gè)相同標(biāo)簽屬性值順序一致?？梢允筭zip壓縮更快。

CSS

一.壓縮css

通過(guò)自動(dòng)化工具壓縮css，同壓縮html。重復(fù)性的代碼學(xué)會(huì)提煉。

二.合并多個(gè)css

普遍通過(guò)cdn合并或公司的合并工具進(jìn)行合并，有效減少http請(qǐng)求數(shù)量。

三.合理使用css表達(dá)式

不是所有人都能合理使用css表達(dá)式的。所以把功能都交給javascript。css我們要休息一下嘍。

IMAGES

一.使用css sprite

將psd里面小的圖層整合到一張圖層里面，布局完成。布局要緊促。對(duì)于有些圖片有毛邊的，可以設(shè)置雜邊的顏色。也可以將png-8設(shè)置成png-24(ie6濾鏡處理)

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

使用前：

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

使用后：

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

base64圖片編碼只針對(duì)于單獨(dú)的圖片，而不是css sprite圖片，支持主流瀏覽器及ie8以上?？梢詼p少http請(qǐng)求數(shù)量，但是對(duì)于沒(méi)有g(shù)zip壓縮的html,css來(lái)說(shuō)，減少http請(qǐng)求得來(lái)的大文件是不可取的。

三.優(yōu)化圖片

圖片格式要控制好，在圖片質(zhì)量ok的情況下，png,jpg,gif格式根據(jù)情況合理利用。一般css sprite用png格式，動(dòng)畫圖片用gif格式，色彩鮮艷的廣告圖片用jpg.

圖片大小要控制好，網(wǎng)站可以緩存圖片。一般一張廣告圖片要在100k左右，如果圖片實(shí)在太大，可以將一張圖片切成幾塊，拼接而成。

某前端css網(wǎng)站聲明，凡是必須用圖片來(lái)布局的都是耍流氓。隨著css3的流行，這句話將成為一句座右銘。

四.《Progressive JPEG 解析》

綜述，連續(xù)的jpg格式對(duì)性能更好。

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);

當(dāng)一些第三方文件等下載成了問(wèn)題，或是導(dǎo)致頁(yè)面加載負(fù)重。我們就需要異步加載這些文件，async是個(gè)好的方式。

二.將循環(huán)的對(duì)象存儲(chǔ)

使用前：

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

使用后：

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

循環(huán)對(duì)性能的消耗是很大的，將循環(huán)的對(duì)象存儲(chǔ)，減少每次循環(huán)都要進(jìn)行對(duì)象的計(jì)算。

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

使用前：

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";

當(dāng)一個(gè)元素的布局不變，外觀發(fā)生改變時(shí)，就會(huì)引起重繪。

當(dāng)你設(shè)置style.top時(shí)，瀏覽器需要重新計(jì)算布局，我們每次請(qǐng)求offsetTop時(shí)，都會(huì)使瀏覽器重新計(jì)算布局，改變一個(gè)布局，就會(huì)導(dǎo)致回流。

四.壓縮javascript

通過(guò)自動(dòng)化工具壓縮js。同html和css。

五.合并多個(gè)js文件

普遍通過(guò)cdn合并或公司的合并工具進(jìn)行合并，有效減少http請(qǐng)求數(shù)量。

六.源生js和框架js相比，針對(duì)循環(huán)，for比each要好。

性能測(cè)試工具

我經(jīng)常使用的是YSLOW。page speed也不錯(cuò)。都會(huì)給你一些性能上的建議。

總結(jié)

性能很重要，毋容置疑。我的只是工作上的分享，僅供參考。詳見(jiàn)：http://browserdiet.com/zh/

相關(guān)文章

最新評(píng)論