web移動端頁面 效能優化技術學習筆記
http://limu.iteye.com/blog/765173
https://blog.csdn.net/u010683915/article/details/71043188
CSS優化
1、儘量避免寫在HTML標籤中寫Style屬性。
2、避免CSS表示式，CSS表示式的執行需跳出CSS樹的渲染，因此請避免CSS表示式。
3、移除空的CSS規則，空的CSS規則增加了CSS檔案的大小，且影響CSS樹的執行，所以需移除空的CSS規則。
4、正確使用Display的屬性，Display屬性會影響頁面的渲染，因此馬海祥建議各位站長要合理使用。
（1）、display:inline後不應該再使用width、height、margin、padding以及float
（2）、display:inline-block後不應該再使用float
（3）、display:block後不應該再使用vertical-align
（4）、display:table-*後不應該再使用margin或者float
5、不濫用Float，Float在渲染時計算量比較大，儘量減少使用。
6、不濫用Web字型，Web字型需要下載，解析，重繪當前頁面，儘量減少使用。
7、不宣告過多的Font-size，過多的Font-size引發CSS樹的效率。
8、值為0時不需要任何單位，為了瀏覽器的相容性和效能，值為0時不要帶單位。
9、標準化各種瀏覽器字首
（1）、無字首應放在最後。
（2）、CSS動畫只用（-webkit- 無字首）兩種即可。
（3）、其它字首為“-webkit- -moz- -ms-無字首”四種（-o-Opera瀏覽器改用blink核心，所以淘汰）。
10、避免讓選擇符看起來像正則表示式。
先來摘要:
BigPipe原理:再簡單不過了,這就像在餐館吃飯,先選好桌子點好菜(確定使用者佈局和要展現的模組),單子下到廚房後,多個大廚就可以同時上陣(服務端併發),做好一樣端上來一樣吃一樣(客戶端併發).
BigPipe不具備普適性:網站效能優化再發展下去也不會增加一條類似"儘量減少http數","將CSS放在頁面上部"這樣不加任何說明和限制的優化準則---"使用Bigpipe提高網站速度",也就是說它不可能為所有應用都帶來提升,或者說bigpipe可能給你的應用帶來提升,但不會像Facebook那麼大.
BigPipe適用的場合:首先,網頁第一個請求時間較長( >500ms? ),在整個網頁展現過程中不再是前端效能優化常說的可以忽略的10-20%.其次頁面上的動態內容可以劃分在多個區塊內顯示,且各個區塊之間的關係不大,因為只是客戶端和服務端併發是不夠的,服務端各個資料中心也要能夠併發才能最好的發揮bigpipe,各個區塊的動態資料在服務端也能夠通過url或cookie中的key併發獲得(在facebook,整個key為userid).除了SNS外,大概搜尋結果頁可能可以用上,比如淘寶搜尋結果頁的主搜尋,類目導航,相關推薦和廣告可以使用BigPipe技術,不過回過頭看第一個限制,如果搜尋頁本身很快,那帶來的改進不會如Facebook明顯.
https://segmentfault.com/a/1190000004360941
bigpipe.js頁面引入的js
var Bigpipe=function(){
this.callbacks={};
}
Bigpipe.prototype.ready=function(key,callback){
if(!this.callbacks[key]){
this.callbacks[key]=[];
}
this.callbacks[key].push(callback);
}
Bigpipe.prototype.set=function(key,data){
var callbacks=this.callbacks[key]||[];
for(var i=0;i<callbacks.length;i++){
callbacks[i].call(this,data);
}
}app.js伺服器程式碼
var express = require('express');
var path = require('path');
var http = require('http');
var ejs = require('ejs');
var app = express();
app.set('port', process.env.PORT || 3000);
app.use(express.static(path.join(__dirname, 'public')));
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.get('/index.html', function (req, res) {
res.render('index', { title: "測試" }, function (err, str) {
res.write(str)
})
var Pagelets_list ={
pagelet1:false,
pagelet2:false
}
var data = {is: "true"};
function is_end(Pagelets) {
Pagelets_list[Pagelets]=true;
for (x in Pagelets_list) {
if(!Pagelets_list[x]){
return;
}
}
res.end();
return;
}
function Pagelets(Pagelets) {
res.write('<script>bigpipe.set("' + Pagelets + '",' + JSON.stringify(data) + ');</script>');
is_end(Pagelets)
}
setTimeout(function(){Pagelets("pagelet1");},1000);
setTimeout(function(){Pagelets("pagelet2");},3000);
});
http.createServer(app).listen(3000);index.html前端程式碼
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>zchq88-bigpipe</title>
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="test1">loading......</div>
<div id="test2">loading......</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.0-rc.0/angular.min.js"></script>
<script src="/js/bigpipe.js"></script>
<script>
var bigpipe=new Bigpipe();
bigpipe.ready('pagelet1',function(data){
$("#test1").html("test1 ready");
})
bigpipe.ready('pagelet2',function(data){
$("#test2").html("test2 ready");
})
</script>
</body>
</html>實現細節
如果要實現一個具有良好效能的BigPipe，需要考慮的東西還挺多．可以從一下幾個方面考慮，提高BigPipe框架的效能．
1.對搜尋引擎的支援．
這是一個必須考慮的問題，如今是搜尋引擎的時代，如果網頁對搜尋引擎不友好，或者使搜尋引擎很難識別內容，那麼會降低網頁在搜尋引擎中的排名，直接 減少網站的訪問次數。在BigPipe 中，頁面的內容都是動態新增的，所以可能會使搜尋引擎無法識別。但是正如前面所說，在伺服器端首先要根據user-agent 判斷客戶端是否是搜尋引擎的爬蟲，如果是的話，則轉化為原有的模式，而不是動態新增。這樣就解決了對搜尋引擎的不友好。
2.將資原始檔進行壓縮，提高傳輸速度．可以考慮使用G-zip對css和js檔案進行壓縮
3.對js檔案進行精簡：對js 檔案進行精簡，可以從程式碼中移除不必要的字元，註釋以及空行以減小js 檔案的大小，從而改善載入的頁面的時間。精簡js 指令碼的工具可以使用JSMin，使用精簡後的指令碼的大小會減少20%左右。這也是一個很大的提升。
4.將樣式表放在頂部
將html 內容所需的css 檔案放在首部載入是非常重要的。如果放在頁面尾部，雖然會使頁面內容更快的載入（因為將載入css 檔案的時間放在最後，從而使頁面內容先顯示出來），但是這樣的內容是沒有使用樣式表的，在css 檔案載入進來後，瀏覽器會對其使用樣式表，即再次改變頁面的內容和樣式，稱之為“無樣式內容的閃爍”，這對於使用者來說當然是不友好的。實現的時候將css 檔案放在<head>標籤中即可。
5.將js放在底部
支援頁面動態內容的Js 指令碼對於頁面的載入並沒有什麼作用，把它放在頂部載入只會使頁面更慢的載入，這點和前面的提到的css 檔案剛好相反，所以可以將它放在頁尾載入。