web頁面的效能優化以及SEO(搜尋引擎優化)

2021-09-12 07:16:30 字數 1654 閱讀 6052

web頁面的效能優化

研究表明:使用者最滿意的開啟網頁的時間是2-5秒,如果等待超過5秒,99%的使用者會關掉頁面。

一、儘量減少前端http請求

1,能使用icon不適用,實在避免不了要使用,就使用精靈圖(雪碧圖)

3,轉base64

4, 使用靜態資源快取

5, 新增expires頭 a,頁面的初次訪問者會進行很多http請求,但是通過使用乙個長久的expires頭,可以使這些元件被快取,下次訪問的時候,就可以減少不必要的htpp請求,從而提高載入速度。寫法:cache-control: max-age=12345600

6, 精簡**

7,多使用外部檔案,公共的js,css

8, 懶載入,資源按需載入,可以減少大量的的請求

瀏覽器併發執行緒數有限,所以針對資源檔案的優化,一般有:

1、 合併指令碼檔案和css檔案
二、瀏覽器快取

1、新增expires頭和cache-control

expires頭,瀏覽器端根據過期時間選擇是否載入最新的版本。缺點是:需要伺服器和客戶端時間的嚴格同步,

http1.1引入了cache-control頭來克服expires頭的限制。cache-control使用max-age制定元件被快取多久,使用秒為單位,例如cache-control:max-age=3600;表示元件將被快取60分鐘。如果max-age和expires同時出現,則max-age有更高的優先順序,瀏覽器會根據max-age的時間來確認快取過期時間。

2、last-modified

三、頁面壓縮

2,html壓縮

3,js壓縮 混淆

4,css壓縮

5,壓縮,展示尺寸和尺寸吻合

四、html**結構優化

1,正確布置行內指令碼

2,少用iframe
優點:可以和主頁面並行載入

缺點: iframe會阻塞onload事件 解決:onload事件後設定iframe的src,或者js建立iframe節點和主頁面使用同乙個連         接池

避免src為空—為空缺省為主頁面位址

減少iframe數量,或者不要使用iframe因為爬蟲不會爬取iframe裡邊的內容

3,減少dom結構的層級

dom層級越深會增加 css rule tree 和 dom tree 匹配構造的效能

4,減少cookie的大小

5,盡量用div取代table,或者將table打破成巢狀層次深的結構

table會影響頁面呈現的速度,只有table裡的內容全部載入完才會顯示。

五、元件分成多個域

減少dns查詢:

網域名稱解析 --> 發起tcp的3次握手 --> 建立tcp連線後發起http請求 --> 伺服器響應http請求,瀏覽器得到html** --> 瀏覽器解析html**,並請求html**中的資源(如js、css、等) --> 瀏覽器對頁面進行渲染呈現給使用者

seo:

1,控制首頁鏈結數量

2,扁平化的目錄層次

3,導航優化

4,**的結構布局--不可忽略的細節

5,控制頁面的大小,減少http請求,提高**的載入速度

Web 頁面效能優化

web 頁面效能優化 二 減少 http 的請求數 當使用者瀏覽頁面時,如果我們在使用者第一次訪問時將一些資訊一次性載入到客戶端快取,使用者訪問其他頁面時是可以大大提高頁面訪問速度的,因為每一次發生http請求是要產生伺服器開銷的,常用的方法有 合併css,js,並作為外部引用,這樣就可以減少訪問其...

web頁面的快取方式, 載入頁面的優化?

強快取 expires 絕對時間 cache control 相對時間 協商快取 last modify web伺服器在響應請求時,告訴瀏覽器資源的最後修改時間 if modified since 當資源過期時 強快取失效 發現資源具有last modified宣告,則再次向web伺服器請求時帶上頭...

web頁面載入效能優化之 gzip

web專案頁面載入效能優化可以通過開啟服務端的gzip功能來實現,目前大部分客戶端瀏覽器request內建 content encoding gzip 屬性,如果沒有可以在request中配 置加上。伺服器端tomcat 和weblogic 配置方式分別如下 1.tomcat伺服器在server.x...