整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
瘋狂 HTML 5 CSS 3 JavaScript講義(第2版)》由知名IT作家李剛老師創(chuàng)作，本書(shū)的中文繁體字版授權(quán)到中國(guó)臺(tái)灣地區(qū)，全書(shū)面向HTML 5.1規(guī)范正式版，更新多個(gè)元素、拖放規(guī)范的相關(guān)知識(shí)，新增外掛字幕、點(diǎn)線模式等內(nèi)容，著重介紹新增的手機(jī)端相關(guān)特性，詳細(xì)介紹漸變背景支持、彈性盒布局、手機(jī)瀏覽器響應(yīng)式布局、3D變換等CSS新增特性及重大改進(jìn)。
內(nèi)容簡(jiǎn)介：
W3C于2016年11月1日正式發(fā)布了HTML 5.1規(guī)范，該規(guī)范已經(jīng)得到廣大瀏覽器廠商的支持，主流的*版本的瀏覽器幾乎都支持該規(guī)范。與此同時(shí)，前端開(kāi)發(fā)的持續(xù)火爆，使得HTML 5成為目前的熱門(mén)領(lǐng)域。本書(shū)是一本全面介紹HTML 5、CSS 3和JavaScript前端開(kāi)發(fā)技術(shù)的圖書(shū)，系統(tǒng)地介紹了HTML 5常用的元素和屬性、HTML 5的表單元素和屬性、HTML 5的繪圖支持、HTML 5的多媒體支持、CSS 3的功能和用法、*前沿的變形與動(dòng)畫(huà)功能等。除此之外，本書(shū)還系統(tǒng)地介紹了JavaScript編程知識(shí)，包括JavaScript基本語(yǔ)法、DOM編程，以及HTML 5新增的本地存儲(chǔ)、Indexed數(shù)據(jù)庫(kù)、離線應(yīng)用、JavaScript多線程、客戶(hù)端通信支持、WebSocket編程等。本書(shū)的定位是一本前端開(kāi)發(fā)的“實(shí)戰(zhàn)性”圖書(shū)，因此在介紹各知識(shí)點(diǎn)時(shí)并不是簡(jiǎn)單地停留在知識(shí)點(diǎn)層面闡述，而是結(jié)合了大量實(shí)例來(lái)讓讀者對(duì)照練習(xí)、學(xué)以致用。本書(shū)*后還提供了一個(gè)基于HTML 5技術(shù)的小游戲：瘋狂俄羅斯方塊。該游戲綜合運(yùn)用了HTML 5的繪圖支持、客戶(hù)端存儲(chǔ)等技術(shù)，具有較高的參考價(jià)值。
作者簡(jiǎn)介：
李剛，十余年軟件開(kāi)發(fā)從業(yè)經(jīng)驗(yàn)，瘋狂軟件教育中心教學(xué)總監(jiān)。瘋狂Java實(shí)訓(xùn)營(yíng)創(chuàng)始人，瘋狂Java體系原創(chuàng)圖書(shū)作者。廣東技術(shù)師范學(xué)院計(jì)算機(jī)科學(xué)系兼職副教授，51CTO專(zhuān)家門(mén)診特邀嘉賓。培訓(xùn)的學(xué)生已在華為、IBM、阿里軟件、網(wǎng)易、電信盈科等名企就職。國(guó)內(nèi)知名高端IT技術(shù)圖書(shū)作家，已出版《瘋狂Java講義》《瘋狂Android講義》《輕量級(jí)JavaEE企業(yè)應(yīng)用實(shí)戰(zhàn)》《瘋狂iOS講義(基礎(chǔ)篇)(提高篇)》《瘋狂前端開(kāi)發(fā)講義》《瘋狂HTML5/CSS3/JavaScript講義》《瘋狂XML講義》《經(jīng)典JavaEE企業(yè)應(yīng)用實(shí)戰(zhàn)》《Struts2。x專(zhuān)業(yè)指南》等著作。其中瘋狂Java體系圖書(shū)均已沉淀多年，贏得極高的市場(chǎng)認(rèn)同，多次重印，多部著作印刷數(shù)量超過(guò)10萬(wàn)冊(cè)，并被多所“985”“211”院校選作教材，部分圖書(shū)已被翻譯成繁體中文版，授權(quán)到中國(guó)臺(tái)灣地區(qū)。
如果對(duì)這本書(shū)感興趣，可以私信回復(fù)“瘋狂H5講義”領(lǐng)取。
者按：今天騰訊的同學(xué)從一款HTML5小游戲《植物大戰(zhàn)僵尸》說(shuō)起，分享一些動(dòng)畫(huà)實(shí)現(xiàn)的知識(shí)（動(dòng)畫(huà)可控性、如何兼容不同分辨率、如何識(shí)別平板手機(jī)等），附上眾多實(shí)現(xiàn)小技巧，來(lái)收 >>>
hello~大家好，我是黑米！ Ｏ(≧▽≦)Ｏ
今天我來(lái)跟大家分享一些動(dòng)畫(huà)實(shí)現(xiàn)的相關(guān)知識(shí)，希望大家能夠支持（鞠躬……
我很喜歡很喜歡看動(dòng)畫(huà)片，一直有做出好看動(dòng)畫(huà)片的夢(mèng)想……所以最近做了不少動(dòng)畫(huà)效果來(lái)玩兒，也為自己以后可以做出偉大的動(dòng)畫(huà)片打好基礎(chǔ)！
Web端動(dòng)畫(huà)表現(xiàn)有不少辦法，我列一些常見(jiàn)的，然后再說(shuō)說(shuō)在實(shí)現(xiàn)上的一些小技巧。
進(jìn)入正題，我要開(kāi)始認(rèn)真了！（嚴(yán)肅臉…… (￣ー￣〃)
嗯……首先大家先來(lái)跟我一起玩?zhèn)€游戲，請(qǐng)快速的掏出手機(jī)，打開(kāi)微信，“掃一掃”下面的二維碼，通關(guān)最多的前三名同學(xué)……什么獎(jiǎng)品都沒(méi)有！！
相信大家都認(rèn)真的玩兒了游戲吧？我們這里有一位萬(wàn)技師一直玩到50多關(guān)，最后體力透支，主動(dòng)“自殺”，否則相信他能玩出過(guò)百關(guān)，怎么做到的？有彩蛋，不知道你有沒(méi)有發(fā)現(xiàn)，哈哈……
嗯……回歸正題，這個(gè)小游戲當(dāng)中用到了大量的動(dòng)畫(huà)效果，主要是逐幀動(dòng)畫(huà)，今天的第一部分，就先來(lái)講講動(dòng)畫(huà)這個(gè)事情。
我先來(lái)列一排動(dòng)畫(huà)效果給大家看……
圖1
圖2
圖3
剛才上面列的動(dòng)畫(huà)效果分別是 GIF 動(dòng)畫(huà)、Canvas + CSS 動(dòng)畫(huà)、逐幀動(dòng)畫(huà)。其實(shí)說(shuō)起常見(jiàn)的動(dòng)畫(huà)實(shí)現(xiàn)，除了 GIF（APNG）、Flash 和 Canvas 外，其他基本都是 CSS 動(dòng)畫(huà)，即使是通過(guò) JS 實(shí)現(xiàn)，大部分情況下只是通過(guò) JS 來(lái)修改 CSS 屬性而已。
而 GIF 動(dòng)畫(huà)僅支持 8 位色，顏色偏少，雖然 APNG 解決了這個(gè)問(wèn)題，但是存在兼容問(wèn)題，同時(shí)它和 GIF 一樣，沒(méi)有可控性，所以它們一般很少用于動(dòng)畫(huà)制作流程中，僅用來(lái)展示。相對(duì)來(lái)說(shuō) CSS 動(dòng)畫(huà)和 Canvas 動(dòng)畫(huà)的可控性更易于制作頁(yè)面效果動(dòng)畫(huà)以及頁(yè)面游戲。
一、可控性
剛才說(shuō)了“可控性”，那到底什么是可控性？我們先來(lái)看一個(gè)動(dòng)畫(huà)效果的大概示意圖！
一段動(dòng)畫(huà)一般由“開(kāi)始 – 過(guò)渡 – 結(jié)束”來(lái)組成，GIF 動(dòng)畫(huà)是無(wú)法通過(guò)代碼來(lái)獲取到這些狀態(tài)的，但 CSS 動(dòng)畫(huà)可以！
我這里的做法是把每一組圖片合成一張“雪碧圖”，然后利用 CSS 的 animation 做逐幀動(dòng)畫(huà)，寫(xiě)好函數(shù)通過(guò)不同的參數(shù)來(lái)調(diào)用不同的角色。
Role（dirt）
Role（rises）
Role（cast）
Role（broken）
Role（death）
合成“雪碧圖”的逐幀動(dòng)畫(huà)
像上面 圖2 和 圖3 的例子，都是由好幾個(gè)動(dòng)畫(huà)銜接完成，那么它們之間如何銜接呢？有的同學(xué)可能會(huì)說(shuō)用setTimeout/setInterval/requestAnimationFrame 一類(lèi)的延遲功能來(lái)做銜接，但是這樣會(huì)有個(gè)問(wèn)題就是在性能不同的機(jī)器上，會(huì)有誤差，而且維護(hù)繁瑣。所以，我們需要一個(gè)觸發(fā)形式的銜接方式，即上一個(gè)動(dòng)畫(huà)完成了，通知下一個(gè)動(dòng)畫(huà)開(kāi)始。
CSS 動(dòng)畫(huà)實(shí)現(xiàn)一般使用 animation 和 transition 來(lái)搭配其他屬性使元素產(chǎn)生不同變化，從而達(dá)到動(dòng)畫(huà)效果。
而這兩個(gè)屬性是可以通過(guò) JS 中的事件來(lái)監(jiān)聽(tīng)到“開(kāi)始”和“結(jié)束”狀態(tài)。具體事件如下：
animationstart：
animationstart 事件在 CSS animation 開(kāi)始時(shí)被觸發(fā)。如果有 animation-delay ，事件將在延遲時(shí)效過(guò)期之后立即觸發(fā)。 如果延遲時(shí)效是負(fù)值，事件觸發(fā)時(shí)將帶有等于延遲時(shí)效絕對(duì)值的 elapsedTime 。
animationend：
animationstart 事件在 CSS animation 完成時(shí)被觸發(fā)。
transionstart：
transionstart 事件在 CSS transition 過(guò)渡開(kāi)始時(shí)被觸發(fā)。
transitionend：
transitionend 事件會(huì)在 CSS transition 結(jié)束后觸發(fā)。當(dāng) transition 完成前移除 transition 時(shí)，比如移除 CSS 的 transition-property 屬性，事件將不會(huì)被觸發(fā)。
這些事件在不同瀏覽器下需要加前綴什么的大家應(yīng)該都懂得，至于 transionstart，目前僅在 IE10+ 上有效……
通過(guò)事件監(jiān)聽(tīng)的方式銜接，并利用分層的形式疊加多重動(dòng)畫(huà)，最終實(shí)現(xiàn)效果：
現(xiàn)在，開(kāi)始狀態(tài)和結(jié)束狀態(tài)獲取到了，那中間的過(guò)渡狀態(tài)要怎么辦呢？比如說(shuō)我要?jiǎng)赢?huà)執(zhí)行到 30% 的時(shí)候，執(zhí)行一個(gè)回調(diào)，親一口姐姐，腫么辦？?(?ε??)
雖然沒(méi)有直接的事件可以監(jiān)聽(tīng)到過(guò)渡狀態(tài)，而且這個(gè)需求中也暫時(shí)用不到這個(gè)過(guò)渡狀態(tài)監(jiān)聽(tīng)，但是我們也可以稍微做點(diǎn)事情的。（不拋棄，不放棄！）
怎么做呢？比如一個(gè)動(dòng)畫(huà)的執(zhí)行時(shí)間是10s，那么在動(dòng)畫(huà)開(kāi)始的時(shí)候，跑一個(gè) setInterval 來(lái)不斷的記錄過(guò)渡狀態(tài)，然后用當(dāng)前跑到的值和總時(shí)長(zhǎng)就能算出具體的進(jìn)度了。這里要稍微注意一下，因?yàn)閯?dòng)畫(huà)播放控制（animation-play-state）屬性的存在，在暫停和重新播放時(shí)，需要對(duì)計(jì)時(shí)器稍微進(jìn)行一下處理，否則得出的進(jìn)度值會(huì)有錯(cuò)誤。
這不是一個(gè)很完美的辦法，因?yàn)樵诓煌男阅芟拢?jì)時(shí)器的值可能會(huì)有微弱誤差，但如果你要求并不是很精確，還是可以嘗試這個(gè)辦法的。
二、如何 Perfect 的兼容各分辨率？
兼容各式屏幕一般有這樣的辦法：
還有這樣的辦法：
最后，還有傳說(shuō)中的彈性自適應(yīng)布局：∑(O_O；)
但是，在這個(gè)需求上，統(tǒng)統(tǒng)不適用！為什么？
viewport 和 media Query 在 iOS 和 Android 上識(shí)別的單位不同，在 iOS 上識(shí)別的是“設(shè)備像素”，而在 Android 上識(shí)別的是“CSS像素”，這兩個(gè)詞后面會(huì)講到。
因?yàn)檫@個(gè)頁(yè)面游戲上有大量的元素用到絕對(duì)定位，如果使用彈性自適應(yīng)布局的話，會(huì)進(jìn)行大量的布局計(jì)算，而且還不一定精準(zhǔn)。
所以，這里的解決辦法是通過(guò) discrimina.appVersion 獲取 UA 信息中的關(guān)鍵字來(lái)判斷不同的系統(tǒng)，針對(duì)不同的系統(tǒng)做不同的解決方案，Android 對(duì)最外層 div 進(jìn)行 zoom 縮放，而 iOS 使用 viewport 縮放：
三、如何 Perfect 的識(shí)別平板和手機(jī)？
各設(shè)備上的布局問(wèn)題解決了，但是如果設(shè)備屏幕比較大，你的圖片是糊的，怎么辦？
也許有的同學(xué)會(huì)舉手說(shuō)去檢測(cè) CSS 分辨率，但是這里就有問(wèn)題了……有的老舊平板可能屏幕尺寸大，但 CSS 分辨率小；而有的新手機(jī)屏幕尺寸不如平板，但是 CSS 分辨率挺高，咋辦？
回歸現(xiàn)實(shí)，我們分辨平板和手機(jī)是以什么來(lái)分辨的？屏幕尺寸，對(duì)吧？那么我們這里也同樣，只要想辦法計(jì)算出訪問(wèn)者的屏幕尺寸即可，就是平常我們說(shuō)的幾寸屏…幾寸屏的那個(gè)尺寸。
怎么獲取那個(gè)尺寸呢？我們這里先來(lái)學(xué)習(xí)一些專(zhuān)業(yè)術(shù)語(yǔ)……
標(biāo)紅的“屏幕尺寸”是我們的目標(biāo)，綠色的元素是我們后續(xù)會(huì)用到的東西，其中我們可以直接通過(guò) JS 獲取到的只有最后兩項(xiàng)，即“設(shè)備像素”和“設(shè)備像素比”。
然后我們來(lái)看看“屏幕尺寸”的計(jì)算公示：
屏幕尺寸 = 屏幕對(duì)角線的CSS像素值/（設(shè)備像素比*PPI） = (√長(zhǎng)2+寬2)/（設(shè)備像素比*PPI）
屏幕是矩形，矩形對(duì)角線的計(jì)算公示就是上方右側(cè)那個(gè)公示；現(xiàn)在我們來(lái)看一下這個(gè)公示中用到的元素如何獲得……
現(xiàn)在，萬(wàn)事俱備，就差 PPI，這東西雖然沒(méi)有直接獲取方式，但是我查了一下資料，還是得到了一些數(shù)據(jù)。
注意，這里給的是基準(zhǔn)值，我們常說(shuō)的 iPhone 多少多少 PPI，那個(gè)值是用基準(zhǔn)值乘以設(shè)備像素比得出來(lái)的。由于 Android 手機(jī)廠商眾多，并沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)，這里的 160 只是約等值，所以 Android 屏幕尺寸結(jié)果會(huì)有誤差，但是基本也夠用了。
現(xiàn)在公式中的所有要素都已經(jīng)齊備了，具體在代碼中實(shí)現(xiàn)，就是下面這樣子：
得出的值，單位是“英寸”，我們根據(jù)這個(gè)值就可以考慮針對(duì)平板和手機(jī)等不同屏幕尺寸做不同的事情了，比如最基本的，換一套高清圖……
四、音頻之殤 (T^T)
這個(gè)小游戲中一共用到3類(lèi)音頻，共6個(gè)音頻，且存在同時(shí)播放問(wèn)題，iOS 下沒(méi)問(wèn)題，但是 Android 下會(huì)出現(xiàn)后播放的音頻打斷之前播放音頻的問(wèn)題。
我測(cè)試了一些設(shè)備，發(fā)現(xiàn)無(wú)跡可尋，有的老設(shè)備支持，新設(shè)備反而不支持。我的解決辦法是 Android 用戶(hù)僅播放關(guān)鍵音頻，比如這個(gè)游戲當(dāng)中就是背景音樂(lè)，其他的就不放了。因?yàn)闆](méi)辦法判斷設(shè)備到底是否支持多音頻同時(shí)播放……
五、形變+位移+旋轉(zhuǎn)=？
剛才講了“活捉兵馬俑”那個(gè)游戲的一些經(jīng)驗(yàn)技巧，現(xiàn)在講講幾個(gè) CSS 小屬性搭配起來(lái)可以做的東西。
不可否認(rèn)，做動(dòng)畫(huà) Flash 是走在前面的，它的很多表現(xiàn)形式都值得我們借鑒，比如說(shuō)這位豌豆射手。
這個(gè)豌豆的需求是一個(gè)雙屏互動(dòng)需求，PC 端使用 Flash 實(shí)現(xiàn)，移動(dòng)端沒(méi)辦法用 Flash，所以動(dòng)態(tài)效果我就照著臨摹了下來(lái)。
具體做法是把豌豆拆成不同的小組件，然后再利用 animation、translate、scale、rotate，拼合出一個(gè)完整的動(dòng)態(tài)效果，并沒(méi)有多少技術(shù)含量，但幾種屬性的搭配使用，讓這顆豌豆看起來(lái)還是挺贊的！
等于
所以，很多屬性稍微搭配一下，其實(shí)就可以做出很好玩的東西。哈哈……
六、其他一些小細(xì)節(jié)……
看了這么久的文章，你可能也累了，下面一些小細(xì)節(jié)快速過(guò)一下……
1）不要放棄 PC 訪問(wèn)的用戶(hù)，如果沒(méi)有很好的引導(dǎo)，他們會(huì)直接關(guān)閉網(wǎng)頁(yè)的。
2）如果是橫屏沒(méi)法用的頁(yè)面，給予良好的橫屏提示。
3）為用戶(hù)添加桌面圖標(biāo)，方便用戶(hù)啟動(dòng)頁(yè)面。
好的，今天的分享基本就這樣告一段落，欲知后事兒如何，請(qǐng)聽(tīng)下回分解！
原文地址：tgideas
優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)公眾微信號(hào)：youshege碎片時(shí)間學(xué)習(xí)利器！
eb前端開(kāi)發(fā)面試題,前端面體及答案2020
(1) 響應(yīng)式布局 (2) 100%布局（彈性布局） (3) 等比縮放布局（rem)
(1) 將前端輸出數(shù)據(jù)都進(jìn)行轉(zhuǎn)義 (2) 將輸出的字符串中的\反斜杠進(jìn)行轉(zhuǎn)義 (3) 從url中獲取的信息，防治方法是由后端獲取，在前端轉(zhuǎn)義后再行輸出 (4) 使用cookie的HttpOnly屬性，保護(hù)好cookie
增強(qiáng)WebView ： 原生WebView基本是PC平臺(tái)瀏覽器內(nèi)核的移植，但對(duì)于移動(dòng)場(chǎng)景并不完全適合，各種硬件API得不到HTML5原生支持。因此對(duì)于WebView的種種Hack、增強(qiáng)應(yīng)運(yùn)而生，甚至出現(xiàn)了基于增強(qiáng)WebView提供第三方服務(wù)的。
路由： 應(yīng)用內(nèi)跳轉(zhuǎn)由于加入了 WebView而變得復(fù)雜起來(lái)，同時(shí)由于組件化、模塊化帶來(lái)的問(wèn) 題，路由也成為人們討論的重點(diǎn)。
緩存： 移動(dòng)網(wǎng)絡(luò)條件差，為了用戶(hù)體驗(yàn)，必須要做資源緩存和預(yù)加載。
通信： 即HTML5和Native之間的通信。利用系統(tǒng)提供的橋接API可以實(shí)現(xiàn)，不過(guò)在應(yīng)用上還 有著一些坑點(diǎn)和安全問(wèn)題。
IIO 密集而非計(jì)算密集的情景；高并發(fā)微數(shù)據(jù)（比如賬號(hào)系統(tǒng)）的情景。特別是高并發(fā)，Node.js 的性能隨并發(fā)數(shù)量的提高而衰減的現(xiàn)象相比其他 server 都有很明顯的優(yōu)勢(shì)。
Bad Use Cases 1．CPU heavy apps （高CPU消耗的app） 2．Simple CRUD / HTML apps （簡(jiǎn)單的CRUD / HTML apps） 3．NoSQL + Node.js + Buzzword Bullshit （NoSQL + Node.js + 各種時(shí)髦詞匯）
Good Use Cases 1．JSON API 2．Single page apps （單頁(yè)面app） 3．Shelling out to unix tools （對(duì)unix工具的腳本化調(diào)用） 4．Streaming data （流數(shù)據(jù)） 5．Soft Realtime Applications （軟件實(shí)時(shí)程序）
以上就是酷仔今天整理提供的Web前端開(kāi)發(fā)面試題，希望為Web前端同學(xué)提供了有用的面試素材，以后酷仔每日均會(huì)提供Python及Web相關(guān)的習(xí)題。
特殊說(shuō)明：以上資料由開(kāi)課吧提供！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
