成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端開發(fā)常見筆試/面試題總結(jié) -- HTML / CSS篇

dongxiawu / 1078人閱讀

摘要：室友同為前端開發(fā)，最近在他找工作的時候，討論到了常見的前端筆試題和面試題，今天就來總結(jié)一下之前校招和社招時頻繁遇到的面試題。合并后的外邊距的高度取外邊距高度中的較大者。

室友同為前端開發(fā)，最近在他找工作的時候，討論到了常見的前端筆試題和面試題，今天就來總結(jié)一下之前校招和社招時頻繁遇到的面試題。

iframe 有哪些缺點?

頁面看起來較雜亂，不易管理，布局不佳，易分散用戶注意力

搜索引擎的檢索程序無法解讀這種頁面，不利于SEO

移動設(shè)備兼容性差

會增加http請求，對服務(wù)器造成負(fù)擔(dān)

會阻塞主頁面的Onload事件

和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面并行加載

cookie和localStorage、seesionStorage的區(qū)別是什么？

共同點是都保存在瀏覽器端，區(qū)別如下：

cookies是為了標(biāo)識用戶身份而存儲在本地的數(shù)據(jù)，會隨http請求一同發(fā)送到服務(wù)器，而localStorage和sessionStorage僅在本地保存，不會自動把數(shù)據(jù)發(fā)給服務(wù)器

cookie保存的數(shù)據(jù)不超過4k，而localStorage和sessionStorage保存的數(shù)據(jù)可達(dá)到5M

cookie在過期之前一直有效，即使窗口或者瀏覽器關(guān)閉。localStorage始終有效，窗口和瀏覽器關(guān)閉也一直保存，用作長久數(shù)據(jù)保存，sessionStorage僅在瀏覽器窗口關(guān)閉之前有效。

cookie數(shù)據(jù)在所有同源窗口都共享。localStorage也是在所有同源窗口都共享，而sessionStorage不在不同的瀏覽器共享，即使同一頁面

多個標(biāo)簽頁如何實現(xiàn)通信？

localStorage：在window全局對象上添加監(jiān)聽事件 window.onstorage = (e) => { console.log(e); }

webSocket協(xié)議

SharedWorker：webWorker只針對當(dāng)前頁面，而SharedWorker則是多個標(biāo)簽共享的worker

HTML5如何實現(xiàn)文件離線儲存？

在head中加入manifest屬性，它會請求manifest文件，第一次訪問時，瀏覽器會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源，并進(jìn)行離線存儲。如果已經(jīng)訪問過并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面。

實現(xiàn)不使用 border 畫出 1px 高的線

為了在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致，可用以下方法：
1、使用div

2、使用hr，不建議直接使用size屬性，因為新的標(biāo)準(zhǔn)里已經(jīng)廢棄直接使用標(biāo)準(zhǔn)的方式
如何實現(xiàn)垂直居中？

絕對定位：

   main {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate( -50%, -50% );
   }

flexbox布局：

   display: flex, justify-content: center, align-items: center

box布局:

   box-align: center; box-pack: center

什么是標(biāo)準(zhǔn)模式和怪異模式？如何應(yīng)對？

標(biāo)準(zhǔn)模式又稱嚴(yán)格模式，瀏覽器使用 W3C 的標(biāo)準(zhǔn)解析渲染頁面
怪異模式又稱混雜模式，瀏覽器都按照自己的方式解析渲染頁面，在不同的瀏覽器網(wǎng)頁會顯示不同的樣式

最好的方法就是添加了文檔類型聲明，比如，瀏覽器會用W3C的標(biāo)準(zhǔn)來渲染網(wǎng)頁

如何解決兩個元素的重疊問題(外邊距合并)？

外邊距合并(疊加)：當(dāng)兩個垂直(不包含水平)外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度取外邊距高度中的較大者。

一上一下會合并；

一內(nèi)一外也會合并；

自身(沒有邊框或填充時)的margin-top和margin-bottom也會合并

方法：可以用BFC的方式解決，所謂的BFC就是css布局的一個概念，是一塊區(qū)域，一個環(huán)境。

margin穿透：可以將父級元素設(shè)置為一個獨立的BFC，子級元素的margin值就不會溢出父級，我們這里對父級元素應(yīng)用樣式overflow: hidden

margin重疊：也就是兩個平級的元素發(fā)生重疊的情形，我們可以將兩個div套上一個BFC的外殼，這樣兩個BFC的內(nèi)部元素就不會互相影響了

在頁面上實現(xiàn)一個圓形的可點擊區(qū)域

SVG方式：同理類似的用的方式也可以

CSS方式：border-radius: 50%

JS方式：先繪制一個正方形，js檢測鼠標(biāo)位置是否在圓上

常見的SEO方法有哪些？

頁面布局， 重要的東西要提前。

文章關(guān)鍵詞的分布（ 在面包屑以及側(cè)邊欄適當(dāng)?shù)恼{(diào)用文章標(biāo)題來提高關(guān)鍵詞密度）

文章內(nèi)容可以在源碼中寫在側(cè)邊欄的前面， 之后用float: right浮動到右邊即可

圖片處理（ 圖片做壓縮， 調(diào)用圖片用div + css來調(diào)用， 同時添加alt屬性。）

圖片添加alt屬性，（ 搜索引擎蜘蛛無法抓取圖片內(nèi)容）

頁面的大小控制

將腳本放在底部

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116245.html

相關(guān)文章

  • 前端開發(fā)常見筆試/面試題總結(jié) -- HTML / CSS篇

    摘要：室友同為前端開發(fā)，最近在他找工作的時候，討論到了常見的前端筆試題和面試題，今天就來總結(jié)一下之前校招和社招時頻繁遇到的面試題。合并后的外邊距的高度取外邊距高度中的較大者。 室友同為前端開發(fā)，最近在他找工作的時候，討論到了常見的前端筆試題和面試題，今天就來總結(jié)一下之前校招和社招時頻繁遇到的面試題。 iframe 有哪些缺點? 頁面看起來較雜亂，不易管理，布局不佳，易分散用戶注意力 搜索引...

    endiat 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    jsbintask 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    muddyway 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...

    princekin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<