2017.10.15面試問題難點總結

介紹一下你對瀏覽器內核的理解?

  • 主要分成兩部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
  • 渲染引擎:負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計算網頁的顯示方式,然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同,所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核
  • JS引擎則:解析和執(zhí)行javascript來實現(xiàn)網頁的動態(tài)效果
  • 最開始渲染引擎和JS引擎并沒有區(qū)分的很明確,后來JS引擎越來越獨立,內核就傾向于只指渲染引擎。

常見的瀏覽器內核有哪些?

現(xiàn)在的內核原來是有五種的 webkit(谷歌) trident(ie) gecko(火狐) presto(已廢棄) blink(Opera)

HTML5的離線儲存怎么使用,工作原理能不能解釋一下?

  • 在用戶沒有與因特網連接時,可以正常訪問站點或應用,在用戶與因特網連接時,更新用戶機器上的緩存文件

  • 原理:HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術),通過這個文件上的解析清單離線存儲資源,這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態(tài)下時,瀏覽器會通過被離線存儲的數(shù)據進行頁面展示

  • 如何使用:

1、頁面頭部像下面一樣加入一個manifest的屬性
2、在cache.manifest文件的編寫離線存儲的資源
3、在離線狀態(tài)時,操作window.applicationCache進行需求實現(xiàn)

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

Label的作用是什么?是怎么用的?

label標簽來定義表單控制間的關系,當用戶選擇該標簽時,瀏覽器會自動將焦點轉到和標簽相關的表單控件上

<label for="InputBox">姓名</label><input id="InputBox" type="text"> 

HTML5的form如何關閉自動完成功能?

給不想要提示的form或者某個input設置

autocomplete = off

網頁驗證碼是干嘛的,是為了解決什么安全問題

  • 區(qū)分用戶是計算機還是人的公共全自動程序??梢苑乐箰阂馄平饷艽a、刷票、論壇灌水
  • 有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試

移動端的布局用過媒體查詢嗎?

  • 假設你現(xiàn)在正用一臺顯示設備來閱讀這篇文章,同時你也想把它投影到屏幕上,或者打印出來,而顯示設備、屏幕投影和打印等這些媒介都有自己的特點,CSS就是為文檔提供在不同媒介上展示的適配方法

  • 當媒體查詢?yōu)檎鏁r,相關的樣式表或樣式規(guī)則會按照正常的級聯(lián)規(guī)被應用。

  • 當媒體查詢返回假, 標簽上帶有媒體查詢的樣式表 仍將被下載 (只不過不會被應用)

  • 包含了一個媒體類型和至少一個使用 寬度、高度和顏色等媒體屬性來限制樣式表范圍的表達式
    CSS3加入的媒體查詢使得無需修改內容便可以使樣式應用于某些特定的設備范圍

<style>
@media (min-width: 700px) and (orientation: landscape){
  .sidebar {
    display: none;
  }
}
</style>

HTTP 方法

  • 一臺服務器要與HTTP1.1兼容,只要為資源實現(xiàn)GET和HEAD方法即可
  • GET是最常用的方法,通常用于請求服務器發(fā)送某個資源。
  • HEAD與GET類似,但服務器在響應中值返回首部,不返回實體的主體部分
  • PUT讓服務器用請求的主體部分來創(chuàng)建一個由所請求的URL命名的新文檔,或者,如果那個URL已經存在的話,就用干這個主體替代它
  • POST起初是用來向服務器輸入數(shù)據的。實際上,通常會用它來支持HTML的表單。表單中填好的數(shù)據通常會被送給服務器,然后由服務器將其發(fā)送到要去的地方。
  • TRACE會在目的服務器端發(fā)起一個環(huán)回診斷,最后一站的服務器會彈回一個TRACE響應并在響應主體中攜帶它收到的原始請求報文。TRACE方法主要用于診斷,用于驗證請求是否如愿穿過了請求/響應鏈。
  • OPTIONS方法請求web服務器告知其支持的各種功能。可以查詢服務器支持哪些方法或者對某些特殊資源支持哪些方法。
  • DELETE請求服務器刪除請求URL指定的資源

使用CSS實現(xiàn)三欄自適應布局(兩邊寬度固定,中間自適應)

可以分為兩大類

基于傳統(tǒng)的margin和position等屬性進行布局

這種方法又分為以下三種方法

  • position絕對定位法
    絕對定位法原理是將左右兩邊使用absolute定位,因為絕對定位使其脫離文檔流,后面的center會自然流動到他們上面,然后使用margin屬性,留出左右元素的寬度,既可以使中間元素自適應屏幕寬度。
    html
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>layout_box</title>  
        <link rel="stylesheet" type="text/css" href="../css/layout_box.css">  
    </head>  
    <body>  
        <h3>實現(xiàn)三列寬度自適應布局</h3>  
        <div id = "left">我是左邊</div>  
        <div id = "right">我是右邊</div>  
        <div id = "center">我是中間</div>  
    </body>  
</html>  

css

html,body{ margin: 0px;width: 100%; }  
h3{height: 100px;margin:20px 0 0;}  
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}  
#left{left:0px;}  
#right{right: 0px;}  
#center{margin:2px 210px ;background-color: #eee;height: 200px; }  
  • 自身浮動法
    原理就是使用對左右分別使用float:left和float:right,float把左右兩個文檔脫離文檔流,中間元素在正常的文檔流中,使用margin指定左右外邊距進行定位。

  • 圣杯布局(margin負值法)
    使用該方法需要注意的點,第一就是需要在center的外部再多加一層div,第二就是要給外層div設置float屬性,使其形成一個BFC,并設置其寬度100%。第三,左右可以使用float進行浮動,然后左邊可以設置margin負值為-100%,右邊可以設置margin負值為它的寬度。具體實現(xiàn)代碼如下:

<h3>使用margin負值法進行布局</h3>  
        <div id = "wrap">  
            <div id = "center"></div>  
        </div>  
        <div id = "left_margin"></div>  
        <div id = "right_margin"></div>  
#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }  
#left_margin {margin-left: -100%; background-color: lightpink}  
#right_margin{margin-left: -200px;}  
使用CSS3新特性
  • 使用flex布局
    首先,應該先給外層包裹一層div,并設置display:flex,中間層設置flex:1。具體的代碼實現(xiàn)如下所示,這部分可以詳細參考flex布局

HTML

<div id = "box">  
         <div id = "left_box"></div>  
         <div id = "center_box"></div>  
         <div id = "right_box"></div>  
        </div>  

CSS

#box{width:100%;display: flex; height: 100px;margin: 10px;}  
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}  
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}  
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,840評論 1 19
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,163評論 1 92
  • 本文轉發(fā)自github, 原文地址 前端開發(fā)知識點: 作為一名前端工程師,無論工作年頭長短都應該掌握的知識點: 此...
    XDUZ閱讀 654評論 0 8
  • 請參看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,771評論 2 19
  • 引言 生成二維碼的步驟導入CoreImage框架通過濾鏡CIFilter生成二維碼 生成普通的二維碼 /** 生成...
    白石洲霍華德閱讀 3,682評論 0 4

友情鏈接更多精彩內容