整理了一份前端面試題集合，希望對(duì)正在找工作的前端小伙伴有幫助

煩大家點(diǎn)贊關(guān)注走一波哦~~~整理不易，謝謝啦~

前端面試題整理

面試面試

$HTML， HTTP，web綜合問題1、前端需要注意哪些 SEO2、 <img>的 title和 alt有什么區(qū)別3、 HTTP的幾種請(qǐng)求方法用途4、從瀏覽器地址欄輸入 url到顯示頁面的步驟5、如何進(jìn)行網(wǎng)站性能優(yōu)化6、HTTP狀態(tài)碼及其含義7、語義化的理解8、介紹一下你對(duì)瀏覽器內(nèi)核的理解9、 html5有哪些新特性、移除了那些元素？10、 HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？11、瀏覽器是怎么對(duì) HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢12、請(qǐng)描述一下 cookies， sessionStorage 和 localStorage 的區(qū)別13、 iframe有那些缺點(diǎn)？14、 WEB標(biāo)準(zhǔn)以及W3C標(biāo)準(zhǔn)是什么?15、 xhtml和 html有什么區(qū)別?16、 Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?17、行內(nèi)元素有哪些？塊級(jí)元素有哪些？空( void )元素有那些？行內(nèi)元素和塊級(jí)元素有什么區(qū)別？18、 HTML全局屬性( global attribute )有哪些19、 Canvas和 SVG有什么區(qū)別？20、 HTML5 為什么只需要寫 <!DOCTYPE HTML>？21、如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？22、網(wǎng)頁驗(yàn)證碼是干嘛的，是為了解決什么安全問題

$CSS部分1、 css sprite是什么,有什么優(yōu)缺點(diǎn)2、 display: none;與 visibility: hidden ;的區(qū)別3、 link與 @import的區(qū)別4、什么是 FOUC?如何避免5、如何創(chuàng)建塊級(jí)格式化上下文( block formatting context ), BFC有什么用7、清除浮動(dòng)的幾種方式，各自的優(yōu)缺點(diǎn)8、為什么要初始化 CSS樣式?9、 css3有哪些新特性10、 display有哪些值？說明他們的作用11、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？12、 CSS優(yōu)先級(jí)算法如何計(jì)算？13、對(duì) BFC規(guī)范的理解？

14、談?wù)劯?dòng)和清除浮動(dòng)15、 position的值， relative和absolute`定位原點(diǎn)是16、 display:inline-block 什么時(shí)候不會(huì)顯示間隙？(攜程)17、 PNG,GIF,JPG的區(qū)別及如何選18、行內(nèi)元素 float:left后是否變?yōu)閴K級(jí)元素？19、在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？20、 ::before 和 :after中雙冒號(hào)和單冒號(hào)有什么區(qū)別？解釋一下這 2個(gè)偽元素的作用21、如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？（阿里）

$JavaScript1、閉包2、說說你對(duì)作用域鏈的理解3、 JavaScript原型，原型鏈 ? 有什么特點(diǎn)？4、請(qǐng)解釋什么是事件代理5、 Javascript如何實(shí)現(xiàn)繼承？6、談?wù)?This對(duì)象的理解7、事件模型8、 new操作符具體干了什么呢?9、 Ajax原理11、模塊化開發(fā)怎么做？12、異步加載 JS的方式有哪些？13、那些操作會(huì)造成內(nèi)存泄漏？14、 XML和 JSON的區(qū)別？15、談?wù)勀銓?duì) webpack的看法17、常見 web安全及防護(hù)原理18、用過哪些設(shè)計(jì)模式？19、為什么要有同源限制？20、 offsetWidth/offsetHeight , clientWidth/clientHeight與 scrollWidth/scrollHeight的區(qū)別21、 javascript有哪些方法定義對(duì)象22、常見兼容性問題？22、說說你對(duì) promise的了解23、你覺得 jQuery源碼有哪些寫的好的地方25、 Node的應(yīng)用場景26、談?wù)勀銓?duì) AMD、 CMD的理解27、那些操作會(huì)造成內(nèi)存泄漏？28、 web開發(fā)中會(huì)話跟蹤的方法有哪些29、介紹 js的基本數(shù)據(jù)類型30、介紹 js有哪些內(nèi)置對(duì)象？31、說幾條寫 JavaScript的基本規(guī)范？32、 JavaScript有幾種類型的值？，你能畫一下他們的內(nèi)存圖嗎？33、 javascript創(chuàng)建對(duì)象的幾種方式？34、 eval是做什么的？35、 null，undefined 的區(qū)別？36、 ["1", "2", "3"].map(parseInt) 答案是多少？37、 javascript 代碼中的 "use strict" ;是什么意思 ? 使用它區(qū)別是什么？38、 JSON的了解？39、js延遲加載的方式有哪些？

40、同步和異步的區(qū)別?41、漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)42、 defer和 async43、說說嚴(yán)格模式的限制44、 attribute和 property的區(qū)別是什么？45、談?wù)勀銓?duì) ES6的理解46、ECMAScript6 怎么寫class么，為什么會(huì)出現(xiàn)class這種東西?

$編程題1、寫一個(gè)通用的事件偵聽器函數(shù)2、如何判斷一個(gè)對(duì)象是否為數(shù)組3、冒泡排序4、快速排序5、編寫一個(gè)方法求一個(gè)字符串的字節(jié)長度

$其他1、談?wù)勀銓?duì)重構(gòu)的理解2、什么樣的前端代碼是好的3、對(duì)前端工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣？4、你覺得前端工程的價(jià)值體現(xiàn)在哪5、平時(shí)如何管理你的項(xiàng)目？

人事面

面試完你還有什么問題要問的嗎你有什么愛好?你最大的優(yōu)點(diǎn)和缺點(diǎn)是什么?你為什么會(huì)選擇這個(gè)行業(yè)，職位?你覺得你適合從事這個(gè)崗位嗎?你有什么職業(yè)規(guī)劃?你對(duì)工資有什么要求?如何看待前端開發(fā)？未來三到五年的規(guī)劃是怎樣的？

一些問題

文資料來源于
https://github.com/qiu-deqing/FE-interview
目前已在github獲得4700個(gè)star，在前端知識(shí)項(xiàng)目中名列第一。

本文主要分享該項(xiàng)目中的HTML， HTTP，web綜合問題的知識(shí)點(diǎn)及面試題部分，后續(xù)分享剩余5個(gè)章節(jié)。

前端需要注意哪些SEO
web開發(fā)中會(huì)話跟蹤的方法有哪些
<img>的title和alt有什么區(qū)別
doctype是什么,舉例常見doctype及特點(diǎn)
HTML全局屬性(global attribute)有哪些
什么是web語義化,有什么好處
HTTP method
從瀏覽器地址欄輸入url到顯示頁面的步驟(以HTTP為例)
HTTP request報(bào)文結(jié)構(gòu)是怎樣的
HTTP response報(bào)文結(jié)構(gòu)是怎樣的
如何進(jìn)行網(wǎng)站性能優(yōu)化
什么是漸進(jìn)增強(qiáng)
HTTP狀態(tài)碼及其含義

歡迎關(guān)注筆者，優(yōu)質(zhì)文章都在這里等你。

常見排序算法的時(shí)間復(fù)雜度,空間復(fù)雜度

前端需要注意哪些SEO

合理的title、description、keywords：搜索對(duì)著三項(xiàng)的權(quán)重逐個(gè)減小，title值強(qiáng)調(diào)重點(diǎn)即可，重要關(guān)鍵詞出現(xiàn)不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內(nèi)容高度概括，長度合適，不可過分堆砌關(guān)鍵詞，不同頁面description有所不同；keywords列舉出重要關(guān)鍵詞即可
語義化的HTML代碼，符合W3C規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁
重要內(nèi)容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對(duì)抓取長度有限制，保證重要內(nèi)容一定會(huì)被抓取
重要內(nèi)容不要用js輸出：爬蟲不會(huì)執(zhí)行js獲取內(nèi)容
少用iframe：搜索引擎不會(huì)抓取iframe中的內(nèi)容
非裝飾性圖片必須加alt
提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo)

web開發(fā)中會(huì)話跟蹤的方法有哪些

cookie
session
url重寫
隱藏input
ip地址

<img>的title和alt有什么區(qū)別

title是global attributes之一，用于為元素提供附加的advisory information。通常當(dāng)鼠標(biāo)滑動(dòng)到元素上的時(shí)候顯示。
alt是<img>的特有屬性，是圖片內(nèi)容的等價(jià)描述，用于圖片無法加載時(shí)顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會(huì)重點(diǎn)分析。

doctype是什么,舉例常見doctype及特點(diǎn)

<!doctype>聲明必須處于HTML文檔的頭部，在<html>標(biāo)簽之前，HTML5中不區(qū)分大小寫
<!doctype>聲明不是一個(gè)HTML標(biāo)簽，是一個(gè)用于告訴瀏覽器當(dāng)前HTMl版本的指令
現(xiàn)代瀏覽器的html布局引擎通過檢查doctype決定使用兼容模式還是標(biāo)準(zhǔn)模式對(duì)文檔進(jìn)行渲染，一些瀏覽器有一個(gè)接近標(biāo)準(zhǔn)模型。
在HTML4.01中<!doctype>聲明指向一個(gè)DTD，由于HTML4.01基于SGML，所以DTD指定了標(biāo)記規(guī)則以保證瀏覽器正確渲染內(nèi)容
HTML5不基于SGML，所以不用指定DTD

HTML全局屬性(global attribute)有哪些

參考資料：MDN: html global attribute或者W3C HTML global-attributes

accesskey:設(shè)置快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a可激活元素
class:為元素設(shè)置類標(biāo)識(shí)，多個(gè)類名用空格分開，CSS和javascript可通過class屬性獲取元素
contenteditable: 指定元素內(nèi)容是否可編輯
contextmenu: 自定義鼠標(biāo)右鍵彈出菜單內(nèi)容
data-*: 為元素增加自定義屬性
dir: 設(shè)置元素文本方向
draggable: 設(shè)置元素是否可拖拽
dropzone: 設(shè)置元素拖放類型： copy, move, link
hidden: 表示一個(gè)元素是否與文檔。樣式上會(huì)導(dǎo)致元素不顯示，但是不能用這個(gè)屬性實(shí)現(xiàn)樣式效果
id: 元素id，文檔內(nèi)唯一
lang: 元素內(nèi)容的的語言
spellcheck: 是否啟動(dòng)拼寫和語法檢查
style: 行內(nèi)css樣式
tabindex: 設(shè)置元素可以獲得焦點(diǎn)，通過tab可以導(dǎo)航
title: 元素相關(guān)的建議信息
translate: 元素和子孫節(jié)點(diǎn)內(nèi)容是否需要本地化

什么是web語義化,有什么好處

web語義化是指通過HTML標(biāo)記表示頁面包含的信息，包含了HTML標(biāo)簽的語義化和css命名的語義化。 HTML標(biāo)簽的語義化是指：通過使用包含語義的標(biāo)簽（如h1-h6）恰當(dāng)?shù)乇硎疚臋n結(jié)構(gòu) css命名的語義化是指：為html標(biāo)簽添加有意義的class，id補(bǔ)充未表達(dá)的語義，如Microformat通過添加符合規(guī)則的class描述信息為什么需要語義化：

去掉樣式后頁面呈現(xiàn)清晰的結(jié)構(gòu)
盲人使用讀屏器更好地閱讀
搜索引擎更好地理解頁面，有利于收錄
便團(tuán)隊(duì)項(xiàng)目的可持續(xù)運(yùn)作及維護(hù)

HTTP method

一臺(tái)服務(wù)器要與HTTP1.1兼容，只要為資源實(shí)現(xiàn)GET和HEAD方法即可
GET是最常用的方法，通常用于請(qǐng)求服務(wù)器發(fā)送某個(gè)資源。
HEAD與GET類似，但服務(wù)器在響應(yīng)中值返回首部，不返回實(shí)體的主體部分
PUT讓服務(wù)器用請(qǐng)求的主體部分來創(chuàng)建一個(gè)由所請(qǐng)求的URL命名的新文檔，或者，如果那個(gè)URL已經(jīng)存在的話，就用干這個(gè)主體替代它
POST起初是用來向服務(wù)器輸入數(shù)據(jù)的。實(shí)際上，通常會(huì)用它來支持HTML的表單。表單中填好的數(shù)據(jù)通常會(huì)被送給服務(wù)器，然后由服務(wù)器將其發(fā)送到要去的地方。
TRACE會(huì)在目的服務(wù)器端發(fā)起一個(gè)環(huán)回診斷，最后一站的服務(wù)器會(huì)彈回一個(gè)TRACE響應(yīng)并在響應(yīng)主體中攜帶它收到的原始請(qǐng)求報(bào)文。TRACE方法主要用于診斷，用于驗(yàn)證請(qǐng)求是否如愿穿過了請(qǐng)求/響應(yīng)鏈。
OPTIONS方法請(qǐng)求web服務(wù)器告知其支持的各種功能。可以查詢服務(wù)器支持哪些方法或者對(duì)某些特殊資源支持哪些方法。
DELETE請(qǐng)求服務(wù)器刪除請(qǐng)求URL指定的資源

從瀏覽器地址欄輸入url到顯示頁面的步驟(以HTTP為例)

在瀏覽器地址欄輸入U(xiǎn)RL
瀏覽器查看緩存，如果請(qǐng)求資源在緩存中并且新鮮，跳轉(zhuǎn)到轉(zhuǎn)碼步驟
如果資源未緩存，發(fā)起新請(qǐng)求
如果已緩存，檢驗(yàn)是否足夠新鮮，足夠新鮮直接提供給客戶端，否則與服務(wù)器進(jìn)行驗(yàn)證。
檢驗(yàn)新鮮通常有兩個(gè)HTTP頭進(jìn)行控制Expires和Cache-Control：

HTTP1.0提供Expires，值為一個(gè)絕對(duì)時(shí)間表示緩存新鮮日期
HTTP1.1增加了Cache-Control: max-age=,值為以秒為單位的最大新鮮時(shí)間

瀏覽器解析URL獲取協(xié)議，主機(jī)，端口，path
瀏覽器組裝一個(gè)HTTP（GET）請(qǐng)求報(bào)文
瀏覽器獲取主機(jī)ip地址，過程如下：
瀏覽器緩存
本機(jī)緩存
hosts文件
路由器緩存
ISP DNS緩存
DNS遞歸查詢（可能存在負(fù)載均衡導(dǎo)致每次IP不一樣）
打開一個(gè)socket與目標(biāo)IP地址，端口建立TCP鏈接，三次握手如下：
客戶端發(fā)送一個(gè)TCP的SYN=1，Seq=X的包到服務(wù)器端口
服務(wù)器發(fā)回SYN=1， ACK=X+1， Seq=Y的響應(yīng)包
客戶端發(fā)送ACK=Y+1， Seq=Z
TCP鏈接建立后發(fā)送HTTP請(qǐng)求
服務(wù)器接受請(qǐng)求并解析，將請(qǐng)求轉(zhuǎn)發(fā)到服務(wù)程序，如虛擬主機(jī)使用HTTP Host頭部判斷請(qǐng)求的服務(wù)程序
服務(wù)器檢查HTTP請(qǐng)求頭是否包含緩存驗(yàn)證信息如果驗(yàn)證緩存新鮮，返回304等對(duì)應(yīng)狀態(tài)碼
處理程序讀取完整請(qǐng)求并準(zhǔn)備HTTP響應(yīng)，可能需要查詢數(shù)據(jù)庫等操作
服務(wù)器將響應(yīng)報(bào)文通過TCP連接發(fā)送回瀏覽器
瀏覽器接收HTTP響應(yīng)，然后根據(jù)情況選擇關(guān)閉TCP連接或者保留重用，關(guān)閉TCP連接的四次握手如下：
主動(dòng)方發(fā)送Fin=1， Ack=Z， Seq= X報(bào)文
被動(dòng)方發(fā)送ACK=X+1， Seq=Z報(bào)文
被動(dòng)方發(fā)送Fin=1， ACK=X， Seq=Y報(bào)文
主動(dòng)方發(fā)送ACK=Y， Seq=X報(bào)文
瀏覽器檢查響應(yīng)狀態(tài)嗎：是否為1XX，3XX， 4XX， 5XX，這些情況處理與2XX不同
如果資源可緩存，進(jìn)行緩存
對(duì)響應(yīng)進(jìn)行解碼（例如gzip壓縮）
根據(jù)資源類型決定如何處理（假設(shè)資源為HTML文檔）
解析HTML文檔，構(gòu)件DOM樹，下載資源，構(gòu)造CSSOM樹，執(zhí)行js腳本，這些操作沒有嚴(yán)格的先后順序，以下分別解釋
構(gòu)建DOM樹：
Tokenizing：根據(jù)HTML規(guī)范將字符流解析為標(biāo)記
Lexing：詞法分析將標(biāo)記轉(zhuǎn)換為對(duì)象并定義屬性和規(guī)則
DOM construction：根據(jù)HTML標(biāo)記關(guān)系將對(duì)象組成DOM樹
解析過程中遇到圖片、樣式表、js文件，啟動(dòng)下載
構(gòu)建CSSOM樹：
Tokenizing：字符流轉(zhuǎn)換為標(biāo)記流
Node：根據(jù)標(biāo)記創(chuàng)建節(jié)點(diǎn)
CSSOM：節(jié)點(diǎn)創(chuàng)建CSSOM樹
根據(jù)DOM樹和CSSOM樹構(gòu)建渲染樹:
從DOM樹的根節(jié)點(diǎn)遍歷所有可見節(jié)點(diǎn)，不可見節(jié)點(diǎn)包括：1）script,meta這樣本身不可見的標(biāo)簽。2)被css隱藏的節(jié)點(diǎn)，如display: none
對(duì)每一個(gè)可見節(jié)點(diǎn)，找到恰當(dāng)?shù)腃SSOM規(guī)則并應(yīng)用
發(fā)布可視節(jié)點(diǎn)的內(nèi)容和計(jì)算樣式
js解析如下：
瀏覽器創(chuàng)建Document對(duì)象并解析HTML，將解析到的元素和文本節(jié)點(diǎn)添加到文檔中，此時(shí)document.readystate為loading
HTML解析器遇到?jīng)]有async和defer的script時(shí)，將他們添加到文檔中，然后執(zhí)行行內(nèi)或外部腳本。這些腳本會(huì)同步執(zhí)行，并且在腳本下載和執(zhí)行時(shí)解析器會(huì)暫停。這樣就可以用document.write()把文本插入到輸入流中。同步腳本經(jīng)常簡單定義函數(shù)和注冊(cè)事件處理程序，他們可以遍歷和操作script和他們之前的文檔內(nèi)容
當(dāng)解析器遇到設(shè)置了async屬性的script時(shí)，開始下載腳本并繼續(xù)解析文檔。腳本會(huì)在它下載完成后盡快執(zhí)行，但是解析器不會(huì)停下來等它下載。異步腳本禁止使用document.write()，它們可以訪問自己script和之前的文檔元素
當(dāng)文檔完成解析，document.readState變成interactive
所有defer腳本會(huì)按照在文檔出現(xiàn)的順序執(zhí)行，延遲腳本能訪問完整文檔樹，禁止使用document.write()
瀏覽器在Document對(duì)象上觸發(fā)DOMContentLoaded事件
此時(shí)文檔完全解析完成，瀏覽器可能還在等待如圖片等內(nèi)容加載，等這些內(nèi)容完成載入并且所有異步腳本完成載入和執(zhí)行，document.readState變?yōu)閏omplete,window觸發(fā)load事件
顯示頁面（HTML解析過程中會(huì)逐步顯示頁面）

HTTP request報(bào)文結(jié)構(gòu)是怎樣的

rfc2616中進(jìn)行了定義：

首行是Request-Line包括：請(qǐng)求方法，請(qǐng)求URI，協(xié)議版本，CRLF
首行之后是若干行請(qǐng)求頭，包括general-header，request-header或者entity-header，每個(gè)一行以CRLF結(jié)束
請(qǐng)求頭和消息實(shí)體之間有一個(gè)CRLF分隔
根據(jù)實(shí)際請(qǐng)求需要可能包含一個(gè)消息實(shí)體一個(gè)請(qǐng)求報(bào)文例子如下：

GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT
name=qiu&age=25

HTTP response報(bào)文結(jié)構(gòu)是怎樣的

rfc2616中進(jìn)行了定義：

首行是狀態(tài)行包括：HTTP版本，狀態(tài)碼，狀態(tài)描述，后面跟一個(gè)CRLF
首行之后是若干行響應(yīng)頭，包括：通用頭部，響應(yīng)頭部，實(shí)體頭部
響應(yīng)頭部和響應(yīng)實(shí)體之間用一個(gè)CRLF空行分隔
最后是一個(gè)可能的消息實(shí)體響應(yīng)報(bào)文例子如下：

HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1
{"name": "qiu", "age": 25}

如何進(jìn)行網(wǎng)站性能優(yōu)化

雅虎Best Practices for Speeding Up Your Web Site：

content方面

減少HTTP請(qǐng)求：合并文件、CSS精靈、inline Image
減少DNS查詢：DNS查詢完成之前瀏覽器不能從這個(gè)主機(jī)下載任何任何文件。方法：DNS緩存、將資源分布到恰當(dāng)數(shù)量的主機(jī)名，平衡并行下載和DNS查詢
避免重定向：多余的中間訪問
使Ajax可緩存
非必須組件延遲加載
未來所需組件預(yù)加載
減少DOM元素?cái)?shù)量
將資源放到不同的域下：瀏覽器同時(shí)從一個(gè)域下載資源的數(shù)目有限，增加域可以提高并行下載量
減少iframe數(shù)量
不要404

Server方面

使用CDN
添加Expires或者Cache-Control響應(yīng)頭
對(duì)組件使用Gzip壓縮
配置ETag
Flush Buffer Early
Ajax使用GET進(jìn)行請(qǐng)求
避免空src的img標(biāo)簽

Cookie方面

減小cookie大小
引入資源的域名不要包含cookie

css方面

將樣式表放到頁面頂部
不使用CSS表達(dá)式
使用不使用@import
不使用IE的Filter

Javascript方面

將腳本放到頁面底部
將javascript和css從外部引入
壓縮javascript和css
刪除不需要的腳本
減少DOM訪問
合理設(shè)計(jì)事件監(jiān)聽器

圖片方面

優(yōu)化圖片：根據(jù)實(shí)際顏色需要選擇色深、壓縮
優(yōu)化css精靈
不要在HTML中拉伸圖片
保證favicon.ico小并且可緩存

移動(dòng)方面

保證組件小于25k
Pack Components into a Multipart Document

什么是漸進(jìn)增強(qiáng)

漸進(jìn)增強(qiáng)是指在web設(shè)計(jì)時(shí)強(qiáng)調(diào)可訪問性、語義化HTML標(biāo)簽、外部樣式表和腳本。保證所有人都能訪問頁面的基本內(nèi)容和功能同時(shí)為高級(jí)瀏覽器和高帶寬用戶提供更好的用戶體驗(yàn)。核心原則如下:

所有瀏覽器都必須能訪問基本內(nèi)容
所有瀏覽器都必須能使用基本功能
所有內(nèi)容都包含在語義化標(biāo)簽中
通過外部CSS提供增強(qiáng)的布局
通過非侵入式、外部javascript提供增強(qiáng)功能
end-user web browser preferences are respected

HTTP狀態(tài)碼及其含義

參考RFC 2616

1XX：信息狀態(tài)碼
100 Continue：客戶端應(yīng)當(dāng)繼續(xù)發(fā)送請(qǐng)求。這個(gè)臨時(shí)相應(yīng)是用來通知客戶端它的部分請(qǐng)求已經(jīng)被服務(wù)器接收，且仍未被拒絕。客戶端應(yīng)當(dāng)繼續(xù)發(fā)送請(qǐng)求的剩余部分，或者如果請(qǐng)求已經(jīng)完成，忽略這個(gè)響應(yīng)。服務(wù)器必須在請(qǐng)求萬仇向客戶端發(fā)送一個(gè)最終響應(yīng)
101 Switching Protocols：服務(wù)器已經(jīng)理解力客戶端的請(qǐng)求，并將通過Upgrade消息頭通知客戶端采用不同的協(xié)議來完成這個(gè)請(qǐng)求。在發(fā)送完這個(gè)響應(yīng)最后的空行后，服務(wù)器將會(huì)切換到Upgrade消息頭中定義的那些協(xié)議。
2XX：成功狀態(tài)碼
200 OK：請(qǐng)求成功，請(qǐng)求所希望的響應(yīng)頭或數(shù)據(jù)體將隨此響應(yīng)返回
201 Created：
202 Accepted：
203 Non-Authoritative Information：
204 No Content：
205 Reset Content：
206 Partial Content：
3XX：重定向
300 Multiple Choices：
301 Moved Permanently：
302 Found：
303 See Other：
304 Not Modified：
305 Use Proxy：
306 （unused）：
307 Temporary Redirect：
4XX：客戶端錯(cuò)誤
400 Bad Request:
401 Unauthorized:
402 Payment Required:
403 Forbidden:
404 Not Found:
405 Method Not Allowed:
406 Not Acceptable:
407 Proxy Authentication Required:
408 Request Timeout:
409 Conflict:
410 Gone:
411 Length Required:
412 Precondition Failed:
413 Request Entity Too Large:
414 Request-URI Too Long:
415 Unsupported Media Type:
416 Requested Range Not Satisfiable:
417 Expectation Failed:
5XX: 服務(wù)器錯(cuò)誤
500 Internal Server Error:
501 Not Implemented:
502 Bad Gateway:
503 Service Unavailable:
504 Gateway Timeout:
505 HTTP Version Not Supported:

您的轉(zhuǎn)發(fā)+關(guān)注就是對(duì)筆者最大的支持，歡迎關(guān)注。

對(duì)大廠架構(gòu)設(shè)計(jì)，BAT等廠家面試題解讀，編程語言理論或者互聯(lián)網(wǎng)圈逸聞趣事這些感興趣，歡迎關(guān)注筆者，沒有錯(cuò)，干貨文章都在這里。

信大家都知道，圖片對(duì)企業(yè)營銷型網(wǎng)站建設(shè)來說，都是一項(xiàng)必不可少的元素，任何網(wǎng)站離開了圖片，都無法形成一個(gè)完整的網(wǎng)站，并且網(wǎng)站效果也會(huì)非常差。雖然說圖片的優(yōu)勢非常多，但前提是在合理使用的情況下，如果圖片使用不合理，則有可能會(huì)起到適得其反的效果。因此，企業(yè)想要營銷型網(wǎng)站效果更好，在制作網(wǎng)站時(shí)，就必須要將圖片優(yōu)化的更合理。接下來長沙網(wǎng)站建設(shè)創(chuàng)研科技就給大家分享四個(gè)圖片的優(yōu)化技巧。

網(wǎng)站圖片必須添加屬性

在HTML標(biāo)簽中，圖片有ALT屬性、TITLE屬性兩種標(biāo)簽，前者是在圖片無法加載的時(shí)候才會(huì)顯示出來的標(biāo)簽，而TITLE屬性是在圖片正常加載鼠標(biāo)劃上去顯示的值，這樣對(duì)于網(wǎng)站用戶體驗(yàn)效果是非常有幫助的。另外對(duì)于搜索引擎來說，由于無法識(shí)別圖片中的內(nèi)容，只能通過屬性來判斷，所以為圖片添加屬性，還可以使網(wǎng)站對(duì)搜索引擎更友好，從而提高網(wǎng)站的優(yōu)化效果。

圖片的尺寸大小要合適

在網(wǎng)站的許多地方，圖片的尺寸大小和比例都是固定的，那么我們?cè)谠O(shè)計(jì)圖片時(shí)，就需要根據(jù)這個(gè)尺寸大小和比例去設(shè)計(jì)，這樣當(dāng)圖片上傳之后，才會(huì)等比展示出來。否則的話，就會(huì)導(dǎo)致圖片被拉伸或是縮放從而變形，失去體驗(yàn)感。另外由于PC端和移動(dòng)端屏幕大小差異，因此在設(shè)計(jì)PC和移動(dòng)頁面圖片時(shí)，要分開設(shè)計(jì)，不能共用，否則的話，就會(huì)導(dǎo)致另外一端的圖片失去美感。

確定好統(tǒng)一的圖片格式

雖然現(xiàn)在很多網(wǎng)站都支持多種圖片格式，但是這里還是建議大家使用JPEG(或說.jpg)這一種格式，當(dāng)然除去LOGO，因?yàn)長OGO有的背景需要透明，會(huì)采用PNG格式的。這是由于JPEG格式的圖片的顯示效果要比GIF和PNG有明顯的優(yōu)勢，這樣就能為網(wǎng)站塑造很好的用戶體驗(yàn)效果，加深用戶對(duì)網(wǎng)站的印象。另外，JPEG格式的圖片會(huì)更加容易被搜索引擎收錄，從而起到更好的網(wǎng)站優(yōu)化效果。

控制好圖片的文件大小

雖然說圖片的文件大小是與其質(zhì)量度成正比的，越大的圖片質(zhì)量就越好，越是清晰，而越小的圖片，其失真就越嚴(yán)重，效果越差，從而使網(wǎng)站的體驗(yàn)感更差。雖然網(wǎng)站圖片看似是越大越能起到更好的效果。但是我們還需要考慮到一個(gè)問題，那就是圖片文件越大，那么用戶打開時(shí)需要加載的東西就越多，這樣網(wǎng)站打開的時(shí)間就要更長。但網(wǎng)站不能很快打開的話，用戶又會(huì)離開，所以要控制好圖片的文件大小，既保證網(wǎng)站快速打開，又不影響其質(zhì)量。

總的來說，圖片對(duì)于網(wǎng)站來說，是非常重要的，特別是對(duì)于企業(yè)需要依靠其來盈利的營銷型網(wǎng)站。因?yàn)榫W(wǎng)站的頁面是否精美，是否具有吸引力，大部分都是依靠圖片來實(shí)現(xiàn)的，圖片各方面都恰當(dāng)?shù)脑挘匀粫?huì)為網(wǎng)站起到更大的助力作用，但如果圖片要求不恰當(dāng)?shù)脑挘瑒t會(huì)導(dǎo)致網(wǎng)站效果更差，反而會(huì)拖累網(wǎng)站。所以說，企業(yè)營銷型網(wǎng)站如果想要實(shí)現(xiàn)更好的轉(zhuǎn)化，取得更好的效果，那就千萬不要忽視對(duì)圖片的優(yōu)化工作。

在線咨詢

上一篇：用HTML怎么制作網(wǎng)頁呢?
下一篇：三欄縱向個(gè)人博客模板Html(提供多頁面下載)