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

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

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

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

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。
瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡內(nèi)容的應用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(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)站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密），
，數(shù)據(jù)會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務器，僅在本地保存。
存儲大小：

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

有期時間：

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

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

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

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

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

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

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

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

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

合理的標簽使用， 主要的互聯(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)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應未來環(huán)境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。

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

cookie 2.session

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

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

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

HEAD與GET類似，但服務器在響應中值返回首部，不返回實體的主體部分

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

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

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

OPTIONS方法請求web服務器告知其支持的各種功能。可以查詢服務器支持哪些方法或者對某些特殊資源支持哪些方法。

DELETE請求服務器刪除請求URL指定的資源

rfc2616中進行了定義：

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

首行之后是若干行響應頭，包括：通用頭部，響應頭部，實體頭部

響應頭部和響應實體之間用一個CRLF空行分隔

最后是一個可能的消息實體 響應報文例子如下：

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

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

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

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

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

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

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

Profiler,JSPerf,Dromaeo。

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

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

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

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

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

    HTML/CSS/JS/視頻/音頻

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

    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元標簽 2.使用流式布局 3.所有容器使用相對尺寸，不用絕對尺寸
4.（最重要原則）使用CSS3 Media Query技術(shù)

1.不同瀏覽器的標簽默認的內(nèi).外補丁不同。
*{margin:0;padding:0;}
2.圖片默認有間距
使用float屬性為img布局
3.居中問題（而FF默認為左對齊）
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 是運行在后臺的 JS，獨立于其他腳本，不會影響頁面的性能。
(5)Web Storage
1.Cookie技術(shù) （ 兼容性好,數(shù)據(jù)不能超4kb,操作復雜）2.（兼容性差,數(shù)據(jù)8MB,操作簡單）sessionStorage 3.localStorage
(6)Web Socket
WebSocket協(xié)議是基于TCP的一種新的網(wǎng)絡協(xié)議。它實現(xiàn)了瀏覽器與服務器全雙工(full-duplex)通信——允許服務器主動發(fā)送信息給客戶端。

1.復雜的選擇器
2.彈性布局
3.動畫

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

1.ES7只有2個特性:1.includes() 驗證數(shù)組中是否存在某個元素 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){
             //接收響應數(shù)據(jù)
             var resText=xhr.responseText;
             //打印在控制臺
             console.log(resText); 
                 }
              }
             //4.發(fā)送請求
              xhr.send(null);
           }

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

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

nodejs中間件代理跨域

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

Angular帶有比較強的排它性的
React主張是函數(shù)式編程的理念，侵入性沒有Angular那么強，主要因為它是軟性侵入。
Vue 漸進式的

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

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

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

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

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

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

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