在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ 頁面優(yōu)化
書單
JavaScript 動畫
HTML
CSS Reset
屬性操作
DOM 事件
閉包
Photoshop
Atom 文本編輯器
表單操作
布局解決方案
類型系統(tǒng)
開發(fā)實(shí)踐
數(shù)據(jù)通信
變量作用域
BOM
JavaScript 程序設(shè)計(jì)
前端工程師概述
CSS
響應(yīng)式布局
表達(dá)式與運(yùn)算符
基本語法
JavaScript 介紹
版本控制
布局
調(diào)試器
背景
圖片保存
多媒體
文檔樹
列表操作
Sublime 編輯器
盒模型
常見布局樣例
類型識別
變形
數(shù)據(jù)存儲
選擇器
頁面架構(gòu)
開發(fā)及調(diào)試工具
頁面模塊化
節(jié)點(diǎn)操作
測量及取色
瀏覽器兼容
HTML 簡介
內(nèi)置對象
實(shí)體字符
產(chǎn)品前端架構(gòu)
協(xié)作流程
切圖
工具, 面板, 視圖
正則表達(dá)式
動畫
語句
面向?qū)ο?/span>
HTML 語法
HTML 標(biāo)簽
技術(shù)選擇
樣式操作
圖片優(yōu)化與合并
語法
DOM 編程藝術(shù)
Canvas
接口設(shè)計(jì)
頁面優(yōu)化
文本

頁面優(yōu)化

頁面優(yōu)化

頁面優(yōu)化可以提升頁面的訪問速度從而提高用戶體驗(yàn),優(yōu)化的頁面可以更好的提升 SEO 的效果同時也可以提高代碼的可讀性和維護(hù)性。

從下面的幾個方面可以進(jìn)行頁面的優(yōu)化:

  • 減少請求數(shù)
    • 圖片合并
    • CSS 文件合并
    • 減少內(nèi)聯(lián)樣式
    • 避免在 CSS 中使用 import
  • 減少文件大小
    • 選擇適合的圖片格式
    • 圖片壓縮
    • CSS 值縮寫(Shorthand Property)
    • 文件壓縮
  • 頁面性能
    • 調(diào)整文件加載順序
    • 減少標(biāo)簽數(shù)量
    • 調(diào)整選擇器長度
    • 盡量使用 CSS 制作顯示表現(xiàn)
  • 增強(qiáng)代碼可讀性與可維護(hù)性
    • 規(guī)范化
    • 語義化
    • 模塊化

減少請求

請求數(shù)與網(wǎng)頁加載時長有直接的關(guān)系。所以對于圖標(biāo)可以使用 Sprite 來減少小圖標(biāo)的請求數(shù),對于文本則可以通過合并縮小。(避免使用 import 引入 CSS 文件,并且請求是同步請求)

減少文件大小

頁面上最大的流量產(chǎn)生與多媒體(視頻或圖片)所以為了減少文件大小,開發(fā)者需要使用合適的媒體格式并對文件進(jìn)行壓縮。

頁面性能

頁面文件的加載順序自上而下,樣式則需要放置于最頂部,腳本則放置于底部(因?yàn)?JavaScript 的加載會阻塞頁面的繪制)。

減少標(biāo)簽的數(shù)量也可以起到提升性能的作用,縮短 CSS 選擇器的層級來提高性能。減少使用消耗性能的樣式屬性例如下面的這些:

  • expression .class{width: expression(this.width > 100?'100px':'auto')}
  • filter .class{filter:alpha(opacity=50)}
  • border-radius
  • box-shadow
  • gradients

頁面中所使用的圖片尺子應(yīng)該與現(xiàn)實(shí)尺寸相符否則在圖標(biāo)下載后需要重繪導(dǎo)致性能下降。

能使用樣式(使用 CSS 的類名)實(shí)現(xiàn)的交互就不使用腳本(需要重繪導(dǎo)致多次頁面渲染)來實(shí)現(xiàn)。

可讀性與可維護(hù)性

開發(fā)之前需要明確規(guī)范,尤其是對人協(xié)作時。使用 HTML5 語義化的標(biāo)簽來制作頁面,同樣也適用于樣式選擇器的 ID 與類名。在使用開發(fā)中的奇技淫巧的適合需要深思是否需要使用。模塊化的制作頁面和樣式,提高可復(fù)用性并減少文件大小。

注釋注釋注釋,在代碼中添加注釋,利人利己。

上一篇:內(nèi)置對象下一篇:DOM 事件