摘要:例如狀態碼表示響應成功。答狀態碼表示服務器已接受請求,但尚未處理。狀態碼表示發送的請求需要有通過認證的認證信息。狀態碼表示服務器端在執行請求時發生了錯誤。響應報文也是由三部分組成狀態碼響應報頭和響應報文。
前端面試題(移動適配,閉包,this,HTTP狀態嗎,排序思路,頁面加載,數組去重) 1 請寫出一個符合 W3C 規范的 HTML 文件
請寫出一個符合 W3C 規范的 HTML 文件,要求
頁面標題為「我的頁面」
頁面中引入了一個外部 CSS 文件,文件路徑為 /style.css
頁面中引入了另一個外部 CSS 文件,路徑為 /print.css,該文件僅在打印時生效
頁面中引入了另一個外部 CSS 文件,路徑為 /mobile.css,該文件僅在設備寬度小于 500 像素時生效
頁面中引入了一個外部 JS 文件,路徑為 /main.js
頁面中引入了一個外部 JS 文件,路徑為 /gbk.js,文件編碼為 GBK
頁面中有一個 SVG 標簽,SVG 里面有一個直徑為 100 像素的圓圈,顏色隨意
注意題目中的路徑
2 移動端是怎么做適配的?我的頁面
2016年騰訊前端面試題:
移動端是怎么做適配的?
回答要點:
meta viewport
媒體查詢
動態 rem 方案
(可以參考我寫的博客
CSS5:移動端頁面(響應式)
CSS9:動態 REM-手機專用的自適應方案)
答:
content="width=device-width表示寬度等于設備寬度,意思就是不要將頁面寬度變成980px,用設備寬度.
user-scalable=no表示用戶不以縮放
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0
初始縮放倍數,最大縮放倍數,最小縮放倍數,都是1.0,即不能縮放
通過媒體查詢,根據不同條件,使用不同的css樣式。
例如:
2.3動態rem
因為手機需要兼容很多不同寬度的手機設備,所以將長度單位依賴于手機設備寬度,使用動態rem方案,那么就可以在不同手機上實現相同比例的頁面縮放而不影響布局。
rem:root em,即的font-size.
實現動態rem,主要需要下面兩步:
1在標簽里加上如下代碼,讓10rem等于頁面寬度
動態REM
2使用sass自動將設計稿的px轉換為rem
在scss文件里寫這樣一個函數:
@function px( $px ){ @return $px/$designWidth*10 + rem; } $designWidth : 640; // 640 是設計稿的寬度,你要根據設計稿的寬度填寫。設計師的設計稿寬度需要統一
就可以使用px()函數將像素轉化為rem。
3 實現圓角矩形和陰影怎么做?2017年騰訊前端實習面試題(二面):
用過CSS3嗎? 實現圓角矩形和陰影怎么做?
(搜索MDN border-radius)
答:
用過。例如陰影,圓角,動畫,漸變和過渡
1.圓角:
簡寫屬性border-radius。例如
border-radius: 30px;
border-radius: 50%;
半徑參數可以是長度單位,也可以是百分比單位。
也可以分別設置四個角
border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;
半徑參數可以是一個或兩個,一個參數代表圓形圓角,兩個參數是橢圓圓角
2.陰影:
語法:
box-shadow:inset x-offset y-offset blur-radius spread-radius color
五個參數分別是:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色
出處同上(一面二面都問了):
什么是閉包,閉包的用途是什么?
JavaScript高程P178
閉包的用途
答:
4.1什么是閉包閉包是指有權訪問另一個函數作用域中的變量的函數。
例如
function foo(){ var local = 1 function bar(){ local++ return local } return bar } var func = foo() func()
bar函數可以訪問變量local,bar就是一個閉包。
4.2閉包的用途
模仿塊級作用域
function A(num) { //核心代碼 (funnction(){ for(var i = 0; i匿名自執行函數在內部形成了一個閉包,使i變量只有塊級作用域。閉包的本質是函數,其實在這里閉包就是那個匿名函數,這個閉包可以得到函數A內部的活動變量,又能保證自己內部的變量在自執行后直接銷毀。
存儲變量
閉包的另一個特點是可以保存外部函數的變量,原理是基于javascript中函數作用域鏈的特點,內部函數保留了對外部函數的活動變量的引用,所以變量不會被釋放function B(){ var x = 100; return { function(){ return x } } } var m = B()//運行B函數,生成活動變量 x被m引用運行B函數,生成活動變量 x被m引用, 變量x不會被銷毀。
運行B函數,返回值就是B內部的匿名函數,此時m引用了變量x,所以B執行后x不會被釋放,利用這一點,我們可以把比較重要或者計算耗費很大的值存在x中,只需要第一次計算賦值后,就可以通過m函數引用x的值,不必重復計算,同時也不容易被修改。
封裝私有變量
function Person(){ var name = "default"; this.getName:function(){ return name; } this.setName:function(value){ name = value; } } console.log(Person.getName())//default console.log(Person.setName("mike")) console.log(Person.getName())//mike設置了兩個閉包函數來操作Person函數內部的name變量,除了這兩個函數,在外部無法再訪問到name變量,name也就相當于是私有成員。
5 call、apply、bind 的用法分別是什么?阮一峰的javascript教程--this
深入淺出 妙用Javascript中apply、call、bind答:
如果在函數中包含多層的this,this的指向是不確定的。需要把this固定下來,避免出現意想不到的情況。JavaScript提供了call、apply、bind這三個方法,來切換/固定this的指向。
5.1Function.prototype.call()函數實例的call方法,可以指定函數內部this的指向(即函數執行時所在的作用域),然后在所指定的作用域中,調用該函數。
var obj = {}; var f = function () { return this; }; f() === window // true f.call(obj) === obj // truecall的第一個參數就是this所要指向的那個對象,后面的參數則是函數調用時所需的參數。
5.2Function.prototype.apply()apply方法的作用與call方法類似,也是改變this指向,然后再調用該函數。唯一的區別就是,它接收一個數組作為函數執行時的參數。
apply方法的第一個參數也是this所要指向的那個對象,如果設為null或undefined,則等同于指定全局對象。第二個參數則是一個數組,該數組的所有成員依次作為參數,傳入原函數。原函數的參數,在call方法中必須一個個添加,但是在apply方法中,必須以數組形式添加。
function f(x, y){ console.log(x + y); } f.call(null, 1, 1) // 2 f.apply(null, [1, 1]) // 25.3Function.prototype.bind()bind方法用于將函數體內的this綁定到某個對象,然后返回一個新函數。
bind方法的參數就是所要綁定this的對象。
var counter = { count: 0, inc: function () { this.count++; } }; var func = counter.inc.bind(counter); func(); counter.count // 1上面代碼中,counter.inc方法被賦值給變量func。這時必須用bind方法將inc內部的this,綁定到counter,否則就會出錯。
6 HTTP 狀態碼出處同上:
請說出至少 8 個 HTTP 狀態碼,并描述各狀態碼的意義。例如:
狀態碼 200 表示響應成功。
答:
狀態碼 202 表示:服務器已接受請求,但尚未處理。
狀態碼 204 表示:請求處理成功,但沒有資源可返回。
狀態碼 206 表示:服務器已經成功處理了部分 GET 請求。狀態碼 301 表示:請求的資源已被永久的分配了新的 URI。
狀態碼 302 表示:請求的資源臨時的分配了新的 URI。狀態碼 400 表示:請求報文中存在語法錯誤。
狀態碼 401 表示:發送的請求需要有通過 HTTP 認證的認證信息。
狀態碼 403 表示:對請求資源的訪問被服務器拒絕了。
狀態碼 404 表示:服務器上無法找到請求的資源。狀態碼 500 表示:服務器端在執行請求時發生了錯誤。
7 寫出一個 HTTP post 請求的內容
狀態碼 503 表示:服務器暫時處于超負債或正在進行停機維護,現在無法處理請求。出處同上:
請寫出一個 HTTP post 請求的內容,包括四部分。
其中
第四部分的內容是 username=ff&password=123
第二部分必須含有 Content-Type 字段
請求的路徑為 /path看我的博客HTTP入門(一):在Bash中curl查看請求與響應
答:
1 POST /path HTTP/1.1 2 Host: www.baidu.com 2 User-Agent: curl/7.20.0 (x86_64-unknown-linux-gnu) libcurl/7.20.0 zlib/1.2.8 2 Accept: */* 2 Content-Length: 24 2 Content-Type: application/x-www-form-urlencoded 3 4 username=ff&password=1238 請說出至少三種排序的思路這三種排序的時間復雜度分別為
O(n*n)
O(n log2 n)
O(n + max)答:
O(n*n) 冒泡排序:遍歷整個數組,依次比較相鄰兩個元素,將小的排在前面,大的排后面,這樣一遍循環下來就可以將最大的元素排到最后,除去已經排過的最大的數,然后再次循環以上操作,直到最后一個為止。
O(n log2 n) 快速排序:以第一個元素為基準,比這個元素小的元素排在左邊,比這個元素大的排右邊,再以該元素左邊和右邊的第一個元素為基準,在子區間重復以上的操作,直到只有一個數字排序為止。
O(n + max) 基數排序:首先根據個位數的數值,將需要排序的一串數值分配到0-9的桶中。接著將這些桶中的數值重新串起來,形成新的數列。接著根據十位數、百位數直至最高位重復以上操作。
9 頁面從輸入URL到頁面加載顯示完成的過程著名前端面試題:
一個頁面從輸入 URL 到頁面加載顯示完成,這個過程中都發生了什么?
這一題是在挖掘你的知識邊界,所以你知道多少就要答多少。可以先查閱一些資料再查,但是不要把自己不懂的東西放在答案里,面試官會追問的。
知乎上:從輸入 URL 到頁面加載完成的過程中都發生了什么
答:DNS解析
DNS解析的過程就是瀏覽器查找域名對應的 IP 地址;TCP連接
瀏覽器根據 IP 地址向服務器發起 TCP 連接,與瀏覽器建立 TCP 三次握手:
(1)主機向服務器發送一個建立連接的請求(您好,我想認識您);
(2)服務器接到請求后發送同意連接的信號(好的,很高興認識您);
(3)主機接到同意連接的信號后,再次向服務器發送了確認信號(我也很高興認識您),自此,主機與服務器兩者建立了連接。發送HTTP請求
瀏覽器根據 URL 內容生成 HTTP 請求報文。HTTP請求報文是由三部分組成: 請求行, 請求報頭和請求正文,其中包含請求文件的位置、請求文件的方式等等。服務器處理請求并返回HTTP報文
服務器接到請求后,回想客戶端發送HTTP響應報文。HTTP響應報文也是由三部分組成: 狀態碼, 響應報頭和響應報文。服務器會根據 HTTP 請求中的內容來決定如何獲取相應的 HTML 文件,并將得到的 HTML 文件發送給瀏覽器。
瀏覽器解析渲染頁面
瀏覽器是一個邊解析邊渲染的過程。在瀏覽器還沒有完全接收 HTML 文件時便開始渲染、顯示網頁。在執行 HTML 中代碼時,根據需要,瀏覽器會繼續請求圖片、CSS、JavsScript等文件,過程同請求 HTML 。關閉TCP連接或繼續保持連接
(1)主機向服務器發送一個斷開連接的請求(不早了,我該走了);
(2)服務器接到請求后發送確認收到請求的信號(知道了);
(3)服務器向主機發送斷開通知(我也該走了);
(4)主機接到斷開通知后斷開連接并反饋一個確認信號(嗯,好的),服務器收到確認信號后斷開連接;
10 如何實現數組去重著名面試題:
如何實現數組去重?
假設有數組 array = [1,5,2,3,4,2,3,1,3,4]
你要寫一個函數 unique,使得
unique(array) 的值為 [1,5,2,3,4]
也就是把重復的值都去掉,只保留不重復的值。要求:
不要做多重循環,只能遍歷一次
請給出兩種方案,一種能在 ES 5 環境中運行,一種能在 ES 6 環境中運行(提示 ES 6 環境多了一個 Set 對象)
從 JavaScript 數組去重談性能優化
也談JavaScript數組去重
答:ES5:
思路:核心是構建了一個 hash 對象來替代 indexOf. 注意在 JavaScript 里,對象的鍵值只能是字符串,因此需要 var key = typeof(item) + item 來區分數值 1 和字符串 "1" 等情況。
只循環一遍function unique(arr) { var ret = [] var hash = {} for (var i = 0; i < arr.length; i++) { var item = arr[i] var key = typeof(item) + item if (hash[key] !== 1) { ret.push(item) hash[key] = 1 } } return ret }ES6:ES2015引入了一種叫作Set的數據類型。顧名思義,Set就是集合的意思,它不允許重復元素出現。
如果重復添加同一個元素的話,Set中只會存在一個。包括NaN也是這樣function unique(array) { return Array.from(new Set(array)); }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96073.html
答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網發布的真實大廠前端面經題目,我一直在收集題目長期一個一個的記錄下來的,可能會有重復,但基本前端的面試大綱和需要掌握的知識都在其中了,面試題僅做學習參考,學習者閱后也要用心鉆研其中的原理,重要知識需要系統學習、透徹學習,形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比,兩者中間件的原理,koa捕獲異常多種情...
答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網發布的真實大廠前端面經題目,我一直在收集題目長期一個一個的記錄下來的,可能會有重復,但基本前端的面試大綱和需要掌握的知識都在其中了,面試題僅做學習參考,學習者閱后也要用心鉆研其中的原理,重要知識需要系統學習、透徹學習,形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比,兩者中間件的原理,koa捕獲異常多種情...
答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網發布的真實大廠前端面經題目,我一直在收集題目長期一個一個的記錄下來的,可能會有重復,但基本前端的面試大綱和需要掌握的知識都在其中了,面試題僅做學習參考,學習者閱后也要用心鉆研其中的原理,重要知識需要系統學習、透徹學習,形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比,兩者中間件的原理,koa捕獲異常多種情...
摘要:面試題來源于網絡,看一下高級前端的面試題,可以知道自己和高級前端的差距。 面試題來源于網絡,看一下高級前端的面試題,可以知道自己和高級前端的差距。有些面試題會重復。 使用過的koa2中間件 koa-body原理 介紹自己寫過的中間件 有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理 如何和MySQL進行通信 React聲明周期及自己的理解 如何...
閱讀 1635·2021-10-09 09:44
閱讀 2768·2021-10-08 10:04
閱讀 2461·2021-09-26 09:55
閱讀 3831·2021-09-22 10:02
閱讀 3304·2019-08-29 17:08
閱讀 1064·2019-08-29 15:08
閱讀 2952·2019-08-26 13:52
閱讀 3267·2019-08-26 13:34