一、canvas和svg的區(qū)別
- svg繪制出來的圖形，每個(gè)元素都是一個(gè)dom節(jié)點(diǎn)，方便綁定事件和方法，canvas繪制出來的是一整張圖片
- svg繪制出的是矢量圖，放大縮小不會(huì)失真，canvas繪制的是標(biāo)量圖，放大縮小會(huì)失真
二、HTML5為什么只需要寫<!DOCTYPE HTML>
- html5不基于SGML，不需要對DTD進(jìn)行引用，只需要doctype來規(guī)范瀏覽器的行為
- Html4.01基于SGML，需要對DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型
三、如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域
- svg
- border-radius
- 純js實(shí)現(xiàn)要計(jì)算一個(gè)點(diǎn)在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等
四、網(wǎng)頁驗(yàn)證碼有什么用
- 區(qū)分是人還是計(jì)算機(jī)自動(dòng)程序，防止惡意破解程序、刷票、論壇灌水等
- 防止黑客對某一個(gè)特定注冊用戶用特定程序暴力破解方式不斷進(jìn)行登錄嘗試
五、viewport 怎么處理1px渲染為2px
meta標(biāo)簽中的viewport屬性 initial-scale 設(shè)置為0.5 跟著設(shè)計(jì)稿標(biāo)準(zhǔn)走即可
六、渲染優(yōu)化
- 禁止使用iframe、gif來實(shí)現(xiàn)loading效果
- 使用css代替js來實(shí)現(xiàn)動(dòng)畫效果
- 對一些小圖標(biāo)使用base64以減少網(wǎng)絡(luò)請求
- 頁面頭部的的<style/><script/>會(huì)阻塞頁面
- 頁面中空的herf、src會(huì)阻塞其他資源的加載
- 網(wǎng)頁gzip、data緩存、cdn托管、圖片服務(wù)器
- 前端模板js+數(shù)據(jù)，減少標(biāo)簽的帶寬浪費(fèi)、圖片預(yù)加載
- 樣式放頂部，腳本放底部
- 用innerHTML代替DOM操作，減少DOM的操作次數(shù)，優(yōu)化js性能、當(dāng)需要設(shè)置多個(gè)樣式時(shí)設(shè)置className而不是直接操作style
七、常見的瀏覽器及內(nèi)核
IE—trident內(nèi)核、chrome—基于webkit的blink、safari—webkit、firefox—gecko內(nèi)核、opera—blink
八、div+css較table的優(yōu)點(diǎn)
改版的時(shí)候，只需改css文件、易于seo、加載速度快，結(jié)構(gòu)清晰，頁面整潔、結(jié)構(gòu)表現(xiàn)分離
九、漸進(jìn)增強(qiáng)和優(yōu)雅降級的不同
- 漸進(jìn)增強(qiáng)：針對低版本的瀏覽器進(jìn)行頁面構(gòu)建，保證最基本的功能，再根據(jù)高版本的瀏覽器進(jìn)行交互、效果和追加功能以達(dá)到更好的用戶體驗(yàn)
- 優(yōu)雅降級：一次性構(gòu)建完整的頁面，再針對低版本的瀏覽器進(jìn)行兼容
- 區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，漸進(jìn)增強(qiáng)是從一個(gè)基本的開始，漸漸的擴(kuò)充以適應(yīng)未來環(huán)境的需要
十、為什么利用多個(gè)域名來存儲(chǔ)網(wǎng)站資源會(huì)更有效
CDN緩存更方便、節(jié)約cookie帶寬、突破瀏覽器的并發(fā)限制、節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應(yīng)速度、防止不必要的安全問題
十一、簡述href 和 src的區(qū)別
- href：用于當(dāng)前文檔和引用資源之間建立聯(lián)系，當(dāng)文檔中使用link，瀏覽器會(huì)并行下載該資源而不會(huì)停止對當(dāng)前頁面資源的加載
- src：用于替換當(dāng)前資源，文檔中使用src的時(shí)候，瀏覽器會(huì)下載該資源并應(yīng)用在文檔內(nèi)，會(huì)暫停其它資源的下載和處理
十二、網(wǎng)頁制作的圖片格式有哪些
svg、png-8、png-24、jpeg、gif、webp—谷歌開發(fā)的旨在加快圖片加載的圖片格式、Apng—Animated Portable Network Graphic
十三、頁面中有大量圖片時(shí)，優(yōu)化圖片加載的方法
- 圖片懶加載，在頁面的未可視區(qū)域設(shè)置滾動(dòng)事件，計(jì)算頁面位置與瀏覽器頂端的距離 和 頁面的距離，前者小于后者 優(yōu)先加載
- 圖片預(yù)加載，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載
- 圖片為css圖片的話，可以使用base64、cssSprite等技術(shù)
- 圖片過大的話，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮的特別厲害的縮略圖，增加用戶體驗(yàn)
十四、Web開發(fā)中會(huì)話跟蹤的方法
cookie、session、url重寫、IP地址、隱藏input
十五、Http request報(bào)文結(jié)構(gòu)
- 首行是request-line，包括：請求方法，請求URI，協(xié)議版本
- 其次是若干請求頭
- 最后是請求體
十六、Http response報(bào)文結(jié)構(gòu)
- 首行是協(xié)議版本、狀態(tài)碼、狀態(tài)描述
- 其次的響應(yīng)頭
- 最后是響應(yīng)體
