20170921 噹噹和今日頭條筆試題我對BFC的理解 Javascript 異步加載詳解

時間 2019-12-05

標籤噹噹今日頭條筆試 bfc 理解 javascript 異步加載詳解欄目快樂工作简体版

原文原文鏈接

竟然忘了開屏幕錄製!!!!javascript

要氣死啦!!css

由於有挺多不錯的題目的~html

記一下記得的題吧前端

噹噹網:

1. 哪些操做屬於es6的操做?html5

A var {foo:{bar}} = {baz:'baz'}java

B var x; {x} = {x:1};css3

C var [a,b,c] = [1,2,3]es6

D var [,,c] = [1,2,3]web

2. 下列說法中:數組

A 下載js腳本會阻塞渲染

B DOM樹與render樹是徹底對應的

C link節點不會阻塞瀏覽器渲染

D img標籤會阻塞渲染

3. 如下會引發BFC的是?

A visibility: hidden

B display: block;

C position: fixed;

D float: left;

解析:

對一個元素設置CSS，首先須要知道這個元素是block仍是inline類型。而BFC就是用來格式化塊級盒子，一樣管理inline類型的盒子還有IFC，以及其餘的FC

Formatting Context：指頁面中的一個渲染區域，而且擁有一套渲染規則，他決定了其子元素如何定位，以及與其餘元素的相互關係和做用

BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。

既然上文提到BFC是一塊渲染區域，那這塊渲染區域到底在哪，它又是有多大，這些由生成BFC的元素決定，CSS2.1中規定知足下列CSS聲明之一的元素便會生成BFC。

根元素
float的值不爲none
overflow的值不爲visible
display的值爲inline-block、table-cell、table-caption
position的值爲absolute或fixed

　　看到有道友文章中把display：table也認爲能夠生成BFC，其實這裏的主要緣由在於Table會默認生成一個匿名的table-cell，正是這個匿名的table-ccell生成了BFC

瀏覽器對於BFC這塊區域的約束規則以下：

生成BFC元素的子元素會一個接一個的放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的塊級元素外邊距會摺疊。
生成BFC元素的子元素中，每個子元素作外邊距與包含塊的左邊界相接觸，（對於從右到左的格式化，右外邊距接觸右邊界），即便浮動元素也是如此（儘管子元素的內容區域會因爲浮動而壓縮），除非這個子元素也建立了一個新的BFC（如它自身也是一個浮動元素）。

　　有道友對它作了分解，咱們直接拿來：

內部的Box會在垂直方向上一個接一個的放置
垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊，與方向無關。）
每一個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即便浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position爲absolute的元素能夠超出他的包含塊邊界）
BFC的區域不會與float的元素區域重疊
計算BFC的高度時，浮動子元素也參與計算
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然

　　看到以上的幾條約束，讓我想起學習css時的幾條規則

Block元素會擴展到與父元素同寬，因此block元素會垂直排列
垂直方向上的兩個相鄰DIV的margin會重疊，而水平方向不會(此規則並不徹底正確)
浮動元素會盡可能接近往左上方（或右上方）
爲父元素設置overflow：hidden或浮動父元素，則會包含浮動元素
......

參考: 我對BFC的理解

4. 下列說法

A a.domain.com和domain.com/b.html之間能夠共享cookie

B baidu.com和google.com之間能夠共享cookie

C sessionStorage能夠在本地長久存儲

二問答題

1. ie中float和margin產生

2. 對html5和css3的理解

3. html語義化的理解(至少三條)

4. 實現兩個div的垂直水平居中

5. -webkit-下的border-radius

6. 至少舉出5個塊級元素和內聯元素, 解釋css中的盒模型

7. 前端角度,怎麼優化SEO?

8. css sprites是什麼?有什麼優缺點?

9. CSS hack: 實現不一樣ie版本下的顯示不同

今日頭條:

選擇題:

1. js如何判斷嚴格一個變量a是否是一個對象obj的實例? 假設它有屬性"name"

A if( a instanceof obj)

B if( a.constructor === obj)

C if("name" in a);

D if(a.name)

解析:

在這裏我主要在糾結前兩個選項,不知道哪一個更嚴格

2. js文件實現延遲加載的方法

A　　<script type="text/javascript" src="a.js" defer></script>

B　　<script type="text/javascript" src="a.js" async></script>

C　　var scr = document.createElement("script");
　　 scr.src = "a.js";
　　 document.appendChild(scr);

解析:

還有一個選項忘記了.

查了一下相關知識,

咱們平時最常使用的就是這種同步加載形式：

<script src="http://yourdomain.com/script.js"></script>

同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，中止了後續的解析，所以中止了後續的文件加載（如圖像）、渲染、代碼執行。

js 之因此要同步執行，是由於 js 中可能有輸出 document 內容、修改dom、重定向等行爲，因此默認同步執行纔是安全的。

之前的通常建議是把<script>放在頁面末尾</body>以前，這樣儘量減小這種阻塞行爲，而先讓頁面展現出來。

簡單說：加載的網絡 timeline 是瀑布模型，而異步加載的 timeline 是併發模型。

async指的是異步加載,

又叫非阻塞，瀏覽器在下載執行 js 同時，還會繼續進行後續頁面的處理。

這種方法是在頁面中<script>標籤內，用 js 建立一個 script 元素並插入到 document 中。這樣就作到了非阻塞的下載 js 代碼。

async屬性是HTML5中新增的異步支持，見後文解釋，加上好（不加也不影響）。

此方法被稱爲 Script DOM Element 法，不要求 js 同源。

將js代碼包裹在匿名函數中並當即執行的方式是爲了保護變量名泄露到外部可見，這是很常見的方式，尤爲是在 js 庫中被廣泛使用。

1. defer 屬性

<script src="file.js" defer></script>

defer屬性聲明這個腳本中將不會有 document.write 或 dom 修改。

瀏覽器將會並行下載 file.js 和其它有 defer 屬性的script，而不會阻塞頁面後續處理。

defer屬性在IE 4.0中就實現了，超過13年了！Firefox 從 3.5 開始支持defer屬性。

注：全部的defer 腳本保證是 按順序依次執行的。

2. async 屬性

<script src="file.js" async></script>

async屬性是HTML5新增的。做用和defer相似，可是它將在下載後儘快執行， 不能保證腳本會按順序執行。它們將在onload 事件以前完成。

Firefox 3.六、Opera 10.五、IE 9 和最新的Chrome 和 Safari 都支持 async 屬性。能夠同時使用 async 和 defer，這樣IE 4以後的全部 IE 都支持異步加載。

因此說: defer做用是文檔加載完畢了再執行腳本,這樣迴避免找不到對象的問題. 好像只是推遲了執行時間,而不會影響加載時間

參考: Javascript 異步加載詳解

附加題(3道):

1. 使用js實現對象的深度克隆

我從網上抄的答案:

function cloneObject(obj){ 
    var o = obj.constructor === Array ? [] : {}; 
    for(var i in obj){ 
       if(obj.hasOwnProperty(i)){ 
            o[i] = typeof obj[i] === "object" ? cloneObject(obj[i]) : obj[i]; 
        } 
    } 
    return o; 
}

參考:

javascript克隆對象深度介紹

2. 實現一個事件綁定函數和解綁函數

// target 是 DOM 元素
// eventName是事件
// handler 是事件處理函數
function on(target, eventName, handler){
    //todo

}

function off(target,eventName, handler){
    //todo
    //要求: 若是handler沒有傳入,則刪除全部經過on方法在對象上綁定的事件

}

大概題目就是以上,我參考js高程寫的,不知道對不對

function on(target, eventName, handler){
    
    //發現我這裏原來寫錯了..
    //target.events = target.event || new Array();    //存儲經過on方法綁定的事件 錯誤的
    target[eventName] = target[evetnName] || new Array();
    if(target.addEventListener){
        target.addEventListener(eventName, handler);
    } else {
        target.attachEvent("on"+eventName, handler);
    }
}

function off(target, eventName, handler){
    if(target.removeEventListener){
        if(handler){
            target.removeEventListener(eventName, handler);
            //這裏應該也刪除數組裏的對應函數...也沒有寫
            for(var i = 0; i<target.events.length; i++){
               if(target[eventName][i] == handler){
                  target[eventName].splice(i,1);
                }
             }
        } else {
            for(var i = 0; i<target.events.length; i++){
                target.removeEventListener(eventName, target[eventName][i]);
            }
            target[eventName] = [];
        }
    } else {
      if(handler){
            target.detachEvent(eventName, handler);
            //這裏應該也刪除數組裏的對應函數...也沒有寫
            for(var i = 0; i<target.events.length; i++){
               if(target[eventName][i] == handler){
                  target[eventName].splice(i,1);
                }
             }
        } else {
            for(var i = 0; i<target.events.length; i++){
                target.detachEvent(eventName, target[eventName][i]);
            }
            target[eventName] = [];
        }