前端面試總結(jié)(五)

1.瀏覽器內(nèi)核

1)、Trident內(nèi)核代表產(chǎn)品Internet Explorer角骤,又稱其為IE內(nèi)核。Trident(又稱為MSHTML)心剥,是微軟開發(fā)的一種排版引擎邦尊。使用Trident渲染引擎的瀏覽器包括:IE、傲游优烧、世界之窗瀏覽器蝉揍、Avant、騰訊TT畦娄、Netscape 8又沾、NetCaptor、Sleipnir熙卡、GOSURF杖刷、GreenBrowser和KKman等。

2)驳癌、Gecko內(nèi)核代表作品Mozilla FirefoxGecko是一套開放源代碼的滑燃、以C++編寫的網(wǎng)頁排版引擎。Gecko是最流行的排版引擎之一颓鲜,僅次于Trident表窘。使用它的最著名瀏覽器有Firefox典予、Netscape6至9。

3)乐严、WebKit內(nèi)核代表作品Safari瘤袖、Chromewebkit 是一個(gè)開源項(xiàng)目,包含了來自KDE項(xiàng)目和蘋果公司的一些組件昂验,主要用于Mac OS系統(tǒng)捂敌,它的特點(diǎn)在于源碼結(jié)構(gòu)清晰、渲染速度極快凛篙。缺點(diǎn)是對(duì)網(wǎng)頁代碼的兼容性不高黍匾,導(dǎo)致一些編寫不標(biāo)準(zhǔn)的網(wǎng)頁無法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome呛梆。

4)锐涯、Presto內(nèi)核代表作品OperaPresto是由Opera Software開發(fā)的瀏覽器排版引擎,供Opera 7.0及以上使用填物。它取代了舊版Opera 4至6版本使用的Elektra排版引擎纹腌,包括加入動(dòng)態(tài)功能,例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版滞磺。

5)升薯、Blink內(nèi)核:由Google和Opera Software開發(fā)的瀏覽器排版引擎,2013年4月發(fā)布』骼В現(xiàn)在Chrome內(nèi)核是Blink涎劈。谷歌還開發(fā)了自己的JS引擎,V8阅茶,使JS運(yùn)行速度極大地提高了

2.應(yīng)用程序緩存
應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢:

離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們
速度 - 已緩存資源加載得更快
減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源蛛枚。

如需啟用應(yīng)用程序緩存,請?jiān)谖臋n的 <html> 標(biāo)簽中包含 manifest 屬性

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每個(gè)指定了 manifest 的頁面在用戶對(duì)其訪問時(shí)都會(huì)被緩存脸哀。如果未指定 manifest 屬性蹦浦,則頁面不會(huì)被緩存(除非在 manifest 文件中直接指定了該頁面)。
manifest 文件的建議的文件擴(kuò)展名是:".appcache"撞蜂。
請注意盲镶,manifest 文件需要配置正確的 MIME-type,即 "text/cache-manifest"蝌诡。必須在 web 服務(wù)器上進(jìn)行配置溉贿。

Manifest 文件
manifest 文件可分為三個(gè)部分:

CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接,且不會(huì)被緩存
FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面(比如 404 頁面)

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三個(gè)資源:一個(gè) CSS 文件浦旱,一個(gè) GIF 圖像顽照,以及一個(gè) JavaScript 文件。當(dāng) manifest 文件加載后,瀏覽器會(huì)從網(wǎng)站的根目錄下載這三個(gè)文件代兵。然后尼酿,無論用戶何時(shí)與因特網(wǎng)斷開連接,這些資源依然是可用的

NETWORK:
login.asp

可以使用星號(hào)來指示所有其他資源/文件都需要因特網(wǎng)連接:

FALLBACK:
/html5/ /404.html

下面的 FALLBACK 小節(jié)規(guī)定如果無法建立因特網(wǎng)連接植影,則用 "offline.html" 替代 /html5/ 目錄中的所有文件

更新緩存
一旦應(yīng)用被緩存裳擎,它就會(huì)保持緩存直到發(fā)生下列情況:

用戶清空瀏覽器緩存
manifest 文件被修改
由程序來更新應(yīng)用緩存

3.對(duì)語義化的理解
1)、什么是HTML語義化思币?

基本上都是圍繞著幾個(gè)主要的標(biāo)簽鹿响,像標(biāo)題(H1~H6)、列表(li)谷饿、強(qiáng)調(diào)(strong em)等等
  根據(jù)內(nèi)容的結(jié)構(gòu)化(內(nèi)容語義化)惶我,選擇合適的標(biāo)簽(代碼語義化)便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。

2)博投、為什么要語義化绸贡?

①為了在沒有CSS的情況下,頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)毅哗、代碼結(jié)構(gòu):為了裸奔時(shí)好看听怕;
②用戶體驗(yàn):例如title、alt用于解釋名詞或解釋圖片信息虑绵、label標(biāo)簽的活用尿瞭;

③有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重翅睛;
④方便其他設(shè)備解析(如屏幕閱讀器声搁、盲人閱讀器、移動(dòng)設(shè)備)以意義的方式來渲染網(wǎng)頁捕发;
⑤便于團(tuán)隊(duì)開發(fā)和維護(hù)疏旨,語義化更具可讀性,是下一步吧網(wǎng)頁的重要?jiǎng)酉蚺乐瑁裱璚3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn),可以減少差異化莫换。

3)霞玄、寫HTML代碼時(shí)應(yīng)注意什么?

①盡可能少的使用無語義的標(biāo)簽div和span拉岁;
②在語義不明顯時(shí)坷剧,既可以使用div或者p時(shí),盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距喊暖,對(duì)兼容特殊終端有利惫企;
③不要使用純樣式標(biāo)簽,如:b、font狞尔、u等丛版,改用css設(shè)置。
④需要強(qiáng)調(diào)的文本偏序,可以包含在strong或者em標(biāo)簽中(瀏覽器預(yù)設(shè)樣式页畦,能用CSS指定就不用他們),strong默認(rèn)樣式是加粗(不要用b)研儒,em是斜體(不用i)豫缨;
⑤使用表格時(shí),標(biāo)題要用caption端朵,表頭用thead好芭,主體部分用tbody包圍,尾部用tfoot包圍冲呢。表頭和一般單元格要區(qū)分開舍败,表頭用th,單元格用td碗硬;
⑥表單域要用fieldset標(biāo)簽包起來瓤湘,并用legend標(biāo)簽說明表單的用途;
⑦每個(gè)input標(biāo)簽對(duì)應(yīng)的說明文本都需要使用label標(biāo)簽恩尾,并且通過為input設(shè)置id屬性弛说,在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對(duì)應(yīng)的input關(guān)聯(lián)起來。

4.對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)

web標(biāo)準(zhǔn)簡單來說可以分為結(jié)構(gòu)翰意、表現(xiàn)和行為木人。其中<strong>結(jié)構(gòu)</strong>主要是有HTML標(biāo)簽組成〖脚迹或許通俗點(diǎn)說醒第,在頁面body里面我們寫入的標(biāo)簽都是為了頁面的結(jié)構(gòu)。<strong>表現(xiàn)</strong>即指css樣式表进鸠,通過css可以是頁面的結(jié)構(gòu)標(biāo)簽更具美感稠曼。<strong>行為</strong>是指頁面和用戶具有一定的交互,同時(shí)頁面結(jié)構(gòu)或者表現(xiàn)發(fā)生變化客年,主要是有js組成霞幅。
web標(biāo)準(zhǔn)一般是將該三部分獨(dú)立分開,使其更具有模塊化量瓜。但一般產(chǎn)生行為時(shí)司恳,就會(huì)有結(jié)構(gòu)或者表現(xiàn)的變化,也使這三者的界限并不那么清晰绍傲。

W3C對(duì)web標(biāo)準(zhǔn)提出了規(guī)范化的要求扔傅,也就是在實(shí)際編程中的一些代碼規(guī)范:包含如下幾點(diǎn)

1).對(duì)于結(jié)構(gòu)要求:(標(biāo)簽規(guī)范可以提高搜索引擎對(duì)頁面的抓取效率,對(duì)SEO很有幫助)
①標(biāo)簽字母要小寫
②標(biāo)簽要閉合
③標(biāo)簽不允許隨意嵌套
2).對(duì)于css和js來說
①盡量使用外鏈css樣式表和js腳本。是結(jié)構(gòu)猎塞、表現(xiàn)和行為分為三塊试读,符合規(guī)范。同時(shí)提高頁面渲染速度邢享,提高用戶的體驗(yàn)鹏往。
②樣式盡量少用行間樣式表,使結(jié)構(gòu)與表現(xiàn)分離骇塘,標(biāo)簽的id和class等屬性命名要做到見文知義伊履,標(biāo)簽越少,加載越快款违,用戶體驗(yàn)提高唐瀑,代碼維護(hù)簡單,便于改版
③不需要變動(dòng)頁面內(nèi)容插爹,便可提供打印版本而不需要復(fù)制內(nèi)容哄辣,提高網(wǎng)站易用性。

5.偽元素和偽類的區(qū)別
CSS 偽類用于向某些選擇器添加特殊的效果赠尾。
CSS 偽元素用于將特殊的效果添加到某些選擇器

偽類種類
偽元素種類

總結(jié):偽類的效果可以通過添加一個(gè)實(shí)際的類來達(dá)到力穗,而偽元素的效果則需要通過添加一個(gè)實(shí)際的元素才能達(dá)到,這也是為什么他們一個(gè)稱為偽類气嫁,一個(gè)稱為偽元素的原因当窗。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市寸宵,隨后出現(xiàn)的幾起案子崖面,更是在濱河造成了極大的恐慌,老刑警劉巖梯影,帶你破解...
    沈念sama閱讀 219,039評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件巫员,死亡現(xiàn)場離奇詭異,居然都是意外死亡甲棍,警方通過查閱死者的電腦和手機(jī)简识,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來感猛,“玉大人七扰,你說我怎么就攤上這事〕猓” “怎么了戳寸?”我有些...
    開封第一講書人閱讀 165,417評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵呈驶,是天一觀的道長拷泽。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么司致? 我笑而不...
    開封第一講書人閱讀 58,868評(píng)論 1 295
  • 正文 為了忘掉前任拆吆,我火速辦了婚禮,結(jié)果婚禮上脂矫,老公的妹妹穿的比我還像新娘枣耀。我一直安慰自己,他們只是感情好庭再,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評(píng)論 6 392
  • 文/花漫 我一把揭開白布捞奕。 她就那樣靜靜地躺著,像睡著了一般拄轻。 火紅的嫁衣襯著肌膚如雪颅围。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,692評(píng)論 1 305
  • 那天恨搓,我揣著相機(jī)與錄音院促,去河邊找鬼。 笑死斧抱,一個(gè)胖子當(dāng)著我的面吹牛常拓,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播辉浦,決...
    沈念sama閱讀 40,416評(píng)論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼弄抬,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了盏浙?” 一聲冷哼從身側(cè)響起眉睹,我...
    開封第一講書人閱讀 39,326評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎废膘,沒想到半個(gè)月后竹海,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,782評(píng)論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡丐黄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評(píng)論 3 337
  • 正文 我和宋清朗相戀三年斋配,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灌闺。...
    茶點(diǎn)故事閱讀 40,102評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡艰争,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出桂对,到底是詐尸還是另有隱情甩卓,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評(píng)論 5 346
  • 正文 年R本政府宣布蕉斜,位于F島的核電站逾柿,受9級(jí)特大地震影響缀棍,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜机错,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3 331
  • 文/蒙蒙 一爬范、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧弱匪,春花似錦青瀑、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至帘饶,卻和暖如春蘸炸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背尖奔。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評(píng)論 1 272
  • 我被黑心中介騙來泰國打工搭儒, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人提茁。 一個(gè)月前我還...
    沈念sama閱讀 48,332評(píng)論 3 373
  • 正文 我出身青樓淹禾,卻偏偏與公主長得像,于是被迫代替她去往敵國和親茴扁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子铃岔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • <a name='html'>HTML</a> Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)峭火、<...
    clark124閱讀 3,482評(píng)論 1 19
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    程序員poetry閱讀 114,398評(píng)論 24 450
  • 請參看我github中的wiki毁习,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,129評(píng)論 2 19
  • 前端開發(fā)面試知識(shí)點(diǎn)大綱: HTML&CSS: 對(duì)Web標(biāo)準(zhǔn)的理解卖丸、瀏覽器內(nèi)核差異纺且、兼容性、hack稍浆、CSS基本功:...
    秀才JaneBook閱讀 2,371評(píng)論 0 25
  • 哪些簡單载碌、質(zhì)深的道理,在我們聽來感覺和自己沒什么關(guān)系衅枫。實(shí)際上很多簡單的道理都是在付出沉重的代價(jià)和深刻體會(huì)過的時(shí)...
    樂陽L閱讀 197評(píng)論 0 0