前端常見(jiàn)面試題總結(jié)-HTML篇

、關(guān)于HTML語(yǔ)義化，你知道都有哪些標(biāo)簽？

語(yǔ)義化就是讓計(jì)算機(jī)能夠快速讀懂內(nèi)容，高效的處理信息。搜索引擎只能通過(guò)標(biāo)簽來(lái)判斷內(nèi)容的語(yǔ)義，因?yàn)轫?yè)面的很大一部分流量來(lái)自搜索引擎，要使頁(yè)面盡可能地對(duì)搜索引擎友好，所以盡可能地使用語(yǔ)義化標(biāo)簽，如：

div是division分離，span是span范圍，table是表格，ol是orderList有序列表，ul是unorderList無(wú)序列表，li是list item列表選項(xiàng)，html5進(jìn)一步推進(jìn)web語(yǔ)義化的發(fā)展，使用了一些新的標(biāo)簽有header、artical、address等。

2、HTML標(biāo)簽分類(lèi)有哪些？都有啥特點(diǎn)?

塊級(jí)標(biāo)簽

默認(rèn)寬度是100%

塊級(jí)標(biāo)簽獨(dú)占一行

塊級(jí)標(biāo)簽可以使用height設(shè)置高度

常見(jiàn)塊級(jí)標(biāo)簽：div、p、h1~h6、ol、ul、table、form等等。

行級(jí)標(biāo)簽

默認(rèn)寬度由內(nèi)容撐開(kāi)

行級(jí)標(biāo)簽不會(huì)自動(dòng)換行，從左到右一次排列

行級(jí)標(biāo)簽height設(shè)置高度失效，高度由內(nèi)容撐開(kāi)。

常見(jiàn)行級(jí)標(biāo)簽：span、a、br、strong、lable、i、em。

行內(nèi)塊標(biāo)簽

結(jié)合行級(jí)和塊級(jí)的優(yōu)點(diǎn)

可以設(shè)置元素的寬高

還可以將多個(gè)元素顯示在一行從左到右一次排列。

常見(jiàn)行內(nèi)塊標(biāo)簽：img、input。

3、網(wǎng)頁(yè)編碼設(shè)置有幾種方式？

Charset屬性規(guī)定HTML文檔的字符編碼，常見(jiàn)的屬性值有以下幾個(gè)：

UTF-8(8-bit Unicode Transformation Format)是一種針對(duì)Unicode的可變長(zhǎng)度字符編碼，又稱(chēng)萬(wàn)國(guó)碼。用在網(wǎng)頁(yè)上可以同一頁(yè)面顯示中文簡(jiǎn)體繁體以及其他語(yǔ)言。
GBK是漢字編碼，是雙字節(jié)碼，可表示簡(jiǎn)體和繁體字。
ISO8859-2字符集，也稱(chēng)Latin-2，收集了東歐字符。

4、HTML的框架優(yōu)缺點(diǎn)有哪些？

Html框架有iframe和frame兩個(gè)，將多個(gè)頁(yè)面通過(guò)一個(gè)瀏覽器窗口顯示。

框架的優(yōu)點(diǎn)：

重載頁(yè)面時(shí)不需要重載整個(gè)頁(yè)面，只需要重載頁(yè)面中的一個(gè)框架頁(yè)，減少數(shù)據(jù)傳輸，加快網(wǎng)頁(yè)加載速度。
Iframe使用簡(jiǎn)單不需要引入任何插件，主要用于不需要搜索引擎搜索的頁(yè)面。
方便制作導(dǎo)航，多個(gè)頁(yè)面共用，方便開(kāi)發(fā)和維護(hù)。

缺點(diǎn)：

會(huì)產(chǎn)生很多頁(yè)面，不容易管理。
不方便打印，不能實(shí)現(xiàn)對(duì)frameset的打印。
瀏覽器后退按鈕失效。
不利于SEO優(yōu)化，不能為每個(gè)頁(yè)面設(shè)置標(biāo)題和關(guān)鍵字，影響搜索。
多數(shù)小型移動(dòng)設(shè)備無(wú)法完全顯示框架。
多框架頁(yè)面會(huì)增加服務(wù)器的http請(qǐng)求。
H5已經(jīng)拋棄該標(biāo)簽。

5、HTML5有哪些新特性，移除了哪些元素？

H5新增了圖像、位置、存儲(chǔ)、多任務(wù)等功能。

新增元素：

Canvas
video和audio元素
本地離線緩存：localStorage長(zhǎng)期存儲(chǔ)，瀏覽器關(guān)閉之后數(shù)據(jù)不丟失，sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。
語(yǔ)義化標(biāo)簽：artical、footer、header、nav、section
位置API：Geolocation
表單控件：calendar、date、time、email、search、url
新技術(shù)：web worker(運(yùn)行在后臺(tái)的js,獨(dú)立于其他腳本，不影響頁(yè)面性能。可以在頁(yè)面繼續(xù)任何操作，此時(shí)web worker在后臺(tái)運(yùn)行)、web socket
拖放API：drag、drop

移除元素：

框架元素：frame、frameset、noframes。
純表現(xiàn)元素：basefont、font、center、u、big、strike、tt

Html5新增了 27 個(gè)元素，廢棄了 16 個(gè)元素，根據(jù)現(xiàn)有的標(biāo)準(zhǔn)規(guī)范，把 HTML5 的元素按優(yōu)先級(jí)定義為結(jié)構(gòu)性屬性、級(jí)塊性元素、行內(nèi)語(yǔ)義性元素和交互性元素 4 大類(lèi)。

6、如何區(qū)分HTML和HTML5？

DOCUMENT聲明方式是區(qū)分的重要元素。

Html聲明方式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd”>
Html5聲明方式：<!DOCTYPE html>

根據(jù)新增加的結(jié)構(gòu)、功能來(lái)區(qū)分。H5有好多新增語(yǔ)義化標(biāo)簽。

7、H5文件離線存儲(chǔ)怎么使用，工作原理是什么？

在線情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件，如果是第一次訪問(wèn)那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源，并進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問(wèn)過(guò)并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面。然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒(méi)有改變，就不會(huì)有任何操作，如果文件改變了，那么就會(huì)重新下載資源，并進(jìn)行離線緩存。

頁(yè)面頭部加入manifest屬性。如：<html manifest="demo.appcache">

在cache.manifest文件中編寫(xiě)離線存儲(chǔ)的資源。

8、Cookies,sessionStorage和localStorage的區(qū)別？

共同點(diǎn)：都是保存在瀏覽器端，而且都是同源的。

區(qū)別：

Cookies是為了標(biāo)識(shí)用戶身份而存儲(chǔ)在用戶本地的數(shù)據(jù)，始終在同源http請(qǐng)求中攜帶，在瀏覽器與服務(wù)器間來(lái)回傳遞，而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲(chǔ)大小差異。Cookie保存的數(shù)據(jù)很小，不能超過(guò)4k，而sessionStorage和localStorage保存數(shù)據(jù)大，可達(dá)到5M。
存儲(chǔ)有效期不同。Cookie在設(shè)置的cookie過(guò)期前始終有效，而sessionStorage僅在瀏覽器關(guān)閉之前有效，localStorage始終有效，與瀏覽器窗口沒(méi)關(guān)系。
作用域不同：cookie在所有同源窗口都是共享，sessionStorage不能在不同瀏覽器窗口上共享，localStorage在所有同源窗口都是共享的。

9、title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

title屬性沒(méi)有明確意義，只表示標(biāo)題，h1表示層次明確的標(biāo)題，對(duì)頁(yè)面信息抓取也有很大的影響。

strong標(biāo)明重點(diǎn)內(nèi)容，語(yǔ)氣加強(qiáng)含義，b表示無(wú)意義的視覺(jué)表示

em表示強(qiáng)調(diào)文本，i是斜體，是無(wú)意義的視覺(jué)表示

視覺(jué)樣式標(biāo)簽：b、u、i、s

語(yǔ)義樣式標(biāo)簽：strong、em、ins、del、code

10、viewport 所有屬性？

viewport是用戶網(wǎng)頁(yè)的可視區(qū)域，使用meta設(shè)置viewport時(shí)有很多屬性，分別對(duì)以下各個(gè)屬性介紹

width :設(shè)置layout viewport的寬度，為一個(gè)正整數(shù)，或字符串'device-width';
initial-scale:設(shè)置頁(yè)面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。
minimum-scale:允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。
maximum-scale:允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。
height:設(shè)置layout viewport的高度，這個(gè)屬性對(duì)我們并不重要，很少使用
user-scalable:是否允許用戶進(jìn)行縮放，值為‘no’或者‘yes’。
target-densitydpi:值可以為一個(gè)數(shù)值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個(gè)字符串中的一個(gè)

安卓中還支持：target-densitydpi，表示目標(biāo)設(shè)備的密度等級(jí)，作用是決定css中的1px 代表多少物理像素。

11、meta標(biāo)簽的name屬性值？

name屬性主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索機(jī)器人查找信息和分類(lèi)信息用的。

Meta標(biāo)簽的name屬性語(yǔ)法格式是：

Name主要有以下幾個(gè)參數(shù)：

Keywords（關(guān)鍵字）：關(guān)鍵字用來(lái)告訴搜索引擎你網(wǎng)頁(yè)的關(guān)鍵字是什么。
Description（網(wǎng)站內(nèi)容描述）：描述用來(lái)瀏覽器你的網(wǎng)頁(yè)主要內(nèi)容是什么。
Robots（機(jī)器人向?qū)В簉obots用來(lái)搜索機(jī)器人哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引。
Author（作者）：添加網(wǎng)頁(yè)作者信息。

Content的參數(shù)主要有name的參數(shù)來(lái)決定，如果是關(guān)鍵字的時(shí)候，多個(gè)關(guān)鍵字之間使用逗號(hào)隔開(kāi)，一般使用5個(gè)關(guān)鍵字為宜；如果是描述的時(shí)候，描述長(zhǎng)度一般控制在200字左右；如果是索引的時(shí)候，一般使用inde、noindex、none、all，默認(rèn)是all。

人在校生一枚，希望可以找到志同道合的小伙伴一起進(jìn)步，不定期的更新自己的收獲，如果有大神的話可以指出我的不足，我用的是VS code軟件來(lái)寫(xiě)代碼的

什么是 HTML

HTML 是個(gè)縮寫(xiě)，全稱(chēng)Hyper Text Markup Language，譯為超文本標(biāo)記語(yǔ)言。它是一種標(biāo)識(shí)性的語(yǔ)言。它包括一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說(shuō)明文字，圖形、動(dòng)畫(huà)、聲音、表格、鏈接等。

HTML的結(jié)構(gòu)

html的后綴名有兩種一種是.html，另一種是.htm （兩種并無(wú)區(qū)別）
快捷創(chuàng)建基本結(jié)構(gòu)的方法：方法一：可以在開(kāi)頭打一個(gè)“!”號(hào)，方法二：打一個(gè)html，智能提示會(huì)出現(xiàn)html:5 選中即可。

HTML的頭部

在<hard>頭部標(biāo)簽中你可以插入腳本（scripts）,樣式文件（CSS），以及各種meta信息。可以添加在頭部區(qū)域的元素有：<title>，<style>，<meta>，<link>等等

? <title>定義網(wǎng)頁(yè)標(biāo)題</title>
<meta>元素：描述了一些基本的元數(shù)據(jù)，元數(shù)據(jù)不顯示在頁(yè)面上，但會(huì)被瀏覽器解析，<meta>通常用于指定網(wǎng)頁(yè)的描述，關(guān)鍵詞，作者。

注釋快捷鍵：CTRL+? （注釋是不被運(yùn)行的，作用就是幫助程序員記東西）

 <!--這是一個(gè)注釋-->

HTML屬性

通用屬性：幾乎所有元素都可以使用的屬性，例如 id、name、style等
私有屬性：某個(gè)一個(gè)/類(lèi)元素所具備的屬性
事件屬性：為某個(gè)元素綁定事件（DOM學(xué)習(xí)）
自定義屬性：開(kāi)發(fā)者為某個(gè)元素設(shè)置的屬性，一般都是在前端框架中使用
參考介紹https://developer.mozilla.org/zh-CN/

HTML完整結(jié)構(gòu)

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
			<!--頭部，js和css寫(xiě)在這里面-->
 </head>
 <body>
       <!--內(nèi)容主體-->
 </body>
 </html>

可能我寫(xiě)的會(huì)有些不清楚，到后面有代碼的時(shí)候就會(huì)清楚了

.html5的新特性

文件類(lèi)型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。
新的解析順序：不再基于SGML。
繪畫(huà) canvas;
用于媒介回放的 video 和 audio 元素;
語(yǔ)意化更好的內(nèi)容元素:article、footer、header、nav、section;
表單控件:calendar、date、time、email、url、search;
input元素的新類(lèi)型：date, email, url等。
新的技術(shù): webworker, websocket, Geolocation;
新的屬性：ping（用于a與area）, charset（用于meta）, async（用于script）。
全域?qū)傩裕篿d, tabindex, repeat。
新的全域?qū)傩裕篶ontenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
新應(yīng)用程序接口:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
HTML Canvas/WebGL
HTML Audio/Video
移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，naframes；

2.什么是Retina 顯示屏，帶來(lái)了什么問(wèn)題？

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)，如在同樣帶下的屏幕上，蘋(píng)果設(shè)備的retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè)

在高清顯示屏中的位圖被放大，圖片會(huì)變得模糊，因此移動(dòng)端的視覺(jué)稿通常會(huì)設(shè)計(jì)為傳統(tǒng)PC的2倍
那么，前端的應(yīng)對(duì)方案是：
設(shè)計(jì)稿切出來(lái)的圖片長(zhǎng)寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來(lái)的1/2
//例如圖片寬高為：200px*200px，那么寫(xiě)法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來(lái)的1/2，例如視覺(jué)稿40px的字體，使用樣式的寫(xiě)法為20px

.css{font-size:20px}

3.ios系統(tǒng)中元素被觸摸時(shí)產(chǎn)生的半透明灰色遮罩怎么去掉？

ios用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設(shè)置為0.X就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0.X)}

4.部分android系統(tǒng)中元素被點(diǎn)擊時(shí)產(chǎn)生的邊框怎么去掉

android用戶點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果

 a,button,input,textarea{ 
                  -webkit-tap-highlight-color: rgba(0,0,0,0;) 
                  -webkit-user-modify:read-write-plaintext-only; 
            }

-webkit-user-modify有個(gè)副作用，就是輸入法不再能夠輸入多個(gè)字符
另外，有些機(jī)型去除不了，如小米2
對(duì)于按鈕類(lèi)還有個(gè)辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽

5.webkit表單元素的默認(rèn)外觀怎么重置

通用

.css{-webkit-appearance:none;}

偽元素改變number類(lèi)型input框的默認(rèn)樣式

input[type=number]::-webkit-textfield-decoration-container { 
    background-color: transparent;    
} 
input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
}                      
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
}

6.webkit表單輸入框placeholder的顏色值能改變么

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

7.禁止ios 長(zhǎng)按時(shí)不觸發(fā)系統(tǒng)的菜單，禁止ios&android長(zhǎng)按時(shí)下載圖片

.css{-webkit-touch-callout: none}

8.禁止ios和android用戶選中文字

.css{-webkit-user-select:none}

9.打電話發(fā)短信寫(xiě)郵件怎么實(shí)現(xiàn)

打電話：<a href="tel:0755-10086">打電話給:0755-10086</a>
發(fā)短信，winphone系統(tǒng)無(wú)效 <a href="sms:10086">發(fā)短信給: 10086</a>
寫(xiě)郵件：<a href=“mailto:peun@foxmail.com">peun@foxmail.com</a>

10.audio元素和video元素在ios和andriod中無(wú)法自動(dòng)播放

應(yīng)對(duì)方案：觸屏即播

$('html').one('touchstart',function(){
    audio.play()
})

11.閃屏怎么解決

通過(guò)transform的3d屬性改去硬件加速可以解決閃屏問(wèn)題
開(kāi)啟硬件加速
1）解決頁(yè)面閃白
2）保證動(dòng)畫(huà)流暢

.css { 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
}

12.取消input在ios下，輸入的時(shí)候英文首字母的默認(rèn)大寫(xiě)

<input autocapitalize="off" autocorrect="off" />

13.android 上去掉語(yǔ)音輸入按鈕

input::-webkit-input-speech-button {display: none}

14.設(shè)計(jì)高性能CSS3動(dòng)畫(huà)的幾個(gè)要素

盡可能地使用合成屬性transform和opacity來(lái)設(shè)計(jì)CSS3動(dòng)畫(huà)
不使用position的left和top來(lái)定位
利用translate3D開(kāi)啟GPU加速

15.fixed bug

ios下fixed元素容易定位出錯(cuò)，軟鍵盤(pán)彈出時(shí)，影響fixed元素定位
android下fixed表現(xiàn)要比iOS更好，軟鍵盤(pán)彈出時(shí)，不會(huì)影響fixed元素定位
ios4下不支持position:fixed
解決方案
可用isroll.js，暫無(wú)完美方案

16.移動(dòng)H5前端性能優(yōu)化指南

1）PC優(yōu)化手段在Mobile側(cè)同樣適用
2）在Mobile側(cè)我們提出三秒種渲染完成首屏指標(biāo)
3）基于第二點(diǎn)，首屏加載3秒完成或使用Loading
4）基于聯(lián)通3G網(wǎng)絡(luò)平均338KB/s(2.71Mb/s)，所以首屏資源不應(yīng)超過(guò)1014KB
5）Mobile側(cè)因手機(jī)配置原因，除加載外渲染速度也是優(yōu)化重點(diǎn)
6）基于第五點(diǎn)，要合理處理代碼減少渲染損耗
7）基于第二、第五點(diǎn)，所有影響首屏加載和渲染的代碼應(yīng)在處理邏輯中后置
8）加載完成后用戶交互使用時(shí)也需注意性能

優(yōu)化指南

[加載優(yōu)化]

加載過(guò)程是最為耗時(shí)的過(guò)程，可能會(huì)占到總耗時(shí)的80%時(shí)間，因此是優(yōu)化的重點(diǎn)

減少HTTP請(qǐng)求

因?yàn)槭謾C(jī)瀏覽器同時(shí)響應(yīng)請(qǐng)求為4個(gè)請(qǐng)求（Android支持4個(gè)，iOS 5后可支持6個(gè)），所以要盡量減少頁(yè)面的請(qǐng)求數(shù)，首次加載同時(shí)請(qǐng)求數(shù)不能超過(guò)4個(gè)
a) 合并CSS、JavaScript
b) 合并小圖片，使用雪碧圖

緩存

使用緩存可以減少向服務(wù)器的請(qǐng)求數(shù)，節(jié)省加載時(shí)間，所以所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存，并且盡量使用長(zhǎng)Cache（長(zhǎng)Cache資源的更新可使用時(shí)間戳）
a) 緩存一切可緩存的資源
b) 使用長(zhǎng)Cache（使用時(shí)間戳更新Cache）
c) 使用外聯(lián)式引用CSS、JavaScript

壓縮HTML、CSS、JavaScript

減少資源大小可以加快網(wǎng)頁(yè)顯示速度，所以要對(duì)HTML、CSS、JavaScript等進(jìn)行代碼壓縮，并在服務(wù)器端設(shè)置GZip
a) 壓縮（例如，多余的空格、換行符和縮進(jìn)）
b) 啟用GZip

無(wú)阻塞

寫(xiě)在HTML頭部的JavaScript（無(wú)異步），和寫(xiě)在HTML標(biāo)簽中的Style會(huì)阻塞頁(yè)面的渲染，因此CSS放在頁(yè)面頭部并使用Link方式引入，避免在HTML標(biāo)簽中寫(xiě)Style，JavaScript放在頁(yè)面尾
部或使用異步方式加載

使用首屏加載

首屏的快速顯示，可以大大提升用戶對(duì)頁(yè)面速度的感知，因此應(yīng)盡量針對(duì)首屏的快速顯示做優(yōu)化

按需加載

將不影響首屏的資源和當(dāng)前屏幕資源不用的資源放到用戶需要時(shí)才加載，可以大大提升重要資源的顯示速度和降低總體流量
PS：按需加載會(huì)導(dǎo)致大量重繪，影響渲染性能
a) LazyLoad
b) 滾屏加載
c) 通過(guò)Media Query加載

預(yù)加載

大型重資源頁(yè)面（如游戲）可使用增加Loading的方法，資源加載完成后再顯示頁(yè)面。但Loading時(shí)間過(guò)長(zhǎng)，會(huì)造成用戶流失
對(duì)用戶行為分析，可以在當(dāng)前頁(yè)加載下一頁(yè)資源，提升速度
a) 可感知Loading(如進(jìn)入空間游戲的Loading)
b) 不可感知的Loading（如提前加載下一頁(yè)）

壓縮圖片

圖片是最占流量的資源，因此盡量避免使用他，使用時(shí)選擇最合適的格式（實(shí)現(xiàn)需求的前提下，以大小判斷），合適的大小，然后使用智圖壓縮，同時(shí)在代碼中用Srcset來(lái)按需顯示
PS：過(guò)度壓縮圖片大小影響圖片顯示效果
a) 使用智圖（ http://zhitu.isux.us/ ）
b) 使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 選擇合適的圖片(1. webP優(yōu)于JPG 2. PNG8優(yōu)于GIF)
e) 選擇合適的大小（1. 首次加載不大于1014KB 2. 不寬于640（基于手機(jī)屏幕一般寬度））

減少Cookie

Cookie會(huì)影響加載速度，所以靜態(tài)資源域名不使用Cookie

避免重定向

重定向會(huì)影響加載速度，所以在服務(wù)器正確設(shè)置避免重定向

異步加載第三方資源

第三方資源不可控會(huì)影響頁(yè)面的加載和顯示，因此要異步加載第三方資源

[腳本執(zhí)行優(yōu)化]

處理不當(dāng)會(huì)阻塞頁(yè)面加載、渲染，因此在使用時(shí)需當(dāng)注意
CSS寫(xiě)在頭部，JavaScript寫(xiě)在尾部或異步
避免圖片和iFrame等的空Src
空Src會(huì)重新加載當(dāng)前頁(yè)面，影響速度和效率

盡量避免重設(shè)圖片大小

重設(shè)圖片大小是指在頁(yè)面、CSS、JavaScript等中多次重置圖片大小，多次重設(shè)圖片大小會(huì)引發(fā)圖片的多次重繪，影響性能

圖片盡量避免使用DataURL

DataURL圖片沒(méi)有使用圖片的壓縮算法文件會(huì)變大，并且要解碼后再渲染，加載慢耗時(shí)長(zhǎng)

[CSS優(yōu)化]

* 盡量避免寫(xiě)在HTML標(biāo)簽中寫(xiě)Style屬性
* 避免CSS表達(dá)式
CSS表達(dá)式的執(zhí)行需跳出CSS樹(shù)的渲染，因此請(qǐng)避免CSS表達(dá)式
* 移除空的CSS規(guī)則
空的CSS規(guī)則增加了CSS文件的大小，且影響CSS樹(shù)的執(zhí)行，所以需移除空的CSS規(guī)則
* 正確使用Display的屬性
Display屬性會(huì)影響頁(yè)面的渲染，因此請(qǐng)合理使用
a) display:inline后不應(yīng)該再使用width、height、margin、padding以及float
b) display:inline-block后不應(yīng)該再使用float
c) display:block后不應(yīng)該再使用vertical-align
d) display:table-*后不應(yīng)該再使用margin或者float
* 不濫用Float
Float在渲染時(shí)計(jì)算量比較大，盡量減少使用
* 不濫用Web字體
Web字體需要下載，解析，重繪當(dāng)前頁(yè)面，盡量減少使用
* 不聲明過(guò)多的Font-size
過(guò)多的Font-size引發(fā)CSS樹(shù)的效率
* 值為0時(shí)不需要任何單位
為了瀏覽器的兼容性和性能，值為0時(shí)不要帶單位
* 標(biāo)準(zhǔn)化各種瀏覽器前綴
a) 無(wú)前綴應(yīng)放在最后
b) CSS動(dòng)畫(huà)只用（-webkit- 無(wú)前綴）兩種即可
c) 其它前綴為 -webkit- -moz- -ms- 無(wú)前綴四種，（-o-Opera瀏覽器改用blink內(nèi)核，所以淘汰）
* 避免讓選擇符看起來(lái)像正則表達(dá)式高級(jí)選擇器執(zhí)行耗時(shí)長(zhǎng)且不易讀懂，避免使用

[JavaScript執(zhí)行優(yōu)化]

* 減少重繪和回流
a) 避免不必要的Dom操作
b) 盡量改變Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 減少drawImage
* 緩存Dom選擇與計(jì)算
每次Dom選擇都要計(jì)算，緩存他
* 緩存列表.length
每次.length都要計(jì)算，用一個(gè)變量保存這個(gè)值
* 盡量使用事件代理，避免批量綁定事件
* 盡量使用ID選擇器
ID選擇器是最快的
* TOUCH事件優(yōu)化
使用touchstart、touchend代替click，因快影響速度快。但應(yīng)注意Touch響應(yīng)過(guò)快，易引發(fā)誤操作

[渲染優(yōu)化]

* HTML使用Viewport
Viewport可以加速頁(yè)面的渲染，請(qǐng)使用以下代碼
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
* 減少Dom節(jié)點(diǎn)
Dom節(jié)點(diǎn)太多影響頁(yè)面的渲染，應(yīng)盡量減少Dom節(jié)點(diǎn)
* 動(dòng)畫(huà)優(yōu)化
a) 盡量使用CSS3動(dòng)畫(huà)
b) 合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeout
c) 適當(dāng)使用Canvas動(dòng)畫(huà) 5個(gè)元素以內(nèi)使用css動(dòng)畫(huà)，5個(gè)以上使用Canvas動(dòng)畫(huà)（iOS8可使用webGL）

* 高頻事件優(yōu)化
Touchmove、Scroll 事件可導(dǎo)致多次渲染
a) 使用requestAnimationFrame監(jiān)聽(tīng)?zhēng)兓沟迷谡_的時(shí)間進(jìn)行渲染
b) 增加響應(yīng)變化的時(shí)間間隔，減少重繪次數(shù)

* GPU加速
CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來(lái)觸發(fā)GPU渲染，請(qǐng)合理使用（PS：過(guò)渡使用會(huì)引發(fā)手機(jī)過(guò)耗電增加）

17.CSS動(dòng)畫(huà)與Canvas動(dòng)畫(huà)性能優(yōu)劣分析

a、CSS動(dòng)畫(huà)更為流暢、但內(nèi)存占用過(guò)高，動(dòng)畫(huà)元素在5個(gè)以內(nèi)更為推薦；
b、Canvas動(dòng)畫(huà)存在丟幀現(xiàn)象，這一現(xiàn)象在android中低端手機(jī)中表現(xiàn)更為明顯；
c、5個(gè)以內(nèi)動(dòng)畫(huà)元素，選用CSS動(dòng)畫(huà)，80%的設(shè)備幀頻可達(dá)80以上。

18.移動(dòng)端怎么自適應(yīng)？

移動(dòng)自適應(yīng)的話一般我用的話就是rem，通過(guò)rem單位配合媒體查詢來(lái)完成幾個(gè)屏幕的適配，以iphone6位標(biāo)準(zhǔn)，向上適配plus，向下適配5，不做過(guò)多的適配，有時(shí)候有要求的話也用js來(lái)控制rem的大小達(dá)到適配效果，rem是相對(duì)單位，相對(duì)html元素的font-size值的屬性，比如font-size:100px; 的話1rem就得100px，這樣我子需要通過(guò)改變html的font-size就可以達(dá)到適配效果

19.如何開(kāi)啟gpu加速？

為動(dòng)畫(huà)DOM元素添加CSS3樣式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，這兩個(gè)屬性都會(huì)開(kāi)啟GPU硬件加速模式，從而讓瀏覽器在渲染動(dòng)畫(huà)時(shí)從CPU轉(zhuǎn)向GPU

通過(guò)-webkit-transform:transition3d/translateZ開(kāi)啟GPU硬件加速之后，有些時(shí)候可能會(huì)導(dǎo)致瀏覽器頻繁閃爍或抖動(dòng)，可以嘗試以下辦法解決之：
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

通過(guò)-webkit-transform:transition3d/translateZ開(kāi)啟GPU硬件加速的適用范圍：
使用很多大尺寸圖片(尤其是PNG24圖)進(jìn)行動(dòng)畫(huà)的頁(yè)面。
頁(yè)面有很多大尺寸圖片并且進(jìn)行了css縮放處理，頁(yè)面可以滾動(dòng)時(shí)。
使用background-size:cover設(shè)置大尺寸背景圖，并且頁(yè)面可以滾動(dòng)時(shí)
編寫(xiě)大量DOM元素進(jìn)行CSS3動(dòng)畫(huà)時(shí)(transition/transform/keyframes/absTop&Left)
使用很多PNG圖片拼接成CSS Sprite時(shí)

20.物理1像素怎么實(shí)現(xiàn)

可以使用after插入的形式將寬度設(shè)置為200%，然后通過(guò)css transfrom 的scale 縮放0.5倍；

21.響應(yīng)式布局的原理

Meta標(biāo)簽定義

使用 viewport meta 標(biāo)簽在手機(jī)瀏覽器上控制布局

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

通過(guò)快捷方式打開(kāi)時(shí)全屏顯示

<meta name="apple-mobile-web-app-capable" content="yes" />

隱藏狀態(tài)欄

常用于布局的CSS Media Queries有以下幾種：

設(shè)備類(lèi)型(media type):

all所有設(shè)備；
screen 電腦顯示器；
print打印用紙或打印預(yù)覽視圖；
handheld便攜設(shè)備；
tv電視機(jī)類(lèi)型的設(shè)備；
speech語(yǔ)意和音頻盒成器；
braille盲人用點(diǎn)字法觸覺(jué)回饋設(shè)備；
embossed盲文打印機(jī)；
projection各種投影設(shè)備；
tty使用固定密度字母柵格的媒介，比如電傳打字機(jī)和終端。

設(shè)備特性(media feature):

width瀏覽器寬度；
height瀏覽器高度；
device-width設(shè)備屏幕分辨率的寬度值；
device-height設(shè)備屏幕分辨率的高度值；
orientation瀏覽器窗口的方向縱向還是橫向，當(dāng)窗口的高度值大于等于寬度時(shí)該特性值為portrait，否則為landscape；
aspect-ratio比例值，瀏覽器的縱橫比；
device-aspect-ratio比例值，屏幕的縱橫比。

設(shè)置多種視圖寬度

@media only screen and (min-width:768px)and(max-width:1024px){}
@media only screen and (width:320px)and (width:768px){}

百分比布局

寬度不固定，可以使用百分比

#head{width:100%;}
#content{width:50%;}

響應(yīng)式圖片

#wrap img{
  max-width:100%;
  height:auto;
}

字體設(shè)置

一個(gè)響應(yīng)式的字體應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣才能適應(yīng)客戶端屏幕。css3引入了新的單位叫做rem,和em類(lèi)似但對(duì)于Html元素，rem更方便使用。em是相對(duì)于根元素的，需重置根元素字體大小：

html{font-size:100%;}

完成后，可以定義響應(yīng)式字體：

@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:2rem;}}

22.常見(jiàn)dpr

ip6 2、ip6+ 3、nexus5 3

23.移動(dòng)端適配

1) 自適應(yīng)方式
2) viewport方式
3) rem方式
4) scale()方式縮放

24.常用meta

IE相關(guān)

避免IE使用兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
為不支持viewport的IE Mobile設(shè)定寬度 <meta name="MobileOptimized" content="320" />
是否對(duì)手持設(shè)備友好 <meta name="HandheldFriendly" content="true" />

UC瀏覽器

強(qiáng)制豎屏 <meta name="screen-orientation" content="portrait" />
強(qiáng)制全屏 <meta name="full-screen" content="yes" />
應(yīng)用模式 <meta name="browsermode" content="application" />

X5瀏覽器

強(qiáng)制豎屏 <meta name="x5-orientation" content="portrait" />
強(qiáng)制全屏 <meta name="x5-fullscreen" content="yes" />
應(yīng)用模式 <meta name="x5-page-mode" content="app" />

360

開(kāi)啟極速模式 <meta name="renderer" content="webkit" />

iphone相關(guān)

啟動(dòng)webapp功能刪除工具欄和菜單欄 <meta name="apple-mobile-web-app-capable" content="yes">
控制狀態(tài)欄顏色 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
開(kāi)啟號(hào)碼或郵箱檢測(cè) <meta name="format-detection" content="telephone=no" />
添加主屏幕icon <link rel="apple-touch-icon" href="touch-icon-iphone.png”>

25.html5的新api

重力感應(yīng) DeviceOrientation
手機(jī)加速傳感器 DeviceMotion

history 詳細(xì)

以Pjax方式實(shí)現(xiàn)SPA history.pushState history.replaceState 解決ajax不能后退前進(jìn)問(wèn)題
儲(chǔ)存
客戶端儲(chǔ)存：localStorage sessionStorage>只存在一個(gè)會(huì)話周期內(nèi)
跨域
postMessage

26.你們?cè)趺辞短議5頁(yè)面的

一般都是我前端這邊開(kāi)發(fā)好h5頁(yè)面給安卓和ios一個(gè)地址，然后告訴他們我有哪些方法，然后在做一些安卓ios的接口調(diào)用，安卓和ios會(huì)吧他們的方法提供一個(gè)接口給我，我直接調(diào)用就好，一般都是調(diào)用一些分享，跳轉(zhuǎn)之類(lèi)的方法

27.webapp你主要做的是哪個(gè)模塊，是頁(yè)面布局做的多還是交互做的多

webapp部分基本都是我自己負(fù)責(zé)開(kāi)發(fā)，頁(yè)面交互都做，因?yàn)楫?dāng)時(shí)剛?cè)ス镜臅r(shí)候公司也剛往這個(gè)方向發(fā)展，讓我也一直就負(fù)責(zé)移動(dòng)業(yè)務(wù)這塊的內(nèi)容

28.bootstrap用嗎？

用，bootstrap組要就是用一些他的樣式組件，還有最強(qiáng)大的就是他的刪格化系統(tǒng)了，做響應(yīng)式的網(wǎng)站，我們公司的官網(wǎng)就是用的bootstrap做的，后臺(tái)管理系統(tǒng)也是，當(dāng)時(shí)也是我負(fù)責(zé)給我們公司的后臺(tái)分享如何使用bootstrap的

在線咨詢

上一篇：一個(gè)功能強(qiáng)大，符合國(guó)內(nèi)視頻播放業(yè)務(wù)的 web 視頻播放組件
下一篇：僅需 5 步，用 JavaScript 直接通過(guò)前端發(fā)送電子郵件

您的項(xiàng)目需求

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

整合營(yíng)銷(xiāo)服務(wù)商