- 寫出一個符合W3C規(guī)范的HTML文件，要求
i. 頁面標(biāo)題為“我的頁面”
ii. 頁面中引入一個外部CSS文件奢人，路徑為/style.css
iii. 頁面中引入另一個外部CSS文件术吗，路徑為/print.css阱表，該文件僅在在打印時生效
iv. 頁面中引入了另一個外部CSS文件人柿，路徑為/mobile.css畔乙，該文件僅在設(shè)備寬度小于500像素時生效
v. 頁面中引入一個外部JS文件君仆，路徑為/main.js
vi. 頁面中引入另一個外部JS文件，路徑為/gbk.js牲距，文件編碼為GBK
vii. 頁面中有一個SVG標(biāo)簽返咱，SVG里面有一個直徑為100像素的圓圈，顏色隨意
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./print.css" media="print">
<link rel="stylesheet" href="./mobile.css" media="(max-width:500px)">
<script src="./main.js"></script>
<script src="./gbk.js" charset="gbk"></script>
<title>我的頁面</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="100" r="50" stroke="red" fill="none">
</svg>
</body>
</html>
- 移動端是怎么做適配的牍鞠？
回答要點：
i. meta viewport
ii. 媒體查詢（參考CSS學(xué)習(xí)筆記）
ii. 動態(tài)rem方案（參考CSS學(xué)習(xí)筆記）
- 設(shè)置移動端自適應(yīng)要添加meta標(biāo)簽咖摹，它可以防止手機(jī)頁面模擬980像素寬度、防止用戶縮放頁面
<meta name="viewport" content="width=device-width,initial-scale=1.0"> - 通過媒體查詢可以設(shè)置滿足不同查詢條件時难述，顯示不同樣式（用在style標(biāo)簽內(nèi)或者link外部CSS文件都可以）萤晴，所以可以根據(jù)手機(jī)頁面寬度來調(diào)整對應(yīng)CSS做適配，例如
//當(dāng)屏幕寬度小于500px時胁后，背景顏色變紅
<style>
@media(max-width: 500px) {
body {
background: red;
}
}
</style>
//當(dāng)屏幕寬度小于500px時店读，引入一個CSS文件
<link rel="stylesheet" media="(max-width:500px)" href="./style.css">
- 首先rem等于根元素的font-size，將根元素的font-size設(shè)置成viewport的寬度時攀芯，1rem==html font-size==viewport width屯断，我們使用rem作為長度單位就可以將一切大小按視口寬度的比例呈現(xiàn)，所以移動端適配可以使用動態(tài)rem方式。為了不使小數(shù)太小裹纳，使用不便，讓根元素font-size的十分之一作為1rem比較合適紧武。以下兩種方式可以實現(xiàn)動態(tài)rem：
i. js動態(tài)調(diào)整rem
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html {font-size:'+pageWidth/10+'px;}</style>')
</script>
ii. SCSS實現(xiàn)動態(tài)rem
在scss文件里添加如下代碼剃氧，可以實現(xiàn)px自動變rem
@function px($px) {
@return $px/$designWidth*10 + rem;
}
$designWidth: 640;//設(shè)計稿寬度
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
小知識點：
- 在 SCSS 里使用 PX2REM
npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null")touch ~/.bashrcecho 'export >SASS_BINARY_SITE="[https://npm.taobao.org/mirrors/node-sass"'](https://npm.taobao.org/mirrors/node-sass%22' "null") >> ~/.bashrcsource ~/.bashrcnpm i -g node-sassmkdir ~/Desktop/scss-democd ~/Desktop/scss-demomkdir scss csstouch scss/style.scssstart scss/style.scssnode-sass -wr scss -o css
- 頁面默認(rèn)字體大小（font-size）為16px阻星；Chrome有默認(rèn)最小字號12px朋鞍，設(shè)置比12px小的話也會自動變成12px。
- rem 可以與其他單位同時存在妥箕，像border滥酥、font-size這樣很小的可以就用px而不用rem。
- CSS3如何實現(xiàn)圓角矩形和陰影畦幢？
- 圓角用
border-radius屬性
語法border-radius: 1-4 length|% / 1-4 length|%;
圓角的半徑可以用（數(shù)值+單位）或百分比確定坎吻，值為4個時，分別表示左上角宇葱、右上角瘦真、右下角、左下角黍瞧；值為3個時诸尽，分別表示左上角、右上角和左下角印颤、右下角您机；值為2個時，分別表示左上角和右下角年局、右上角和左下角际看；值為1個時，四個角相同矢否。 - 陰影用
box-shadow屬性
語法box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 含義 |
|---|---|
| h-shadow | 必選仿村，水平陰影，可正負(fù)值兴喂。 |
| v-shadow | 必選蔼囊，垂直陰影，可正負(fù)值衣迷。 |
| blur | 可選畏鼓，模糊距離。 |
| spread | 可選壶谒，陰影大小云矫。 |
| color | 可選陰影顏色。 |
| inset | 可選汗菜，從外層陰影（開始時）改變陰影內(nèi)側(cè)陰影让禀。 |
- 什么是閉包挑社？閉包的用途？
- 如果一個函數(shù)用到了它范圍外的變量巡揍，那么這個函數(shù)+這個變量就叫閉包痛阻。（芳芳的定義）
- 閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)，在JavaScript中就是“定義在一個函數(shù)內(nèi)部的子函數(shù)”腮敌，是連接函數(shù)內(nèi)部和外部的橋梁阱当。（阮一峰的定義）
- 閉包的用途：一是可以讀取函數(shù)內(nèi)部的變量；二是記住誕生環(huán)境糜工，讓這些變量始終保持在內(nèi)存中弊添；三是封裝對象的私有屬性和私有方法。
示例1-讀取函數(shù)內(nèi)部變量
function f1() { var n = 900 function f2() { console.log(n) } return f2 } var result = f1() result()//900示例2-保留外層函數(shù)的內(nèi)部變量
function createIncrementor(start) { return function() { return start+=1 } } var inc = createIncrementor(5) console.log(inc())//6 console.log(inc())//7 console.log(inc())//8捌木，每一次調(diào)用都是在上一次調(diào)用的基礎(chǔ)上進(jìn)行計算示例3-封裝對象的私有屬性和私有方法
function Person(name) { var age function setAge(n) { age = n } function getAge() { return age } return { name: name, setAge: setAge, getAge: getAge } } var p1 = Person('Jack') p1.setAge(18) p1.getAge() console.log(p1.getAge())//18 //函數(shù)Person的內(nèi)部變量age通過閉包getAge和setAge油坝，變成返回對象p1的私有變量。
- call刨裆、apply免钻、bind的用法是什么？
- JavaScript提供call崔拥、apply极舔、bind三個方法來切換/固定this的指向。
- call方法可以指定函數(shù)內(nèi)部this的指向（即函數(shù)執(zhí)行時所在的作用域）链瓦，然后在指定的作用域種調(diào)用該函數(shù)拆魏。
var obj = {}
var f = function () {
return this
}
f(obj) === window//true
f.call(obj) === obj//true
call方法的參數(shù)應(yīng)該是個對象，如果為空慈俯、null渤刃、undefined則默認(rèn)傳入全局對象，如果是一個原始值贴膘，會自動轉(zhuǎn)成對應(yīng)的包裝對象再傳入call卖子。
- apply與call非常相似，不同之處在于提供參數(shù)方式刑峡，call()使用的是若干個參數(shù)的列表洋闽，而apply()使用的是一個包含若干參數(shù)的數(shù)組（或類數(shù)組對象）
- bind方法用于將函數(shù)體內(nèi)的this綁定到某個對象，然后返回一個新函數(shù)突梦。
//創(chuàng)建綁定函數(shù)
this.x = 9;
var module = {
x: 81,
getX: function() { return this.x; }
};
module.getX(); // 返回 81
var retrieveX = module.getX;
retrieveX(); // 返回 9, 在這種情況下诫舅，"this"指向全局作用域
// 創(chuàng)建一個新函數(shù)，將"this"綁定到module對象
// 新手可能會被全局的x變量和module里的屬性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81
bind()的用法還有以下：
i. 使一個函數(shù)擁有預(yù)設(shè)的初始參數(shù)宫患，初始參數(shù)在this之后刊懈，且在傳入?yún)?shù)之前的位置。
ii. 配合set Timeout。
iii. 快捷調(diào)用虚汛。例如將類數(shù)組對象轉(zhuǎn)換成真正的數(shù)組：
// 1.使用apply方法
function fun1() {
var slice = Array.prototype.slice;
return slice.apply(arguments);
}
fun1(1,2,3);//[1,2,3]
// 2.使用call(或apply)和bind方法一起
function fun2() {
var unboundSlice = Array.prototype.slice;
// 把函數(shù)的call方法綁定在數(shù)組slice方法上匾浪，之后再給call方法傳遞參數(shù)，這里call換成apply也可以卷哩。
var slice = Function.prototype.call.bind(unboundSlice);
return slice(arguments);
}
fun2(1,2,3);//[1,2,3]
- 有哪些HTTP狀態(tài)碼和意義蛋辈？
| 狀態(tài)碼 | 含義 |
|---|---|
| 1xx | 不常用 |
| 200 | 請求成功，請求所希望的響應(yīng)頭或數(shù)據(jù)體會隨此響應(yīng)返回殉疼。 |
| 204 | 服務(wù)器成功處理了請求，但不需要返回任何實體內(nèi)容捌年。 |
| 301 | 被請求資源已永久移動到新位置 |
| 302 | 請求資源臨時搬到新的位置 |
| 400 | 1.語義有誤瓢娜，當(dāng)前請求無法被服務(wù)器理解；2.請求參數(shù)有誤礼预。 |
| 401 | 當(dāng)前請求需要用戶驗證眠砾。 |
| 403 | 服務(wù)器已經(jīng)理解請求，但拒絕執(zhí)行托酸。 |
| 404 | 請求失敗褒颈，請求資源未在服務(wù)器上發(fā)現(xiàn)。 |
| 500 | 服務(wù)器出錯励堡，無法處理請求谷丸。 |
| 503 | 臨時性服務(wù)器維護(hù)或過載，無法處理請求应结。 |
- 寫出一個HTTP post請求的內(nèi)容刨疼，包括四部分。
其中
i. 第四部分的內(nèi)容是username=ff&password=123
ii. 第二部分必須包含Content-Type字段
iii. 請求的路徑為/path
curl -X POST -d "username=ff&password=123" -s -v -- "http://www.baidu.com"
POST /path HTTP/1.1
Host: www.baidu.com
User-Agent: curl/7.55.0
Accept: /
Content-Length: 24
Content-Type: application/x-www-form-urlencodedusername=ff&password=123
- 說出至少三種排序的思路鹅龄，這三種排序的時間復(fù)雜度分別為O(n*n)揩慕、O(n log2 n)、O(n+max)
- 時間復(fù)雜度O(n*n)扮休，冒泡排序迎卤、插入排序
冒泡排序思路：假設(shè)是要從小到大排序，就將要排序的數(shù)組玷坠，從下標(biāo)0的數(shù)開始往后比較相鄰的兩個數(shù)蜗搔，小的放前面、大的放后面八堡，一輪下來最大的數(shù)就冒到最后面了碍扔，接下來每輪繼續(xù)重復(fù)比較和換序，除了后面已確定位置的數(shù)秕重，直到?jīng)]有需要比較的數(shù)為止不同，也是輪數(shù)為（數(shù)組長度-1）輪為止。 - 時間復(fù)雜度O(n log2 n)，快速排序二拐、堆排序
快速排序思路：假設(shè)是要從小到大排序服鹅，在要排序的數(shù)組中任意選一個數(shù)，將其他所有數(shù)與這個數(shù)比較百新，小的都放其前面企软，大的都放其后面，再分別在這兩部分中采用同樣方法進(jìn)行排序饭望，直到每個部分都沒有數(shù)可以比較 - 時間復(fù)雜度O(n+max)仗哨，基數(shù)排序：
基數(shù)排序思路：準(zhǔn)備10個桶，編號0,1,2...9铅辞，按個位數(shù)分配入桶（個位數(shù)為0的進(jìn)0號桶厌漂，個位數(shù)為1的進(jìn)1號桶），全部入桶后按桶的編號依次取出（同一個桶先入的數(shù)先取出）斟珊，完成一趟排序苇倡，接著依次按十位數(shù)、百位數(shù)逐步到最高位的數(shù)字重復(fù)以上分配入桶囤踩、取出步驟（沒有高位的該位數(shù)視為0）旨椒。 - 排序可視化：https://visualgo.net/bn/sorting
- 一個頁面從輸入URL到頁面加載顯示完成，這個過程中都發(fā)生了什么堵漱？
- i. 分析URL综慎。URL包括幾個部分：協(xié)議、網(wǎng)絡(luò)地址勤庐、資源路徑寥粹；協(xié)議是網(wǎng)絡(luò)數(shù)據(jù)交換的規(guī)則、標(biāo)準(zhǔn)或約定的集合埃元，譬如HTTP涝涤、FTP協(xié)議；網(wǎng)絡(luò)地址可以是域名或者IP地址岛杀，可以包括端口號阔拳。
ii. 域名解析。如果地址不是IP地址类嗤，通過DNS進(jìn)行域名解析糊肠，將域名解析成對應(yīng)的IP地址。解析過程：瀏覽器搜索自己的DNS緩存——>搜索操作系統(tǒng)種的DNS緩存——>搜索操作系統(tǒng)的hosts文件——>發(fā)送域名到本地域名服務(wù)器查詢——>向根域名服務(wù)器查詢——> 向頂級域名服務(wù)器查詢遗锣，找到IP地址返回給瀏覽器货裹，瀏覽器將IP地址緩存。
iii. 如果地址不包含端口號精偿，根據(jù)協(xié)議確定一個默認(rèn)端口弧圆，譬如HTTP默認(rèn)80端口赋兵。
iv. 建立連接。向獲得的IP地址的端口建立連接——三次握手：
(1)主機(jī)向服務(wù)器發(fā)送建立連接的請求搔预；
(2)服務(wù)器收到請求后發(fā)送同意連接的信號霹期；
(3)主機(jī)收到同意連接信號后，再次向服務(wù)器發(fā)送確認(rèn)信號拯田；建立連接历造。
v. 瀏覽器發(fā)起HTTP請求。HTTP請求包括請求方法船庇、資源路徑吭产、協(xié)議/版本、相關(guān)內(nèi)容等鸭轮。
vi. 服務(wù)器接收并返回響應(yīng)臣淤。HTTP響應(yīng)包括協(xié)議/版本、狀態(tài)碼张弛、狀態(tài)解釋荒典、要下載的內(nèi)容等酪劫。
vii. 瀏覽器下載相應(yīng)內(nèi)容吞鸭，渲染、顯示頁面覆糟。
viii. 斷開連接——四次揮手：
(1)主機(jī)向服務(wù)器發(fā)送斷開連接的請求刻剥；
(2)服務(wù)器收到請求后發(fā)送同意斷開的信號；
(3)服務(wù)器向主機(jī)發(fā)送斷開通知滩字；
(3)主機(jī)收到斷開通知后造虏，斷開連接，并再次向服務(wù)器發(fā)送確認(rèn)信號麦箍，服務(wù)器收到信號后斷開連接漓藕。
IP地址：IP協(xié)議為互聯(lián)網(wǎng)上的每個網(wǎng)絡(luò)和每臺主機(jī)分配的一個邏輯地址，相當(dāng)于門牌號挟裂。
DN域名：IP地址由四個數(shù)字組成享钞，中間有點號連接，比較難記容易輸錯诀蓉，所以用有意義的字母栗竖、數(shù)字組合代替純數(shù)字IP，這個就叫域名渠啤。例如百度域名www.baidu.com狐肢，比它的IP220.181.112.224好記很多。
DNS域名系統(tǒng)：每個域名對應(yīng)一個或多個提供相同服務(wù)器的IP地址沥曹，只有知道服務(wù)器IP地址才能建立連接份名，這就需要DNS把域名解析成IP地址碟联。
- 如何實現(xiàn)數(shù)組去重？
假設(shè)有數(shù)組array=[1,5,2,3,4,2,3,1,3,4]同窘，寫出一個函數(shù)unique玄帕，使得unique(array)的值為[1,5,2,3,4]。要求：
i. 不要做多重循環(huán)想邦，只能遍歷一次
ii. 請給出兩種方案裤纹，一種能在ES5環(huán)境中運(yùn)行，一種能在ES6環(huán)境中運(yùn)行（提示：ES6環(huán)境中多了一個Set對象）
//ES5中
function unique(array) {
var newArray = []
var hash = {}
for(var i = 0;i < array.length;i++) {
if(!hash[array[i]]) {
newArray.push(array[i])
hash[array[i]] = 1
}
}
return newArray
}
var array = [1,5,2,3,4,2,3,1,3,4]
console.log(unique(array))
//ES6中
function unique(array) {
return [...new Set(array)]
}
var array = [1,5,2,3,4,2,3,1,3,4]
console.log(unique(array))
