寫給前端新人：前端開發必會的知識點

時間 2019-11-26

標籤寫給前端新人開發必會知識简体版

原文原文鏈接

寫給前端新人：前端開發必會的知識點

經常使用那幾種瀏覽器測試？有哪些內核

(Layout Engine)?
(Q1)

瀏覽器：

，

Chrome

，

FireFox

，

Safari

，

Opera

。

(Q2)

內核：

Trident

，

Gecko

，

Presto

，

Webkit

。

說下行內元素和塊級元素的區別？行內塊元素的兼容性使用？（

IE8

如下）

(Q1)

行內元素：會在水平方向排列，不能包含塊級元素，設置

width

無效，

height

無效

(

能夠設置

line-height)

，

margin

上下無效，

padding

上下無效。

塊級元素：各佔據一行，垂直方向排列。重新行開始結束接着一個斷行。

(Q2)

兼容性：

display:inline-block;*display:inline;*zoom:1;

清除浮動有哪些方式？比較好的方式是哪種？

(Q1)

（

）父級

div

定義

height

。

（

）結尾處加空

div

標籤

clear:both

。

（

）父級

div

定義僞類

:after

和

zoom

。

（

）父級

div

定義

overflow:hidden

。

（

）父級

div

定義

overflow:auto

。

（

）父級

div

也浮動，須要定義寬度。

（

）父級

div

定義

display:table

。

（

）結尾處加

標籤

clear:both

。

(Q2)

比較好的是第

種方式，好多網站都這麼用。

4. box-sizing

經常使用的屬性有哪些？分別有什麼做用？

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box:

寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框

(

元素默認效果

)

。

border-box:

元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。

5. Doctype

做用？標準模式與兼容模式各有什麼區別

(Q1) <!DOCTYPE>

告知瀏覽器的解析器用什麼文檔標準解析這個文檔。

DOCTYPE

不存在或格式不正確會致使文檔以兼容模式呈現。

(Q2)

標準模式的排版和

運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示

模擬老式瀏覽器的行爲以防止站點沒法工做。

6. HTML5

爲何只須要寫

<!DOCTYPE HTML>

？

HTML5

不基於

SGML

，所以不須要對

DTD

進行引用，可是須要

doctype

來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）。

而

HTML4.01

基於

SGML,

因此須要對

DTD

進行引用，才能告知瀏覽器文檔所使用的文檔類型。

頁面導入樣式時，使用

link

和

@import

有什麼區別？

（

）

link

屬於

XHTML

標籤，除了加載

CSS

外，還能用於定義

RSS,

定義

rel

鏈接屬性等做用；而

@import

是

CSS

提供的，只能用於加載

CSS;

（

）頁面被加載的時，

link

會同時被加載，而

@import

引用的

CSS

會等到頁面被加載完再加載

;

（

）

import

是

CSS2.1

提出的，只在

IE5

以上才能被識別，而

link

是

XHTML

標籤，無兼容問題。

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

主要分紅兩部分：渲染引擎

(layout engineer

或

Rendering Engine)

和

引擎。

渲染引擎：負責取得網頁的內容（

HTML

、

XML

、圖像等等）、咱們組建一大牛裙前面是

七一，整理訊息（例如加入

CSS

等），中間是零

七，以及計算網頁的顯示方式，後面是壹武四，是學習的就加，不是學習的請勿打擾。而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

引擎則：解析和執行

javascript

來實現網頁的動態效果。

最開始渲染引擎和

引擎並無區分的很明確，後來

引擎愈來愈獨立，內核就傾向於只指渲染引擎。

9. html5

有哪些新特性？如何處理

HTML5

新標籤的瀏覽器兼容問題？如何區分

HTML

和

HTML5

？

(Q1)
HTML5

如今已經不是

SGML

的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

(1)

繪畫

canvas;

(2)

用於媒介回放的

video

和

audio

元素

;

(3)

本地離線存儲

localStorage

長期存儲數據，瀏覽器關閉後數據不丟失

;

(4)sessionStorage

的數據在瀏覽器關閉後自動刪除

;

(5)

語意化更好的內容元素，好比

article

、

footer

、

header

、

nav

、

section;

(6)

表單控件，

calendar

、

date

、

time

、

url

、

search;

(7)

新的技術

webworker, websocket, Geolocation;

(Q2)
IE8/IE7/IE6

支持經過

document.createElement

方法產生的標籤，

能夠利用這一特性讓這些瀏覽器支持

HTML5

新標籤，

瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

固然也能夠直接使用成熟的框架、好比

html5shim

，

10.

簡述一下你對

HTML

語義化的理解？

用正確的標籤作正確的事情。

html

語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析

;

即便在沒有樣式

CSS

狀況下也以一種文檔格式顯示，而且是容易閱讀的

;

搜索引擎的爬蟲也依賴於

HTML

標記來肯定上下文和各個關鍵字的權重，利於

SEO;

使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

JavaScript
----------------------------

1.

介紹

的基本數據類型

Undefined

、

Null

、

Boolean

、

Number

、

String

2. js

有哪些內置對象？

數據封裝類對象：

Object

、

Array

、

Boolean

、

Number

和

String

其餘對象：

Function

、

Arguments

、

Math

、

Date

、

RegExp

、

Error

3. this

對象的理解

this

老是指向函數的直接調用者（而非間接調用者）；

若是有

new

關鍵字，

this

指向

new

出來的那個對象；

在事件中，

this

指向觸發這個事件的對象，特殊的是，

中的

attachEvent

中的

this

老是指向全局對象

Window

。

4. eval

是作什麼的？

它的功能是把對應的字符串解析成

代碼並運行；

應該避免使用

eval

，不安全，很是耗性能（

次，一次解析成

語句，一次執行）。

由

JSON

字符串轉換爲

JSON

對象的時候能夠用

eval

，

var obj =eval('('+ str +')')

。

5. DOM

怎樣添加、移除、移動、複製、建立和查找節點

建立新節點

createDocumentFragment() //

建立一個

DOM

片斷

createElement() //

建立一個具體的元素

createTextNode() //

建立一個文本節點

添加、移除、替換、插入

appendChild()
removeChild()
replaceChild()
insertBefore() //

在已有的子節點前插入一個新的子節點

查找

getElementsByTagName() //

經過標籤名稱

getElementsByName() //

經過元素的

Name

屬性的值

(IE

容錯能力較強，會獲得一個數組，其中包括

等於

name

值的

)

getElementById() //

經過元素

，惟一性

6. null

和

undefined

的區別？

null

是一個表示

無

的對象，轉爲數值時爲

；

undefined

是一個表示

無

的原始值，轉爲數值時爲

NaN

。

undefined

：

（

）變量被聲明瞭，但沒有賦值時，就等於

undefined

。

（

調用函數時，應該提供的參數沒有提供，該參數等於

undefined

。

（

）對象沒有賦值的屬性，該屬性的值爲

undefined

。

（

）函數沒有返回值時，默認返回

undefined

。

null

：

（

）做爲函數的參數，表示該函數的參數不是對象。

（

）做爲對象原型鏈的終點。

7. new

操做符具體幹了什麼呢

（

）建立一個空對象，而且

this

變量引用該對象，同時還繼承了該函數的原型。

（

）屬性和方法被加入到

this

引用的對象中。

（

）新建立的對象由

this

所引用，而且最後隱式的返回

this

。

8. JSON

的瞭解？

JSON(JavaScript Object Notation)

是一種輕量級的數據交換格式。它是基於

JavaScript

的一個子集。數據格式簡單

易於讀寫

佔用帶寬小。

格式：採用鍵值對，例如：

{'age':'12', 'name':'back'}

9. call()

和

apply()

的區別和做用？

apply()

函數有兩個參數：第一個參數是上下文，第二個參數是參數組成的數組。若是上下文是

null

，則使用全局對象代替。

如：

function.apply(this,[1,2,3]);
call()

的第一個參數是上下文，後續是實例傳入的參數序列。

如：

function.call(this,1,2,3);

10.

如何獲取

？

function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}

其餘

----------------------------

1. HTTP

狀態碼知道哪些？

100 Continue

繼續，通常在發送

post

請求時，已發送了

http header

以後服務端將返回此信息，表示確認，以後發送具體參數信息

200 OK

正常返回信息

201 Created

請求成功而且服務器建立了新的資源

202 Accepted

服務器已接受請求，但還沒有處理

301 Moved Permanently

請求的網頁已永久移動到新位置。

302 Found

臨時性重定向。

303 See Other

臨時性重定向，且老是使用

GET

請求新的

URI

。

304 Not Modified

自從上次請求後，請求的網頁未修改過。

400 Bad Request

服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。

401 Unauthorized

請求未受權。

403 Forbidden

禁止訪問。

404 Not Found

找不到如何與

URI

相匹配的資源。

500 Internal Server Error

最多見的服務器端錯誤。

503 Service Unavailable

服務器端暫時沒法處理請求（多是過載或維護）。

你有哪些性能優化的方法？

（

）減小

http

請求次數：

CSS Sprites, JS

、

CSS

源碼壓縮、圖片大小控制合適；網頁

Gzip

，

CDN

託管，

data

緩存，圖片服務器。

（

）前端模板

JS+

數據，減小因爲

HTML

標籤致使的帶寬浪費，前端用變量保存

AJAX

請求結果，每次操做本地變量，不用請求，減小請求次數

（

）用

innerHTML

代替

DOM

操做，減小

DOM

操做次數，優化

javascript

性能。

（

）當須要設置的樣式不少時設置

className

而不是直接操做

style

。

（

）少用全局變量、緩存

DOM

節點查找的結果。減小

讀取操做。

（

）避免使用

CSS Expression

（

css

表達式

)

又稱

Dynamic properties(

動態屬性

)

。

（

）圖片預加載，將樣式表放在頂部，將腳本放在底部

加上時間戳。

什麼叫優雅降級和漸進加強？

優雅降級：

Web

站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲

獨特的盒模型佈局問題，針對不一樣版本的

的

hack

實踐過優雅降級了

爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效。

漸進加強：從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能

向頁面增長無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。

哪些常見操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲

（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout

的第一個參數使用字符串而非函數的話，會引起內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）。

線程與進程的區別

一個程序至少有一個進程

一個進程至少有一個線程。

線程的劃分尺度小於進程，使得多線程程序的併發性高。

另外，進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率。

線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。

從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別

。

想要學習前端開發的同窗，能夠加羣：

543627393

學習哦！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。