前端面試題及答案

時(shí)間：2021-06-16 16:07:18 面試試題我要投稿

前端面試題及答案

　　1、html5有哪些新特性、移除了那些元素?如何處理HTML5新標(biāo)簽的瀏覽器兼容問題?如何區(qū)分 HTML 和HTML5?

前端面試題及答案

　　(1)HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

　　(2)用于媒介回放的 video 和 audio 元素

　　(3)本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失

　　(4)語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

　　(5)新的技術(shù)webworker, websockt, Geolocation移除的元素

　　(6)對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes;支持HTML5新標(biāo)簽

　　(7)IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽

　　(8)瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式

　　2、CSS隱藏元素的幾種方法

　　(1)Opacity:元素本身依然占據(jù)它自己的位置并對(duì)網(wǎng)頁的.布局起作用。它也將響應(yīng)用戶交互;

　　(2)Visibility:與 opacity 唯一不同的是它不會(huì)響應(yīng)任何用戶交互。此外，元素在讀屏軟件中也會(huì)被隱藏;

　　(3)Display:display 設(shè)為 none 任何對(duì)該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會(huì)讀到元素的內(nèi)容。這種方式產(chǎn)生的效果就像元素完全不存在;

　　(4)Position:不會(huì)影響布局，能讓元素保持可以操作;

　　(5)Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低。

　　3、頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別?

　　(1)link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的，只能用于加載CSS;

　　(2)頁面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面被加載完再加載;

　　(3)import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無兼容問題。

　　4、性能優(yōu)化的方法

　　(1) 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適;網(wǎng)頁Gzip，CDN托管，data緩存，圖片服務(wù)器;

　　(2) 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

　　(3) 避免使用CSS Expression(css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。

　　(4) 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。

　　(5) 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部加上時(shí)間戳。

【前端面試題及答案】相關(guān)文章：

精品国产一级毛片大全,毛片一级在线,毛片免费观看的视频在线,午夜毛片福利