最新版前端工程師面試題--前端核心(1)

2、前端核心

2.1、服務端編程

JSONP 的缺點

參考回答：

JSON只支持 get，因為 script 標簽只能使用 get 請求；

JSONP 需要后端配合返回指定格式的數(shù)據(jù)。

跨域（jsonp，ajax）

參考回答：

JSONP：ajax 請求受同源策略影響，不允許進行跨域請求，而 script 標簽 src 屬性中的鏈 接卻可以訪問跨域的 js 腳本，利用這個特性，服務端不再返回JSON格式的數(shù)據(jù)，而是返回一段調用某個函數(shù)的 js 代碼，在 src 中進行了調用，這樣實現(xiàn)了跨域。

dom是什么，你的理解？

參考回答：

文檔對象模型（Document Object Model，簡稱DOM），是W3C?組織推薦的處理可擴展 標志語言的標準編程接口。在網(wǎng)頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型就稱為DOM。

關于 dom的 api 有什么

參考回答：

節(jié)點創(chuàng)建型 api，頁面修改型api，節(jié)點查詢型api，節(jié)點關系型 api，元素屬性型 api，?元素樣式型 api等

2.2、Ajax

ajax 返回的狀態(tài)

參考回答：

0 － （未初始化）還沒有調用 send()方法

1 － （載入）已調用 send()方法，正在發(fā)送請求

2 － （載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應內容

3 － （交互）正在解析響應內容

4 － （完成）響應內容解析完成，可以在客戶端調用了

實現(xiàn)一個 Ajax

參考回答：

AJAX創(chuàng)建異步對象XMLHttpRequest

操作XMLHttpRequest?對象

1. 設置請求參數(shù)（請求方式，請求頁面的相對路徑，是否異步）
2. 設置回調函數(shù)，一個處理服務器響應的函數(shù)，使用?onreadystatechange?，類似函數(shù) 指針
3. 獲取異步對象的?readyState?屬性：該屬性存有服務器響應的狀態(tài)信息。每當?readyState?改變時，onreadystatechange?函數(shù)就會被執(zhí)行。
4. 判斷響應報文的狀態(tài)，若為?200?說明服務器正常運行并返回響應數(shù)據(jù)。
5. 讀取響應數(shù)據(jù)，可以通過?responseText?屬性來取回由服務器返回的數(shù)據(jù)。

發(fā)出兩個有順序的 ajax，可以用回調函數(shù)，也可以使用Promise.then?或者?async?等。

寫出原生 Ajax

參考回答：

Ajax?能夠在不重新加載整個頁面的情況下與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁內容，實現(xiàn) 局部刷新，大大降低了資源的浪費，是一門用于快速創(chuàng)建動態(tài)網(wǎng)頁的技術，ajax 的使用分為四部分：

1. 創(chuàng)建XMLHttpRequest?對象?var xhr = new XMLHttpRequest();
2. 向服務器發(fā)送請求，使用?xmlHttpRequest對象的?open?和?send?方法，
3. 監(jiān)聽狀態(tài)變化，執(zhí)行相應回調函數(shù)

var?xhr?=?new?XMLHttpRequest();?
xhr.open('get',?'aabb.php',?true);?
xhr.send(null);?
xhr.onreadystatechange?=?function()?{?
????if(xhr.readyState?==?4)?{?
????????if(xhr.status?==?200)?{?
????????????console.log(xhr.responseText);?
????????}?
????}
}

2.3、移動 web 開發(fā)

知道 PWA 嗎

參考回答：

PWA全稱?Progressive Web App，即漸進式WEB 應用。一個 PWA 應用首先是一個網(wǎng)頁, 可以通過 Web 技術編寫出一個網(wǎng)頁應用. 隨后添加上?App Manifest?和Service Worker來實現(xiàn) PWA 的安裝和離線等功能

Rem, Em

參考回答：

1. rem單位如何轉換為像素值

   當使用 rem單位的時候，頁面轉換為像素大小取決于葉根元素的字體大小，即HTML 元素的字體大小。根元素字體大小乘 rem的值。例如，根元素的字體大小為 16px，那么 10rem就等同于 10*16=160px。

2. em是如何轉換成?px?的

   當使用 em單位的時候，像素值是將 em值乘以使用 em單位的元素的字體大小。例如一 個 div 的字體為 18px，設置它的寬高為 10em，那么此時寬高就是 18px*10em=180px。

   .test{?
   ????width:?10em;
   ????height:?10em;?
   ????background-color:?#ff7d42;?
   ????font-size:?18px;
   }
   

   一定要記住的是，em是根據(jù)使用它的元素的font-size?的大小來變化的，而不是根據(jù)父 元素字體大小。有些元素大小是父元素的多少倍那是因為繼承了父元素中 font-size 的設 定，所以才起到的作用。

   em單位的繼承效果:

   使用 em單位存在繼承的時候，每個元素將自動繼承其父元素的字體大小，繼承的效果 只能被明確的字體單位覆蓋，比如?px和?vw。只要父級元素上面一直有 fontsize 為 em單 位，則會一直繼承，但假如自己設置了font-size 的單位為 px 的時候，則會直接使用自己的 px 單位的值。

3. 根 html 的元素將會繼承瀏覽器中設置的字體大小

   除非顯式的設置固定值去覆蓋。所以 html 元素的字體大小雖然是直接確定 rem的值， 但這個字體大小首先是來源于瀏覽器的設置。（所以一定要設置 html 的值的大小，因為有可能用戶的瀏覽器字體大小是不一致的。）

4. 當 em單位設置在 html 元素上時

   它將轉換為em值乘以瀏覽器字體大小的設置。

   例如：

   html{?
   ????font-size:?1.5em;
   }
   

   可以看到，因為瀏覽器默認字體大小為 16px，所以當設置HTML 的 fontsize 的值為 1.5em 的時候，其對應的 px 的值為 161.5=24px 所以此時，再設置其他元素的 rem的值的時候，其對應的像素值為 n24px。 例如，test 的 rem的值為 10

   .test{?
   ????width:?10rem;
   ????height:?10rem;?
   ????background-color:?#ff7d42;
   }
   

   總結:

   優(yōu)缺點:

   em可以讓我們的頁面更靈活，更健壯，比起到處寫死的 px 值，em似乎更有張力，改 動父元素的字體大小，子元素會等比例變化，這一變化似乎預示了無限可能, em做彈性布局的缺點還在于牽一發(fā)而動全身，一旦某個節(jié)點的字體大小發(fā)生變化，那么其后代元素都得重新計算

   1. rem單位翻譯為像素值的時候是由 html 元素的字體大小決定的。此字體大小會 被瀏覽器中字體大小的設置影響，除非顯式的在 html 為 font-size 重寫一個單位。
   2. em單位轉換為像素值的時候，取決于使用它們的元素的?font-size?的大小，但是有因為有繼承關系，所以比較復雜。

Rem布局及其優(yōu)缺點

參考回答：

首先Rem相對于根(html)的?font-size?大小來計算。簡單的說它就是一個相對單位。

例如:font-size:10px;,那么（1rem = 10px）了解計算原理后首先解決怎么在不同設備上設置 html 的 font-size 大小。其實 rem布局的本質是等比縮 放，一般是基于寬度。

優(yōu)點:

可以快速適用移動端布局 字體圖片 高度

缺點:

1. 目前?ie 不支持，對 pc 頁面來講使用次數(shù)不多；
2. 數(shù)據(jù)量大：所有的圖片，盒子都需要我們去給一個準確的值；才能保證不同機型的適配；
3. 在響應式布局中，必須通過 js來動態(tài)控制根元素 font-size 的大小。

也就是說 css 樣式和 js 代碼有一定的耦合性。且必須將改變 font-size 的代碼放在 css 樣 式之前。

防止手機中頁面放大和縮小

參考回答：

<meta?name="viewport"?content="user-scalable=no">
<meta?name="viewport"?content="initial-scale=1,maximum-scale=1">

2X圖 3X圖適配

參考回答：

實際程序開發(fā)當中，我們代碼中用的值是指邏輯分辨率?pt，而不是像素分辨率?px，比如 我們定義一個按鈕的高度為 45，這個 45 指的是 45pt 而不是 45px。在非Retina 屏下 1pt = 1px，4 和 4.7 寸Retina 屏下 1pt = 2px，5.5 和 x 下 1pt = 3px.我們制作不同尺寸的圖片， 比如@1x 為 22px，則@2x 為 44px，@3x 為 66px，命名分別為 image.png，在項目的 Assets.xcassets 中新建New Image Set，修改名字為 image，并把相應尺寸的圖片拖放至相應位置。

/*?根據(jù)?dpr?顯示?2x?圖/3x?圖?*/?
.bg-image(@url){?
????background-image:~"url('@{url}@2x.png')";?
????@media?(-webkit-min-device-pixel-ratio:?3),(min-device-pixel-ratio:?3){?
????????background-image:~"url('@{url}@3x.png')";
?}?
}

.bg-color(@color)?{?
????background-color:?@color;
}