更多課程 選擇中心

Web培訓
美國上市教育機構

400-111-8989

Web培訓

2020年Web前端面試題匯總(五)

  • 發布:Web前端培訓
  • 來源:web前端面試
  • 時間:2020-06-17 14:08

今天小編要跟大家分享的文章是關于2020年Web前端面試題匯總。由于內容較多小編分開為大家介紹,今天來和小編一起看一看第五部分的內容,希望這些面試題能夠對正準備找Web前端相關工作的小伙伴們有所幫助。下面來和小編一起看一看吧!

2020年Web前端面試題匯總

1.請說明ECMAScript, JavaScript, Jscript之間的關系?

ECMAScript提供腳本語言必須遵守的規則、

細節和準則,是腳本語言的規范。

比如:ES5,ES6就是具體的一js版本。

JavaScript是ECMAScript的一個分支版本,

JavaScript 實現了多數 ECMA-262 中

描述的 ECMAScript 規范,但存在少數差異。

JScript是微軟公司對ECMA-262語言規范的

一種實現,除了少數例外(這是為了保持向后兼容 ),

微軟公司宣稱JScript完全實現了ECMA標準.

關系:

JavaScript和JScript都是ECMAScript的版本分支,

二者在語法上沒有多大的區別;

只不過一個是NetScape公司的, 一個是微軟的;

IE系列默認是JScript, 其它的則反之用JavaScript。

2. 頁面加載過程中可能觸發哪些事件? 它們的順序是?

頁面加載時,大致可以分為以下幾個步驟:

1) 開始解析HTML文檔結構

2) 加載外部樣式表及JavaScript腳本

3) 解析執行JavaScript腳本

4) DOM樹渲染完成

5) 加載未完成的外部資源

6) 頁面加載成功

執行順序:

1) document readystatechange事件

2) document DOMContentLoaded事件

3) window load事件

3. 函數中在聲明變量a前使用a會產生錯誤嗎? 為什么?

不會, JS中能夠進行變量作用域提升,

把所有變量、函數的聲明提升到當前

作用域的最前面, 但不進行賦值操作;

所以可能造成獲取的值是undefined。

4. 什么是hash, 以及hashchange事件?

先了解下什么是hash:hash即URL中"#"字符后面的部分。

a) 使用瀏覽器訪問網頁時,

如果網頁URL中帶有hash,

頁面就會定位到id(或name)

與hash值一樣的元素的位置;

b) hash還有另一個特點,

它的改變不會導致頁面重新加載;

c) hash值瀏覽器是不會隨請求發送到服務器端的;

d) 通過window.location.hash屬性獲取和設置hash值。

window.location.hash值的變化會直接

反應到瀏覽器地址欄(#后面的部分會發生變化),

同時,瀏覽器地址欄hash值的變化也會觸發

window.location.hash值的變化,

從而觸發onhashchange事件。

再來了解下什么是hashchange事件:

a) 當URL的片段標識符更改時,

將觸發hashchange事件(跟在#符號后面的URL部分,包括#符號)b)

hashchange事件觸發時,

事件對象會有hash改變前的URL(oldURL)和hash改變后的URL(newURL)兩個屬性。

5. 什么是CDN, CDN對于網站有什么意義, 它有什么樣的缺點?

CDN又稱為內容分發網絡; 本意在于

盡可能避開互聯網上有可能影響數據

傳輸速度和穩定性的瓶頸和環節,

使內容傳輸的更快、更穩定。

主要目的:

解決因分布、帶寬、服務器性能帶來的訪問延遲問題,

適用于站點加速、點播、直播等場景。

使用戶可就近取得所需內容,解決 Internet網絡擁擠的狀況,

提高用戶訪問網站的響應速度和成功率。

缺點:

a) 實施復雜 , 投資大;

b) 目前大部分的CDN還只是對靜態內容加速,

對動態加速效果不好;

而雙線對動態加速的效果跟靜態是一樣的。

6. 你能描述一下漸進增強和優雅降級之間的不同嗎?

定義:

優雅降級(graceful degradation):

一開始就構建站點的完整功能,

然后針對瀏覽器測試和修復

漸進增強(progressive enhancement):

一開始只構建站點的最少特性,

然后不斷針對各瀏覽器追加功能。

優雅降級和漸進增強都關注于同一網站

在不同設備里不同瀏覽器下的表現程度。

區別:

“優雅降級”觀點認為應該針對那些最高級、

最完善的瀏覽器來設計網站。

而將那些被認為“過時”或有功能缺失的瀏覽器下

的測試工作安排在開發周期的最后階段,并把測試

對象限定為主流瀏覽器(如 IE、Mozilla 等)的

前一個版本。

“漸進增強”觀點則認為應關注于內容本身。

總結:"優雅降級"就是首先完整地實現整個網站,

包括其中的功能和效果. 然后再為那些無

法支持所有功能的瀏覽器增加候選方案,

使之在舊式瀏覽器上以某種形式降級體驗

卻不至于完全失效。"漸進增強"則是從瀏覽器支持的基本功能開始,

首先為所有設備準備好清晰且語義化的html及

完整內容, 然后再以無侵入的方法向頁面增加無

害于基礎瀏覽器的額外樣式和功能。

當瀏覽器升級時, 它們會自動呈現并發揮作用。

7. 請說說瀏覽器內核的組成?

瀏覽器的結構:

用戶界面(UI) - 包括菜單欄、工具欄、地址欄、

后退/前進按鈕、書簽目錄等,也就是能看到的除

了顯示頁面的主窗口之外的部分;

瀏覽器引擎(Rendering engine)-也被稱為瀏覽器

內核、渲染引擎,主要負責取得頁面內容、整理信息

(應用CSS)、計算頁面的顯示方式,然后會輸出到

顯示器或者打印機;

JS解釋器 - 也可以稱為JS內核,主要負責處理

javascript腳本程序,一般都會附帶在瀏覽器

之中,例如chrome的V8引擎;

網絡部分 - 主要用于網絡調用,例如:HTTP請求,

其接口與平臺無關,并為所有的平臺提供底層實現;

UI后端 - 用于繪制基本的窗口部件,比如組合框和窗口等。

數據存儲 - 保存類似于cookie、storage等數據部分,

HTML5新增了web database技術,一種完整的輕量級客

戶端存儲技術。

主要瀏覽器:

IE、Firefox、Safari、Chrome、Opera。

它們的瀏覽器內核(渲染引擎):

IE--Trident

FF(Mozilla)--Gecko

Safari--Webkit

Chrome--Blink(WebKit的分支)

Opera--原為Presto,現為Blink

8. 為什么利用多個域名來請求網絡資源會更有效?

動靜分離需求,使用不同的服務器處理請求。

處理動態內容的只處理動態內容,不處理別的,

提高效率。

突破瀏覽器并發限制, 同一時間針對同一域名

下的請求有一定數量限制。超過限制數目的請

求會被阻止。不同瀏覽器這個限制的數目不一樣。

Cookieless, 節省帶寬,尤其是上行帶寬一般比下

行要慢。用戶的每次訪問,都會帶上自己的cookie

,久而久之耗費的帶寬還是挺大的。

假如weibo 的圖片放在主站域名下,那么用戶

每次訪問圖片時,request header 里就會帶有

自己的cookie ,header 里的cookie 還不能壓縮,

而圖片是不需要知道用戶的cookie 的,所以這部分帶

寬就白白浪費了。

避免不必要的安全問題(比如: 上傳js竊取主站cookie之類的)

節約主域名的連接數,從而提高客戶端網絡帶寬的利用率,

優化頁面響應。

9. 說說前端開發中, 如何進行性能優化?

1) 減少http請求次數:css spirit,data uri;

2) JS,CSS源碼壓縮;

3) 前端模板 JS+數據,減少由于HTML標簽導致

的帶寬浪費,前端用變量保存AJAX請求結果,每

次操作本地變量,不用請求,減少請求次數;

4) 用innerHTML代替DOM操作,減少DOM操作次數;

5) 用setTimeout來避免頁面失去響應;

6) 用hash-table來優化查找;

7) 當需要設置的樣式很多時設置className而不

是直接操作style;

8) 少用全局變量;

9) 緩存DOM節點查找的結果;

10)避免使用CSS Expression;

11)圖片預載;

12)避免在頁面的主體布局中使用table,

table要等其中的內容完全下載之后才會顯示出來,

顯示比div+css布局慢;

13)控制網頁在網絡傳輸過程中的數據量;

比如: 啟用GZIP壓縮或者保持良好的編程習慣,

避免重復的CSS,JavaScript代碼,

多余的HTML標簽和屬性。

10. 從前端角度出發, 談談做好網站seo需要考慮什么?

1) 語義化html標簽;

2) 合理的title, description, keywords;

3) 重要的html代碼放前面;

4) 少用iframe, 搜索引擎不會抓取iframe中的內容

5) 圖片加上alt

以上就是小編今天為大家分享的關于2020年Web前端面試題匯總(五)的文章,希望本篇文章能夠對想要參加Web前端面試的小伙伴們有所幫助,想要了解更多Web前端相關知識記得關注達內Web培訓官網。最后祝愿小伙伴們面試成功,成為一名優秀的Web前端工程師

【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:2020年Web前端面試題匯總(四)
下一篇:2020年Web前端面試題匯總(六)

2020年Web前端面試題匯總(六)

2020年Web前端面試題匯總(五)

2020年Web前端面試題匯總(四)

2020年Web前端面試題匯總(三)

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

欧美在线v中文字幕