摘要：如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信阿里調(diào)用等本地存儲方式頁面可見性可以有哪些用途通過的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時(shí)間等在頁面被切換到其他后臺進(jìn)程的時(shí)候，自動(dòng)暫停音樂或視頻的播放網(wǎng)頁驗(yàn)證碼是干嘛的，是為了解決什么安全問題。

1.輸入域名地址
2.發(fā)送至DNS服務(wù)器并獲得域名對應(yīng)的WEB服務(wù)器IP地址；
3.與WEB服務(wù)器建立TCP連接；
4.服務(wù)器的永久重定向響應(yīng)（從 http://example.com 到 http://www.example.com）
5.瀏覽器跟蹤重定向地址
6.服務(wù)器處理請求
7.服務(wù)器返回一個(gè)HTTP響應(yīng)
8.瀏覽器顯示 HTML
9.瀏覽器發(fā)送請求獲取的資源（如圖片、音頻、視頻、CSS、JS等等）
10.瀏覽器發(fā)送異步請求

1.用戶界面 2.網(wǎng)絡(luò) 3.UI后端 4.數(shù)據(jù)存儲
5.瀏覽器引擎 6.渲染引擎 7.js解釋器

流程：解析html以構(gòu)建dom樹->構(gòu)建render樹->布局render樹->繪制render樹

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。
瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。

Trident內(nèi)核：IE,360，傲游，搜狗，世界之窗，騰訊等。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密），
，數(shù)據(jù)會在瀏覽器和服務(wù)器間來回傳遞。
sessionStorage和localStorage不會自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲大?。?/p>

cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大。

有期時(shí)間：

localStorage    存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)；
sessionStorage  數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。
cookie          設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉

跨域問題，設(shè)置了HttpOnly。

調(diào)用localstorge、cookies等本地存儲方式

通過 visibilityState 的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時(shí)間等;
在頁面被切換到其他后臺進(jìn)程的時(shí)候，自動(dòng)暫停音樂或視頻的播放；

區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序。可以防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個(gè)特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試。

CDN緩存更方便 ，突破瀏覽器并發(fā)限制
節(jié)約cookie帶寬 ，節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應(yīng)速度 防止不必要的安全問題

網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓web發(fā)展的更‘健康’，開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn)，降低開發(fā)難度，開發(fā)成本，SEO也會更好做，也不會因?yàn)闉E用代碼導(dǎo)致各種BUG、安全問題，最終提高網(wǎng)站易用性。

　微格式（Microformats）是一種讓機(jī)器可讀的語義化XHTML詞匯的集合，是結(jié)構(gòu)化數(shù)據(jù)的開放標(biāo)準(zhǔn)。是為特殊應(yīng)用而制定的特殊格式
　優(yōu)點(diǎn)：將智能數(shù)據(jù)添加到網(wǎng)頁上，讓網(wǎng)站內(nèi)容在搜索引擎結(jié)果界面可以顯示額外的提示。

（1）圖片懶加載，在頁面上的未可視區(qū)域可以添加一個(gè)滾動(dòng)條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優(yōu)先加載。
（2）如果為幻燈片、相冊等，可以使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。
（3）如果圖片過大，可以使用特殊編碼的圖片，加載時(shí)會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗(yàn)。
（4）如果圖片展示區(qū)域小于圖片的真實(shí)大小，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后大小與展示一致。

合理的標(biāo)簽使用， 主要的互聯(lián)網(wǎng)目錄，鏈接交換和鏈接廣泛度。

1.減少dom操作
2.部署前，圖片壓縮，代碼壓縮
3.優(yōu)化js代碼結(jié)構(gòu)，減少冗余代碼
4.減少http請求，合理設(shè)置 HTTP緩存
5.使用內(nèi)容分發(fā)cdn加速
6.靜態(tài)資源緩存
7.圖片延遲加載

區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。降級（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發(fā)送 XHR 、
基于長輪詢的 XHR

cookie 2.session

url重寫 4.隱藏input 5.ip地址

一臺服務(wù)器要與HTTP1.1兼容，只要為資源實(shí)現(xiàn)GET和HEAD方法即可

GET是最常用的方法，通常用于請求服務(wù)器發(fā)送某個(gè)資源。

HEAD與GET類似，但服務(wù)器在響應(yīng)中值返回首部，不返回實(shí)體的主體部分

PUT讓服務(wù)器用請求的主體部分來創(chuàng)建一個(gè)由所請求的URL命名的新文檔，或者，如果那個(gè)URL已經(jīng)存在的話，就用干這個(gè)主體替代它

POST起初是用來向服務(wù)器輸入數(shù)據(jù)的。實(shí)際上，通常會用它來支持HTML的表單。表單中填好的數(shù)據(jù)通常會被送給服務(wù)器，然后由服務(wù)器將其發(fā)送到要去的地方。

TRACE會在目的服務(wù)器端發(fā)起一個(gè)環(huán)回診斷，最后一站的服務(wù)器會彈回一個(gè)TRACE響應(yīng)并在響應(yīng)主體中攜帶它收到的原始請求報(bào)文。TRACE方法主要用于診斷，用于驗(yàn)證請求是否如愿穿過了請求/響應(yīng)鏈。

OPTIONS方法請求web服務(wù)器告知其支持的各種功能?？梢圆樵兎?wù)器支持哪些方法或者對某些特殊資源支持哪些方法。

DELETE請求服務(wù)器刪除請求URL指定的資源

rfc2616中進(jìn)行了定義：

首行是狀態(tài)行包括：HTTP版本，狀態(tài)碼，狀態(tài)描述，后面跟一個(gè)CRLF

首行之后是若干行響應(yīng)頭，包括：通用頭部，響應(yīng)頭部，實(shí)體頭部

響應(yīng)頭部和響應(yīng)實(shí)體之間用一個(gè)CRLF空行分隔

最后是一個(gè)可能的消息實(shí)體 響應(yīng)報(bào)文例子如下：

狀態(tài)碼類型
狀態(tài)碼 類別 原因短語
1XX Information（信息性狀態(tài)碼） 接收的請求正在處理
2XX Success（成功狀態(tài)碼） 請求正常處理完畢
3XX Redirection（重定向狀態(tài)碼） 需要進(jìn)行附加的操作以完成請求
4XX Client Error（客戶端錯(cuò)誤狀態(tài)碼） 服務(wù)器無法處理請求
5XX Server Error（服務(wù)端錯(cuò)誤狀態(tài)碼） 服務(wù)器處理請求出錯(cuò)
204：服務(wù)器成功處理，但未返回內(nèi)容。
304：Not Modified 未修改。所請求的資源未修改，服務(wù)器返回此狀態(tài)碼時(shí)，不會返回任何資源。客戶端通常會緩存訪問過的資源，通過提供一個(gè)頭信息指出客戶端希望只返回在指定日期之后修改的資源
400：Bad Request 客戶端請求的語法錯(cuò)誤，服務(wù)器無法理解
403：Forbidden 服務(wù)器理解請求客戶端的請求，但是拒絕執(zhí)行此請求
404：Not Found 服務(wù)器無法根據(jù)客戶端的請求找到資源（網(wǎng)頁）。通過此代碼，網(wǎng)站設(shè)計(jì)人員可設(shè)置"您所請求的資源無法找到"的個(gè)性頁面

同源政策的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。
如果非同源，共有三種行為受到限制。
（1） Cookie、LocalStorage 和 IndexDB 無法讀取。
（2） DOM 無法獲得。
（3） AJAX 請求不能發(fā)送。

答：要做好防XSS、CSRF、SQL注入攻擊.DDOS攻擊。
XSS概念:
譯為跨站腳本攻擊,具體是指攻擊者在Web頁面里插入惡意Script腳本，當(dāng)用戶瀏覽該網(wǎng)頁時(shí)，Script代碼會被執(zhí)行，從而進(jìn)行惡意攻擊。
XSS預(yù)防:
關(guān)鍵cookie字段設(shè)置httpOnly
輸入檢查,特殊字符 < > / &等,對其進(jìn)行轉(zhuǎn)義后存儲
CSRF概念：
本質(zhì)上講，是黑客將一個(gè)http接口中需要傳遞的所有參數(shù)都預(yù)測出來，然后不管以什么方式，他都可以根據(jù)他的目的來任意調(diào)用你的接口，對服務(wù)器實(shí)現(xiàn)CURD。
CSRF 預(yù)防：
使用驗(yàn)證碼，更高級用圖靈測試
SQL概念：
通常沒有任何過濾，直接把參數(shù)存放到了SQL語句當(dāng)中
SQL預(yù)防：
根本上防止SQL注入的方法，就是參數(shù)化查詢或者做詞法分析。
DDOS概念：
利用木桶原理，尋找利用系統(tǒng)應(yīng)用的瓶頸；阻塞和耗盡；當(dāng)前問題：用戶的帶寬小于攻擊的規(guī)模，噪聲訪問帶寬成為木桶的短板。
DDOS預(yù)防：用軟硬件結(jié)合的方式來防御是最有效的

1.開發(fā)規(guī)范
2.模塊化開發(fā)
3.組件化開發(fā)
4.組件倉庫
5.性能優(yōu)化
6.項(xiàng)目部署
7.開發(fā)流程
8.開發(fā)工具

AMD和CMD是二種模塊定義規(guī)范?，F(xiàn)在都使用模塊化編程，AMD，異步模塊定義；CMD，通用模塊定義。AMD依賴前置，CMD依賴就近。CMD的API職責(zé)單一，沒有全局require，AMD的一個(gè)API可以多用。

mvc是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設(shè)計(jì)典范使用MVC的目的是將M和V的實(shí)現(xiàn)代碼分離，從而使同一個(gè)程序可以使用不同的表現(xiàn)形式。MVC對應(yīng)Html，CSS，js。
BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。流體特性：塊狀水平元素，如div元素（下同），在默認(rèn)情況下（非浮動(dòng)、絕對定位等），水平方向會自動(dòng)填滿外部的容器；BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素不會影響外部的元素。

期待的解決方案包括：文件合并文件最小化/文件壓縮使用CDN托管緩存的使用（多個(gè)域名來提供緩存）其他。

Profiler,JSPerf,Dromaeo。

1.應(yīng)用字符集的選擇，選擇UTF-8編碼
2.語言書寫習(xí)慣&導(dǎo)航結(jié)構(gòu)
3.數(shù)據(jù)庫驅(qū)動(dòng)型網(wǎng)站

所謂的標(biāo)準(zhǔn)字體是多數(shù)機(jī)器上都會有的，或者即使沒有也可以由默認(rèn)字體替代的字體。
方法：
用圖片代替
web fonts在線字庫，如Google Webfonts，Typekit等等；http://www.chinaz.com/free/20...；
@font-face，Webfonts(字體服務(wù)例如：Google Webfonts，Typekit等等。)

(1)了解背景知識：歷史、現(xiàn)狀、特點(diǎn)、應(yīng)用領(lǐng)域、發(fā)展趨勢
(2)搭建開發(fā)環(huán)境，編寫HelloWorld
(3)聲明變量和常量
(4)數(shù)據(jù)類型
(5)運(yùn)算符
(6)邏輯結(jié)構(gòu)
(7)通用小程序
(8)函數(shù)和對象
(9)第三方庫、組件、框架
(10)實(shí)用項(xiàng)目

散列表（也叫哈希表），是根據(jù)關(guān)鍵碼值直接進(jìn)行訪問的數(shù)據(jù)結(jié)構(gòu)。也就是說，它通過把關(guān)鍵碼值映射到表中一個(gè)位置來訪問記錄，以加快查找的速度。這個(gè)映射函數(shù)叫做散列函數(shù)，存放記錄的數(shù)組叫做散列表。

靜態(tài):網(wǎng)頁內(nèi)容任何人在任何時(shí)間訪問都是不變的

    HTML/CSS/JS/視頻/音頻

動(dòng)態(tài):網(wǎng)頁內(nèi)容不同人在不同時(shí)間訪問可能是不同的

    JSP/PHP/ASP.NET/Node.JS

DDL:數(shù)據(jù)定義語句 CREATE/DROP/ALTER…
DCL:數(shù)據(jù)控制語句 GRANT…
DML:操作操作語句 INSERT/UPDATE/DELETE
DQL:查詢語句 SELECT

上官網(wǎng)看是什么

上官網(wǎng)看快速入門

下載手冊備查

解決某元素中“子元素”的布局方式，為布局提供最大的靈活性。
設(shè)為flex布局以后，子元素的float、clear和vertical-align屬性將失效!!!
display:flex; 屬性align-self 定義子元素的位置。

1.聲明viewport元標(biāo)簽 2.使用流式布局 3.所有容器使用相對尺寸，不用絕對尺寸
4.（最重要原則）使用CSS3 Media Query技術(shù)

1.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的內(nèi).外補(bǔ)丁不同。
*{margin:0;padding:0;}
2.圖片默認(rèn)有間距
使用float屬性為img布局
3.居中問題（而FF默認(rèn)為左對齊）
margin: 0 auto;
4.CSS 兼容前綴
-ms- IE
-moz- Firefox
-o- Opera
-webkit- Chrome
5.使用CSS Hack
如： +:IE6,7的前綴

  -:IE6的前綴

(1)Canvas繪圖
(2)SVG繪圖
(3)地理定位
(4)Web Worker
web worker 是運(yùn)行在后臺的 JS，獨(dú)立于其他腳本，不會影響頁面的性能。
(5)Web Storage
1.Cookie技術(shù) （ 兼容性好,數(shù)據(jù)不能超4kb,操作復(fù)雜）2.（兼容性差,數(shù)據(jù)8MB,操作簡單）sessionStorage 3.localStorage
(6)Web Socket
WebSocket協(xié)議是基于TCP的一種新的網(wǎng)絡(luò)協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工(full-duplex)通信——允許服務(wù)器主動(dòng)發(fā)送信息給客戶端。

1.復(fù)雜的選擇器
2.彈性布局
3.動(dòng)畫

Less 是一門 CSS 預(yù)處理語言，它擴(kuò)展了 CSS 語言，增加了變量、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展。

1.ES7只有2個(gè)特性:1.includes() 驗(yàn)證數(shù)組中是否存在某個(gè)元素 2.指數(shù)操作符
2.ES8新特性：
Object.values()
Object.entries()
padStart()
padEnd()
Object.getOwnPropertyDescriptors()
函數(shù)參數(shù)列表結(jié)尾允許逗號
Async/Await

function setRequest(){
              //1.獲取xhr對象
              var xhr=createXhr();
              //2.創(chuàng)建請求
             xhr.open("get","response.php",true);
              //3.設(shè)置回調(diào)函數(shù)-onreadystatechange
             xhr.onreadystatechange=function(){
                 //判斷readyState以及status
        if(xhr.readyState==4&&xhr.status==200){
             //接收響應(yīng)數(shù)據(jù)
             var resText=xhr.responseText;
             //打印在控制臺
             console.log(resText); 
                 }
              }
             //4.發(fā)送請求
              xhr.send(null);
           }

通過jsonp跨域
1.）原生實(shí)現(xiàn)：

2.跨域資源共享（CORS）只要服務(wù)端設(shè)置Access-Control-Allow-Origin即可

nodejs中間件代理跨域

1.它是JavaScript的一個(gè)超集，而且本質(zhì)上向這個(gè)語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭?br>2.TypeScript擴(kuò)展了JavaScript的語法，所以任何現(xiàn)有的JavaScript程序可以不加改變的在TypeScript下工作。
TypeScript是為大型應(yīng)用之開發(fā)而設(shè)計(jì)，而編譯時(shí)它產(chǎn)生 JavaScript 以確保兼容性。

Angular帶有比較強(qiáng)的排它性的
React主張是函數(shù)式編程的理念，侵入性沒有Angular那么強(qiáng)，主要因?yàn)樗擒浶郧秩搿?br>Vue 漸進(jìn)式的

優(yōu)點(diǎn)：用戶體驗(yàn)好 、良好的前后端分離。
缺點(diǎn)：
1.不利于SEO。
2.初次加載耗時(shí)相對增多。
3.導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)、后退。

每個(gè)模塊內(nèi)部，module變量代表當(dāng)前模塊。
這個(gè)變量是一個(gè)對象，它的exports屬性（即module.exports）是對外的接口。加載某個(gè)模塊，其實(shí)是加載該模塊的module.exports屬性。

混合編程是指使用兩種或兩種以上的程序設(shè)計(jì)語言來開發(fā)應(yīng)用程序的過程。

1.使用 CDN
2.圖片懶加載
3.使用外部 JavaScript 和 CSS
4.壓縮 JavaScript 、 CSS 、字體、圖片等
5.優(yōu)化 CSS Sprite
6.減少 HTTP 請求數(shù)
7.減少 DNS 查詢
8減少 DOM 元素?cái)?shù)量
9.減少 DOM 操作
10.把腳本放在頁面底部

HTTP協(xié)議傳輸?shù)臄?shù)據(jù)都是未加密的，也就是明文的，因此使用HTTP協(xié)議傳輸隱私信息非常不安全，HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，要比http協(xié)議安全。

HTTPS和HTTP的區(qū)別主要如下：
　　1、https協(xié)議需要到ca申請證書，一般免費(fèi)證書較少，因而需要一定費(fèi)用。
　　2、http是超文本傳輸協(xié)議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議。
　　3、http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443。
　　4、http的連接很簡單，是無狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http協(xié)議安全。

前端加密方式https：是在http基礎(chǔ)上加了SSL協(xié)議，使用443端口,http是80端口;