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

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

1.用戶界面 2.網絡 3.UI后端 4.數據存儲
5.瀏覽器引擎 6.渲染引擎 7.js解釋器

流程：解析html以構建dom樹->構建render樹->布局render樹->繪制render樹

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

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

cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密），
，數據會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：

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

有期時間：

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

跨域問題，設置了HttpOnly。

調用localstorge、cookies等本地存儲方式

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

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

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

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

　微格式（Microformats）是一種讓機器可讀的語義化XHTML詞匯的集合，是結構化數據的開放標準。是為特殊應用而制定的特殊格式
　優點：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面可以顯示額外的提示。

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

合理的標簽使用， 主要的互聯網目錄，鏈接交換和鏈接廣泛度。

1.減少dom操作
2.部署前，圖片壓縮，代碼壓縮
3.優化js代碼結構，減少冗余代碼
4.減少http請求，合理設置 HTTP緩存
5.使用內容分發cdn加速
6.靜態資源緩存
7.圖片延遲加載

區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。

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

cookie 2.session

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

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

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

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

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

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

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

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

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

rfc2616中進行了定義：

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

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

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

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

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

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

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

1.開發規范
2.模塊化開發
3.組件化開發
4.組件倉庫
5.性能優化
6.項目部署
7.開發流程
8.開發工具

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

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

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

Profiler,JSPerf,Dromaeo。

1.應用字符集的選擇，選擇UTF-8編碼
2.語言書寫習慣&導航結構
3.數據庫驅動型網站

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

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

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

靜態:網頁內容任何人在任何時間訪問都是不變的

    HTML/CSS/JS/視頻/音頻

動態:網頁內容不同人在不同時間訪問可能是不同的

    JSP/PHP/ASP.NET/Node.JS

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

上官網看是什么

上官網看快速入門

下載手冊備查

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

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

1.不同瀏覽器的標簽默認的內.外補丁不同。
*{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技術 （ 兼容性好,數據不能超4kb,操作復雜）2.（兼容性差,數據8MB,操作簡單）sessionStorage 3.localStorage
(6)Web Socket
WebSocket協議是基于TCP的一種新的網絡協議。它實現了瀏覽器與服務器全雙工(full-duplex)通信——允許服務器主動發送信息給客戶端。

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

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

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

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

通過jsonp跨域
1.）原生實現：

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

nodejs中間件代理跨域

1.它是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基于類的面向對象編程。
2.TypeScript擴展了JavaScript的語法，所以任何現有的JavaScript程序可以不加改變的在TypeScript下工作。
TypeScript是為大型應用之開發而設計，而編譯時它產生 JavaScript 以確保兼容性。

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

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

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

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

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

HTTP協議傳輸的數據都是未加密的，也就是明文的，因此使用HTTP協議傳輸隱私信息非常不安全，HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，要比http協議安全。

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

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