1.html 元素分類（塊狀元素）

7492130_1474549902464_6B9B91926E886B2EDB5B6ADA09C33137.png

在標(biāo)準(zhǔn)文檔流里面，塊級(jí)元素具有以下特點(diǎn)：

①總是在新行上開始寓辱，占據(jù)一整行萄焦；
②高度纳令，寬度以及外邊距和內(nèi)邊距都可控制；
③寬帶始終是與瀏覽器寬度一樣，與內(nèi)容無關(guān)祭务；
④它可以容納內(nèi)聯(lián)元素和其他塊元素。

行內(nèi)元素的特點(diǎn)：

①和其他元素都在一行上怪嫌；
②高义锥，行高及外邊距和內(nèi)邊距底邊不可改變；
③寬度只與內(nèi)容有關(guān)岩灭；
④行內(nèi)元素只能容納文本或者其他行內(nèi)元素拌倍。
不可以設(shè)置寬高，其寬度隨著內(nèi)容增加，高度隨字體大小而改變柱恤，內(nèi)聯(lián)元素可以設(shè)置外邊界数初，但是外邊界不對(duì)上下起作用，只能對(duì)左右起作用梗顺，也可以設(shè)置內(nèi)邊界泡孩，但是內(nèi)邊界在ie6中不對(duì)上下起作用，只能對(duì)左右起作用

2.js 基本數(shù)據(jù)類型：number寺谤、string仑鸥、boolean、undefined矗漾、null

   復(fù)雜數(shù)據(jù)類型：Object

3.防抖與節(jié)流

3.1.函數(shù)防抖

定義：多次觸發(fā)事件后锈候，事件處理函數(shù)只執(zhí)行一次，并且是在觸發(fā)操作結(jié)束時(shí)執(zhí)行敞贡。
原理：對(duì)處理函數(shù)進(jìn)行延時(shí)操作泵琳，若設(shè)定的延時(shí)到來之前，再次觸發(fā)事件誊役，則清除上一次的延時(shí)操作定時(shí)器获列，重新定時(shí)。

function debunce（handler蛔垢，delay）{ 
   //handler是要傳入的進(jìn)行防抖的函數(shù)击孩，delay是等待時(shí)間。
    var timer = null;
    return function（）{
        var _self = this鹏漆，args = arguments; 
        clearTimeout（timer）;        //每次都要清除這個(gè)定時(shí)器 
        timer = setTimeout（function（）{    //重新開啟定時(shí)器 
            handler.apply（_self巩梢，args）; 
        }，delay）; 
    } 
}

函數(shù)防抖的適用性：
比如艺玲，我們?cè)诒O(jiān)聽滾動(dòng)條位置括蝠，控制是否顯示返回頂部按鈕時(shí)，就可以將防抖函數(shù)應(yīng)用其中饭聚。但依然有些功能并不適用：
當(dāng)我們做圖片懶加載（lazyload）時(shí)忌警，需要通過滾動(dòng)位置，實(shí)時(shí)顯示圖片時(shí)秒梳，如果使用防抖函數(shù)法绵，懶加載（lazyload）函數(shù)將會(huì)不斷被延時(shí)，
只有停下來的時(shí)候才會(huì)被執(zhí)行酪碘，對(duì)于這種需要實(shí)時(shí)觸發(fā)事件的情況朋譬，就顯得不是很友好了。
下面開始介紹函數(shù)節(jié)流兴垦，通過設(shè)定時(shí)間片此熬，控制事件函數(shù)間斷性的觸發(fā)。

3.2.函數(shù)節(jié)流

定義：觸發(fā)函數(shù)事件后，短時(shí)間間隔內(nèi)無法連續(xù)調(diào)用犀忱，只有上一次函數(shù)執(zhí)行后，過了規(guī)定的時(shí)間間隔扶关，才能進(jìn)行下一次的函數(shù)調(diào)用阴汇。
原理：對(duì)處理函數(shù)進(jìn)行延時(shí)操作，若設(shè)定的延時(shí)到來之前节槐，再次觸發(fā)事件搀庶，則清除上一次的延時(shí)操作定時(shí)器，重新定時(shí)铜异。

    function throttle（handler哥倔，wait）{  //handler是要進(jìn)行節(jié)流的函數(shù)，wait是等待時(shí)間
        var lastTime = 0;
        return function（）{
            var nowTime = new Date（).getTime（）;????//獲取當(dāng)前時(shí)間
            if（nowTime - lastTime> wait）{
                handler.apply（this揍庄，arguments）;
                lastTime = nowTime;??????//更新最后時(shí)間
            }
        }
    }

4.深拷貝與淺拷貝

假設(shè)B復(fù)制了A咆蒿，修改A的時(shí)候，看B是否發(fā)生變化：
如果B跟著也變了蚂子，說明是淺拷貝沃测，拿人手短！（修改堆內(nèi)存中的同一個(gè)值）
如果B沒有改變食茎，說明是深拷貝蒂破，自食其力！（修改堆內(nèi)存中的不同的值）
淺拷貝（shallowCopy）只是增加了一個(gè)指針指向已存在的內(nèi)存地址别渔，

深拷貝（deepCopy）是增加了一個(gè)指針并且申請(qǐng)了一個(gè)新的內(nèi)存附迷，使這個(gè)增加的指針指向這個(gè)新的內(nèi)存，

使用深拷貝的情況下哎媚，釋放內(nèi)存的時(shí)候不會(huì)因?yàn)槌霈F(xiàn)淺拷貝時(shí)釋放同一個(gè)內(nèi)存的錯(cuò)誤喇伯。

遞歸深拷貝

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判斷ojb子元素是否為對(duì)象，如果是抄伍，遞歸復(fù)制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是艘刚，簡(jiǎn)單復(fù)制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
} 

5.內(nèi)聯(lián)樣式 > id 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器。

6.跨域

廣義的跨域：

1.) 資源跳轉(zhuǎn)： A鏈接截珍、重定向攀甚、表單提交
2.) 資源嵌入： <link>、<script>岗喉、<img>秋度、<frame>等dom標(biāo)簽，還有樣式中background:url()钱床、@font-face()等文件外鏈
3.) 腳本請(qǐng)求： js發(fā)起的ajax請(qǐng)求荚斯、dom和js對(duì)象的跨域操作等
其實(shí)我們通常所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請(qǐng)求場(chǎng)景。
同源策略也最基本的安全功能事期，保護(hù)用戶安全滥壕，如果缺少了同源策略，瀏覽器很容易受到XSS兽泣、CSFR等攻擊绎橘。所謂同源是指"協(xié)議+域名+端口"三者相同，即便兩個(gè)不同的域名指向同一個(gè)ip地址唠倦，也非同源称鳞。
跨域解決方案：

• 通過jsonp跨域
• nginx代理跨域
• nodejs中間件代理跨域
• WebSocket協(xié)議跨域
• CORS跨域資源共享
  JSONP（json with padding 填充式j(luò)son），利用了使用src引用靜態(tài)資源時(shí)不受跨域限制的機(jī)制稠鼻。主要在客戶端搞一個(gè)回調(diào)做一些數(shù)據(jù)接收與操作的處理冈止，并把這個(gè)回調(diào)函數(shù)名告知服務(wù)端，而服務(wù)端需要做的是按照javascript的語法把數(shù)據(jù)放到約定好的回調(diào)函數(shù)之中即可候齿。jQuery很早之前就已經(jīng)吧JSONP語法糖化了熙暴，使用起來會(huì)更加方便。
  CORS（Cross-origin resource sharing 跨域資源共享）毛肋，依附于AJAX怨咪，通過添加HTTP Hearder部分字段請(qǐng)求與獲取有權(quán)限訪問的資源。CORS對(duì)開發(fā)者是透明的润匙，因?yàn)闉g覽器會(huì)自動(dòng)根據(jù)請(qǐng)求的情況（簡(jiǎn)單和復(fù)雜）做出不同的處理诗眨。CORS的關(guān)鍵是服務(wù)端的配置支持。由于CORS是W3C中一項(xiàng)較“新”的方案孕讳，以至于各大網(wǎng)頁解析引擎還沒有對(duì)其進(jìn)行嚴(yán)格規(guī)格的實(shí)現(xiàn)匠楚，所以不同引擎下可能會(huì)有一些不一致。
  兩者優(yōu)點(diǎn)與缺點(diǎn)大致互補(bǔ)厂财，放在一塊介紹：
  JSONP的主要優(yōu)勢(shì)在于對(duì)瀏覽器的支持較好芋簿；雖然目前主流瀏覽器支持CORS，但I(xiàn)E10以下不支持CORS璃饱。JSONP只能用于獲取資源（即只讀与斤，類似于GET請(qǐng)求）；CORS支持所有類型的HTTP請(qǐng)求荚恶，功能完善撩穿。（這點(diǎn)JSONP被玩虐，但大部分情況下GET已經(jīng)能滿足需求了）JSONP的錯(cuò)誤處理機(jī)制并不完善谒撼，我們沒辦法進(jìn)行錯(cuò)誤處理食寡；而CORS可以通過onerror事件監(jiān)聽錯(cuò)誤，并且瀏覽器控制臺(tái)會(huì)看到報(bào)錯(cuò)信息廓潜，利于排查抵皱。JSONP只會(huì)發(fā)一次請(qǐng)求善榛；而對(duì)于復(fù)雜請(qǐng)求，CORS會(huì)發(fā)兩次請(qǐng)求呻畸。始終覺得安全性這個(gè)東西是相對(duì)的移盆，沒有絕對(duì)的安全，也做不到絕對(duì)的安全伤为。畢竟JSONP并不是跨域規(guī)范味滞，它存在很明顯的安全問題：callback參數(shù)注入和資源訪問授權(quán)設(shè)置。CORS好歹也算是個(gè)跨域規(guī)范钮呀，在資源訪問授權(quán)方面進(jìn)行了限制（Access-Control-Allow-Origin），而且標(biāo)準(zhǔn)瀏覽器都做了安全限制昨凡，比如拒絕手動(dòng)設(shè)置origin字段爽醋，相對(duì)來說是安全了一點(diǎn)。但是回過頭來看一下便脊，就算是不安全的JSONP蚂四，我們依然可以在服務(wù)端端進(jìn)行一些權(quán)限的限制，服務(wù)端和客戶端也都依然可以做一些注入的安全處理哪痰，哪怕被攻克遂赠，它也只能讀一些東西。就算是比較安全的CORS晌杰，同樣可以在服務(wù)端設(shè)置出現(xiàn)漏洞或者不在瀏覽器的跨域限制環(huán)境下進(jìn)行攻擊跷睦，而且它不僅可以讀，還可以寫肋演。

jsonp跨域：其本質(zhì)是利用了標(biāo)簽具有可跨域的特性抑诸，由服務(wù)端返回預(yù)先定義好的javascript函數(shù)的調(diào)用，并且將服務(wù)端數(shù)據(jù)以該函數(shù)參數(shù)的形式傳遞過來爹殊。

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // 傳參并指定回調(diào)執(zhí)行函數(shù)為onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);
    // 回調(diào)執(zhí)行函數(shù)
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>
服務(wù)端返回如下（返回時(shí)即執(zhí)行全局函數(shù)）：
onBack({"status": true, "user": "admin"})

后端node.js代碼示例：

var querystring = require('querystring');
var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;

    // jsonp返回設(shè)置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');

    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

7.在JavaScript 中蜕乡，call、apply 和 bind 是 Function 對(duì)象自帶的三個(gè)方法梗夸，這三個(gè)方法的主要作用是改變函數(shù)中的 this 指向层玲。

1).

var a = {
 
    name:'onepixel',//定義a的屬性
 
    say:function(){//定義a的方法
        console.log("Hi,I'm function a!");
    }
};
 
function b(name){
    console.log("Post params: "+ name);
    console.log("I'm "+this.name);
    this.say();
}
 
b.call(a,'test');

當(dāng)執(zhí)行b.call 時(shí)，字符串test作為參數(shù)傳遞給了函數(shù)b,由于call的作用反症，函數(shù)b中的this指向了對(duì)象a, 因此相當(dāng)于調(diào)用了對(duì)象a上的函數(shù)b,而實(shí)際上a中沒有定義b

2).

function Animal(name,weight){
   this.name = name;
   this.weight = weight;
} 
function Cat(){
    Animal.call(this,'cat','50');
  //Animal.apply(this,['cat','50']);
   this.say = function(){
      console.log("I am " +this.name+",my weight is " +this.weight);
   }
}
var cat =new Cat();
cat.say();//I am cat,my weight is 50

當(dāng)通過new 運(yùn)算符產(chǎn)生了cat 時(shí)辛块，Cat中的 this 就指向了cat對(duì)象，而繼承的關(guān)鍵是在于Cat中執(zhí)行了Animal.call(this,'cat','50') 這句話惰帽，在call中將this作為thisArgs參數(shù)傳遞憨降，于是Animal 方法中的 this 就指向了Cat中的 this，而 cat 中的 this 指向的是 cat 對(duì)象该酗，所以Animal 中的 this 指向的就是 cat 對(duì)象授药，在 Animal 中定義了name 和 weight 屬性士嚎，就相當(dāng)于在 cat 中定義了這些屬性，因此 cat 對(duì)象便擁有了Animal 中定義的屬性悔叽，從而達(dá)到了繼承的目的莱衩。

3).

image.png

obj.myFun.call(db,'成都','上海')；

8.常用的本地存儲(chǔ)

1） cookie

是客戶端用來存儲(chǔ)數(shù)據(jù)的一種選項(xiàng)娇澎，它既可以在客戶端設(shè)置也可以在服務(wù)器端設(shè)置笨蚁。cookie會(huì)跟隨任意HTTP請(qǐng)求一起發(fā)送。
優(yōu)點(diǎn)：兼容性好
缺點(diǎn)：一是增加了網(wǎng)絡(luò)流量趟庄，二是數(shù)據(jù)容量有限括细，最多只能存儲(chǔ)4kb的數(shù)據(jù)，瀏覽器之間各有不同戚啥，三是不安全奋单。

2）userData

是微軟通過一個(gè)自定義行為引入的持久化用戶數(shù)據(jù)的概念。用戶數(shù)據(jù)允許每個(gè)文檔最多128kb的數(shù)據(jù)猫十，每個(gè)域名最多1MB的數(shù)據(jù)览濒。
缺點(diǎn)：不是web標(biāo)準(zhǔn)的一部分，只有ie支持拖云。

3）web存儲(chǔ)機(jī)制

web Stroage贷笛，包括：Session Stroage和Local Stroage，
前者嚴(yán)格用于一個(gè)瀏覽器會(huì)話中存儲(chǔ)數(shù)據(jù)宙项，因?yàn)閿?shù)據(jù)在瀏覽器關(guān)閉后會(huì)立即刪除乏苦；后者則用于跨會(huì)話的持久化地存儲(chǔ)數(shù)據(jù)。
缺點(diǎn)：ie不支持Session Stroage杉允，低版本的ie（ie6邑贴、7）不支持Local Stroage，并且不支持查詢語言叔磷。

4）IndexedDB

Indexed Database api的簡(jiǎn)稱拢驾，是在瀏覽器保存結(jié)構(gòu)化數(shù)據(jù)的一種「數(shù)據(jù)庫」。類似SQL數(shù)據(jù)庫的結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)機(jī)制改基，代替了廢棄已久的web SQL Database api繁疤。
優(yōu)點(diǎn)：能夠在客戶端存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)，并且使用索引高效檢索的api秕狰。
缺點(diǎn)：兼容性不好稠腊，未得到大部分瀏覽器的支持。

9.cookie的根本用途

cookie 將信息存儲(chǔ)于用戶硬盤鸣哀，因此可以作為全局變量架忌，這是它最大的一個(gè)優(yōu)點(diǎn)。它最根本的用途是 Cookie 能夠幫助 Web 站點(diǎn)保存有關(guān)訪問者的信息我衬。
列舉cookie的幾種小用途

• 保存用戶登錄信息叹放。這應(yīng)該是最常用的了饰恕。當(dāng)您訪問一個(gè)需要登錄的界面，例如微博井仰、百度及一些論壇埋嵌，在登錄過后一般都會(huì)有類似"下次自動(dòng)登錄"的選項(xiàng)，勾選過后下次就不需要重復(fù)驗(yàn)證俱恶。這種就可以通過cookie保存用戶的id雹嗦。
• 創(chuàng)建購物車。購物網(wǎng)站通常把已選物品保存在cookie中合是，這樣可以實(shí)現(xiàn)不同頁面之間數(shù)據(jù)的同步(同一個(gè)域名下是可以共享cookie的)了罪，同時(shí)在提交訂單的時(shí)候又會(huì)把這些cookie傳到后臺(tái)。
• 跟蹤用戶行為聪全。例如百度聯(lián)盟會(huì)通過cookie記錄用戶的偏好信息捶惜，然后向用戶推薦個(gè)性化推廣信息，所以瀏覽其他網(wǎng)頁的時(shí)候經(jīng)常會(huì)發(fā)現(xiàn)旁邊的小廣告都是自己最近百度搜過的東西荔烧。這是可以禁用的，這也是cookie的缺點(diǎn)之一汽久。
  cookie是怎么起作用的呢鹤竭？
  在上一節(jié)中我們知道 cookie 是存在用戶硬盤中，用戶每次訪問站點(diǎn)時(shí)景醇，Web應(yīng)用程序都可以讀取 Cookie 包含的信息臀稚。當(dāng)用戶再次訪問這個(gè)站點(diǎn)時(shí)，瀏覽器就會(huì)在本地硬盤上查找與該 URL 相關(guān)聯(lián)的 Cookie三痰。如果該 Cookie 存在吧寺，瀏覽器就將它添加到request header的Cookie字段中，與http請(qǐng)求一起發(fā)送到該站點(diǎn)散劫。

domain設(shè)置頂級(jí)域名
document.cookie="name=value;Path=/;domain=.XXX.com";

Session:

在計(jì)算機(jī)中稚机，尤其是在網(wǎng)絡(luò)應(yīng)用中，稱為“會(huì)話控制”获搏。Session 對(duì)象存儲(chǔ)特定用戶會(huì)話所需的屬性及配置信息赖条。這樣，當(dāng)用戶在應(yīng)用程序的 Web 頁之間跳轉(zhuǎn)時(shí)常熙，存儲(chǔ)在 Session 對(duì)象中的變量將不會(huì)丟失纬乍，而是在整個(gè)用戶會(huì)話中一直存在下去。當(dāng)用戶請(qǐng)求來自應(yīng)用程序的 Web 頁時(shí)裸卫，如果該用戶還沒有會(huì)話仿贬，則 Web 服務(wù)器將自動(dòng)創(chuàng)建一個(gè) Session 對(duì)象。當(dāng)會(huì)話過期或被放棄后墓贿，服務(wù)器將終止該會(huì)話茧泪。Session 對(duì)象最常見的一個(gè)用法就是存儲(chǔ)用戶的首選項(xiàng)蜓氨。例如，如果用戶指明不喜歡查看圖形调炬，就可以將該信息存儲(chǔ)在 Session 對(duì)象中语盈。

cookie 和session 的區(qū)別：

• cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上缰泡。
• cookie不是很安全刀荒，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙
  考慮到安全應(yīng)當(dāng)使用session
• session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多棘钞，會(huì)比較占用你服務(wù)器的性能
  考慮到減輕服務(wù)器性能方面缠借，應(yīng)當(dāng)使用COOKIE
• 單個(gè)cookie在客戶端的限制是3K，就是說一個(gè)站點(diǎn)在客戶端存放的COOKIE不能3K宜猜。
• 所以個(gè)人建議：
  將登陸信息等重要信息存放為SESSION
  其他信息如果需要保留泼返，可以放在COOKIE中

sessionStorage和localStorage。

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)姨拥，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀绅喉。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)叫乌。個(gè)人的理解是你在打開一個(gè)頁面時(shí)記錄sessionStorage,當(dāng)你把頁面關(guān)閉時(shí)session中的數(shù)據(jù)即銷毀.
而localStorage用于持久化的本地存儲(chǔ)柴罐，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的憨奸。
由于sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)革屠，所以我們一般利用localStorage儲(chǔ)存js文件，只有在第一次訪問該頁面的時(shí)候加載js文件排宰，以后在訪問的時(shí)候加載本地localStorage執(zhí)行

sessionStorage和localStorage和cookie三者共同點(diǎn)：都是保存在瀏覽器端似芝，且同源的。

區(qū)別:

• cookie在瀏覽器和服務(wù)器間來回傳遞板甘。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器党瓮，僅在本地保存
• 存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過4k盐类，sessionStorage和localStorage 但比cookie大得多麻诀，可以達(dá)到5M
• 數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效傲醉，自然也就不可能持久保持蝇闭；localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存硬毕，因此用作持久數(shù)據(jù)呻引；cookie只在設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉
• 作用域不同吐咳，sessionStorage不在不同的瀏覽器窗口中共享逻悠，即使是同一個(gè)頁面(即數(shù)據(jù)不共享)元践；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的( 即數(shù)據(jù)共享 )童谒。

10.http連接與3+4次握手

從用戶輸入瀏覽器輸入url到頁面最后呈現(xiàn) 有哪些過程单旁？

一道很常規(guī)的題目，考的是基本網(wǎng)絡(luò)原理饥伊，和瀏覽器加載css象浑，js過程。
答案大致如下：

• 用戶輸入U(xiǎn)RL地址
• 瀏覽器解析URL解析出主機(jī)名
• 瀏覽器將主機(jī)名轉(zhuǎn)換成服務(wù)器ip地址（瀏覽器先查找本地DNS緩存列表 沒有的話 再向?yàn)g覽器默認(rèn)的DNS服--務(wù)器發(fā)送查詢請(qǐng)求 同時(shí)緩存）
• 瀏覽器將端口號(hào)從URL中解析出來
• 瀏覽器建立一條與目標(biāo)Web服務(wù)器的TCP連接（三次握手）
• 瀏覽器向服務(wù)器發(fā)送一條HTTP請(qǐng)求報(bào)文
• 服務(wù)器向?yàn)g覽器返回一條HTTP響應(yīng)報(bào)文
• 關(guān)閉連接 瀏覽器解析文檔
• 如果文檔中有資源 重復(fù)6 7 8 動(dòng)作 直至資源全部加載完畢

在Http工作之前琅豆，Web瀏覽器通過網(wǎng)絡(luò)和Web服務(wù)器建立鏈連接愉豺，該連接是通過Tcp來完成的，該協(xié)議和Ip共同組成了Internet茫因，即著名的Tcp/Ip協(xié)議族蚪拦，因此Internet也被稱為Tcp/Ip網(wǎng)絡(luò)，Http是比Tcp更高的應(yīng)用層協(xié)議冻押，一般Tcp接口的端口好是80驰贷。

Web瀏覽器想Web服務(wù)器發(fā)送請(qǐng)求命令，這個(gè)命令中包含：

image.png

Web服務(wù)器發(fā)送響應(yīng)數(shù)據(jù)給Web瀏覽器洛巢，這個(gè)包含：

image.png

然后Web服務(wù)器關(guān)閉連接饱苟。

以上就是基本的http請(qǐng)求。

tcp三次握手

在這個(gè)過程中狼渊，http建立連接，Tcp經(jīng)過了3次握手类垦，下面我們來講講具體的3次握手的過程狈邑，首先我們來看一張圖：

image.png

1）：客戶端發(fā)送了一個(gè)帶有SYN的Tcp報(bào)文到服務(wù)器，這個(gè)三次握手中的開始蚤认。表示客戶端想要和服務(wù)端建立連接米苹。
2）：服務(wù)端接收到客戶端的請(qǐng)求，返回客戶端報(bào)文砰琢，這個(gè)報(bào)文帶有SYN和ACK標(biāo)志蘸嘶，詢問客戶端是否準(zhǔn)備好。
3）：客戶端再次響應(yīng)服務(wù)端一個(gè)ACK陪汽，表示我已經(jīng)準(zhǔn)備好训唱。

那么為什么要三次握手呢，有人說兩次握手就好了可款。的確威始，為什么呢富蓄，這個(gè)可以從計(jì)算機(jī)網(wǎng)絡(luò)中得到答案眷蚓，舉一個(gè)例子：已失效的連接請(qǐng)求報(bào)文段澳骤，
client發(fā)送了第一個(gè)連接的請(qǐng)求報(bào)文歧强，但是由于網(wǎng)絡(luò)不好，這個(gè)請(qǐng)求沒有立即到達(dá)服務(wù)端为肮，而是在某個(gè)網(wǎng)絡(luò)節(jié)點(diǎn)中滯留了摊册，知道某個(gè)時(shí)間才到達(dá)server，本來這已經(jīng)是一個(gè)失效的報(bào)文颊艳，但是server端接收到這個(gè)請(qǐng)求報(bào)文后茅特，還是會(huì)想client發(fā)出確認(rèn)的報(bào)文，表示同意連接籽暇。假如不采用三次握手温治，那么只要server發(fā)出確認(rèn)，新的建立就連接了戒悠，但其實(shí)這個(gè)請(qǐng)求是失效的請(qǐng)求熬荆，client是不會(huì)理睬server的確認(rèn)信息，也不會(huì)向服務(wù)端發(fā)送確認(rèn)的請(qǐng)求绸狐，但是server認(rèn)為新的連接已經(jīng)建立起來了卤恳，并一直等待client發(fā)來數(shù)據(jù)，這樣寒矿，server的很多資源就沒白白浪費(fèi)掉了突琳，采用三次握手就是為了防止這種情況的發(fā)生，server會(huì)因?yàn)槭詹坏酱_認(rèn)的報(bào)文符相，就知道client并沒有建立連接拆融。這就是三次握手的作用。

tcp四次握手

當(dāng)終止協(xié)議的時(shí)候啊终，tcp進(jìn)行了4次握手镜豹，那這4次握手有是怎么回事呢？

image.png

由于Tcp連接是進(jìn)行全雙工工作的蓝牲，因此每個(gè)方向都必須單獨(dú)進(jìn)行關(guān)閉趟脂，這個(gè)原則是當(dāng)一方完成他的數(shù)據(jù)發(fā)送的時(shí)候就發(fā)送一個(gè)FIN來終止這個(gè)方向的連接，收到這個(gè)FIN意味著這個(gè)方向上沒有數(shù)據(jù)的流動(dòng)例衍，一個(gè)TCP連接在收到這個(gè)FIN之后還能發(fā)送消息昔期，首先執(zhí)行關(guān)閉的一方進(jìn)行主動(dòng)的關(guān)閉，而另一方進(jìn)行被動(dòng)的關(guān)閉佛玄。
1）：TCP發(fā)送一個(gè)FIN硼一，用來關(guān)閉客戶到服務(wù)端的連接。
2）：服務(wù)端收到這個(gè)FIN梦抢，他發(fā)回一個(gè)ACK欠动，確認(rèn)收到序號(hào)為收到序號(hào)+1，和SYN一樣，一個(gè)FIN將占用一個(gè)序號(hào)具伍。
3）：服務(wù)端發(fā)送一個(gè)FIN到客戶端翅雏，服務(wù)端關(guān)閉客戶端的連接。
4）：客戶端發(fā)送ACK報(bào)文確認(rèn)人芽，并將確認(rèn)的序號(hào)+1望几，這樣關(guān)閉完成。

那么為什么是4次揮手呢萤厅？
可能有人會(huì)有疑問橄抹，tcp我握手的時(shí)候?yàn)楹蜛CK和SYN是一起發(fā)送。揮手的時(shí)候?yàn)槭裁词欠珠_的時(shí)候發(fā)送呢惕味，原因是TCP的全雙工模式楼誓，接收到FIN意味著沒有數(shù)據(jù)發(fā)送過來了，但是還可以繼續(xù)發(fā)送數(shù)據(jù)名挥。

11.瀏覽器渲染頁面過程與頁面優(yōu)化

1）瀏覽器渲染頁面過程https://segmentfault.com/a/1190000010298038

• 瀏覽器會(huì)將HTML解析成一個(gè)DOM樹疟羹，DOM 樹的構(gòu)建過程是一個(gè)深度遍歷過程：當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好后才會(huì)去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。

• 將CSS解析成 CSS Rule Tree 禀倔。

• 根據(jù)DOM樹和CSSOM來構(gòu)造 Rendering Tree榄融。注意：Rendering Tree 渲染樹并不等同于 DOM 樹，因?yàn)橐恍┫馠eader或display:none的東西就沒必要放在渲染樹中了救湖。

• 有了Render Tree愧杯，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系鞋既。下一步操作稱之為layout力九，通過渲染樹中渲染對(duì)象的信息，計(jì)算出每一個(gè)渲染對(duì)象的位置和尺寸邑闺，將其安置在瀏覽器窗口的正確位置

• 再下一步就是繪制跌前，即遍歷render樹，并使用UI后端層繪制每個(gè)節(jié)點(diǎn)检吆。

注意：上述這個(gè)過程是逐步完成的，為了更好的用戶體驗(yàn)程储，渲染引擎將會(huì)盡可能早的將內(nèi)容呈現(xiàn)到屏幕上蹭沛，并不會(huì)等到所有的html都解析完成之后再去構(gòu)建和布局render樹。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容章鲤，同時(shí)摊灭，可能還在通過網(wǎng)絡(luò)下載其余內(nèi)容。

當(dāng)render tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸败徊，布局帚呼，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)。每個(gè)頁面至少需要一次回流煤杀，就是在頁面第一次加載的時(shí)候眷蜈。在回流的時(shí)候，瀏覽器會(huì)使渲染樹中受到影響的部分失效沈自，并重新構(gòu)造這部分渲染樹酌儒，完成回流后，瀏覽器會(huì)重新繪制受影響的部分到屏幕中枯途，該過程成為重繪忌怎。

當(dāng)render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀酪夷，風(fēng)格榴啸，而不會(huì)影響布局的，比如background-color晚岭。則就叫稱為重繪鸥印。
注意：回流必將引起重繪，而重繪不一定會(huì)引起回流腥例。
如何減少回流辅甥、重繪

減少回流、重繪其實(shí)就是需要減少對(duì)render tree的操作（合并多次多DOM和樣式的修改）燎竖，并減少對(duì)一些style信息的請(qǐng)求璃弄，盡量利用好瀏覽器的優(yōu)化策略。具體方法有：

• 直接改變className构回，如果動(dòng)態(tài)改變樣式夏块，則使用cssText（考慮沒有優(yōu)化的瀏覽器）
• 讓要操作的元素進(jìn)行”離線處理”，處理完后一起更新
• 不要經(jīng)常訪問會(huì)引起瀏覽器flush隊(duì)列的屬性纤掸，如果你確實(shí)要訪問脐供，利用緩存
• 讓元素脫離動(dòng)畫流，減少回流的Render Tree的規(guī)模

2）頁面渲染優(yōu)化

瀏覽器對(duì)上文介紹的關(guān)鍵渲染路徑進(jìn)行了很多優(yōu)化借跪，針對(duì)每一次變化產(chǎn)生盡量少的操作政己，還有優(yōu)化判斷重新繪制或布局的方式等等。
在改變文檔根元素的字體顏色等視覺性信息時(shí)掏愁，會(huì)觸發(fā)整個(gè)文檔的重繪歇由，而改變某元素的字體顏色則只觸發(fā)特定元素的重繪；改變?cè)氐奈恢眯畔?huì)同時(shí)觸發(fā)此元素（可能還包括其兄弟元素或子級(jí)元素）的布局和重繪果港。某些重大改變沦泌，如更改文檔根元素的字體尺寸，則會(huì)觸發(fā)整個(gè)文檔的重新布局和重繪辛掠，據(jù)此及上文所述谢谦，推薦以下優(yōu)化和實(shí)踐：

• HTML文檔結(jié)構(gòu)層次盡量少释牺，最好不深于六層；
• 腳本盡量后放回挽，放在前即可没咙；
• 少量首屏樣式內(nèi)聯(lián)放在標(biāo)簽內(nèi)；
• 樣式結(jié)構(gòu)層次盡量簡(jiǎn)單厅各；
• 在腳本中盡量減少DOM操作镜撩，盡量緩存訪問DOM的樣式信息，避免過度觸發(fā)回流队塘；
• 減少通過JavaScript代碼修改元素樣式袁梗，盡量使用修改class名方式操作樣式或動(dòng)畫；
• 動(dòng)畫盡量使用在絕對(duì)定位或固定定位的元素上憔古；
• 隱藏在屏幕外遮怜，或在頁面滾動(dòng)時(shí)，盡量停止動(dòng)畫鸿市；
• 盡量緩存DOM查找锯梁，查找器盡量簡(jiǎn)潔；
• 涉及多域名的網(wǎng)站焰情，可以開啟域名預(yù)解析

12陌凳、首屏優(yōu)化

縮小首屏載時(shí)間是一個(gè)重要的優(yōu)化項(xiàng)，總結(jié)來主要有以下幾種方式：

1）盡可能的縮小webpack或者其他打包工具生成的包的大小

為了做到這一點(diǎn)内舟，需要做到盡可能的減少生產(chǎn)環(huán)境下依賴的庫數(shù)量合敦，盡可能的按需引用，減少無用代碼占的空間验游。
我剛開始優(yōu)化的時(shí)候充岛，就不知道從何處優(yōu)化起，而且根本不知道生成的包中哪個(gè)依賴占據(jù)著空間耕蝉，我還一度挨個(gè)刪去庫引用崔梗，來看哪個(gè)庫占用的空間最多。 后來才知道有名叫：webpack-bundle-analyzer的分析工具垒在，接下來我順帶總結(jié)一下這個(gè)包的使用姿勢(shì)蒜魄。

2）使用服務(wù)端渲染的方式

這個(gè)服務(wù)端渲染不同于后端渲染，服務(wù)端渲染只是把當(dāng)前的前端框架中的一部分js代碼放到服務(wù)器上渲染场躯，加載到瀏覽器上的html就不是一個(gè)空頁面谈为，這樣可以減少首頁的白屏?xí)r間，同時(shí)提高被搜索引擎檢索的機(jī)會(huì)推盛。

3）使用預(yù)渲染的方式

這個(gè)預(yù)渲染的方式簡(jiǎn)單來說就是在正常打包時(shí)峦阁，會(huì)預(yù)先運(yùn)行一次js代碼谦铃，將一部分靜態(tài)的頁面直接渲染成html寫在生成的index.html中耘成，這種方式在加載完index.html后，就會(huì)有界面展示出來，無需等待加載js代碼后再去渲染瘪菌，所以這種方式也可以顯著的減少首屏加載時(shí)間撒会，也可以提高被搜索引擎檢索的機(jī)會(huì)，同時(shí)預(yù)渲染的配置很簡(jiǎn)單师妙，容易上手诵肛。

4）使用gzip減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮?/h6>

gzip是GNUzip的縮寫，最早用于UNIX系統(tǒng)的文件壓縮默穴。HTTP協(xié)議上的gzip編碼是一種用來改進(jìn)web應(yīng)用程序性能的技術(shù)怔檩，web服務(wù)器和客戶端（瀏覽器）必須共同支持gzip。目前主流的瀏覽器蓄诽，Chrome,firefox,IE等都支持該協(xié)議薛训。常見的服務(wù)器如Apache，Nginx仑氛，IIS同樣支持gzip乙埃。使用gzip可以將原靜態(tài)文件壓縮到30%，效果很明顯锯岖，對(duì)于優(yōu)化首屏加載時(shí)間非常適合介袜。

5）按照頁面或者組件分塊懶加載

這種優(yōu)化，就是將每個(gè)組件的js代碼獨(dú)立出來出吹，在使用到這個(gè)組件時(shí)遇伞，才向服務(wù)器請(qǐng)求文件，并且請(qǐng)求過一次后就會(huì)緩存下來趋箩，再次使用到這個(gè)組件時(shí)赃额，就會(huì)使用緩存，不再發(fā)送請(qǐng)求叫确。

13.loader 和 plugin

主要區(qū)別

• loader 用于加載某些資源文件跳芳。 因?yàn)閣ebpack 本身只能打包c(diǎn)ommonjs規(guī)范的js文件，對(duì)于其他資源例如 css竹勉，圖片飞盆，或者其他的語法集，比如 jsx次乓， coffee吓歇，是沒有辦法加載的。 這就需要對(duì)應(yīng)的loader將資源轉(zhuǎn)化票腰，加載進(jìn)來城看。從字面意思也能看出，loader是用于加載的杏慰，它作用于一個(gè)個(gè)文件上测柠。

• plugin 用于擴(kuò)展webpack的功能炼鞠。它直接作用于 webpack，擴(kuò)展了它的功能轰胁。當(dāng)然loader也時(shí)變相的擴(kuò)展了 webpack 谒主，但是它只專注于轉(zhuǎn)化文件（transform）這一個(gè)領(lǐng)域。而plugin的功能更加的豐富赃阀，而不僅局限于資源的加載霎肯。

14. MVC與MVVM

MVC :

MVC是一種架構(gòu)模式，M表示Model榛斯，V表示視圖View观游，C表示控制器Controller：

Model負(fù)責(zé)存儲(chǔ)、定義驮俗、操作數(shù)據(jù)备典；
View用來展示給用戶，并且和用戶進(jìn)行交互意述；
Controller是Model和View的協(xié)調(diào)者提佣，Controller把Model中的數(shù)據(jù)拿過來給View使用。Controller可以直接與Model和View進(jìn)行通信荤崇，而View不能與Controller直接通信拌屏。，當(dāng)有數(shù)據(jù)更新時(shí)术荤，Model也要與Controller進(jìn)行通信倚喂，這個(gè)時(shí)候就要用Notification和KVO，這個(gè)方式就像發(fā)廣播一樣瓣戚，Model發(fā)信號(hào)端圈，Controller設(shè)置接收監(jiān)聽信號(hào)，當(dāng)有數(shù)據(jù)更新是就發(fā)信號(hào)給Controller子库，Model和View不能直接通信舱权，這樣違背MVC設(shè)計(jì)原則。View與Controller通信需要利用代理協(xié)議的方式仑嗅，Controller可以直接根據(jù)Model決定View的展示宴倍。View如果接受響應(yīng)事件則通過delegate，target-action仓技，block等方式告訴Controller的狀態(tài)變化鸵贬。Controller進(jìn)行業(yè)務(wù)的處理，然后再控制View的展示脖捻。
那這樣Model和View就是相互獨(dú)立的阔逼。View只負(fù)責(zé)頁面的展示，Model只是數(shù)據(jù)的存儲(chǔ)地沮，那么也就達(dá)到了解耦和重用的目的嗜浮。
想必我們用著已經(jīng)非常習(xí)慣,但是他有存在一些問題,這是筆者想通過此文告訴大家的:

• 模型的代碼少

• 控制器的代碼卻是越寫越多

• 由于寫的代碼較多,故不好進(jìn)行性能測(cè)試

MVVM :

全稱:Model-View-ViewModel 涯保，MVVM 模式和 MVC 模式一樣，主要目的也是分離視圖（View）和模型（Model）
MVVM就是幫忙分擔(dān)一下controller里面的部分業(yè)務(wù)邏輯周伦。 用戶更新view,model的數(shù)據(jù)也更新
這個(gè)時(shí)候，controller將不再直接和真實(shí)的model進(jìn)行綁定了未荒，而通過ViewModel,viewModel進(jìn)而持有真實(shí)的Model专挪。
概念:

• 在MVVM中,view與viewController正式聯(lián)系在一起,我們可以把他們視為一個(gè)組件

• 在MVVM架構(gòu)中,view與viewController均不能直接引用model,而是通過引用viewModel來間接引用model

• 很多人會(huì)問,viewModel是一個(gè)什么樣的架構(gòu)呢?里面應(yīng)該放些什么樣的東西呢?我們可以在viewModel中放置用戶輸入邏輯,視圖顯示邏輯及發(fā)送網(wǎng)絡(luò)請(qǐng)求和其他一些代碼

那么作為一種新型的架構(gòu)模式,在使用時(shí)應(yīng)該有哪些地方值得我們注意呢?

• view 可以引用viewModel,但反過來卻是不行

• viewModel 可以引用model,但是反過來也不行

關(guān)于MVVM的優(yōu)點(diǎn)：

• 方便測(cè)試

在MVC下，Controller基本是無法測(cè)試的片排，里面混雜了個(gè)各種邏輯寨腔，而且分散在不同的地方。有了MVVM我們就可以測(cè)試?yán)锩娴膙iewModel率寡，來驗(yàn)證我們的處理結(jié)果對(duì)不對(duì)（Xcode7的測(cè)試已經(jīng)越來越完善了）迫卢。

• 便于代碼的移植

比如iOS里面有iPhone版本和iPad版本，除了交互展示不一樣外冶共，業(yè)務(wù)邏輯的model是一致的乾蛤。這樣，我們就可以以很小的代價(jià)去開發(fā)另一個(gè)app捅僵。

• 兼容MVC

MVVM是MVC的一個(gè)升級(jí)版家卖，目前的MVC也可以很快的轉(zhuǎn)換到MVVM這個(gè)模式。VC可以省去一大部分展示邏輯庙楚。

缺點(diǎn)：

• 類會(huì)增多

每個(gè)VC都附帶一個(gè)viewModel上荡，類的數(shù)量*2

• viewModel會(huì)越來越龐大

我們把邏輯給了viewModel，那勢(shì)必Model也會(huì)變得很復(fù)雜馒闷，里面的屬性和方法越來越多酪捡。可能重寫的方法比較多纳账，因?yàn)樯婕暗揭恍?shù)據(jù)的轉(zhuǎn)換以及和controller之間的通信逛薇。

• 調(diào)用復(fù)雜度增加

由于數(shù)據(jù)都是從viewModel來，想想突然來了一個(gè)新人疏虫，一看代碼金刁，不知道真實(shí)的模型是誰。比如常用tableview的數(shù)據(jù)源议薪，一般都是一個(gè)數(shù)組尤蛮，如果不斷的通過viewModel去取，溝通上沒有那么直接斯议。況且每封一層产捞，意味著要寫很多代碼去融合他們的轉(zhuǎn)換。

15.nginx

Nginx (engine x) 是一個(gè)高性能的HTTP和反向代理服務(wù)哼御，也是一個(gè)IMAP/POP3/SMTP服務(wù)坯临。Nginx是由伊戈?duì)枴べ愃饕驗(yàn)?a target="_blank" rel="nofollow">俄羅斯訪問量第二的Rambler.ru站點(diǎn)（俄文：Рамблер）開發(fā)的焊唬，第一個(gè)公開版本0.1.0發(fā)布于2004年10月4日。

其將源代碼以類BSD許可證的形式發(fā)布看靠，因它的穩(wěn)定性赶促、豐富的功能集、示例配置文件和低系統(tǒng)資源的消耗而聞名挟炬。2011年6月1日鸥滨，nginx 1.0.4發(fā)布。

Nginx是一款輕量級(jí)的Web 服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器谤祖，并在一個(gè)BSD-like 協(xié)議下發(fā)行婿滓。其特點(diǎn)是占有內(nèi)存少，并發(fā)能力強(qiáng)粥喜，事實(shí)上nginx的并發(fā)能力確實(shí)在同類型的網(wǎng)頁服務(wù)器中表現(xiàn)較好凸主，中國(guó)大陸使用nginx網(wǎng)站用戶有：百度、[京東][新浪][網(wǎng)易][騰訊][淘寶]

16.ASP.NET

ASP.NET又稱為ASP+额湘，不僅僅是ASP的簡(jiǎn)單升級(jí)卿吐，而是微軟公司推出的新一代腳本語言。ASP.NET基于.NET Framework的Web開發(fā)平臺(tái)锋华，不但吸收了ASP以前版本的最大優(yōu)點(diǎn)并參照J(rèn)ava但两、VB語言的開發(fā)優(yōu)勢(shì)加入了許多新的特色，同時(shí)也修正了以前的ASP版本的運(yùn)行錯(cuò)誤供置。 ^[1-2]

ASP.NET具備開發(fā)網(wǎng)站應(yīng)用程序的一切解決方案谨湘，包括驗(yàn)證、緩存芥丧、狀態(tài)管理紧阔、調(diào)試和部署等全部功能。在代碼撰寫方面特色是將頁面邏輯和業(yè)務(wù)邏輯分開续担，它分離程序代碼與顯示的內(nèi)容擅耽，讓豐富多彩的網(wǎng)頁更容易撰寫。同時(shí)使程序代碼看起來更潔凈物遇、更簡(jiǎn)單乖仇。

17. HTTP和HTTPS的基本概念

HTTP：是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議，是一個(gè)客戶端和服務(wù)器端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn)（TCP）询兴，用于從WWW服務(wù)器傳輸超文本到本地瀏覽器的傳輸協(xié)議乃沙，它可以使瀏覽器更加高效，使網(wǎng)絡(luò)傳輸減少诗舰。
HTTPS：是以安全為目標(biāo)的HTTP通道警儒，簡(jiǎn)單講是HTTP的安全版，即HTTP下加入SSL層，HTTPS的安全基礎(chǔ)是SSL蜀铲，因此加密的詳細(xì)內(nèi)容就需要SSL边琉。

HTTPS協(xié)議的主要作用可以分為兩種：一種是建立一個(gè)信息安全通道，來保證數(shù)據(jù)傳輸?shù)陌踩侨埃涣硪环N就是確認(rèn)網(wǎng)站的真實(shí)性变姨。

HTTP與HTTPS有什么區(qū)別？

HTTP協(xié)議傳輸?shù)臄?shù)據(jù)都是未加密的厌丑，也就是明文的定欧，因此使用HTTP協(xié)議傳輸隱私信息非常不安全，為了保證這些隱私數(shù)據(jù)能加密傳輸蹄衷，于是網(wǎng)景公司設(shè)計(jì)了SSL（Secure Sockets Layer）協(xié)議用于對(duì)HTTP協(xié)議傳輸?shù)臄?shù)據(jù)進(jìn)行加密，從而就誕生了HTTPS厘肮。簡(jiǎn)單來說愧口，HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議类茂，要比http協(xié)議安全耍属。
HTTPS和HTTP的區(qū)別主要如下：

• https協(xié)議需要到ca申請(qǐng)證書，一般免費(fèi)證書較少巩检，因而需要一定費(fèi)用厚骗。
• http是超文本傳輸協(xié)議，信息是明文傳輸兢哭，https則是具有安全性的ssl加密傳輸協(xié)議领舰。
• http和https使用的是完全不同的連接方式，用的端口也不一樣迟螺，前者是80冲秽，后者是443。
• http的連接很簡(jiǎn)單矩父，是無狀態(tài)的锉桑；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議窍株，比http協(xié)議安全民轴。

HTTPS的工作原理
　　我們都知道HTTPS能夠加密信息，以免敏感信息被第三方獲取球订，所以很多銀行網(wǎng)站或電子郵箱等等安全級(jí)別較高的服務(wù)都會(huì)采用HTTPS協(xié)議后裸。
使用兩把密鑰的公開密鑰加密

公開密鑰加密使用一對(duì)非對(duì)稱的密鑰。一把叫做私鑰冒滩，另一把叫做公鑰轻抱。私鑰不能讓其他任何人知道，而公鑰則可以隨意發(fā)布旦部，任何人都可以獲得祈搜。使用公鑰加密方式较店，發(fā)送密文的一方使用對(duì)方的公鑰進(jìn)行加密處理，對(duì)方收到被加密的信息后容燕，再使用自己的私鑰進(jìn)行解密梁呈。利用這種方式，不需要發(fā)送用來解密的私鑰蘸秘，也不必?fù)?dān)心密鑰被攻擊者竊聽而盜走官卡。

HTTP與HTTPS的區(qū)別-馬海祥博客

客戶端在使用HTTPS方式與Web服務(wù)器通信時(shí)有以下幾個(gè)步驟，如圖所示醋虏。

（1）客戶使用https的URL訪問Web服務(wù)器寻咒，要求與Web服務(wù)器建立SSL連接。

（2）Web服務(wù)器收到客戶端請(qǐng)求后颈嚼，會(huì)將網(wǎng)站的證書信息（證書中包含公鑰）傳送一份給客戶端毛秘。

（3）客戶端的瀏覽器與Web服務(wù)器開始協(xié)商SSL連接的安全等級(jí)，也就是信息加密的等級(jí)阻课。

（4）客戶端的瀏覽器根據(jù)雙方同意的安全等級(jí)叫挟，建立會(huì)話密鑰，然后利用網(wǎng)站的公鑰將會(huì)話密鑰加密限煞，并傳送給網(wǎng)站抹恳。

（5）Web服務(wù)器利用自己的私鑰解密出會(huì)話密鑰。

（6）Web服務(wù)器利用會(huì)話密鑰加密與客戶端之間的通信署驻。

image

HTTPS的優(yōu)點(diǎn)

盡管HTTPS并非絕對(duì)安全奋献，掌握根證書的機(jī)構(gòu)、掌握加密算法的組織同樣可以進(jìn)行中間人形式的攻擊旺上，但HTTPS仍是現(xiàn)行架構(gòu)下最安全的解決方案秽荞，主要有以下幾個(gè)好處：

（1）使用HTTPS協(xié)議可認(rèn)證用戶和服務(wù)器，確保數(shù)據(jù)發(fā)送到正確的客戶機(jī)和服務(wù)器抚官；

（2）HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸扬跋、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，要比http協(xié)議安全凌节，可防止數(shù)據(jù)在傳輸過程中不被竊取钦听、改變，確保數(shù)據(jù)的完整性倍奢。

（3）HTTPS是現(xiàn)行架構(gòu)下最安全的解決方案朴上，雖然不是絕對(duì)安全，但它大幅增加了中間人攻擊的成本卒煞。

（4）谷歌曾在2014年8月份調(diào)整搜索引擎算法痪宰，并稱“比起同等HTTP網(wǎng)站，采用HTTPS加密的網(wǎng)站在搜索結(jié)果中的排名將會(huì)更高”。

HTTPS的缺點(diǎn)

雖然說HTTPS有很大的優(yōu)勢(shì)衣撬，但其相對(duì)來說乖订，還是存在不足之處的：

（1）HTTPS協(xié)議握手階段比較費(fèi)時(shí)，會(huì)使頁面的加載時(shí)間延長(zhǎng)近50%具练，增加10%到20%的耗電乍构；

（2）HTTPS連接緩存不如HTTP高效，會(huì)增加數(shù)據(jù)開銷和功耗扛点，甚至已有的安全措施也會(huì)因此而受到影響哥遮；

（3）SSL證書需要錢，功能越強(qiáng)大的證書費(fèi)用越高陵究，個(gè)人網(wǎng)站眠饮、小網(wǎng)站沒有必要一般不會(huì)用。

（4）SSL證書通常需要綁定IP铜邮，不能在同一IP上綁定多個(gè)域名仪召，IPv4資源不可能支撐這個(gè)消耗。

（5）HTTPS協(xié)議的加密范圍也比較有限牲距，在黑客攻擊返咱、拒絕服務(wù)攻擊钥庇、服務(wù)器劫持等方面幾乎起不到什么作用牍鞠。最關(guān)鍵的，SSL證書的信用鏈體系并不安全评姨，特別是在某些國(guó)家可以控制CA根證書的情況下难述，中間人攻擊一樣可行。

16.ajax

Ajax的原理簡(jiǎn)單來說通過XmlHttpRequest對(duì)象來向服務(wù)器發(fā)送異步請(qǐng)求吐句，從服務(wù)器獲得數(shù)據(jù)胁后，然后用javascript來操作DOM而更新頁面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)嗦枢。要清楚這個(gè)過程和原理攀芯，我們必須對(duì)XmlHttpRequest有所了解。
XmlHttpRequest是Ajax的核心機(jī)制文虏，它是在IE5中首先引入的侣诺，是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)單的說氧秘，也就是javascript可以及時(shí)向服務(wù)器提出請(qǐng)求和處理相應(yīng)年鸳，而不阻塞用戶。達(dá)到無刷新的效果丸相。

同步的概念

同步搔确，我的理解是一種線性執(zhí)行的方式，執(zhí)行的流程不能跨越。一般用于流程性比較強(qiáng)的程序膳算，我們做的用戶登錄功能也是同步處理的座硕，必須用戶通過用戶名和密碼驗(yàn)證后才能進(jìn)入系統(tǒng)的操作。

異步的概念

異步畦幢，是一種并行處理的方式坎吻，不必等待一個(gè)程序執(zhí)行完，可以執(zhí)行其它的任務(wù)宇葱。在程序中異步處理的結(jié)果通常使用回調(diào)函數(shù)來處理結(jié)果瘦真。在JavaScript中實(shí)現(xiàn)異步的方式主要有Ajax和H5新增的Web Worker。

異步j(luò)avascript和XML黍瞧，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)诸尽。通過后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX可以使網(wǎng)頁實(shí)現(xiàn)異步更新印颤。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下您机，對(duì)網(wǎng)頁的某部分進(jìn)行更新。

js原生

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 瀏覽器執(zhí)行代碼
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}

Jquery

$.ajax({
        type: "get",
        async: true,
        url: "/recharge",
        data:{
            phone : phone,          
            startTime : starttime,
            endTime : endtime,
            startTimeByRecharge:startTimeByRecharge,
            endTimeByRecharge:endTimeByRecharge
        },
        dataType: "json",
        success: function (data) {
            //console.log(data);
            if(data.success==true){
                CreateChargeTable(data,info);
            }else{
                alert("后臺(tái)數(shù)據(jù)處理中年局，請(qǐng)稍后际看！");
            }
            //console.log( Object.keys(data.data[0].level).length);
        }
    });
}

17.設(shè)計(jì)模式

1. 工廠模式
2. 構(gòu)造函數(shù)模式
3. 原型模式
4. 混合構(gòu)造函數(shù)和原型模式
5. 動(dòng)態(tài)原型模式
6. 寄生構(gòu)造函數(shù)模式
7. 穩(wěn)妥構(gòu)造函數(shù)模式

程序的設(shè)計(jì)模式?工廠模式?發(fā)布訂閱?
1）設(shè)計(jì)模式并不是某種語言的某塊代碼，設(shè)計(jì)模式是一種思想矢否，提供給在編碼時(shí)候遇到的各種問題是可以采取的解決方案仲闽，更傾向于一種邏輯思維，而不是萬能代碼塊僵朗。
設(shè)計(jì)模式主要分三個(gè)類型:創(chuàng)建型赖欣、結(jié)構(gòu)型和行為型。
創(chuàng)建型模式：?jiǎn)卫Ｊ窖槊恚橄蠊S模式顶吮，建造者模式，工廠模式與原型模式粪薛。
結(jié)構(gòu)型模式：適配器模式悴了，橋接模式，裝飾者模式违寿，組合模式湃交，外觀模式，享元模式以及代理模式陨界。
行為型模式：模板方法模式巡揍，命令模式，迭代器模式菌瘪，觀察者模式腮敌，中介者模式阱当，備忘錄模式，解釋器模式糜工，狀態(tài)模式弊添，策略模式，職責(zé)鏈模式和訪問者模式捌木。

2）與創(chuàng)建型模式類似油坝，工廠模式創(chuàng)建對(duì)象（視為工廠里的產(chǎn)品）是無需指定創(chuàng)建對(duì)象的具體類。
工廠模式定義一個(gè)用于創(chuàng)建對(duì)象的接口刨裆，這個(gè)接口由子類決定實(shí)例化哪一個(gè)類澈圈。該模式使一個(gè)類的實(shí)例化延遲到了子類。而子類可以重寫接口方法以便創(chuàng)建的時(shí)候指定自己的對(duì)象類型帆啃。

3）觀察者模式又叫做發(fā)布訂閱模式瞬女，它定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀察者對(duì)象同時(shí)監(jiān)聽某一個(gè)主題對(duì)象努潘，這個(gè)主題對(duì)象的狀態(tài)發(fā)生改變時(shí)就會(huì)通知所有觀察著對(duì)象诽偷。它是由兩類對(duì)象組成，主題和觀察者疯坤，主題負(fù)責(zé)發(fā)布事件，同時(shí)觀察者通過訂閱這些事件來觀察該主體压怠，發(fā)布者和訂閱者是完全解耦的眠冈，彼此不知道對(duì)方的存在，兩者僅僅共享一個(gè)自定義事件的名稱刑峡。
( 設(shè)計(jì)模式實(shí)在是太高深了洋闽，小伙伴門結(jié)合網(wǎng)上實(shí)例自行學(xué)習(xí)玄柠，我實(shí)在是無能為力啊 )