html代碼基礎(chǔ)知識講解

信我或關(guān)注猿來如此呀公眾號，回復(fù)：視頻學(xué)習(xí)，即有機(jī)會(huì)免費(fèi)領(lǐng)取30天視頻學(xué)習(xí)資源包

字體語法：

align=center 字體居中

align=right 字體居右

align=left 字體居左

align=up 字體居上

align=down 字體居下

<"> <"> <"> <b>...</b>　粗體字

<strong>...</strong> 99彩票|http://99caipiao.com.cn粗體字(強(qiáng)調(diào))

<i>...</i> 斜體字

<em>...</em> 斜體字(強(qiáng)調(diào))

<dfn>...</dfn> 斜體字(表示定義)

<u>...</u> 底線

<ins>...</ins> 底線(表示插入文字)

<strike>...</strike> 橫線

<s>...</s> 刪除線

<del>...</del>　刪除線(表示刪除)

<kbd>...</kbd> 鍵盤文字

<tt>...</tt> 打字體

<"> <listing>...</listing> 固定寬度小字體

<"> <hr> 水平線

<hr size="9" 水平線(設(shè)定大小)

<hr width="80%"> 水平線(設(shè)定寬度)

<hr color="ff0000"> 水平線(設(shè)定顏色)

<br>　(換行)

<nobr>...</nobr> (不換行)

<p>...</p>　(段落)

<center>...</center> 置中 <!>連結(jié)格式

<base href=地址> 99彩票|http://99caipiao.com.cn (預(yù)設(shè)好連結(jié)路徑)

<a href=地址></a> 外部連結(jié)

<a href=地址 target="_blank"></a> 外部連結(jié)(另開新窗口)

<a href=地址 target="_top"></a> 外部連結(jié)(全窗口連結(jié))

<a href=地址 target="頁框名"></a> 外部連結(jié)(在指定頁框連結(jié))

貼圖/音樂：

<img src=圖片地址> 貼圖

<img src=圖片地址 width="180"> 設(shè)定圖片寬度

<img src=圖片地址 height="30"> 設(shè)定圖片高度

<img src=圖片地址 alt="提示文字"> 設(shè)定圖片提示文字

<img src=圖片地址 border="1"> 設(shè)定圖片邊框

<bgsound src=MID音樂文件地址> 背景音樂設(shè)定

<body "> <body > 設(shè)定背景顏色

<img dynsrc="影視文件地址" width="寬度" height="高度" start=mouseover> 貼影視

<A href="對方網(wǎng)址">寫文字 99彩票|http://99caipiao.com.cn 文字連接

<a href="對方網(wǎng)址"><IMG src="圖片地址" border=0> 圖片連接

<DIV><"> <P align=center><"> <marquee>...</marquee>普通滑動(dòng)

<marquee behavior=slide>...</marquee>滑動(dòng)

<marquee behavior=scroll>...</marquee>預(yù)設(shè)卷動(dòng)

<marquee behavior=alternate>...</marquee>來回滑動(dòng)

<marquee direction=down>...</marquee>向下滑動(dòng)

<marquee direction=up>...</marquee>向上滑動(dòng)

<marquee direction=right></marquee>向右滑動(dòng)

<marquee direction=left></marquee>向左滑動(dòng)

<marquee loop=2>...</marquee>滑動(dòng)次數(shù)

<marquee width=180>...</marquee>設(shè)定寬度

<marquee height=30>...</marquee>設(shè)定高度

<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色

<marquee scroll99彩|http://99caiw.comamount=2>...</marquee>設(shè)定滑動(dòng)速度數(shù)值

<marquee scrolldelay=200>...</marquee>設(shè)定滑動(dòng)時(shí)間

<marquee scrolldelay=300 scrollamount=100>插入文字</marquee>滑動(dòng)停頓

<body ">五．表格語法：

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table "> <table border=邊框大小>...</table>設(shè)定表格邊框大小(使用數(shù)字)

<table bgcolor=顏色碼>...</table>設(shè)定表格的背景顏色

<table borderclor=顏色碼>...</table>設(shè)定表格邊框的顏色

<table borderclo99彩|http://99caiw.comrdark=顏色碼>...</table>設(shè)定表格暗邊框的顏色

<table borderclorlight=顏色碼>...</table>設(shè)定表格亮邊框的顏色

<table cellpadding=參數(shù)>...</table>指定內(nèi)容與網(wǎng)格線之間的間距(使用數(shù)字)

<table cellspacing=參數(shù)>...</table>指定網(wǎng)格線與網(wǎng)格線之間的距離(使用數(shù)字)

<table cols=參數(shù)>...</table>指定表格的欄數(shù)

<table frame=參數(shù)>...</table>設(shè)定表格外框線的顯示方式

<table width=寬度>...</table>指定表格的寬度大小(使用數(shù)字)

<table height=高度>...</table>指定表格的高度大小(使用數(shù)字)

<td colspan=參數(shù)>...</td>指定儲存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=參數(shù)>...</td>指定儲存格合并列的列數(shù)(使用數(shù)字)

<!>分割窗口 99彩|http://99caiw.com

<frameset cols="20%,*">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會(huì)自動(dòng)調(diào)整

<frameset rows="20%,*">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會(huì)自動(dòng)調(diào)整

<frameset cols="20%,*">分割左右兩個(gè)框架

<frameset cols="20%,*,20%">分割左中右三個(gè)框架

<分割上下兩個(gè)框架

<frameset rows="20%,*,20%">分割上中下三個(gè)框架

<! - - ... - -> 批注

<A HREF TARGET> 指定超級鏈接的分割窗口

<A HREF=#錨的名稱> 指定錨名稱的超級鏈接

<A HREF> 指定超級鏈接

<A NAME=錨的名稱> 被連結(jié)點(diǎn)的名稱

<ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址

來源網(wǎng)絡(luò)，侵權(quán)刪除

私信我或關(guān)注猿來如此呀公眾號，回復(fù)：視頻學(xué)習(xí)，即有機(jī)會(huì)免費(fèi)領(lǐng)取30天視頻學(xué)習(xí)資源包

求背景

前幾天，甲方提了個(gè)需求，想讓下面的數(shù)據(jù)循環(huán)展示，準(zhǔn)備放在他們集團(tuán)首頁給他們領(lǐng)導(dǎo)演示用。

我們領(lǐng)導(dǎo)很重視這個(gè)事兒，拍了拍我，語重心長的說，小伙子，好好做。

我啪的一下就興奮了，老板居然如此器重我，我必當(dāng)鞠躬盡瘁，減少摸魚，我要讓老板拜倒在精湛的技術(shù)下！

于是，我搬出自己的庫存代碼，僅2min就實(shí)現(xiàn)了數(shù)據(jù)的滾動(dòng)：

沒錯(cuò)，我直接照搬了自己以前寫過的文章：JS實(shí)現(xiàn)可滾動(dòng)區(qū)域自動(dòng)滾動(dòng)展示 - 掘金

就在我準(zhǔn)備告訴老板我做完了的時(shí)候，我突然想了想，這么快做完，老板一定覺得我沒好好做，我以后還怎么升職加薪，贏取白富美？

于是，我連夜研究，終于改進(jìn)了數(shù)據(jù)滾動(dòng)方式，贏得了老板的大餅（以后漲500）。最終效果：

技術(shù)方案

技術(shù)選型

觀察最終效果圖，可以發(fā)現(xiàn)這其實(shí)就是一個(gè)數(shù)據(jù)循環(huán)滾動(dòng)的效果，每條內(nèi)容之間間隔1000ms，每條出現(xiàn)動(dòng)的時(shí)間為500ms。用術(shù)語來說，這就是一個(gè)單步停頓滾動(dòng)效果。

我百度了一下，社區(qū)還是有這個(gè)實(shí)現(xiàn)的現(xiàn)成方案的：vue-seamless-scroll，周下載也還行。

于是，我果斷試了試，結(jié)果不知道什么原因，并不生效...

既然如此，直接手寫一個(gè)吧！

實(shí)現(xiàn)思路

要實(shí)現(xiàn)上述效果其實(shí)很簡單，如圖

我們創(chuàng)造一個(gè)含有六個(gè)值的數(shù)組，每隔一段時(shí)間循環(huán)更改黃色區(qū)域的數(shù)據(jù)，當(dāng)黃色區(qū)域數(shù)據(jù)變成最新的時(shí)候，紅色區(qū)域整體向下移動(dòng)，當(dāng)有數(shù)值超出滾動(dòng)區(qū)域后，在刪除這個(gè)數(shù)據(jù)即可。

數(shù)據(jù)更新

如果不考慮動(dòng)畫，我們的代碼應(yīng)該這么寫

<template>
<div class="item-wrap" v-for="(item, index) in animationData">
<!-- 模塊內(nèi)容 -->
</div>
</template>
<script setup lang="ts">
// #假設(shè)這是接口請求的10條最新數(shù)據(jù)
const allCarouseData=ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// #需要輪播的數(shù)據(jù)
const animationData=ref<any>([])
// *定時(shí)器
const animationTimerMeta: any={
timer: null,
// 這個(gè)函數(shù)負(fù)責(zé)設(shè)置輪播數(shù)據(jù)的更新邏輯。
timeFuc() {
let setTimeoutId: any=null
if (this.timer) return
this.timer=setInterval(()=> {
// 取輪播數(shù)據(jù)的第一條id
let firstId=animationData.value[0].id
// 為輪播數(shù)據(jù)添加最新的第一項(xiàng)數(shù)據(jù)
let index=allCarouseData.value.findIndex((res: any)=> res.id===firstId)
let addIndex=index - 1 < 0 ? allCarouseData.value.length - 1 : index - 1
animationData.value.unshift(allCarouseData.value[addIndex])
setTimeout(()=> {
// 刪除數(shù)組的最后一項(xiàng)
animationData.value.pop()
}, 1000)

}, 1500)
}
}
animationData.value=allCarouseData.value.slice(-5)
animationTimerMeta.timeFuc()
</script>

上述代碼的主要功能是：

從 allCarouseData 中取出最后5個(gè)元素作為初始的輪播數(shù)據(jù)。
每1.5秒更新一次輪播數(shù)據(jù)，具體邏輯是：移除當(dāng)前 animationData 的第一個(gè)元素，并從 allCarouseData 中取出前一個(gè)元素（如果已經(jīng)是第一個(gè)元素，則取最后一個(gè)）添加到 animationData 的開頭。
每1秒從 animationData 的末尾移除一個(gè)元素。

上述代碼沒有實(shí)現(xiàn)動(dòng)畫，他的效果是這樣的：

動(dòng)畫添加

<template>
<div class="item-wrap" v-for="(item, index) in animationData"
:class="[{ moveToBottom: animationActive }, { show: animationActive && index===0 }]"
>
<!-- 模塊內(nèi)容 -->
</div>
</template>
<script setup lang="ts">
// #假設(shè)這是接口請求的10條最新數(shù)據(jù)
const allCarouseData=ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// #需要輪播的數(shù)據(jù)
const animationData=ref<any>([])
// #是否開啟動(dòng)畫
const animationActive=ref(false)
// *定時(shí)器
const animationTimerMeta: any={
timer: null,
// 這個(gè)函數(shù)負(fù)責(zé)設(shè)置輪播數(shù)據(jù)的更新邏輯。
timeFuc() {
let setTimeoutId: any=null
if (this.timer) return
this.timer=setInterval(()=> {
// 取輪播數(shù)據(jù)的第一條id
let firstId=animationData.value[0].id
// 為輪播數(shù)據(jù)添加最新的第一項(xiàng)數(shù)據(jù)
let index=allCarouseData.value.findIndex((res: any)=> res.id===firstId)
let addIndex=index - 1 < 0 ? allCarouseData.value.length - 1 : index - 1
animationData.value.unshift(allCarouseData.value[addIndex])
setTimeout(()=> {
// 刪除數(shù)組的最后一項(xiàng)
animationData.value.pop()
}, 1000)

}, 1500)
}
}
animationData.value=allCarouseData.value.slice(-5)
animationTimerMeta.timeFuc()
</script>


@keyframes moveToBottom {
0% {
transform: translateY(-47px);
}
  
100% {
transform: translateY(0);
}
}

.moveToBottom {
animation: moveToBottom 500ms ease-in-out forwards;
}

@keyframes fadeInFromTop {
0% {
opacity: 0;
transform: translateY(-47px);
}

100% {
opacity: 1;
transform: translateY(0);
color: #683BD6;
}
}

.show {
animation: fadeInFromTop 500ms ease-in-out forwards;
}

上述代碼中，為了實(shí)現(xiàn)動(dòng)畫效果，采用了動(dòng)態(tài)添加類名的技術(shù)方案。

animationData 數(shù)組中的元素會(huì)按照一定順序進(jìn)行顯示和隱藏，同時(shí)伴隨有動(dòng)畫效果。當(dāng)?shù)谝粋€(gè)元素進(jìn)入視圖時(shí)，它會(huì)應(yīng)用 fadeInFromTop 動(dòng)畫；其他元素會(huì)應(yīng)用 moveToBottom 動(dòng)畫。通過定時(shí)器，元素會(huì)定期從 allCarouseData 中獲取新的數(shù)據(jù)并更新 animationData。

代碼釋義：

moveToBottom: 當(dāng) animationActive 為真值時(shí)，此類名會(huì)被添加到 div 上。
show: 當(dāng) animationActive 為真值且當(dāng)前元素是數(shù)組的第一個(gè)元素時(shí)，此類名會(huì)被添加到 div 上。

CSS 釋義：

moveToBottom 動(dòng)畫:

定義一個(gè)名為 moveToBottom 的關(guān)鍵幀動(dòng)畫，使元素從上方移動(dòng)到其原始位置。

moveToBottom 類將此動(dòng)畫應(yīng)用到元素上。

fadeInFromTop 動(dòng)畫:

定義一個(gè)名為 fadeInFromTop 的關(guān)鍵幀動(dòng)畫，使元素從上方淡入并改變顏色。

show 類將此動(dòng)畫應(yīng)用到元素上。

通過上述簡單的實(shí)現(xiàn)方式，就能最終實(shí)現(xiàn)我們想要的效果

相比于普通滾動(dòng)，這種方式看起來要好很多！

結(jié)語

要想實(shí)現(xiàn)這種單步停幀的效果，其實(shí)有很多實(shí)現(xiàn)方式，這只是筆者實(shí)現(xiàn)的一種，核心邏輯就是動(dòng)態(tài)改變數(shù)據(jù)、增添類名。如果大家還有更好的方式，也歡迎大家指點(diǎn)。

作者：石小石Orz
鏈接：https://juejin.cn/post/7348433631944556555

們對網(wǎng)站首頁代碼進(jìn)行seo優(yōu)化的目的在于提高網(wǎng)站首頁打開速度，而加快網(wǎng)站打開速度則有利于用戶體驗(yàn)度的提升和對搜索引擎的友好，因此，掌握如何優(yōu)化網(wǎng)站首頁代碼方法和原則就顯得尤為重要。

很多網(wǎng)站，為了吸引訪客的注意，添加很多組件，殊不知這樣的組件越多，會(huì)越加延遲網(wǎng)站的打開速度；另外一方面，如果你的網(wǎng)站是圖片站，那么更要合理的優(yōu)化首頁代碼，有數(shù)據(jù)顯示，通過代碼瘦身可以讓頁面最高縮減百分之三十。在此，seo教程自學(xué)網(wǎng)推薦閱讀網(wǎng)站頁面速度優(yōu)化原則，衍生知識點(diǎn)。

作為seo人員，需要懂得如何精簡代碼，如何加快網(wǎng)站打開速度，即使不是技術(shù)流，也因知曉原理。在此，seo教程自學(xué)網(wǎng)總結(jié)了一部分網(wǎng)站首頁代碼優(yōu)化方法與原則，詳細(xì)如下：

1：刪除多余的社交類組件。

這里需要指出，我們在網(wǎng)站中放入恰當(dāng)?shù)纳缃唤M件是建議的，但我們應(yīng)該刪除多余的社交類組件以提升網(wǎng)站加載打開速度。舉個(gè)例子：某第三方網(wǎng)站提供的分享按鈕代碼體積大約為1/2M，另外平臺的分享代碼更小，我們就可以選擇更小的；在舉個(gè)例子，網(wǎng)站上遍布各種組件，留言板，在線溝通工具，分享按鈕等，站長的初衷是好的，但更多的組件意味著很多網(wǎng)絡(luò)連接或強(qiáng)制在加載頁面之前進(jìn)行，拉低了網(wǎng)站的打開速度，另外一方面也不利于用戶體驗(yàn)。在這種情況下，我們就要優(yōu)化首頁代碼，選擇更小體積的代碼，刪除多余的組件代碼。

2：采用用戶點(diǎn)擊加載技術(shù)。

如果你的網(wǎng)站是視頻站點(diǎn)或圖片站點(diǎn)，是不應(yīng)該一次性加載網(wǎng)站的所有內(nèi)容的，自動(dòng)加載視頻，圖片等內(nèi)容會(huì)加載API，這會(huì)直接拉低整站的速度，建議的做法是根據(jù)用戶的需要，讓他們自由點(diǎn)擊，通過點(diǎn)擊行為加載應(yīng)該呈現(xiàn)的資源；舉個(gè)例子，如果首頁有大量圖片內(nèi)容，就可以采取滾動(dòng)式頁面，通過用戶的下拉行為加載新的頁面，這樣做有利于用戶體驗(yàn)，也有利于首頁打開速度的提升。

3：使用矢量技術(shù)處理圖片。

可縮放矢量圖形是基于可擴(kuò)展標(biāo)記語言（標(biāo)準(zhǔn)通用標(biāo)記語言的子集），用于描述二維矢量圖形的一種圖形格式。它由萬維網(wǎng)聯(lián)盟制定，是一個(gè)開放標(biāo)準(zhǔn)。

矢量技術(shù)處理圖片具備很多優(yōu)點(diǎn)，如：

用戶可以任意縮放圖像顯示，而不會(huì)破壞圖像的清晰度、細(xì)節(jié)等；

SVG圖像中的文字獨(dú)立于圖像，文字保留可編輯和可搜尋的狀態(tài)。也不會(huì)再有字體的限制，用戶系統(tǒng)即使沒有安裝某一字體，也會(huì)看到和他們制作時(shí)完全相同的畫面。

總體來講，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下載也很快。

SVG 圖像可被搜索、索引、腳本化或壓縮。

也就是說，使用矢量技術(shù)處理的圖片，可被搜索引擎識別，且相同情況下其文件會(huì)更小。

在此，推薦的工具有SVG edit，它可以將普通格式的文件轉(zhuǎn)換為矢量圖。

4：巧用css3代替圖片效果。

基于css3的進(jìn)化，其已經(jīng)可以生成陰影，圓角邊框，按鈕，背景等效果，幾乎可以取代傳統(tǒng)的切片技術(shù)。在這樣的前提條件下，完全可以通過css代碼代替某些圖片效果，其優(yōu)點(diǎn)顯而易見，代碼比圖片要小得多，也會(huì)提升網(wǎng)站首頁打開速度。

另外一方面，如果使用大量圖片布局網(wǎng)站，在不同的瀏覽器下，就會(huì)形成某些視覺問題，但css3技術(shù)就不存在這些問題，它們可以完美的支持各瀏覽器的兼容問題，而又不至于犧牲網(wǎng)站前端效果。

再次，seo教程自學(xué)網(wǎng)提醒：使用css3制作陰影等效果，其難度不小，需要更專業(yè)的前端技術(shù)人員才能實(shí)現(xiàn)。

5：javascript簡稱js代碼優(yōu)化。

眾所周知，javascript特效的使用是阻礙網(wǎng)站打開速度的一個(gè)重要因素，對于這個(gè)點(diǎn)，需要著重把握和注意。前面講了css3可以取代很多圖片效果，其還有別的功能，如可以取代部分js特效效果，效果強(qiáng)大。

使用css3，取代部分js特效，有一些優(yōu)勢：

很多情況下css3代碼的特效可以直接取代js代碼。

css3代碼體諒更小，也更容易編寫。

6：用圖標(biāo)字體(icon fonts)代替首頁圖片。

利用字體工具把我們平時(shí) Web 上用的圖形圖標(biāo)（icons）轉(zhuǎn)換成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到網(wǎng)頁里，用以顯示 icons。因?yàn)樽煮w是矢量化圖形，它天生具有「分辨率無關(guān)」的特性，在任何分辨率和PPI下面，都可以做到完美縮放，不會(huì)像傳統(tǒng)位圖，如：png，jpeg，放大后有鋸齒或模糊現(xiàn)象。

由于圖標(biāo)字體的靈活性和易用性使得圖標(biāo)字體使用越來越廣泛了，我們經(jīng)?？梢钥吹讲煌腢I框架都整合了各種的圖標(biāo)字體。

除了「分辨率無關(guān)」這個(gè)最大的優(yōu)點(diǎn)之外，icon fonts 還具有：

文件?。合啾葓D片幾十幾百KB的容量，icon fonts 幾乎是羽翼級輕量。

加載性能好：因?yàn)閳D標(biāo)都被打包進(jìn)一套字體內(nèi)，http request 減少。這如同我們常用的 css sprites 技術(shù)。

支持CSS樣式：和普通字體一樣，你可以利用CSS來定義大小、顏色、陰影、hover狀態(tài)、透明度、漸變等等…

兼容性好：web fonts 起源很早，別說主流瀏覽器，連IE6/7都能良好支持。除了一些老的移動(dòng)端瀏覽器，如Android 2.1以下的初代瀏覽器，Opera mini 這類自限型瀏覽器。

當(dāng)然 icon fonts 也有它的不足：

樣式單一，無法針對不同分辨率來調(diào)整icon 的細(xì)節(jié)，比如降低大尺寸icon 的線條粗細(xì)。

顏色單一，CSS 無法方便的去定義彩色的 icon，倒是有通過疊加組合的方式來達(dá)到彩色圖標(biāo)的目的。

移動(dòng)端瀏覽器兼容性還不夠完善，像Opera mini、Windows phone 7.0-7.8 都不能正常顯示icon fonts。

有少量的移動(dòng)設(shè)備有可能會(huì)和 icon fonts 的字符編碼沖突，導(dǎo)致icon 顯示不正常（我們自己風(fēng)車Android 版本就碰到了這個(gè)問題）。

所以 icon fonts 也并不是一套完美的響應(yīng)式圖片的解決方案，當(dāng)它適宜你的應(yīng)用場景時(shí)，比如：

你的網(wǎng)站是扁平化或簡約風(fēng)格，圖標(biāo)樣式單一，顏色為純色。

你的目標(biāo)用戶使用桌面瀏覽器為主，或者，

你愿意為非兼容設(shè)備做兼容hack。

icon fonts 是一個(gè)令設(shè)計(jì)師和前端工程師都心花怒放的方案。

icon fonts 的制作主要有兩條思路：

利用字體工具手動(dòng)制作

利用在線工具自動(dòng)生成

7. sprite技術(shù)優(yōu)化首頁圖片體積。

Sprite”(精靈)這個(gè)詞在計(jì)算機(jī)圖形學(xué)中有它獨(dú)特的定義，由于游戲、視頻等畫質(zhì)越來越高，必須有一種技術(shù)可以智能的處理材質(zhì)和貼圖，并且要同時(shí)保持畫面流暢?！癝prite”就是這樣一種技術(shù)，它將許多圖片組合到一個(gè)網(wǎng)格上，然后通過程序?qū)⒚總€(gè)網(wǎng)格的內(nèi)容定位到畫面上。

Sprite被定位到一副靜態(tài)圖片上，并且通過簡單的程序或硬件即可正確定位到畫面上，一幅幅圖片就像是被“變”出來的，他們并沒有單獨(dú)占用內(nèi)存，所以被取名為“Sprite精靈”。

時(shí)間進(jìn)行到2000年，Web設(shè)計(jì)向著精致、巧妙的方向發(fā)展。設(shè)計(jì)師們開始考慮使用非Javascript的方式制作鼠標(biāo)滑過、懸停菜單的效果，這時(shí)CSS Sprite應(yīng)運(yùn)而生，它基于同上文提到的游戲Sprite同樣的原理，并且使用CSS更容易控制，很快的流行開來。

當(dāng)頁面加載時(shí)，不是加載每個(gè)單獨(dú)圖片，而是一次加載整個(gè)組合圖片。這是一個(gè)了不起的改進(jìn)，它大大減少了HTTP請求的次數(shù)，減輕服務(wù)器壓力，同時(shí)縮短了懸停加載圖片所需要的時(shí)間延遲，使效果更流暢，不會(huì)停頓。

CSS Sprites可以用在很多場合，大型網(wǎng)站可以將許多單獨(dú)的圖片，以有機(jī)的方式組合起來，從而使其便于維護(hù)和更新。圖片之間通常會(huì)留出較大的空白，使得圖片不會(huì)影響網(wǎng)頁的內(nèi)容。但同時(shí)CSS Sprite大多使用于較固定的像素定位中，它的彈性較差，收到定位等因素的制約。所以，你需要在可維護(hù)性vs降低負(fù)載之間權(quán)衡利弊，選擇最適合你的項(xiàng)目的方式。

在網(wǎng)站圖片的解決方案中，CSS3應(yīng)該是首選，其次是SVG和icon font,最后才是Bitmap。經(jīng)常使用的Bitmap文件應(yīng)該打包放在一個(gè)單獨(dú)的sprite中，這樣一來圖片就可以在CSS中訪問到了，像這樣：

.sprite {

width: 16px;

height: 16px;

background: url(“sprite.png”) 0 0 no-repeat;

}

.sprite.help { background-position: 0 -16px; }

.sprite.info { background-position: 0 -32px; }

.sprite.user { background-position: 0 -48px; }

8. 使用data URIs減少http請求數(shù)。

假設(shè)你有一個(gè)圖片，把它在網(wǎng)頁上顯示出來的標(biāo)準(zhǔn)方法是：

這種取得資料的方法稱為 http URI scheme ，同樣的效果使用 data URI scheme 可以寫成：

<img src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA

7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC” />

換句話說我們把圖像檔案的內(nèi)容內(nèi)置在 HTML 檔案中，節(jié)省了一個(gè) HTTP 請求。

data uri的主要優(yōu)點(diǎn)是減少了http請求數(shù)，調(diào)用起來比css sprite更加靈活，缺點(diǎn)是增加了客戶端的資源消耗。

在所有瀏覽器的非緩存的模式下， CSS sprite 方式比 data URI 方式快了數(shù)百微秒。但事實(shí)上 CSS Sprite 比 Data URI 方式多發(fā)送了一次連接請求，包括 TCP 慢啟動(dòng)招致所有相關(guān)的連接開銷。

緩存條件下 Android 4.2 和 iOS 6 的 CSS sprite 模式都有大概 2 倍的速度提升，只是 iOS 條件下減少了 220ms 而 Android 減少了 70ms （原生瀏覽器）。相對來說，Chrome 和 Firefox 的情況平衡得好點(diǎn)，緩存和非緩存情況下只有 50% 到 60ms 左右的性能差異。

在這里我建議將 data URIs 用于非常小的資源，并且不能在 CSS 和內(nèi)聯(lián) HTML 中多次使用它們。

在利用相關(guān)技術(shù)對網(wǎng)站首頁代碼，圖片，組件進(jìn)行瘦身處理后，就需要使用相關(guān)檢測工具對網(wǎng)站速度進(jìn)行測試。一般情況下，網(wǎng)站打開速度應(yīng)低于4秒。

推薦的網(wǎng)站速度檢測工具包括“奇云測 — 測試你的網(wǎng)站速度”，免費(fèi)提供ping檢測,get檢測,DNS劫持檢測和網(wǎng)站打分等服務(wù),努力打造最干凈的網(wǎng)站檢測平臺。

另外，百度官方也主推了移動(dòng)網(wǎng)頁加速M(fèi)IP相關(guān)技術(shù)，是一套應(yīng)用于移動(dòng)網(wǎng)頁的開放性技術(shù)標(biāo)準(zhǔn),使用 MIP無需等待加載,頁面內(nèi)容將以更友好的方式瞬時(shí)到達(dá)用戶。

掌握如何優(yōu)化網(wǎng)站首頁代碼方法的目的在于提升網(wǎng)站速度，推薦的典型做法有刪除多余代碼與組件，對現(xiàn)有代碼利用最新技術(shù)如css3進(jìn)行優(yōu)化，還有一個(gè)重要點(diǎn)就是服務(wù)器端的選擇，標(biāo)準(zhǔn)應(yīng)該是快且穩(wěn)定

在線咨詢

上一篇：“5.20”央行要發(fā)行心形紀(jì)念幣了，你會(huì)買嗎？
下一篇：解決點(diǎn)擊事件在移動(dòng)端失效的問題

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商