吐血整理五萬字100道高頻基礎面試題【番外01】無名面試集《爛俗前端》

語言: CN / TW / HK

本文已參與「掘力星計劃」,贏取創作大禮包,挑戰創作激勵金。


《爛俗前端》是一部以前端為題材的小說,涉及討論職業、社會、技術、情感等話題,正在更新中。

之前吳明在對趙鐵柱考驗之前,扔了一份面試題集合讓趙鐵柱背,說:“你現在這個階段,做到理解這些題還比較難,所以想過一些面試,就一個字,'背'!當然,死記硬背是在你嘗試去理解未果的前提下。”,“另外,在這之前快速看完HTML/CSS/JS的基礎內容, 比如兩天看一遍。不然看面試題就是一臉懵逼。”

有些同學總覺得光背這些不去理解的話沒什麼鳥用,能理解當然好,不能理解,背會了對面試官來說,那也是屬於你的知識,學習態度也算ok。

鐵柱硬著頭皮背了下來。下面是面試題正文。


作者:吳明

宣告:本面試題非完全原創,作者負責篩選整理、編輯、補全解答、撰寫。

主要讀者人群:入門新人、社招面試者、初級前端。


01、什麼是HTML語義化?

HTML語義化就是讓頁面內容結構化,它有如下優點:

1、易於使用者閱讀,樣式丟失的時候能讓頁面呈現清晰的結構。

2、有利於SEO,搜尋引擎根據標籤來確定上下文和各個關鍵字的權重。

3、方便其他裝置解析,如盲人閱讀器根據語義> 渲染網頁

4、有利於開發和維護,語義化更具可讀性,程式碼更好維護,與CSS3關係更和諧


02、行內元素和塊級元素?img算什麼?行內元素怎麼轉化為塊級元素??

行內元素:和有他元素都在一行上,高度、行高及外邊距和內邊距都不可改變,文字圖片的寬度不可改變,只能容納文字或者其他行內元素;其中img是行元素。

塊級元素:總是在新行上開始,高度、行高及外邊距和內邊距都可控制,可以容納內斂元素和其他元素。

行元素轉換為塊級元素方式:display:block;


03、請說出一些HTML5新增標籤

能記多少記得少,太少用的我就不列出來了

章節:

  • <section> 定義文件中的一個章節,一般來說會有包含一個 heading
  • <nav>定義一個含有多個超連結的區域,這個區域包含轉到其他頁面,或者頁面內部其他部分的連結列表
  • <article> 表示文件、頁面、應用或網站中的獨立結構,其意在成為可獨立分配的或可複用的結構
  • <aside> 定義和頁面內容聯度較低的內容--如果被刪除,剩下的內容仍然很合理
  • <header> 定義頁面或章節的頭部。它經常包含logo、頁面標題和導航性的目錄
  • <footer> 定義頁面或章節的尾部。它經常包含版權資訊、法律資訊連結和反饋建議用的地址
  • <main> 定義文件中主要或重要的獨一無二的內容。一個文件中不能出現一個以上的<main>標籤

文字形式: + <data> 將一個指定內容和機器可讀的翻譯聯絡在一起。但如果內容是與time和date相關的,一定要使用<time> + <time> 代表日期和時間值;機器可讀的等價形式通過datetime屬性指定 + <mark> 代表一段需要被高亮的引用文字,用來表示上下文的關聯性 + <ruby> 表示被ruby註釋標記的文字,如中文漢字和它的拼音 + <bdi> 代表需要脫離父元素文字方向的一段文字。它允許嵌入一段不同或未知文字方向格式的文字 + <wbr> 代表建議換行,當文字太長需要換行時將會在此處新增換行符

嵌入內容: + <embed> 代表一個嵌入的外部資源,如應用程式或互動內容,換句話說,就是一個外掛。如<embed type="video/quicktime" src="movie.mov" width="640" height="480"> + <video> 代表一段影片及其影片檔案和字幕,並提供了播放影片的使用者介面 + <audio> 代表一段聲音或音訊流。 <audio> 元素可以包含多個音訊資源, 這些音訊資源可以使用 src 屬性或者<source> 元素來進行描述 + <source><video><audio>這類媒體元素指定媒體源 + <track><video><audio>這類媒體元素指定文字軌道(字幕) + <canvas> 代表點陣圖區域,可以通過指令碼在它上面實時呈現圖形,如圖表、遊戲繪圖等 + <svg> 定義一個嵌入式向量圖 + <math> 定義一段數學公式

表單: + <datalist> 代表提供給其他控制元件的一組預定義選項 + <keygen> 代表一個金鑰對生成器控制元件 + <output> 代表計算值 + <meter> 代表滑動條 + <progress> 代表進度條,用來顯示一項任務的完成進度

互動元素: + <details> 代表一個使用者可以(點選)獲取額外資訊或控制元件的小部件。與summary配合使用 + <summary> 代表 <details> 元素的綜述或標題 + <menuitem> 代表一個使用者可以點選的選單項 + <menu> 代表選單,呈現了一組使用者可執行或啟用的命令。這既包含了可能出現在螢幕頂端的列表選單,也包含了那些隱藏在按鈕之下、當點選按鈕後顯示出來的文字選單。


04、src和href的區別

  • src 是指向外部資源的位置,指向的內容會嵌入到文件當前標籤所在的位置,如css、js指令碼、img等
  • href 是指向網路資源所在的位置(的超連結),如<a href='xxx'></a>

05、前端頁面有哪三層構成,分別是什麼?作用是什麼?

分成:結構層、表示層、行為層。 + 結構層(structural layer) 由 HTML 或 XHTML 之類的標記語言負責建立。標籤,也就是那些出現在尖括號裡的單詞,對網頁內容的語義含義做出了描述,但這些標籤不包含任何關於如何顯示有關內容的資訊。例如,P 標籤表達了這樣一種語義:“這是一個文字段。”

  • 表示層(presentation layer) 由 CSS 負責建立。 CSS 對“如何顯示有關內容”的問題做出了回答。

  • 行為層(behaviorlayer) 負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。


06、請寫出至少5個HTML塊元素標籤

div、p、ul、li、table、h1、h2、h3 ... h6、form 等


07、請寫出至少5個HTML行內元素標籤

span、a、i、label、img、input、button、textarea、select 等


08、常用瀏覽器有哪些,核心都是什麼?

常用瀏覽器有IE、火狐(firefox)、chrome、safari 、360、搜狗等 核心: + IE的是 Trident,新版微軟瀏覽器Edge使用Webkit + 火狐的是 Gecko + safari 用的是 Webkit + 360和搜狗這些分極速模式和相容模式,極速模式用的Webkit的核心,相容模式用的Trident核心


09、對 WEB 標準以及 W3C 的理解與認識

標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外 鏈 css 和 js 指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件,容易維 護、改版方便,不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性。


10、前端需要注意哪些 SEO

  • 合理的 title、description、keywords:搜尋對著三項的權重逐個減小,title 值強調重點即可,重要關鍵詞出現不要超過 2 次,而且要靠前,不同頁面 title 要有所不同;description 把頁面內容高度概括,長度合適,不可過分堆砌關鍵詞,不同頁面 description 有所不同;keywords 列舉出重要關鍵詞即可

  • 語義化的 HTML 程式碼,符合 W3C 規範:語義化程式碼讓搜尋引擎容易理解網頁

  • 重要內容 HTML 程式碼放在最前:搜尋引擎抓取 HTML 順序是從上到下,有的搜尋引擎對抓取長度有限制,保證重要內容一定會被抓取

  • 重要內容不要用 js 輸出:爬蟲不會執行 js 獲取內容

  • 少用 iframe:搜尋引擎不會抓取 iframe 中的內容

  • 非裝飾性圖片必須加 alt

  • 提高網站速度:網站速度是搜尋引擎排序的一個重要指標


11、Canvas 和 SVG 有什麼區別?

Canvas 和 SVG 都允許您在瀏覽器中建立圖形,但是它們在根本上是不同的。

  • Canvas

通過 Javascript 來繪製 2D 圖形。 是逐畫素進行渲染的。 其位置發生改變,會重新進行繪製。

  • SVG 一種使用 XML 描述的 2D 圖形的語言 SVG 基於 XML 意味著,SVG DOM 中的每個元素都是可用的,可以為某個元素附加 Javascript 事件處理器。 在 SVG 中,每個被繪製的圖形均被視為物件。如果 SVG 物件的屬性發生變化,那麼瀏覽器能夠自動重現圖形。

  • 比較 Canvas 依賴解析度 不支援事件處理器 弱的文字渲染能力 能夠以 .png 或 .jpg 格式儲存結果影象 最適合影象密集型的遊戲,其中的許多物件會被頻繁重繪

SVG 不依賴解析度 支援事件處理器 最適合帶有大型渲染區域的應用程式(比如谷歌地圖) 複雜度高會減慢渲染速度(任何過度使用 DOM 的應用都不快) 不適合遊戲應用


12、meta viewport 原理是什麼?

meta viewport 標籤的作用是讓當前 viewport 的寬度等於裝置的寬度,同時不允許使用者進行手動縮放

viewport的原理:移動端瀏覽器通常都會在一個比移動端螢幕更寬的虛擬視窗中渲染頁面,這個虛擬視窗就是 viewport; 目的是正常展示沒有做移動端適配的網頁,讓他們完整的展示給使用者;

解析: Viewport :字面意思為檢視視窗,在移動 web 開發中使用。表示將裝置瀏覽器寬度虛擬成一個特定的值(或計算得出),這樣利於移動 web 站點跨裝置顯示效果基本一致。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag,讓網頁開發者來控制 viewport 的大小和縮放,其他手機瀏覽器也基本支援。

在移動端瀏覽器當中,存在著兩種視口,一種是可見視口(也就是我們說的裝置大小),另一種是視窗視口(網頁的寬度是多少)。 舉個例子:如果我們的螢幕是 320 畫素 * 480 畫素的大小(iPhone4),假設在瀏覽器中,320 畫素的螢幕寬度能夠展示 980 畫素寬度的內容。那麼 320 畫素的寬度就是可見視口的寬度,而能夠顯示的 980 畫素的寬度就是視窗視口的寬度。

為了顯示更多的內容,大多數的瀏覽器會把自己的視窗視口擴大,簡易的理解,就是讓原本 320 畫素的螢幕寬度能夠容下 980 畫素甚至更寬的內容(將網頁等比例縮小)。


13、Viewport 屬性值

  • width 設定 layout viewport 的寬度,為一個正整數,或字串"width-device"
  • initial-scale 設定頁面的初始縮放值,為一個數字,可以帶小數
  • minimum-scale 允許使用者的最小縮放值,為一個數字,可以帶小數
  • maximum-scale 允許使用者的最大縮放值,為一個數字,可以帶小數
  • height 設定 layout viewport 的高度,這個屬性對我們並不重要,很少使用
  • user-scalable 是否允許使用者進行縮放,值為"no"或"yes", no 代表不允許,yes 代表允許這些屬性可以同時使用,也可以單獨使用或混合使用,多個屬性同時使用時用逗號隔開就行了。

14、為什麼最好把 CSS 的<link>標籤放在<head></head>之間?為什麼最好把 JS 的<script>標籤恰好放在</body>之前,有例外情況嗎?

<link>放在<head>

<link>標籤放在<head></head>之間是規範要求的內容。此外,這種做法可以讓頁面逐步呈現,提高了使用者體驗。將樣式表放在文件底部附近,會使許多瀏覽器(包括 Internet Explorer)不能逐步呈現頁面。一些瀏覽器會阻止渲染,以避免在頁面樣式發生變化時,重新繪製頁面中的元素。這種做法可以防止呈現給使用者空白的頁面或沒有樣式的內容。

<script>標籤恰好放在</body>之前

指令碼在下載和執行期間會阻止 HTML 解析。把<script>標籤放在底部,保證 HTML 首先完成解析,將頁面儘早呈現給使用者。

例外情況是當你的腳本里包含document.write()時。但是現在,document.write()不推薦使用。同時,將<script>標籤放在底部,意味著瀏覽器不能開始下載指令碼,直到整個文件(document)被解析。也許,對此比較好的做法是,<script>使用defer屬性,放在<head>中。


15、img 上 title 與 alt

title 指圖片的資訊、alt 指圖片不顯示時顯示的文字


16、DOM Tree是如何構建的?

HTML 直譯器 HTML 直譯器的工作就是將網路或者本地磁盤獲取的 HTML 網頁和資源從位元組流解釋成 DOM 樹結構。

JavaScript 的執行 在 HTML 直譯器的工作過程中,可能會有 JavaScript 程式碼需要執行,它發生在將字串解釋成詞語之後、建立各種節點的時候。這也是為什麼全域性執行的 JavaScript 程式碼不能訪問 DOM 的原因——因為 DOM 樹還沒有被建立完呢。


17、video標籤的幾個個屬性方法

  • src:影片的URL
  • poster:影片封面,沒有播放時顯示的圖片
  • preload:預載入
  • autoplay:自動播放
  • loop:迴圈播放
  • controls:瀏覽器自帶的控制條
  • width:影片寬度
  • height:影片高度

18、script標籤中defer和async的區別

defer 瀏覽器指示指令碼在文件被解析後執行,script被非同步載入後並不會立即執行,而是等待文件被解析完畢後執行 + <script type="text/javascript" src="x.min.js" defer="defer"></script> + defer只適用於外聯指令碼,如果script標籤沒有指定src屬性,只是內聯指令碼,不要使用defer + 如果有多個聲明瞭defer的指令碼,則會按順序下載和執行 + defer指令碼會在DOMContentLoaded和load事件之前執行

async 同樣是非同步載入指令碼,區別是指令碼載入完畢後立即執行,這導致async屬性下的指令碼是亂序的,對於script又先後依賴關係的情況,並不適用 + <script type="text/javascript" src="x.min.js" async="async"></script> + 只適用於外聯指令碼,這一點和defer一致 + 如果有多個聲明瞭async的指令碼,其下載和執行也是非同步的,不能確保彼此的先後順序 + async會在load事件之前執行,但並不能確保與DOMContentLoaded的執行先後順序


19、meta標籤常用屬性

  • Keywords(關鍵詞)

說明:告訴搜尋引擎你網頁的關鍵字(keywords) 使用方法:<meta name="keywords" content="標籤,屬性,seo優化">

  • Robots (機器人嚮導)

說明:Robots用來告訴搜尋機器人頁面需要或者不需要索引。Content的引數有all、none、index、noindex、follow、nofollow。預設是all。

使用方法:<meta name="robots" content="All|None|Index|Noindex|Follow|Nofollow"> + all:檔案將被檢索,且頁面上的連結能夠被查詢。 + none:檔案將不被檢索。且頁面上的連結不能夠被查詢。(和 "noindex, no follow" 起同樣作用) + index:檔案將被檢索;(讓robot/spider登入) + follow:頁面上的連結能夠被查詢; + noindex:檔案將不被檢索,但頁面上的連結能夠被查詢;(不讓robot/spider登入) + nofollow:檔案將不被檢索,頁面上的連結能夠被查詢。(不讓robot/spider順著此頁的連線往下探找)

  • viewport(視窗/移動端)**

說明:viewport 是使用者網頁的可視區域,即“視區”。

使用方法:<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • width:控制 viewport 的大小,可以指定的一個值,如 600,或者特殊的值,如 device-width 為裝置的寬度(單位為縮放為 100% 時的 CSS 的畫素)。
  • height:和 width 相對應,指定高度。
  • initial-scale:初始縮放比例,也即是當頁面第一次 load 的時候縮放比例。
  • maximum-scale:允許使用者縮放到的最大比例。
  • minimum-scale:允許使用者縮放到的最小比例。
  • user-scalable:使用者是否可以手動縮放。

  • http-equiv="X-UA-Compatible" (這是一個文件相容模式的定義)

使用: <meta http-equiv = "X-UA-Compatible" content = "chrome=1" >

X-UA-Compatible:是IE8新加的一個設定,對於IE8以下的瀏覽器是不識別的,通過在meta中設定X-UA-Compatible的值,可以指定網頁的相容性模式設定。

< meta http-equiv = "X-UA-Compatible" content = "chrome=1" >用以聲明當前頁面用chrome核心來渲染。

Edge模式告訴IE以最高階 模式渲染文件,也就是任何IE版本都以當前版本所支援的最高階標準模式渲染,避免版本升級造成的影響。

  • renderer(指定雙核瀏覽器預設以何種方式渲染頁面)

使用:<meta name="renderer" content="webkit">

這段程式碼意思:強制瀏覽器使用Webkit核心。

若頁面需預設用極速核,增加標籤:<meta name="renderer" content="webkit"> 若頁面需預設用ie相容核心,增加標籤:<meta name="renderer" content="ie-comp"> 若頁面需預設用ie標準核心,增加標籤:<meta name="renderer" content="ie-stand">

舉例說明

a. 設定螢幕寬度為裝置寬度,禁止使用者手動調整縮放 <meta name="viewport" content="width=device-width,user-scalable=no" />

b. 設定螢幕密度為高頻,中頻,低頻自己主動縮放,禁止使用者手動調整縮放) <meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

另外iOS 7.1的Safari為meta標籤新增minimal-ui屬性,在網頁載入時預設隱藏位址列與導航欄。


20、HTML5 為什麼只需要寫<!DOCTYPE HTML>,而不需要引入 DTD?

HTML5 不基於 SGML,因此不需要對 DTD 進行引用,但是需要 DOCTYPE 來規範瀏覽器的行為(讓瀏覽器按照它們應該的方式來運 行)。 而 HTML4.01 基於 SGML ,所以需要對 DTD 進行引用,才能告知瀏覽器文件所使用的文件型別。


21、DTD 介紹

DTD( Document Type Definition 文件型別定義)是一組機器可讀的規則,它們定義 XML 或 HTML 的特定版本中所有允許元 素及它們的屬性和層次關係的定義。在解析網頁時,瀏覽器將使用這些規則檢查頁面的有效性並且採取相應的措施。 DTD 是對 HTML 文件的宣告,還會影響瀏覽器的渲染模式(工作模式)。


22、簡述前端優化的方式

  • 儘量減少HTTP請求次數
  • 減少DNS查詢次數
  • 避免跳轉
  • 可快取的AJAX
  • 推遲載入內容
  • 預載入
  • 減少DOM元素數量
  • 根據域名劃分頁面內容
  • 使iframe的數量最小
  • 不要出現404錯誤
  • 使用內容分發網路
  • 為檔案頭指定Expires或Cache-Control 13、Gzip壓縮檔案內容
  • 配置ETag
  • 儘早重新整理輸出緩衝
  • 使用GET來完成AJAX請求
  • 把樣式表置於頂部
  • 避免使用CSS表示式(Expression)
  • 使用外部JavaScript和CSS
  • 削減JavaScript和CSS
  • <link>代替@import
  • 避免使用濾鏡
  • 把指令碼置於頁面底部
  • 剔除重複指令碼

23、CSS盒子模型

盒模型分為標準盒模型怪異盒模型(IE模型)

css /* 使用css指定某個元素的盒子模型型別 */ box-sizing:content-box; /*標準盒模型*/ box-sizing:border-box; /*怪異盒模型*/

01.png

02.png

上圖顯示:

在CSS盒子模型規定了元素處理元素的幾種方式:

  • width和height:內容的寬度、高度(不是盒子的寬度、高度)。
  • padding:內邊距。
  • border:邊框。
  • margin:外邊距。

CSS盒模型和IE盒模型的區別:

在 標準盒子模型中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。

IE盒子模型中,width 和 height 指的是內容區域+border+padding的寬度和高度。


24、為什麼要初始化CSS樣式。

因為瀏覽器的相容問題,不同瀏覽器對有些標籤的預設值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。


25、如何讓一個div 上下左右居中?

```html

```

```css /給出三種css答案,實際上還有更多方法/

/方法一/ .div1{ width:400px;
height:400px; border:#CCC 1px solid;
/下面幾個才是居中的關鍵屬性/ position:absolute;
left:50%; top:50%;
transform: translate(-50%,-50%); }

/方法二/ .div1{ width:400px;
height:400px;
border:#CCC 1px solid;
/下面幾個才是居中的關鍵屬性/ position: absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto; }

/方法三/ .div1{ width:400px;
height:400px;
border:#CCC 1px solid; /下面幾個才是居中的關鍵屬性/ position: absolute;
left: 50%; top:50%;
margin-left:-200px;
margin-top: -200px;
} ```


26、簡述css hack?(現在瀏覽器)

由於不同的瀏覽器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,對CSS的解析認識不一樣,因此會導致生成的頁面效果不一樣,得不到我們所需要的頁面效果。

這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時相容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果。

這個針對不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack,也叫寫CSS hack。

CSS hack是通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號(什麼樣的瀏覽器識別什麼樣的符號是有標準的,CSS hack就是讓你記住這個標準),以達到應用不同的CSS樣式的目的,比如

``` .kwstu{width:300px;_width:200px;},

`` 一般瀏覽器會先給元素使用width:300px;的樣式,緊接著後面還有個_width:200px;,由於下劃線_width只有IE6可以識別,所以此樣式在IE6中實際設定物件的寬度為200px,後面的把前面的給覆蓋了,而其他瀏覽器不識別_width不會執行_width:200px;`這句樣式,所以在其他瀏覽器中設定物件的寬度就是300px;


27、CSS 選擇器有哪些?

  • id選擇器( #myid)
  • 類選擇器(.myclassname)
  • 標籤選擇器(div, h1, p)
  • 相鄰選擇器(h1 + p)
  • 子選擇器(ul > li)
  • 後代選擇器(li a)
  • 萬用字元選擇器( * )
  • 屬性選擇器(a[rel = “external”])
  • 偽類選擇器(a:hover, li:nth-child)

28、css選擇器的權重(優先順序)

!important > 行內樣式 > #id > .class > 元素和偽元素 > * > 繼承 > 預設


29、CSS3新特性

  • 新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
  • 彈性盒模型 display: flex;
  • 多列布局 column-count: 5;
  • 媒體查詢 @media(max-width: 480px) {.box: {column-count: 1;}}
  • 個性化字型 @font-face{font-family:BorderWeb;src:url(BORDERW0.eot);}
  • 顏色透明度 color: rgba(255, 0, 0,0.75);
  • 圓角 border-radius: 5px;
  • 漸變 background:linear-gradient(red, green, blue);
  • 陰影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
  • 倒影 box-reflect: below 2px;
  • 文字裝飾 text-stroke-color: red;
  • 文字溢位 text-overflow:ellipsis;
  • 背景效果 background-size: 100px 100px;
  • 邊框效果 border-image:url(bt_blue.png) 0 10;

轉換 + 旋轉 transform: rotate(20deg); + 傾斜 transform: skew(150deg,-10deg); + 位移 transform:translate(20px, 20px); + 縮放 transform: scale(.5); + 平滑過渡 transition: all .3s ease-in .1s; + 動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;


30、CSS隱藏元素的幾種方法

  • opacity: 0; 元素本身依然佔據它自己的位置並對網頁的佈局起作用。它也將響應使用者互動;

  • visibility: hidden; 與 opacity 唯一不同的是它不會響應任何使用者互動。此外,元素在讀屏軟體中也會被隱藏;

  • display: none; 設為 none 任何對該元素直接打使用者互動操作都不可能生效。此外,讀屏軟體也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;


31、css清除浮動的幾種方式?

  • 父級div定義 height
  • 結尾處加空div標籤 clear:both
  • 父級div定義 偽類:after 和 zoom
  • 父級div定義 overflow:hidden
  • 父級div定義 overflow:auto
  • 父級div 也一起浮動
  • 父級div定義 display:table

32、談談css前處理器的理解

CSS 前處理器定義了一種新的語言,其基本思想是,用一種專門的程式語言,為 CSS 增加了一些程式設計的特性,將 CSS 作為目標生成檔案,然後開發者就只要使用這種語言進行編碼工作。

CSS 前處理器用一種專門的程式語言,進行 Web 頁面樣式設計,然後再編譯成正常的 CSS 檔案,以供專案使用。CSS 前處理器為 CSS 增加一些程式設計的特性,無需考慮瀏覽器的相容性問題

通俗的說,“CSS 前處理器用一種專門的程式語言,進行 Web 頁面樣式設計,然後再編譯成正常的 CSS 檔案,以供專案使用。CSS 前處理器為 CSS 增加一些程式設計的特性,無需考慮瀏覽器的相容性問題”。

例如你可以在 CSS 中使用變數、簡單的邏輯程式、函式(如右側程式碼編輯器中就使用了變數$color)等等在程式語言中的一些基本特性,可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳,更易於程式碼的維護等諸多好處。

CSS 前處理器技術已經非常的成熟,而且也湧現出了很多種不同的 CSS 前處理器語言,比如說:

  • Sass(SCSS)
  • LESS
  • Stylus
  • Turbine
  • Swithch CSS
  • CSS Cacheer

到目前為止,在眾多優秀的 CSS 前處理器語言中就屬 Sass、LESS 和 Stylus 使用較為廣泛。

優點: 1、CSS變得更易於維護。

2、易於編寫巢狀選擇器。

3、用於一致主題的變數。可以跨不同專案共享主題檔案。

4、Mixins生成重複的CSS。

5、諸如迴圈,列表和對映之類的Sass功能可以使配置更容易且更省力。

6、將您的程式碼分成多個檔案。CSS檔案也可以拆分,但是這樣做需要HTTP請求才能下載每個CSS檔案。

缺點: 1、需要進行預處理的工具。重新編譯時間可慢一些。

2、不編寫當前和潛在可用的CSS。例如,通過將諸如 postcss-loader之類的內容 與 webpack一起使用,您可以編寫可能與將來相容的CSS,從而使您可以使用CSS變數(而不是Sass變數)之類的東西


33、請解釋一下CSS3的flexbox(彈性盒佈局模型),以及適用場景?

該佈局模型的目的是提供一種更加高效的方式來對容器中的條目進行佈局、對齊和分配空間。在傳統的佈局方式中,block 佈局是把塊在垂直方向從上到下依次排列的;而 inline 佈局則是在水平方向來排列。彈性盒佈局並沒有這樣內在的方向限制,可以由開發人員自由操作。 試用場景:彈性佈局適合於移動前端開發,在Android和ios上也完美支援。


34、CSS 單位

最常用的單位:%百分比,px,rem,vh,vw

有傳統的單位如:% 百分比、cm 釐米、mm 毫米、px 畫素(計算機螢幕上的一個點)、in 英寸、pt 磅,此外還有: + rgb(x,x,x) rgb(x%,x%,x%) #rrggbb(十六進位制) + em:1em 等於當前字型尺寸(繼承父元素的字型尺寸) + rem:r 為 root,1rem 等於根元素字型尺寸(繼承 html 的字型尺寸) + vh:1vh 等於可視視窗高度的 1/100 + vw: 1vw 等於可視視窗寬度的 1/100 + vmin:可視視窗寬高更小的值的 1/100 + vmax:可視視窗寬高更大的值的 1/100 + ex:當前字型的一個 x-height,一般為當前字型的一個 em 的一半,因為一個 'x' 字母一般為字型大小的一半 + ch:設定 width:40ch 表示這個寬度可以容納 40 個特定字型的字元


35、有哪些方式可以對一個DOM設定它的CSS樣式?

  • 外部樣式表。使用<link>引入一個外部CSS檔案;
  • 內部樣式表。將CSS程式碼放在<head>標籤內部;
  • 內聯樣式,將CSS樣式直接定義在HTML元素內部;

36、知道css有個content屬性嗎?有什麼用?

CSS的content屬性專門應用在before/after偽元素上,用來插入生成內容。最常見的應用是利用偽類清除浮動: ```css /一種常見利用偽類清除浮動的程式碼/ .clearfix:after {
content:"."; /這裡利用到了content屬性/ display:block;
height:0;
visibility:hidden;
clear:both; }

.clearfix {
*zoom:1;
} ``` after偽元素通過content在元素的後面生成一個點的塊級元素,再利用clear: both清除浮動。


37、display 有哪些值?各有何作用?

常用的有以下(還有別的值,相對少用): + block 元素按塊型別元素一樣顯示。 + none 預設值。元素按行內元素型別一樣顯示。 + inline 元素按行內元素型別一樣顯示。 + inline-block 元素按行內元素一樣顯示,但其內容像塊型別元素一樣顯示。 + list-item 元素按塊型別元素一樣顯示,並新增樣式列表標記。


38、position 中的 relative 和 absolute 定位的區別?

  • absolute 生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。
  • fixed 生成絕對定位的元素,相對於瀏覽器視窗進行定位。
  • relative 生成相對定位的元素,相對於其正常位置進行定位。
  • static 預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right z-index 宣告)。
  • inherit 規定從父元素繼承 position 屬性的值。

39、用純 CSS 建立一個三角形的原理是什麼?

把上、左、右三條邊隱藏掉(顏色設為 transparent)

```css

demo {

width:0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;

} ```


40、什麼是BFC?怎麼建立BFC?

BFC(block formatting context)指塊級格式化上下文。

BFC是一個獨立的渲染區域,只有block-level box參與,它規定了內部的block-level box如何佈局,並且與這個區域外部毫不相干。      BFC就是頁面上的一個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素,反之也如此,包括浮動和外邊距合併等等,有了這個特性我們佈局的時候就不會出現意外情況了

哪些元素會產生BFC display屬性為block、list-item、table的元素,會產生BFC。(最常用的就是塊級元素)

什麼情況下會觸發BFC + 設定了float屬性,並且不為none + position屬性為absolute或fixed + display為inline-block、table-cell、table-caption、flex、inline-flex + overflow屬性不為visible

BFC元素所具有的特性 + 在BFC中,盒子從頂端開始垂直地一個接一個的排列; + 盒子垂直方向的距離由margin決定,屬於同一個BFC的盒子的margin會重疊; + 在BFC中,每一個盒子的左邊緣會觸碰到父容器的左邊緣內部,也就是說在沒有margin和padding時,父border的內邊和子border的外邊重疊; + BFC的區域不會與浮動盒子產生交集,而是緊貼浮動邊緣; + 如果父盒子沒有設定高度,但子盒子中有浮動元素,那麼在計算BFC的高度時, 會計算上浮動盒子的高度。


41、什麼叫優雅降級和漸進增強?

漸進增強 progressive enhancement:

針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級 graceful degradation:

一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。

區別:

a. 優雅降級是從複雜的現狀開始,並試圖減少使用者體驗的供給

b. 漸進增強則是從一個非常基礎的,能夠起作用的版本開始,並不斷擴充,以適應未來環境的需要

c. 降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處於安全地帶


42、什麼是響應式設計?

它是關於網站的製作或網頁製作的工作。不同的裝置有不同的尺寸和不同的功能。響應式設計是讓所有的人能在這些裝置上讓網站執行正常。一部分是媒體查詢和不同的視覺效果。一部分是不同的資源(如不同的Javascript來處理觸控與點選自動適應螢幕的對比)


43、png,jpg,jpeg,gif,webp,bmp等圖片格式?有哪些優缺點?

首先jpg和jpeg就可以理解為同一個東西,這裡就只講jpg。

  • jpg:

優點:就是圖片壓縮後不至於太失真,色彩還原度較高

缺點:無法做透明圖,就是沒辦法摳出一個圖片

適用場景:基本上網頁上的大圖都是jpg

  • png:

優點:能做透明圖

缺點:體積大,如果色彩較多的,是同等jpg的5-6倍

適用場景:網頁上的圖示,一般都是用png24,png8有點半透明

  • gif:

優點:支援動畫

缺點:顏色種類有限

適用場景:各種小動畫。。

  • webp:

優點:簡單說就是壓得更小,圖片質量卻不差

缺點:相容性差,IE和Safari不支援

適用場景:指定瀏覽器環境下可用

  • bmp:

優點:高質量圖片

缺點:太大了

適用場景:Windows桌面桌布


44、聊聊Base 64圖片

優點:減少http請求,因為圖片被base64編碼進了 css檔案中(一般是進css檔案)

缺點:如果加進css檔案中去,css體積會增大,而且會阻塞渲染,(普通圖片載入是非同步的)

適用場景:適用於一些體積較小的圖片


45、瀏覽器如何解析css選擇器?

瀏覽器會『從右往左』解析CSS選擇器。 我們知道DOM Tree與Style Rules合成為 Render Tree,實際上是需要將Style Rules附著到DOM Tree上, 因此需要根據選擇器提供的資訊對DOM Tree進行遍歷,才能將樣式附著到對應的DOM元素上。 以下這段css為例 css .mod-nav h3 span {font-size: 16px;} 若從左向右的匹配,過程是:

從 .mod-nav 開始,遍歷子節點 header 和子節點 div 然後各自向子節點遍歷。在右側 div 的分支中 最後遍歷到葉子節點 a ,發現不符合規則,需要回溯到 ul 節點,再遍歷下一個 li-a,一顆DOM樹的節點動不動上千,這種效率很低。

如果從右至左的匹配:

先找到所有的最右節點 span,對於每一個 span,向上尋找節點 h3 由 h3再向上尋找 class="mod-nav" 的節點 最後找到根元素 html 則結束這個分支的遍歷。

後者匹配效能更好,是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點(葉子節點);而從左向右的匹配規則的效能都浪費在了失敗的查詢上面


46、談談對媒體查詢的理解

什麼是媒體查詢 媒體查詢由媒體型別和一個或多個檢測媒體特性的條件表示式組成。媒體查詢中可用於檢測的媒體特性有:width、height和color(等)。使用媒體查詢可以在不改變頁面內容的情況下,為特性的一些輸出裝置定製顯示效果。通常用於多中裝置適配螢幕。

媒體查詢語法 如下面的例子,根據瀏覽器視窗大小的改變,頁面顏色就會改變。 ```css /如果裝置如果滿足多個條件,以後面寫的為準/

/螢幕尺寸最大為960px的螢幕下 / @media screen and (max-width: 960px){ body{ background-color:#FF6699 } }

/螢幕尺寸最大為768px的螢幕下 / @media screen and (max-width: 768px){ body{ background-color:#00FF66; } }

/螢幕尺寸最大為550px的螢幕下 / @media screen and (max-width: 550px){ body{ background-color:#6633FF; } }

/螢幕尺寸最大為320px的螢幕下 / @media screen and (max-width: 320px){ body{ background-color:#FFFF00; } } ```


47、flex彈性佈局的使用

1.設定盒子的display屬性為flex,或者line-flex,其對應還有六個css屬性,分別為:

  • flex-direction:設定子元素的排列方式(row,column,row-reverse,column-reverse)

  • flex-warp:設定子元素的是否換行(nowarp,warp,warp-reverse)

  • flex-flow:flex-direction和flex-warp的縮寫,預設為row nowarp

  • justify-content:設定子元素的水平排列方式(flex-start,flex-end,center,span-around,span-between)

  • align-items:設定子元素的垂直方式(flex-start,flex-end,center,stretch,baseline)

  • align-content:設定多個軸線的排列方式(flex-start,flex-end,center,spand-around,spand-between,stretch)

2. 對應的子元素專案也擁有自身的六個css屬性,分別為:

  • order:設定元素的排列權重 值越大越在後

  • flex-grow:設定元素的放大比例

  • flex-shrink:設定元素的縮小比例

  • flex-basis:設定多餘空間專案主軸所佔比例空間

  • flex:flex-grow和flex-shrink和flex-basis的縮寫方式 預設為0 1 auto

  • align-self:設定子元素自己的垂直排列方式,預設為盒子的align-items的值

設定flex佈局後,子元素的float,clear,vertical-align都無效


48、 CSS優化、提高效能的方法有哪些?

  • 避免過度約束
  • 避免後代選擇符
  • 避免鏈式選擇符
  • 使用緊湊的語法
  • 避免不必要的名稱空間
  • 避免不必要的重複
  • 最好使用表示語義的名字。一個好的類名應該是描述他是什麼而不是像什麼
  • 避免!important,可以選擇其他選擇器
  • 儘可能的精簡規則,你可以合併不同類裡的重複規則
  • 修復解析錯誤
  • 避免使用多類選擇符
  • 移除空的css規則
  • 正確使用display的屬性:由於display的作用,某些樣式組合會無效,徒增樣式體積的同時也影響解析效能。
  • display:inline後不應該再使用width、height、margin、padding以及float。
  • display:inline-block後不應該再使用float。
  • display:block後不應該再使用vertical-align。
  • display:table-*後不應該再使用margin或者float。
  • 不濫用浮動:雖然浮動不可避免,但不可否認很多css bug是由於浮動而引起。
  • 不濫用web字型
  • 對於中文網站來說Web Fonts可能很陌生,國外卻很流行。web fonts通常體積龐大,而且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷效能。
  • 不宣告過多的font-size:這是設計層面的問題,設計精良的頁面不會有過多的font-size宣告。
  • 不在選擇符中使用ID識別符號,主要考慮到樣式重用性以及與頁面的耦合性。
  • 不給h1~h6元素定義過多的樣式
  • 全站統一定義一遍heading元素即可,若需額外定製樣式,可使用其他選擇符作為代替。
  • 不重複定義h1~h6元素
  • 值為0時不需要任何單位
  • 標準化各種瀏覽器字首:通常將瀏覽器字首置於前面,將標準樣式屬性置於最後.
  • 使用CSS漸變等高階特性,需指定所有瀏覽器的字首
  • 避免讓選擇符看起來像正則表示式
  • CSS3添加了一些類似~=等複雜屬性,也不是所有瀏覽器都支援,需謹慎使用。
  • 遵守盒模型規則(Beware of broken box models)

49、一個滿屏“品”字佈局如何設計?

  • 上面的 div 寬100%
  • 下面的兩個 div 分別寬50%,然後用 float 或者 inline 使其不換行

50、li 與 li 之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?

行框的排列會受到中間空白(回車空格)等的影響,因為空格也屬於字元,這些空白也會被應用樣式,佔據空間,所以會有間隔,把字元大小設為0,就沒有空格了。 解決方法:

  • 可以將<li>程式碼全部寫在一排
  • 浮動li中float:left
  • 在ul中用font-size:0(谷歌不支援);
  • 可以 ul{letter-spacing: -4px;};li{letter-spacing: normal;}

51、javascript typeof返會的資料型別有哪些

object, string, undefined, number, function, boolean

js的基本資料型別: string, number, boolean, undefined, null

資料型別檢測: typeof 對於基本資料型別來說,除了 null 都可以顯示正確的型別,typeof 對於物件來說,除了函式都會顯示 object

```javascript typeof 5 // 'number' typeof '5' // 'string' typeof undefined // 'undefined' typeof false// 'boolean' typeof Symbol() // 'symbol' console.log(typeof null) //object console.log(typeof NaN) //number

typeof [] // 'object' typeof {} // 'object' typeof console.log // 'function' ```

instanceof通過原型鏈來判斷資料型別的 javascript p1 = new Person() p1 instanceof Person // true

Object.prototype.toString.call()可以檢測所有的資料型別,算是一個比較完美的方法了。

javascript var obj={} var arr=[] console.log(Object.prototype.toString.call(obj)) //[object Object] console.log(Object.prototype.toString.call(arr)) //[object Array]


52、知道Array物件的哪些方法?

其中 push/pop/shift/unshift 初級考的最多。

不改變array的方法
  • indexOf() 和 lastIndexOf()
  • indexof() : 返回元素在陣列的第一次出現的索引,從0開始。若陣列不存在該元素,則返回-1。 javascript var arr = [1, 2, 2]; arr.indexOf(1); //0 arr.indexOf(10); //-1

  • lastIndexOf(): 返回元素在陣列最後一次出現的索引,如果沒有出現則返回-1. javascript var arr = [1, 2, 2]; arr.lastIndexOf(2); //2 arr.lastIndexOf(10); //-1

  • slice()方法 與字串的substring()方法一樣,擷取陣列的一部分,返回一個新的陣列。

  • slice(start)索引從start開始擷取 javascript var arr = [1, 2, 2, 5, 6]; arr.slice(2) // [2, 5, 6]

  • slice(start,end)索引從start開始到索引end結束。通常,接受2個引數作為一個左閉右開區間,即包括開始索引位置的元素,但不包括結束索引位置的元素。 javascript var arr = [1, 2, 2, 5, 6]; arr.slice(1,3) // [2, 2]

  • slice()沒有引數,則是複製整個陣列。 javascript var arr = [1, 2, 2, 5, 6]; arr.slice();

  • concat():合併陣列。 把當前的陣列和另一個數組連線起來,並返回一個新的陣列。

  • 方法的引數可以有多個,也可以任意任意型別,數值、字串、布林值、陣列、物件都可以,引數會被被新增到新的陣列中。 javascript var arr1 = [1, 2, 3,4,5,6]; var arr2 = ['a','b','c']; var arr3 = arr1.concat(arr2); arr3; //[1, 2, 3, 4, 5, 6, "a", "b", "c"]

  • 注意,如果引數是陣列, 會被拉平一次,即陣列會被拆開來,加入到新的陣列中。具體看示例: javascript var arr1 = [1, 2, 3]; var arr2 = arr1.concat(66,'abc',true,[10,20],[30,[31,32]],{x:100}); arr2; //[1, 2, 3, 66, "abc", true, 10, 20, 30, [31,32], {x:100}]

  • join(): 轉成字串。 它會把當前Array的每個元素都用指定的字串連線起來,然後返回連線後的字串。

  • 引數是用來指定連線的字串。見示例程式碼: javascript var arr = [1, 2, 3]; arr.join('*') //"1*2*3"

  • 如果沒有指定引數,預設是用 "," 連線。 javascript var arr = [1, 2, 3]; arr.join() //"1,2,3"

  • toString(): 返回陣列的字串形式 ```javascript var arr = [1, 2, 3]; arr.toString() // "1,2,3"

```

  • map():
  • 對陣列的所有成員依次呼叫一個函式,返回值是一個新陣列。 javascript arr.map(function(elem, index, arr) { return elem * index; }); //[0, 2, 6]

  • map方法接受一個函式作為引數,該函式呼叫時,map方法會將其傳入3個引數,分別是當前成員、當前位置和陣列本身(後2個引數可選)。 javascript arr.map(function(elem, index, arr) { return elem * index; }); //[0, 2, 6]

  • map方法還可以接受第2個引數,表示回撥函式執行時this所指向的物件。

  • forEach(): 與map方法很相似,也是遍歷陣列的所有成員,執行某種操作。注意:forEach方法一般沒有返回值

javascript var arr = [1, 2, 3]; function log(element, index, array) { console.log('[' + index + '] = ' + element); } arr.forEach(log); // [0] = 1 // [1] = 2 // [2] = 3

  • filter(): 刪選

javascript var arr = [1, 2, 3, 4, 5]; arr.filter(function (elem, index, arr) { return index % 2 === 1; }); //[2, 4]

  • some()和every() 類似“斷言”(assert),用來判斷陣列成員是否符合某種條件。

  • 接受一個函式作為引數,所有陣列成員依次執行該函式,返回一個布林值。該函式接受三個引數,依次是當前位置的成員、當前位置的序號和整個陣列。

  • some方法是隻要有一個數組成員的返回值是true,則整個some方法的返回值就是true,否則false。 javascript var arr = [1, 2, 3, 4]; arr.some(function (elem, index, arr) { return elem >= 3; }); // true
  • every方法則是所有陣列成員的返回值都是true,才返回true,否則false。 javascript var arr = [1, 2, 3, 4]; arr.every(function (elem, index, arr) { return elem >= 3; }); // false

  • 注意,對於空陣列,some方法返回false,every方法返回true

  • reduce()和reduceRight(): 依次處理陣列的每個成員,最終累計為一個值。

  • reduce是從左到右處理(從第一個成員到最後一個成員) javascript arr = [1, 2, 3] arr.reduce(function(x, y){ console.log(x, y) return x + y; }); // 1 2 // 3 3 // 6

  • reduceRight則是從右到左處理(從最後一個成員到第一個成員) javascript arr.reduceRight(function(x, y){ console.log(x, y) return x + y; }); // 3 2 // 5 1 // 6

改變原陣列的方法
  • push(): 向陣列的末尾新增若干元素。返回值是改變後的陣列長度。

javascript var arr = [1, 2]; arr.push(3) ;// 3 arr; // [1, 2, 3] arr.push('b','c'); //5 arr; //[1, 2, 3, "b", "c"] arr.push([10,20]); //6 arr; //[1, 2, 3, "b", "c", [10,20]]

  • pop() 刪除陣列最後一個元素。返回值是刪除的元素。 javascript var arr =[1, 2, 3, "b", "c", [10,20]]; arr.pop(); //[10, 20] arr; // [1, 2, 3, "b", "c"]

  • unshift() 向陣列頭部新增若干元素。返回值是改變後的陣列長度。 javascript var arr = [1, 2]; arr.unshift(3,4 ); //4 arr; // [3, 4, 1, 2]

  • shift() 刪除陣列第一個元素。返回值是刪除的元素 javascript var arr = ['a', 'b', 1, 2]; arr.shift(); //'a' arr; //['b', 1, 2]

  • sort() 陣列排序。預設是將所有元素轉換成字串,再按字串Unicode碼點排序。返回值是新的陣列。 javascript var arr = [1, 2, 12, 'a', 'b', 'ab', 'A', 'B'] arr.sort(); //[1, 12, 2, "A", "B", "a", "ab", "b"] 注意:12排在了2的前面

如果元素都是數字,要按從小到大排序,可以傳入一個回撥函式作為引數。 ```javascript var arr = [1, 2, 12, 100]

arr.sort(function(a,b){ return a-b; }); // [1, 2, 12, 100] ```

  • reverse(): 顛倒陣列中元素的位置 javascript var arr = [1, 2, 12, 'a', 'b', 'ab', 'A', 'B']; arr.reverse(); //["B", "A", "ab", "b", "a", 12, 2, 1]

  • array.splice() javascript array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

引數:start 為開始的索引,deletecount 表示要移除的陣列元素的個數。item 為要新增進陣列的元素 + 如果 deleteCount 大於 start 之後的元素的總數,則從 start 後面的元素都將被刪除(含第 start 位)。 + 如果 deleteCount 被省略了,或者它的值大於等於array.length - start(也 + 就是說,如果它大於或者等於start之後的所有元素的數量),那麼start之後陣列的所有元素都會被刪除。 + 如果 deleteCount 是 0 或者負數,則不移除元素。這種情況下,至少應新增一個新元素

只刪除,不新增。可以傳入2個引數: ```javascript var arr = ['Alibaba', 'Tencent', 'Baidu', 'XiaoMi', '360'];

// 從索引2開始刪除3個元素 arr.splice(2, 3); // 返回刪除的元素 ['Baidu', 'XiaoMi', '360'] arr; // ['Alibaba', 'Tencent']

```

只新增,不刪除。第2個引數設為0,即不刪除元素。 javascript arr.splice(2, 0, 'Toutiao', 'Meituan', 'Didi'); // 返回[],因為沒有刪除任何元素 arr; //["Alibaba", "Tencent", "Toutiao", "Meituan", "Didi"]

先刪除若干元素,然後在刪除的位置上在新增若干個元素。 javascript var arr =["Alibaba", "Tencent", "Toutiao", "Meituan", "Didi"] arr.splice(2,2,'Apple','Google'); //["Toutiao", "Meituan"] arr; //["Alibaba", "Tencent", "Apple", "Google", "Didi"]


53、JS如何實現一個類

  • 建構函式法 (缺點:用到了 this 和 prototype,編寫複雜,可讀性差) ```javascript function P(name, age){ this.name = name; this.age= age; } P.prototype.sal= function(){

} var pel= new P("jj", 1); pel.sell() ```

  • ES6 語法糖 class javascript class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } var point = new Point(2, 3);

54、聊聊對js原型鏈的理解?

一句話解析什麼是原型鏈: 遍歷一個實列的屬性時,先遍歷實列物件上的屬性,再遍歷它的原型物件,一直遍歷到Object 任何一個類(函式)都有原型物件,原型物件至少有兩個屬性(constructor,proto)。constructor指向函式本身,proto指向父類原型物件。

函式上有一個prototype屬性,指向原型物件,通過它可以訪問原型物件

函式的實列可以直接訪問原型物件(因為實列上有proto指向建構函式的原型物件) javascript function Dog(){} //類 var obj=new Dog(); //實列 obj.name='滬江'; Dog.prototype.name="旺財"; Dog.prototype.eat=function(){ console.log(this.name); }; console.log(Dog.prototype.name); //旺財 console.log(obj.prototype); //undefined,prototype是類上才有的,實列上沒有 obj.eat(); //滬江(先遍歷實列物件上的屬性,再遍歷它的原型物件)


55、變數宣告提升?

  • 在 JavaScript 中,函式宣告(function aa(){})與變數宣告(var)經常被 JavaScript 引擎隱式地提升到當前作用域的頂部。
  • 函式宣告的優先順序高於變數,如果變數名跟函式名相同且未賦值,則函式宣告會覆蓋變數宣告
  • 宣告語句中的賦值部分並不會被提升,只有變數的名稱被提升

56、作用域鏈?

因為函式的巢狀形成作用域的層級關係。當函式執行時,從當前作用域開始搜,沒有找到的變數,會向上層作用域查詢,直至全域性函式,這就是作用域鏈。

  • 在 JavaScript 中,作用域為 function(){}內的區域,稱為函式作用域。
  • 全域性函式無法檢視區域性函式的內部細節,但區域性函式可以檢視其上層的函式細節,直至全域性細節

57、作用域與執行上下文的區別

  • 作用域分全域性作用域和函式作用域,由於js沒有塊級作用域(es6裡規定了塊級作用域,詳情可自行檢視),函式作用域可以用於隔離變數,不同作用域下同名變數不會有衝突的。作用域只是一個“地盤”,作用域是一個抽象的概念,其中沒有變數。要通過作用域對應的執行上下文環境來獲取變數的值。作用域中變數的值是在執行過程中產生的確定的,而作用域卻是在函式建立時就確定了。
  • 執行全域性程式碼時,會產生一個執行上下文環境,每次呼叫函式都又會產生執行上下文環境。當函式呼叫完成時,這個上下文環境以及其中的資料都會被消除(當然了閉包並不會乖乖就範),處於活動狀態的執行上下文環境只有一個。

58、物件深拷貝、淺拷貝

物件淺拷貝是共用一個引用,因此更改新拷貝的物件時,也會更改原來的物件

物件深拷貝是兩個引用,有以下幾種方式實現深拷貝: ```javascript

//使用 Object.assign,只能實現第一層屬性的深拷貝 let clone = Object.assign({},obj)

//使用 slice,如果陣列中有引用型別的元素的話,只能實現第一層的深拷貝 let clone = arr.slice(0);

//使用 concat,同 slice let clone = [].concat(arr);

//使用 JSON 物件,無法實現屬性值為 function 和 undefined 的拷貝,並且拷貝從原型鏈繼承的值也會有問題,比如 constructor 的值變成了 Object function deepClone(obj) { let _obj = JSON.stringify(obj); let clone = JSON.parse(_obj); return clone; }

//使用遞迴,在不使用庫的情況下,這種方式可以實現真正的深層度的拷貝 function deepClone(obj) { let clone = Array.isArray(obj) ? [] : {}; if(obj && typeof obj === 'object') { for(let key in obj) { if(obj.hasOwnProperty(key) { if(obj[key] && typeof obj[key] === 'object') { clone[key] = deepClone(obj[key]); }else { clone[key] = obj[key]; } } } } return clone; }

//通過 JQuery 的 extend 方法 //使用 lodash 函式庫

```

在使用 console.log 這類方法輸出物件時會顯示記憶體的最新狀態,在同一個 tick 中,即便更改物件是在 console.log 之後,那麼輸出的物件也是被更改過的物件,因此,如果想輸出某個時刻的物件值時,應該進行深拷貝進行輸出。


59、for-in 和 for-of 的區別:

1、for-in 遍歷的總是物件的下標,因此如果給陣列增加屬性,那麼這個屬性(key)也會遍歷出來,更適合遍歷物件,遍歷順序可能不是按照內部順序,通常配合 hadOwnProperty() 方法一起使用;

2、for-of 就是迭代器,遍歷的是陣列元素的值,不會遍歷增加的屬性,是按照內部順序遍歷的,並且還可以遍歷 Map 和 Set 資料結構。 如果沒有在內部使用 let 那麼預設為 var


60、圖片懶載入、預載入

  • 圖片懶載入:是為了降低一次性的 HTTP 請求數量,當圖片很多時,或者同時線上人數較多時,圖片懶載入可以起到很好的效能優化的作用。 實現步驟:

  • 設定自定義屬性 data-src 來儲存圖片資源;

  • 頁面初始化或者在滾動時判斷圖片是否出現在可視區域;

  • 在可視區域的話,將自定義屬性 data-src 的值賦值給 src 屬性。

  • 圖片預載入:在需要顯示圖片之前,就載入完畢,當需要顯示圖片時,就從快取中取圖片,在圖片不是特別多的時候,可以使用預載入。


61、函數語言程式設計

函數語言程式設計中的函式指的數學概念中的函式,即自變數的對映,得到的結果由輸入的值決定,不依賴於其他狀態,是宣告式(依賴於表示式),而非命令式,組合純函式來構建軟體的程式設計方式。


62、this 關鍵字

在全域性環境中,this 指向 window 物件,ES5 函式中,this 物件是在執行時基於函式的執行環境(變數物件,如全域性是 window),匿名函式的執行環境具有全域性性,因此其 this 物件通常指向 window(在非嚴格模式下),在嚴格模式下 this 指向的是 undefined,為了在嚴格模式下,this 重新指向 window,可以使用非直接呼叫 eval 的方式,如 (0, eval)('this'),使用了逗號運算子,括號前面會返回 eval,但是和直接呼叫的區別就是在嚴格模式下 this 指向不一樣。ES6 的箭頭函式中,this 物件是在函式定義的執行環境。

this:上下文,會根據執行環境變化而發生指向的改變.

  • 1.單獨的this,指向的是window這個物件

javascript alert(this); // this -> window

  • 2.全域性函式中的this

```javascript function demo() { alert(this); // this -> window } demo();

``` 在嚴格模式下,this是undefined.

javascript function demo() { 'use strict'; alert(this); // undefined } demo();

  • 3.函式呼叫的時候,前面加上new關鍵字 所謂建構函式,就是通過這個函式生成一個新物件,這時,this就指向這個物件。

```javascript function demo() { //alert(this); // this -> object this.testStr = 'this is a test'; } let a = new demo(); alert(a.testStr); // 'this is a test'

```

  • 4.用call與apply的方式呼叫函式 javascript function demo() { alert(this); } demo.call('abc'); // abc demo.call(null); // this -> window demo.call(undefined); // this -> window

  • 5.定時器中的this,指向的是window

```javascript setTimeout(function() { alert(this); // this -> window ,嚴格模式 也是指向window },500)

```

  • 6.元素繫結事件,事件觸發後,執行的函式中的this,指向的是當前元素

```javascript window.onload = function() { let $btn = document.getElementById('btn'); $btn.onclick = function(){ alert(this); // this -> 當前觸發 } }

```

  • 7.函式呼叫時如果綁定了bind,那麼函式中的this指向了bind中繫結的元素

javascript window.onload = function() { let $btn = document.getElementById('btn'); $btn.addEventListener('click',function() { alert(this); // window }.bind(window)) } + 8.物件中的方法,該方法被哪個物件呼叫了,那麼方法中的this就指向該物件

javascript let name = 'finget' let obj = { name: 'FinGet', getName: function() { alert(this.name); } } obj.getName(); // FinGet //---------------------------分割線---------------------------- let fn = obj.getName; fn(); //finget this -> window


62、棧和堆的區別?

棧(stack):由編譯器自動分配釋放,存放函式的引數值,區域性變數等;

堆(heap):一般由程式設計師分配釋放,若程式設計師不釋放,程式結束時可能由作業系統釋放。


63、JS中的匿名函式是什麼?

匿名函式:就是沒有函式名的函式,如: javascript (function(x, y){ alert(x + y); })(2, 3);

這裡建立了一個匿名函式(在第一個括號內),第二個括號用於呼叫該匿名函式,並傳入引數。


64、什麼是事件代理/事件委託?

事件代理/事件委託是利用事件冒泡的特性,將本應該繫結在多個元素上的事件繫結在他們的祖先元素上,尤其在動態新增子元素的時候,可以非常方便的提高程式效能,減小記憶體空間。


64、什麼是事件冒泡?什麼是事件捕獲?

冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發。

捕獲型事件:事件從最不精確的物件(document 物件)開始觸發,然後到最精確(也可以在視窗級別捕獲事件,不過必須由開發人員特別指定)。

在新增事件時用addEventListener(event,fn,useCapture)方法,基中第3個引數useCapture是一個Boolean值,用來設定事件是在事件捕獲時執行,還是事件冒泡時執行。

注意:IE瀏覽器用attachEvent()方法,此方法沒有相關設定,不過IE的事件模型預設是在事件冒泡時執行的,也就是在useCapture等於false的時候執行,所以把在處理事件時把useCapture設定為false是比較安全,也實現相容瀏覽器的效果。


65、如何阻止事件冒泡?

w3c的方法是e.stopPropagation(),IE則是使用e.cancelBubble = true。例如: javascript window.event.cancelBubble = true; e.stopPropagation();


66、如何阻止預設事件?

方法是e.preventDefault()


67、DOM 事件有哪些階段?

js事件的三個階段分別為:捕獲、目標、冒泡

1.捕獲:事件由頁面元素接收,逐級向下,到具體的元素
2.目標:具體的元素本身
3.冒泡:跟捕獲相反,具體元素本身,逐級向上,到頁面元素

事件捕獲:當使用事件捕獲時,父級元素先觸發,子元素後觸發
事件冒泡:當使用事件冒泡時,子級元素先觸發,父元素後觸發


68、JS有哪些內建物件

Object是JavaScript中所有物件的父物件

資料封裝物件:Object、Array、Boolean、Number和String 其他物件:Function、Arguments、Math、Date、RegExp、Error


69、解釋jsonp的原理,以及為什麼不是真正的ajax

答案:動態建立script標籤,回撥函式 Ajax是頁面無重新整理請求資料操作


70、null和undefined的區別?

null是一個表示"無"的物件,轉為數值時為0;undefined是一個表示"無"的原始值,轉為數值時為NaN。

當宣告的變數還未被初始化時,變數的預設值為undefined。 null用來表示尚未存在的物件

undefined表示"缺少值",就是此處應該有一個值,但是還沒有定義。典型用法是:

(1)變數被聲明瞭,但沒有賦值時,就等於undefined。

(2)呼叫函式時,應該提供的引數沒有提供,該引數等於undefined。

(3)物件沒有賦值的屬性,該屬性的值為undefined。

(4)函式沒有返回值時,預設返回undefined。

null表示"沒有物件",即該處不應該有值。典型用法是:

(1) 作為函式的引數,表示該函式的引數不是物件。

(2) 作為物件原型鏈的終點。


71、js延遲載入的方式有哪些?

defer和async、動態建立DOM方式(建立script,插入到DOM中,載入完畢後callBack)、按需非同步載入js


72、js如何捕獲異常?

```javascript try{ //這裡是可能出錯並嘗試捕獲錯誤的程式碼 doSomething(); }catch(e){ //這裡處理錯誤,e是錯誤資訊,比如 console.log(e) }

```


73、解釋AJAX的工作原理?

  • 建立ajax物件(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))
  • 判斷資料傳輸方式(GET/POST)
  • 開啟連結 open()
  • 傳送 send()
  • 當ajax物件完成第四步(onreadystatechange)資料接收完成,判斷http響應狀態(status)200-300之間或者304(快取)執行回撥函式

73、react和vue比較來說有什麼區別

  • component層面,web component和virtual dom
  • 資料繫結(vue雙向,react的單向)等好多
  • 計算屬性 vue 有,提供方便;而 react 不行
  • vue 可以 watch 一個數據項;而 react 不行
  • vue 由於提供的 direct 特別是預置的 directive 因為場景場景開發更容易;react 沒有
  • 生命週期函式名太長 directive

74、說一下vue例項的生命週期?

new Vue() > 初始化事件和生命週期 > beforeCreate > 資料繫結 > created > 如果有el屬性,則編譯模板 > beforeMount > 新增$el屬性,並替換掉掛載的DOM元素 > mounted > 資料更新 > beforeUpdate > 重新編譯模板並渲染DOM > updated > 呼叫$destoryed > beforeDestory > 銷燬vue例項 > destroyed


75、vue雙向資料繫結的原理是什麼

首先傳輸物件的雙向資料繫結 Object.defineProperty(target, key, decription),在decription中設定get和set屬性(此時應注意description中get和set不能與描述屬性共存) 陣列的實現與物件不同。 同時運用觀察者模式實現wather,使用者資料和view檢視的更新


76、new操作符具體幹了什麼呢?

1、建立一個空物件,並且 this 變數引用該物件,同時還繼承了該函式的原型。

2、屬性和方法被加入到 this 引用的物件中。

3、新建立的物件由 this 所引用,並且最後隱式的返回 this 。


77、如何防止出現中文亂碼?

<meta charset="UTF-8"/>


78、DOM和BOM分別是什麼?

瀏覽器的javascript的組成包含: + ECMAScript (核心):描述了 JS 的語法 和 基本物件。 + 文件物件模型 (DOM):處理 網頁內容 的方法和介面。 + 瀏覽器物件模型 (BOM):與 瀏覽器互動 的方法和介面。

區別: + DOM 是 W3C 的標準; [所有瀏覽器公共遵守的標準] + BOM 是 各個瀏覽器廠商根據 DOM在各自瀏覽器上的實現;[表現為不同瀏覽器定義有差別,實現方式不同] + window 是 BOM 物件,而非 js 物件;javacsript是通過訪問BOM(Browser Object Model)物件來訪問、控制、修改客戶端(瀏覽器)

DOM 的 API :

  • 節點建立型 API: document.createElement(),document.createTextNode(),parent.cloneNode(true) document.createDocumentFragment() 建立文件片段,解決大量新增節點造成的迴流問題

  • 頁面修改型 API: parent.appendChild(child),parent.removeChild(child) parent.replcaeChild(newChild,oldChild) parent.insertBefore(newNode, referenceNode)

  • 節點查詢型 API: document.getElementById() document.getElementsByTagName() 返回即時的 HTMLCollection 型別 document.getElementsByName() 根據指定的 name 屬性獲取元素,返回即時的 NodeList document.getElementsByClassName() 返回即時的 HTMLCollection document.querySelector() 獲取匹配到的第一個元素,採用的是深度優先搜尋 docuemnt.querySelectorAll() 返回非即時的 NodeList,也就是說結果不會隨著文件樹的變化而變化

  • 節點關係型 API: 父關係型: node.parentNode() 兄弟關係型: node.previouSibling() 返回節點的前一個節點(包括元素節點,文字節點,註釋節點) node.previousElementSibling() 返回前一個元素節點 node.nextSibling() 返回下一個節點 node.nextElementSibling() 返回下一個元素節點

子關係型 parent.childNodes() 返回一個即時的NodeList,包括了文字節點和註釋節點 parent.children() 一個即時的HTMLCollection,子節點都是Element parent.firsrtNode(),parent.lastNode(),hasChildNodes()

  • 元素屬性型 API: element.setAttribute(“name”,“value”) 為元素新增屬性 element.getAtrribute(“name”) 獲取元素的屬性

  • 元素樣式型 API: window.getComputedStyle(element) 返回一個CSSStyleDeclaration,可以從中訪問元素的任意樣式屬性。 element.getBoundingClientRect() 返回一個DOMRect物件,裡面 包括了元素相對於可視區的位置 top,left,以及元素的大小,單位為純數字。可用於判斷某元素是否出現在了可視區域

BOM的 API :

  • location物件 .href、.search、.hash、.port、.hostname、pathname

  • history物件 .go(n)(前進或後退指定的頁面數)、history.back(後退一頁)、.forward(前進一頁)

  • navigator物件 navigator:包含了使用者瀏覽器的資訊 navigator.userAgent:返回使用者代理頭的字串表示(就是包括瀏覽器版本資訊等的字串) navigator.cookieEnabled:返回瀏覽器是否支援(啟用) cookie window物件方法:

  • alert() — 顯示帶有一段訊息和一個確認按鈕的警告彈出框。

  • confirm() — 顯示帶有一段訊息以及確認按鈕和取消按鈕的警告彈出框。
  • prompt() — 顯示帶有一段訊息以及可提示使用者輸入的對話方塊和確認,取消的警告彈出框。
  • open() — 開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。
  • close() — 關閉瀏覽器視窗。
  • setInterval() — 按照指定的週期(以毫秒計)來呼叫函式或計算表示式。每隔多長時間執行一下這個函式
  • clearInterval() — 取消由 setInterval() 設定的 timeout。
  • setTimeout() — 在指定的毫秒數後呼叫函式或計算表示式。
  • clearTimeout() — 取消由 setTimeout() 方法設定的 timeout。
  • scrollTo() — 把內容滾動到指定的座標。

79、介紹下遞迴

在JavaScript程式中,函式直接或間接呼叫自己。通過某個條件判斷跳出結構,有了跳出才有結果。

遞迴的步驟(技巧)

1、假設遞迴函式已經寫好 2、尋找遞推關係 3、將遞推關係的結構轉換為遞迴體 4、將臨界條件加入到遞迴體中(一定要加臨界條件,某則陷入死迴圈,記憶體洩漏)

例子(求1-100的和): ```javascript

//普通迴圈寫法 var sum = 0; for(var i=1; i<=100; i++){ sum += i; } console.log(sum); // 5050

//遞迴寫法 function sum(n){ if(n==1) return 1; return sum(n-1) + n; } var amount = sum(100); console.log(amount); // 5050 ```


81、JS的垃圾回收機制

JS 具有自動垃圾收集機制,執行環境會負責管理程式碼執行過程中使用的記憶體,所需記憶體的分配以及無用記憶體的回收完全實現了自動管理。垃圾收集機制的原理:找到那些不再繼續使用的變數,然後釋放其佔用的記憶體。垃圾收集機制會按照固定的時間間隔週期性地執行這一操作。

垃圾收集機制必須跟蹤哪個變數有用哪個變數無用,對於不再有用的變數打上標記,以備將來收回其佔用的記憶體。

JS 中最常用的跟蹤方法是標記清除,當函式執行完後,就會給區域性變數打上“離開環境”的標記(除了閉包),在下一次垃圾回收時間到來時就會清除這一塊記憶體,手動將一個有值的變數賦值為 null,也是讓這個值離開環境,也可以釋放記憶體。 還有一種跟蹤方法是引用計數,這會引起迴圈引用的問題,但現在所有的瀏覽器都使用了標記清除式的垃圾回收機制,所以不用考慮這個問題了。


82、什麼是MVVM? MVC? MVP?

mvc 的是 model view controller 的縮寫,一種通過業務邏輯、資料、介面顯示分離的方法進行程式碼組織的方法;其中 M 層處理資料、業務邏輯;v 層處理介面的顯示結果;c 層起到橋樑的作用,來控制 v 層 和 M 層通訊,以此達到分離檢視顯示和業務邏輯層;

mvp 是從 mvc 演化而來的,與 mvc 有一定的相似性, p 即 presenter 作為view 和 model 互動的橋樑紐帶,處理與使用者互動的邏輯;v 即 view 負責繪製 dom 元素、以及與使用者的互動;model 負責儲存、檢索、操作資料;

mvp 和 mvc 的區別主要是:view 和 model 並不直接互動,而是通過與 presenter 互動來實現與 model 間接的互動;而在 mvc 中 view 和 model 是可以直接進行互動的;在 mvp 中,通常 view 和 presenter 是一對一的,但是複雜的 view 可能繫結多個 presenter 來處理邏輯;而在 mvc 中,controller 是基於行為層次的,並且可以被多個 view 共享,controller 可以負責決定顯示那個 view;prresenter 與 view 的互動是通過介面來進行的;

mvp 的缺點就是增加了很多的介面和實現類,程式碼邏輯雖然清晰,但是程式碼量會比較大;

mvvm 是 mvp 的升級,其中 VM 是 viewModel 的縮寫,可以理解成是 presenter和 view 的結合;viewModel 和 view 之間的互動不在是依賴於介面,而是通過 Data Binding 完成,而 Data Binding 可以實現雙向的互動,從而使得檢視和控制層之間的耦合度進一步的降低,分離更為徹底,同時減輕了 activity 的壓力;


83、知道哪些主流前端框架

React、Vue、Angular、Antd、Element


84、在前端中什麼是元件化 什麼是模組化

元件化和模組化的價值都在於分治,web應用系統的複雜度不斷提升,兼顧開發效率和產品實際執行效率,會在開發階段運用元件化和模組化的手段分離關注點,結合構建工具合理打包。元件化更多關注的是UI部分,你看到的一個管理介面的彈出框,頭部,內容區,確認按鈕和頁尾都可以是個元件,這些元件可以組成一個彈出框元件,跟其他元件組合又是一個新的元件。

模組化側重於功能或者資料的封裝,一組相關的元件可以定義成一個模組,一個暴露了通用驗證方法的物件可以定義成一個模組,一個全域性的json配置檔案也可以定義成一個模組。封裝隔離來後,更重要的是解決模組間的依賴關係。babel作為現在最火的es6轉換器,用babelify或者webpack的babel loader再或者基於task的構建系統外掛都可以很方便用起來es6 modules


85、介紹一下你對瀏覽器核心的理解

主要分成兩部分:渲染引擎(layout engineer或Rendering Engine)和 JS 引擎。

  • 渲染引擎:負責取得網頁的內容(HTML、XML、影象等等)、整理訊息(例如加入CSS等),以及計算網頁的顯示方式,然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同,所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶以及其他它所需要編輯、顯示網路的應用程式都需要核心。

  • JS引擎:解析和執行JavaScript 來實現網頁的動態效果;

最開始渲染引擎和 JS 並沒有區分的很明確,後來JS引擎越來越獨立,核心就傾向於只渲染引擎。


86、瀏覽器頁面渲染過程

瀏覽器渲染頁面的一般過程:

  • 瀏覽器解析html原始碼,然後建立一個 DOM樹。並行請求 css/image/js在DOM樹中,每一個HTML標籤都有一個對應的節點,並且每一個文字也都會有一個對應的文字節點。DOM樹的根節點就是 documentElement,對應的是html標籤。

  • 瀏覽器解析CSS程式碼,計算出最終的樣式資料。構建CSSOM樹。對CSS程式碼中非法的語法它會直接忽略掉。解析CSS的時候會按照如下順序來定義優先順序:瀏覽器預設設定 < 使用者設定 < 外鏈樣式 < 內聯樣式 < html中的style。

  • DOM Tree + CSSOM --> 渲染樹(rendering tree)。渲染樹和DOM樹有點像,但是是有區別的。

DOM樹完全和html標籤一一對應,但是渲染樹會忽略掉不需要渲染的元素,比如head、display:none的元素等。而且一大段文字中的每一個行在渲染樹中都是獨立的一個節點。渲染樹中的每一個節點都儲存有對應的css屬性。

  • 一旦渲染樹建立好了,瀏覽器就可以根據渲染樹直接把頁面繪製到螢幕上。

以上四個步驟並不是一次性順序完成的。如果DOM或者CSSOM被修改,以上過程會被重複執行。實際上,CSS和JavaScript往往會多次修改DOM或者CSSOM。


87、重排和重繪

部分渲染樹(或者整個渲染樹)需要重新分析並且節點尺寸需要重新計算。這被稱為重排。注意這裡至少會有一次重排-初始化頁面佈局。 由於節點的幾何屬性發生改變或者由於樣式發生改變,例如改變元素背景色時,螢幕上的部分內容需要更新。這樣的更新被稱為重繪。


88、什麼情況會觸發重排和重繪

新增、刪除、更新 DOM 節點 通過 display: none 隱藏一個 DOM 節點-觸發重排和重繪 通過 visibility: hidden 隱藏一個 DOM 節點-只觸發重繪,因為沒有幾何變化 移動或者給頁面中的 DOM 節點新增動畫 新增一個樣式表,調整樣式屬性 使用者行為,例如調整視窗大小,改變字號,或者滾動。


89、在瀏覽器中輸入URL到整個頁面顯示在使用者面前時這個過程中到底發生了什麼

  • DNS解析地址
  • TCP連線
  • 傳送HTTP請求
  • 伺服器處理請求並返回HTTP報文
  • 瀏覽器解析渲染頁面
  • 連線結束

90、cookies,sessionStorage 和 localStorage 的區別

  • sessionStorage 和 localStorage 兩者儲存空間一般都在5M左右,sessionStorage在會話結束時會主動清除,localstorage則不會,需手動清除 兩者都有同源策略限制,跨域無法訪問,sessionStorage有同標籤頁限制 資料僅在客戶端儲存,不參與和伺服器通訊 都是key value形式進行儲存,value必須為字串,如不是則自動轉換成字串,value如果是物件,需轉換成JSON字串 操作方法一直,setItem(key, value)增/改、removeItem(key)刪、getItem(key)查、localStorage.clear()/sessionStorage.clear()清空

  • cookies 儲存大小為4k,一個站點最多20個cookies 會通過http請求參與服務端的通訊 cookie可以設定會話時間,如不設定,則預設瀏覽器視窗關閉清除 Cookie設定中有個HttpOnly引數,前端瀏覽器使用document.cookie是讀取不到HttpOnly型別的Cookie的


91、為什麼會有同源策略

同源策略限制從一個源載入的文件或指令碼如何與另一個源的資源進行互動。這是用於隔離潛在惡意檔案的關鍵安全機制。

同源策略:協議相同、域名相同、埠相同,三者都必須相同

什麼叫限制:不同源的文件不能操作另一個源的文件,在以下幾個方面操作不了:

1)Cookie、localStorage、indexDB 無法讀取 2)DOM 無法獲得 3)AJAX 請求無法傳送


92、HTTP有哪些請求方法?

HTTP1.0定義了三種請求方法: GET, POST 和 HEAD方法。

HTTP1.1新增了五種請求方法:OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。

  • OPTIONS 返回伺服器針對特定資源所支援的HTTP請求方法,也可以利用向web伺服器傳送‘*’的請求來測試伺服器的功能性
  • HEAD 向伺服器索與GET請求相一致的響應,只不過響應體將不會被返回。這一方法可以再不必傳輸整個響應內容的情況下,就可以獲取包含在響應小訊息頭中的元資訊。
  • GET 向特定的資源發出請求。注意:GET方法不應當被用於產生“副作用”的操作中,例如在Web Application中,其中一個原因是GET可能會被網路蜘蛛等隨意訪問。Loadrunner中對應get請求函式:web_link和web_url
  • POST 向指定資源提交資料進行處理請求(例如提交表單或者上傳檔案)。資料被包含在請求體中。POST請求可能會導致新的資源的建立和/或已有資源的修改。 Loadrunner中對應POST請求函式:web_submit_data,web_submit_form
  • PUT 向指定資源位置上傳其最新內容
  • DELETE 請求伺服器刪除Request-URL所標識的資源
  • TRACE 回顯伺服器收到的請求,主要用於測試或診斷
  • CONNECT

93、HTTP get和post方法的區別?

1、GET請求,請求的資料會附加在URL之後,以?分割URL和傳輸資料,多個引數用&連線。URL的編碼格式採用的是ASCII編碼,而不是uniclde,即是說所有的非ASCII字元都要編碼之後再傳輸。

POST請求:POST請求會把請求的資料放置在HTTP請求包的包體中。上面的item=bandsaw就是實際的傳輸資料。 因此,GET請求的資料會暴露在位址列中,而POST請求則不會。

2、傳輸資料的大小

在HTTP規範中,沒有對URL的長度和傳輸的資料大小進行限制。但是在實際開發過程中,對於GET,特定的瀏覽器和伺服器對URL的長度有限制。因此,在使用GET請求時,傳輸資料會受到URL長度的限制。

對於POST,由於不是URL傳值,理論上是不會受限制的,但是實際上各個伺服器會規定對POST提交資料大小進行限制,Apache、IIS都有各自的配置。

3、安全性

POST的安全性比GET的高。這裡的安全是指真正的安全,而不同於上面GET提到的安全方法中的安全,上面提到的安全僅僅是不修改伺服器的資料。比如,在進行登入操作,通過GET請求,使用者名稱和密碼都會暴露再URL上,因為登入頁面有可能被瀏覽器快取以及其他人檢視瀏覽器的歷史記錄的原因,此時的使用者名稱和密碼就很容易被他人拿到了。除此之外,GET請求提交的資料還可能會造成Cross-site request frogery攻擊


94、http狀態碼

100-199:成功接收請求,但需要進行下一步請求 200-299:成功接收請求,並完成整個處理過程 300-399:為完成全部請求,客戶需近一步細化需求 400-499:客戶端請求有錯誤,包括語法錯誤或不能正常執行 500-599:伺服器端出現錯誤


95、http與https有什麼區別?

HTTP:是網際網路上應用最為廣泛的一種網路協議,是一個客戶端和伺服器端請求和應答的標準(TCP),用於從WWW伺服器傳輸超文字到本地瀏覽器的傳輸協議,它可以使瀏覽器更加高效,使網路傳輸減少。

HTTPS:是以安全為目標的HTTP通道,簡單講是HTTP的安全版,即HTTP下加入SSL層,HTTPS的安全基礎是SSL,因此加密的詳細內容就需要SSL。

HTTPS協議的主要作用可以分為兩種:一種是建立一個資訊保安通道,來保證資料傳輸的安全;另一種就是確認網站的真實性。

HTTPS和HTTP的區別主要如下:

  • https協議需要到ca申請證書,一般免費證書較少,因而需要一定費用。

  • http是超文字傳輸協議,資訊是明文傳輸,https則是具有安全性的ssl加密傳輸協議。

  • http和https使用的是完全不同的連線方式,用的埠也不一樣,前者是80,後者是443。

  • http的連線很簡單,是無狀態的;HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議,比http協議安全。


96、你常用的開發工具是什麼,為什麼?

vscode/chrome等;


97、說說最近最流行的一些東西吧?常去哪些網站?

Node.js、MVVM、Flutter、WebAssembly、Vue、Uni-app、React-native、Angular、Weex等

CSDN,Segmentfault,部落格園,掘金,簡書,Stackoverflow,伯樂線上,阮一峰的網路日誌等


98、聊聊你的前端職業規劃

推薦大家看看這篇文章: 寫給前端應屆生的職業規劃建議


99、你如何看待加班?

這是一道半開放題. 沒有準確答案,也不建議大家太主觀地回答, 類似"加班是一種態度,不加班是一種能力,能力不夠時就要展現我的態度!”算是不錯的答案."

結合公司實際情況, 建議:

  1. 表現出自己過硬的工作實力,盡力避免由於自身問題導致被動型加班。
  2. 表現出自己謙虛的學習態度,願意犧牲自己的一部分個人時間提升個人能力,以便日後更好工作。
  3. 表現出對公司和崗位的個人認識,通過面試前的準備,瞭解到求職崗位是否需要經常性加班,並表明是否接受。
  4. 表現出自己較高的效率意識,拒絕形式主義的加班和空耗時間。此條有風險視情況而定,如果在民營企業或是工作較為緊張的單位,可以這樣講,說不定會加分;如果在事業單位或是公務員,最好就不要提及啦。
  5. 根據個人情況的不同,表明個人對加班的其他看法。
  6. 最後也考慮(抖機靈)地考慮一下反問面試官,自己有哪裡沒有涉及到,或者還有哪些需要加班的場景呢?

100、面試官問“你還有什麼問題”,應該怎麼回答

開放問題, 最好不要回答"沒有了"之類的話, 怎麼回答也看情況看個人, 具體可以參考: 在面試的時候,快到最後了,技術面試官問你有什麼要問他的嗎,這時候應該怎麼回答啊?