刷前端面經筆記(五)
1.XML和JSON的區別?
1)資料體積方面
JSON
相對於 XML
來講,資料的體積小,傳遞的速度更快些
2)資料描述方面
JSON
和 JavaScript
互動更加方便,更容易解析處理,更容易互動
3)資料描述方面
JSON
對資料的描述性比 XML
差
4)傳輸速度方面
JSON
的速度要遠遠快於 XML
2.前端需要注意哪些SEO?
合理的 title
、 description
、 keywords
:搜尋對著三項的權重逐個減少, title
值強調重點即可,重要關鍵詞不要超過兩次,而且要靠前,不同頁面的 title
要有所不同;
description
把頁面的內容高度概括,長度合適,不可過分分堆砌關鍵詞,不同頁面的 description
有所不同;
keywords
列舉重要關鍵詞即可;
// title標題 <title>標題</title> // keywords 關鍵詞 <meta name="description" content="關鍵詞1,關鍵詞2,關鍵詞3"> // description 內容摘要 <meta name="description" content="網頁的簡述">
語義化的 HTML
程式碼,符合 W3C
規範:語義化程式碼讓搜尋引擎容易理解網頁;
重要內容的 HTML
程式碼放在最前:搜尋引擎抓取 HTML
順序是從上到下,有的搜尋引擎對抓取長度有限制,所以要保證重要內容一定會被抓取;
重要內容不要用 JS
輸出:爬蟲不會執行 JS
獲取內容;
少用 iframe
:搜尋引擎不會抓取 iframe
中的內容;
非裝飾性圖片必須加 alt
;
提高網站速度:網站速度是搜素引擎排序的一個重要指標;
3.HTTP的幾種請求方法用途?
1) GET
方法
傳送一個請求來取得伺服器上的某一資源
2) POST
方法
向 URL
指定的資源提交資料或附加新的資料
3) PUT
方法
跟 POST
方法很像,也是想伺服器提交資料。但是,它們之間有不同。 PUT
指定了資源在伺服器上的位置,而 POST
沒有
4) HEAD
方法
只請求頁面的首部
5) DELETE
方法
刪除伺服器上的某資源
6) OPTIONS
方法
它用於獲取當前 URL
所支援的方法。如果請求成功,會有一個 Allow
的頭包含類似 “GET,POST”
這樣的資訊
7) TRACE
方法
TRACE
方法被用於激發一個遠端的,應用層的請求訊息迴路
8) CONNECT
方法
把請求連線轉換到透明的 TCP/IP
通道
4.如何進行網頁效能優化?
1) content
方面
減少 HTTP
請求:合併檔案、CSS精靈圖
減少 DNS
查詢:DNS快取、將資源分佈到恰當數量的主機名
減少 DOM
元素數量
2) Server
方面
CDN
配置
ETag
對元件使用 Gzip
壓縮
3) Cookie
方面
減少 cookie
大小
4) CSS
方面
將樣式表放到頁面頂部
不使用 CSS
表示式
<link>
不使用
@import
5) JavaScript
方面
將指令碼放到頁面底部
將 JavaScript
和 CSS
從外部引入
JavaScript
和
CSS
刪除不需要的指令碼
減少 DOM
訪問
6)圖片方面
優化 CSS
精靈
不要再 HTML
中拉伸圖片
5.語義化的理解
HTML
語義化就是讓頁面的內容結構化,便於對瀏覽器、搜尋引擎解析;
在沒有 CSS
樣式情況下也以一種文件格式顯示,並且是容易閱讀的;
搜尋引擎的爬蟲依賴於標記來確定上下文的各個關鍵字的權重,利於 SEO
;
使閱讀原始碼的人更容易將網站分塊,便於閱讀維護理解;
6.WEB標準以及W3C標準是什麼
標籤閉合、標籤小寫、不亂巢狀、使用外鏈 CSS
和 JS
、結構行為表現的分離
7.說說對作用域鏈的理解
作用域鏈的作用是保證執行環境裡有權訪問的變數和函式是有序的,作用域鏈的變數只能向上訪問,變數訪問到 window
物件即被終止,作用域鏈向下訪問變數是不被允許的;
即作用域就是變數與函式的可訪問範圍,即作用域控制這變數與函式的可見性和生命週期;
8.如何實現瀑布流
1)瀑布流佈局的要求要進行佈置的元素等寬;
然後計算元素的寬度,
與瀏覽器寬度之比,得到需要佈置的列數;
2)建立一個數組,長度為列數,
裡面的值為以已佈置元素的總高度(最開始為 0
);
3)然後將未佈置的元素的依次佈置到高度最小的那一列,
就得到了瀑布流佈局;
4)滾動載入, scroll
事件得到 scrollTop
,
與最後盒子的 offsetTop
對比,
符合條件就不斷滾動載入。
瀑布流佈局核心程式碼:
/** * 實現瀑布流的佈局 * @param {string}parentBox * @param {string}childBox */ function waterFull(parentBox, childBox) { // 1. 求出父盒子的寬度 //1.1 獲取所有的子盒子 var allBox = $(parentBox). getElementsByClassName(childBox); // console.log(allBox); // 1.2 求出子盒子的寬度 var boxWidth = allBox[0].offsetWidth; // console.log(boxWidth); // 1.3 獲取視窗的寬度 var clientW = document. documentElement.clientWidth; // console.log(clientW); // 1.4 求出總列數 var cols = Math.floor(clientW / boxWidth); // console.log(cols); // 1.5 父盒子居中 $(parentBox).style.width = cols * boxWidth + 'px'; $(parentBox).style.margin = '0 auto'; // 2. 子盒子定位 //2.1 定義變數 var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex = 0; // 2.2 遍歷所有的子盒子 for (var i = 0; i < allBox.length; i++) { // 2.2.1 求出每一個子盒子的高度 boxHeight = allBox[i].offsetHeight; // console.log(boxHeight); // 2.2.2 取出第一行盒子的高度放入高度陣列中 if (i < cols) { // 第一行 heightArr.push(boxHeight); } else { // 剩餘行的盒子 // 2.2.3 取出陣列中最矮的高度 minBoxHeight = _.min(heightArr); // 2.2.4 求出最矮高度對應的索引 minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight); // 2.2.5 盒子定位 allBox[i].style.position = 'absolute'; allBox[i].style.left = minBoxIndex * boxWidth + 'px'; allBox[i].style.top = minBoxHeight + 'px'; // 2.2.6 更新最矮的高度 heightArr[minBoxIndex] += boxHeight; } } } /** * 根據內容取出在陣列中對應的索引 * @param {object}arr * @param {number}val * @returns {boolean} */ function getMinBoxIndex(arr, val) { for (var i = 0; i < arr.length; i++) { if (arr[i] === val) return i; } } /** * 判斷是否具備載入子盒子的條件 * @returns {boolean} */ function checkWillLoadImage() { // 1. 獲取最後一個盒子 var allBox = $('main').getElementsByClassName('box'); var lastBox = allBox[allBox.length - 1]; // 2. 求出高度 var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop; // 3. 求出視窗的高度 var clientH = document.documentElement.clientHeight; // 4. 求出頁面滾動產生的高度 var scrollTopH = scroll().top; // 5. 對比 return lastBoxDis <= clientH + scrollTopH; }
9.原生JS都有哪些方式可以實現兩個頁面間的通訊?
1)通過 url
位址列傳遞引數;
例如:點選列表中的每一條資料,跳轉到一個詳情頁面,在 URL
中傳遞不同的引數區分不同的頁面;
2)通過本地儲存 cookie
、 localStorage
、 sessionStorage
;
例如京東的登陸,把登陸後獲得的頁面資訊儲存到本地,其他頁面需要使用者資訊的話就從本地的儲存資料中獲取;
3)使用iframe
例如在 A
頁面中嵌入 B
頁面,在 A
中可以通過一些屬性和實現方法和 B
頁面的通訊;
4)利用 postMessage
實現頁面間的通訊
例如父視窗往子視窗傳遞資訊,子視窗往父視窗傳遞資訊