一、canvas和svg的區(qū)別
- svg繪制出來(lái)的圖形，每個(gè)元素都是一個(gè)dom節(jié)點(diǎn)冀墨，方便綁定事件和方法刚夺，canvas繪制出來(lái)的是一整張圖片
- svg繪制出的是矢量圖献丑，放大縮小不會(huì)失真末捣，canvas繪制的是標(biāo)量圖，放大縮小會(huì)失真
二创橄、HTML5為什么只需要寫(xiě)<!DOCTYPE HTML>
- html5不基于SGML箩做，不需要對(duì)DTD進(jìn)行引用，只需要doctype來(lái)規(guī)范瀏覽器的行為
- Html4.01基于SGML妥畏，需要對(duì)DTD進(jìn)行引用邦邦，才能告知瀏覽器文檔所使用的文檔類型
三、如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域
- svg
- border-radius
- 純js實(shí)現(xiàn)要計(jì)算一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法醉蚁、獲取鼠標(biāo)坐標(biāo)等等
四燃辖、網(wǎng)頁(yè)驗(yàn)證碼有什么用
- 區(qū)分是人還是計(jì)算機(jī)自動(dòng)程序，防止惡意破解程序网棍、刷票黔龟、論壇灌水等
- 防止黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式不斷進(jìn)行登錄嘗試
五、viewport 怎么處理1px渲染為2px
meta標(biāo)簽中的viewport屬性 initial-scale 設(shè)置為0.5 跟著設(shè)計(jì)稿標(biāo)準(zhǔn)走即可
六滥玷、渲染優(yōu)化
- 禁止使用iframe氏身、gif來(lái)實(shí)現(xiàn)loading效果
- 使用css代替js來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果
- 對(duì)一些小圖標(biāo)使用base64以減少網(wǎng)絡(luò)請(qǐng)求
- 頁(yè)面頭部的的<style/><script/>會(huì)阻塞頁(yè)面
- 頁(yè)面中空的herf、src會(huì)阻塞其他資源的加載
- 網(wǎng)頁(yè)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
七霞掺、常見(jiàn)的瀏覽器及內(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)清晰脱羡，頁(yè)面整潔、結(jié)構(gòu)表現(xiàn)分離
九、漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的不同
- 漸進(jìn)增強(qiáng)：針對(duì)低版本的瀏覽器進(jìn)行頁(yè)面構(gòu)建锉罐，保證最基本的功能帆竹，再根據(jù)高版本的瀏覽器進(jìn)行交互、效果和追加功能以達(dá)到更好的用戶體驗(yàn)
- 優(yōu)雅降級(jí)：一次性構(gòu)建完整的頁(yè)面脓规，再針對(duì)低版本的瀏覽器進(jìn)行兼容
- 區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始栽连，并試圖減少用戶體驗(yàn)的供給，漸進(jìn)增強(qiáng)是從一個(gè)基本的開(kāi)始侨舆，漸漸的擴(kuò)充以適應(yīng)未來(lái)環(huán)境的需要
十秒紧、為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效
CDN緩存更方便、節(jié)約cookie帶寬态罪、突破瀏覽器的并發(fā)限制噩茄、節(jié)約主域名的連接數(shù)，優(yōu)化頁(yè)面響應(yīng)速度复颈、防止不必要的安全問(wèn)題
十一绩聘、簡(jiǎn)述href 和 src的區(qū)別
- href：用于當(dāng)前文檔和引用資源之間建立聯(lián)系，當(dāng)文檔中使用link耗啦，瀏覽器會(huì)并行下載該資源而不會(huì)停止對(duì)當(dāng)前頁(yè)面資源的加載
- src：用于替換當(dāng)前資源凿菩，文檔中使用src的時(shí)候，瀏覽器會(huì)下載該資源并應(yīng)用在文檔內(nèi)帜讲，會(huì)暫停其它資源的下載和處理
十二衅谷、網(wǎng)頁(yè)制作的圖片格式有哪些
svg、png-8似将、png-24获黔、jpeg、gif在验、webp—谷歌開(kāi)發(fā)的旨在加快圖片加載的圖片格式玷氏、Apng—Animated Portable Network Graphic
十三、頁(yè)面中有大量圖片時(shí)腋舌，優(yōu)化圖片加載的方法
- 圖片懶加載盏触，在頁(yè)面的未可視區(qū)域設(shè)置滾動(dòng)事件，計(jì)算頁(yè)面位置與瀏覽器頂端的距離 和 頁(yè)面的距離块饺，前者小于后者 優(yōu)先加載
- 圖片預(yù)加載赞辩，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載
- 圖片為css圖片的話，可以使用base64授艰、cssSprite等技術(shù)
- 圖片過(guò)大的話辨嗽，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮的特別厲害的縮略圖淮腾，增加用戶體驗(yàn)
十四召庞、Web開(kāi)發(fā)中會(huì)話跟蹤的方法
cookie岛心、session来破、url重寫(xiě)篮灼、IP地址、隱藏input
十五徘禁、Http request報(bào)文結(jié)構(gòu)
- 首行是request-line诅诱，包括：請(qǐng)求方法，請(qǐng)求URI送朱，協(xié)議版本
- 其次是若干請(qǐng)求頭
- 最后是請(qǐng)求體
十六娘荡、Http response報(bào)文結(jié)構(gòu)
- 首行是協(xié)議版本、狀態(tài)碼驶沼、狀態(tài)描述
- 其次的響應(yīng)頭
- 最后是響應(yīng)體
