《高性能網站建設指南》筆記

js文件何時合併?

css和js究竟是內聯仍是外部引入?

  前者速度快,但沒辦法緩存,沒辦法多頁面共用;後者速度慢,須要額外的請求,但能夠緩存,多頁面共享。css

  一箭雙鵰的辦法【內聯+預加載+cookie標誌判斷】:用戶第一次打開網頁時,沒有cookie,服務器返回包含內聯css和js的頁面和cookie,速度很快,頁面空閒下來後執行預加載;第二次打開有cookie了,並且第一次執行了預加載,如今能夠返回一個帶外部文件的html了,由於以前預加載了,因此速度很快。注意,第一次預加載的時候,要處理內聯代碼和預加載的代碼,防止二者衝突。解決衝突的方式以下(主要是處理js,由於css重複的話沒問題,但js重複執行的話可能會形成問題):html

  1.建立一個不可見的iframe,裏面是空白。iframe標籤onload以後,往裏面的dom添加script標籤或者link標籤,由於iframe內外環境是隔離的,因此不會有影響前端

  2.使用preload、prefetch等屬性node

  3.最麻煩的方式,處理衝突的邏輯嵌入到業務邏輯中。標誌一個全局變量,來判斷代碼有沒有執行過。ajax

流量跟蹤

  對於站內的網站,可使用refer來的統計。瀏覽器

  但對於站外的地址,就不能使用refer了(沒辦法獲取發給其餘服務器的請求),能夠對出站地址進行包裝,如http://www.mtsite.com?url=www.baidu.com 訪問這個地址,實際是訪問了站內的網站,進行統計後,再302重定向。緩存

  跟蹤出站流量,除了以上重定向的方式外,還有其餘變種,本質都是把跳轉過程從服務器移到了前端,用js來實現實現跳轉而已,方式以下,重寫a標籤的點擊事件(return false),發送請求記錄站外的地址(ajax方式、new Image()方式),(回調事件中、img的onload或onerr中)再跳轉。服務器

  以上要注意的一點是:a標籤若是沒有指定target,跳轉會致使當前文檔被卸載。因此在這種狀況下,必需要把location.url=xxx;放到回調事件中執行cookie

  使用重定向的一個目的是:美化url。訪問短的好記的url,而後重定向到長的url去。dom

配置或者移除Etag

  etag的值與文件大小、修改時間以及inode(或者說文件所在的硬盤序列號)有關。集羣服務器中相同的文件會對應不一樣的etag(inode、硬盤序列號不一樣)。n臺文件服務器中,能命中304的概率只有1/n,效率低下。解決辦法是:配置或者移除etag。

  配置etag:對文件服務進行配置,是etag僅僅與文件大小、修改時間相關,這樣一來,多臺服務器對於同一個文件也能生成同一個etag了。

  移除etag:不使用etag,而使用last-modified來代替。這其實和配置etag的思路一致的,即多臺服務器對於相同的文件都能成功標識

  前者標識文件的修改時間和大小,後者標識文件的修改時間。因此總結起來移除etag是最好的選擇。


 

1.瀏覽器對同一個主機有固定的並行下載數,若是頁面的資源來自於多個主機,則下載的效率能夠提升(腳本除外,無論是否來自同一個主機,下載和執行腳本的時候老是阻塞其餘資源的下載和dom渲染),但dns查找所消耗的時間也會增長。除了能夠增長並行下載數,還能夠下降無謂的cookie流量(訪問文件也會帶上cookie,不一樣主機的cookie不共享)

2.典型的預加載圖片方式:

onload = function(){
     if(document.images){
            new Image().src = "xxx.jpg";
     }  
}

3.使用iframe是一種清除廣告系統與當前頁面系統的簡單手段,但會增長額外的http請求

相關文章
相關標籤/搜索