煩大家點(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:
- 減少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
- 使用CDN
- 添加Expires或者Cache-Control響應(yīng)頭
- 對(duì)組件使用Gzip壓縮
- 配置ETag
- Flush Buffer Early
- Ajax使用GET進(jìn)行請(qǐng)求
- 避免空src的img標(biāo)簽
- 減小cookie大小
- 引入資源的域名不要包含cookie
- 將樣式表放到頁面頂部
- 不使用CSS表達(dá)式
- 使用不使用@import
- 不使用IE的Filter
- 將腳本放到頁面底部
- 將javascript和css從外部引入
- 壓縮javascript和css
- 刪除不需要的腳本
- 減少DOM訪問
- 合理設(shè)計(jì)事件監(jiān)聽器
- 優(yōu)化圖片:根據(jù)實(shí)際顏色需要選擇色深、壓縮
- 優(yōu)化css精靈
- 不要在HTML中拉伸圖片
- 保證favicon.ico小并且可緩存
- 保證組件小于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)化工作。