web前端—基礎知識01講

HTML語義化

• HTML語義化
  • 含義：用正確的標籤去作正確的事，也是將HTML的內容結構化
  • 優勢：
    • 便於對瀏覽器和搜索引擎解析
    • 便於網站的維護和對源代碼的理解
  • <meta>添加源數據：有4個特有屬性：charset http-equive content name
  • meta標籤的定義：The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable來自官方的定義
  • meta標籤的用處：Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services
  • meta標籤總體就包含兩部分：name 和 http-equive
    • 常見的name屬性參數
      • 移動端窗口適配問題：<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no ">
      • keyword，用於告訴搜索引擎，該網頁的關鍵字: <meta name="keywords" content="關鍵字內容">
      • description，網頁的描述：<meta name="description" content="這是個人掘金文章">
      • 其餘的一些屬性用到直接查資料就能夠了
    • 常見的http-equiv屬性參數：http-equiv至關於http的做用
      • Conten-Type: <meta http-equiv="Content-Type" content="charset=utf-8">，可是咱們更推薦使用HTML5的寫法：<meta charset="UTF-8">
      • X-UA-Compatible(瀏覽器採起何種版本渲染當前頁面)：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 這裏的chrome=1不是說IE的技術加強了能夠模擬Chrome瀏覽器，而是與谷歌開發的Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)有關。這個插件可讓用戶的IE瀏覽器外觀不變，但用戶在瀏覽網頁時實際上使用的是Chrome的內核，而且支持Windows XP及以上系統的IE6/7/8。但前提是瀏覽器須要GCF，訪問網址的時候用：gcf:http://www.example.com這種方式實現網頁的訪問
      • 其餘的一些標籤使用的時候查文檔就可了，咱們不可能記住全部的標籤屬性的!
• HTML5新標籤
  • HTML5的設計目的：爲了在移動設備上支持多媒體，目前大部分瀏覽器已經具有了HTML5的部分新特性
  • header：定義了文檔的頭部區域
  • footer:定義section或document的頁腳
  • article：定義頁面獨立的內容區域
  • aside：定義頁面的側邊欄內容
  • command：定義命令按鈕，好比單選按鈕、複選框或按鈕
  • details:用於描述文檔或文檔某個部分的細節
  • summary:標籤包含 details 元素的標題
  • dialog: 定義對話框，好比提示框
  • mark: 定義帶有記號的文本
  • nav: 定義導航連接的部分
  • progress：定義任何類型的任務的進度
  • section：定義文檔中的節（section、區段）。
  • time: 定義時間和日期
  • 將HTML5的元素定義爲塊級元素，這是爲了讓不認識HTML5的瀏覽器認識

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}
複製代碼

• 優雅降級和漸進加強
  • 優雅降級：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack使其能夠在低版本瀏覽器上正常瀏覽。
  • 漸進加強：一開始先針對低版本的瀏覽器構建界面，而後在逐漸升級針對高版本的瀏覽器進行效果、交互、追加功能達到根號的體驗效果
• 背景顏色的漸變屬性：
  • 線性漸變：向下/向右/向左/向上/對角線 linear-gradient(to left/90deg, red, blue, green)
  • 徑向漸變：有它們的中心定義 radial-gradient(circle/ellipse, red, blue, green)
• 解決IE瀏覽器不支持HTML5最好的辦法就是下面的這種方式
• 注意這是一段註釋，由於IE9如下的瀏覽器是不兼容HTML5的爲了解決這個問題，這是咱們須要引入HTML5shiv.js這個腳本。可是在Chrome下是兼容HTML5的，再加載一個js文件是沒有必要的，所以下面的寫法是能讓IE9-的瀏覽器加載這段代碼，支持HTML5的瀏覽器不須要加載這段代碼。這段代碼是寫在head標籤中的

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
複製代碼

• 常見瀏覽器的內核
  • Chrome：Blink
  • FireFox: Gecko
  • safari: Weblit
  • IE: Trident，IE最新的瀏覽器內核採用的是：ChroniumBlink和Trident兩個內核,目前還沒發佈
  • Opera: Blink
  • 國內一些瀏覽器使用較多的是webkit

cookie session sessionStorage localStorag它們之間的區別

• cookies
  • 服務器保存在瀏覽器上的一小段文本信息，瀏覽器每次向服務器發出請求就會賦上這段文本
  • 每一個cookie的大小通常是不會超過4KB，通常單個域名下設置的cookie最好不要超過20個，由於超過限制後，有可能就會被忽略
  • cookie包含如下幾方面的信息
    • cookie的名字
    • cookie的值
    • cookie的過時時間(expires)，若是咱們不設置默認是瀏覽器窗口關閉的時候過時
    • 所屬域名（默認是當前的域名）
    • 生效的路徑，默認是當前的路徑
  • 兩個網址只要域名相同，端口相同就能夠共享cookie，注意這裏是不要求協議相同的，也就是說http://example.com 和https://example.com是能夠貢獻cookie
• session
  • 存儲於服務器端的數據
• sessionStorage
  • 生命週期存在於標籤頁或窗口，用於本地存儲一個會話（session）中的數據，這些數據會隨着窗口或者標籤頁的關閉而被清空
• localStorage
  • 生命週期是永久的，除非用戶主動清除瀏覽器上存儲的 localStorage信息，不然它將會永久存在
  • Storage.length返回保存的數據項個數
  • Storage.setItem('key','value')方法用於存入數據。它接受兩個參數，第一個是鍵名，第二個是保存的數據。若是鍵名已經存在，該方法會更新已有的鍵值。該方法沒有返回值。注意點：這兩個參數都是字符串若是不是字符串會轉化爲字符串在存入瀏覽器
  • Storage.getItem()方法用於讀取數據。它只有一個參數，就是鍵名。若是鍵名不存在，該方法返回null
  • Storage.removeItem()方法用於清除某個鍵名對應的鍵值。它接受鍵名做爲參數，若是鍵名不存在，該方法不會作任何事情。
  • Storage.clear()方法用於清除全部保存的數據。該方法的返回值是undefined
  • Storage.key()接受一個整數做爲參數（從零開始），返回該位置對應的鍵值
  • Storage存儲的數據發生變化的時候，會觸發storage事件，咱們能夠指定這是事件指定的監聽函數window.addEventListener('storage', onStorageChange);
• cookie webStorage它們之間的區別：
  • 共同點：
    • 都是保存在瀏覽器端，且是同源的！
  • 不一樣點：
    • cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞；cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。
    • 而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。
    • 數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。
    • 做用域不一樣，sessionStorage不能在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。WebStorage的api接口使用更方便。

css經常使用的單位

• px:像素單位,計算機屏幕上一個點爲1px
• %: 百分比的形式
• rem:相對單位。相對於根元素 html 的 font-size，假如 html爲font-size:12px，那麼，在其當中的 div 設置爲 font-size: 2rem，就是當中的 div 爲 24px。
• em:相對單位。相對於父元素計算，假如某個 p元素爲font-size:12px，在它內部有個span標籤，設置 font-size: 2em，那麼，這時候的 span 字體大小爲：12 * 2 = 24px
• rpx: 微信小程序相對單位。1rpx = 屏幕寬度 / 750 px。在 750px 的設計稿上，1rpx = 1px

CSS基本知識

• 權重問題：!important -> 行內樣式 -> #id -> .class -> 元素和僞元素 -> * -> 繼承 -> 默認
• CSS3的新特性：
  • animate
  • transition
  • translate
  • gradient漸變屬性：background:linear-gradient(red,green);
  • resize:表示界面是否應該有用戶去調整大小

什麼是BFC

• 定義：Block Formatting Content 「塊級格式化上下文」，它是頁面的一塊渲染區域，有一套渲染規則決定了子元素如何佈局，以及和其餘元素之間的關係
• BFC的觸發條件：dispaly:inline-block; position:absolute/fixed;

js原型和原型鏈

• 面試題：面試題

• 實現原理圖

做用域和閉包

• ES5中只有函數做用域和全局做用域，在ES6中新增長了塊級做用域
• ES5模擬實現模塊化，核心思想是使用當即執行的函數。
• new關鍵字的實現原理
  • 建立一個空對象，做爲將要返回的對象實例
  • 把這個空對象的原型，指向構造函數的prototype屬性
  • 將這個空對象賦值給函數內部的this關鍵字
  • 開始執行構造函數內部的代碼
• 閉包作的做用：
  • 實現公有變量----->累加器
  • 實現對象的封裝----->封裝私有變量
  • 模塊發開發----->防止污染全局變量
• js代碼執行的三部曲：語法分析 預編譯 解釋執行
• 函數聲明---->總體提高，變量----->聲明提高，可是它們只能解決最基本的問題。重點仍是函數的預編譯環節
• 函數預編譯的步驟：
  • 建立AO或Go對象
  • 找形參和變量聲明，將形參和變量聲明賦值爲AO對象的屬性
  • 函數形參和實參相統一
  • 在函數體裏找函數聲明，賦值給AO對象的屬性

淺拷貝和深拷貝

• 只有數組和對象是須要深拷貝的，其他的數據類型淺拷貝徹底能夠實現，包括函數。

數組的去重

• 利用數組的的indexOf()方法實現去重
• 利用對象鍵值對的關係實現去重
• 利用ES6的Set數據結構和數組的擴展操做符實現

//set配合數組的擴展操做符的實現方式
let arr = [1,2,3,4,1,2,3,2,3,4,2,7,6,57,'hello','hello',0,0,0,0];
let set = new Set(arr);
console.log([...set]);
複製代碼

模塊化和組件化

• CommonJs：它是有node發揚光大，js也是正式進入模塊的開發思想中
• ES6中提出模塊化
  • 在ES6以前最主要的模塊加載方法就是：commonJS和AMD，commonJS使用與服務器，AMD使用與瀏覽器，ES6實現的模塊方案，徹底能夠替換commonJS和AMD，實現瀏覽器服務端通用的模塊解決方案。
  • ES6的模塊設計思想是儘可能的靜態化，在編譯的時候就能肯定各個模塊的依賴關係以及輸入和輸出的變量，而commonJS和AMD則是在運行的時候肯定這些
  • import具備提高的效果，它會默認提高到文件的最頂端
  • export default用來指定模塊的默認輸出，一個模塊只能有一個默認輸出，因此import後面纔是能夠不加{}，的
  • 跨模塊常量，能夠被多個文件引用對應的值，export const A = 1;//通常咱們使用大寫表示
  • import是靜態的加載，所以沒法實現Node.js的require方法，由於require是在運行是加載
  • ES6模塊和commonJS模塊的差別：
    • commonJS模塊輸出的是一個值的拷貝，而ES模塊是值的引用，也就是說在commonJS中一但輸出一個值，模塊內部的數據的變化就不會影響這個值

//require到底加載那個path，在編譯的時候是沒法知道的，只有在運行的時候才能知道加載的是那一個path，所以這給import形成了必定的障礙
//爲了解決這個問題最新的提案是引入import()函數，完成動態加載
const path = './' + fileName;
const myMoudle = require(path);
複製代碼

• 前端工程化:工程化是一種思想而不是某種技術,通俗一點就是：前端工程化就是用作工程的思惟看待和開發本身的項目
• 前端工程化中具體的包含了前端模塊化和前端組件化
• 模塊化的特色：
  • 避免變量污染和變量名衝突，由於每個模塊至關於就是一個當即執行的函數
  • 更好的分離，按需加載
  • 提升代碼的複用率
  • 提升代碼的維護性
  • 依賴關係的管理

異步加載js腳本

• 默認狀況下瀏覽器是同步加載js腳本的，可是這樣作最大的缺點就是若是某一個腳本長時間不能加載完，就會出現瀏覽器卡死的現象，這是很是很差的體驗效果，所以爲了解決這個問題咱們引入了異步加載的方式，async和defer,渲染引擎遇到就會直接跳過，直接執行後面的代碼
• async:一但下載完，渲染引擎就會中止，執行這個腳本，而後再開始渲染
• defer:要等到整個頁面在內存中渲染結束（DOM結構渲染完成，以及其餘腳本執行完成）纔會執行
• 而window.onload是在文檔加載完成後當即觸發，執行對應的函數。注意點：window.onload不能同時追加多個函數，一個script中只能有一個，若是出現多個後面的會覆蓋前面的

面向對象和麪向過程

防抖和節流

• 任務頻繁觸發的狀況下，只有任務觸發的間隔超過指定間隔的時候，任務纔會執行
• 參考資料
• 節流：指定的時間間隔內只會執行一次，和防抖仍是有必定區別的
• 重繪和迴流：
  • 當元素樣式的改變不影響佈局時，瀏覽器將使用重繪對元素進行更新，此時因爲只須要 UI 層面的從新像素繪製，所以損耗較少。
  • 迴流是指會影響佈局的狀況，對DOM的開銷是比較大的，迴流必定會引發重繪的，可是重繪不必定會引發迴流
  • 注意點:爲了不大量的迴流，所以咱們引入了防抖函數和節流函數儘量的去避免迴流帶來的開銷

瀏覽器解析url的具體過程

• DNS域名解析過程:DNS就是指域名系統，就是將咱們輸入的網址解析爲網址對應的IP地址

  

  • 用戶在瀏覽器地址欄輸入如：www.example.com的時候經歷了下面這些過程。
  • 瀏覽器先檢查自身緩存中有沒有被解析過的這個域名對應的ip地址，若是有，解析結束。同時域名被緩存的時間也可經過TTL屬性來設置。
  • 若是瀏覽器緩存中沒有，瀏覽器會檢查操做系統緩存中有沒有對應的已解析過的IP地址。而操做系統也有一個域名解析的過程。在windows中可經過c盤裏一個叫hosts的文件來設置，若是你在這裏指定了一個域名對應的ip地址，那瀏覽器會首先使用這個ip地址。
  • 若是至此尚未命中域名，纔會真正的請求本地域名服務器（LDNS）來解析這個域名，這臺域名服務器通常在你的城市的某個角落，距離你不會很遠，而且這臺服務器的性能都很好，通常都會緩存域名解析結果，大約80%的域名解析到這裏就完成了。
  • 若是本地域名服務器(LDNS)仍然沒有命中，就直接跳到根域名服務器(Root Server) 請求解析
  • 根域名服務器返回給LDNS一個所查詢的頂級域名服務器（gTLD Server，國際頂尖域名服務器，如.com .cn .org等）的地址
  • 本地服務器再向頂級域名服務器發起請求
  • 頂級域名服務器接受到請求後，查找並返回網站域名註冊所對應的域名服務器的地址。
  • 域名服務器會查找域名和IP地址對應的地址映射表，返回一個目標IP地址和一個TTL（time To Live）值
  • 本地服務器接受到IP地址和TTL值，進行緩存，緩存的時間有TTL控制
  • 本地域名服務器將解析的結果返回給用戶，用戶根據TTL值緩存在本地服務器中，此時域名解析過程結束
  • 注意點：TTL是IP協議包中的一個值，它告訴網絡數據包在網絡中的時間是否太長而被丟棄。目的仍是爲了加快域名的解析。
• TCP的三次握手：
  • 什麼是TCP：TCP是一種面向鏈接的、可靠的、基於字節流的傳輸層通訊協議。每一條TCP鏈接都有兩個端點，咱們把這種端點叫作套接字（socket），它的定義爲：端口號拼接到IP地址後面造成套 接字，例如：咱們的IP地址爲：192.168.1.1，端口號爲：80，那咱們獲得的套接字爲：192.168.1.1:80
  • TCP報文首部
    • 源端口和目的端口，各佔2個字節，分別寫入源端口和目的端口
    • 序號，佔4個字節，TCP鏈接中傳送的字節流中的每一個字節都按順序編號。例如，一段報文的 序號字段值是 301，而攜帶的數據共有100字段，顯然下一個報文段（若是還有的話）的數據 序號應該從401開始
    • 確認號，佔4個字節，用於對對方發來的TCP報文段的響應，其值爲收到的TCP報文段的序號值 加1。例如：B收到A發送過來的報文，其序列號字段爲501，而數據長度是200字節，這代表B 正確的接收到了A發送的到700位置的數據，所以B指望收到A的下一個數據序號是701，因而B 在發送給A的確認報文 中把確認號值爲701
    • 4位頭部長度：標誌該TCP頭部具備多長，單位爲字節(4字節)
    • 6位保留：表示保留從此使用
    • 6個標誌位：
      • 緊急URG：當URG = 1時，代表緊急指針字段有效。告訴系統此報文段中有緊急數據
      • 確認ACK：僅當ACK=1時，確認號字段纔有效。TCP規定，在鏈接創建後全部報文的傳輸都必須把ACK置1；
      • 推送PSH：推送PSH，當兩個應用進程進行交互式通訊時，有時在一端的應用進程但願在鍵入一個命令後當即就能收到對方的響應，這時候就將PSH=1；
      • 復位RST: 當RST=1，代表TCP鏈接中出現嚴重差錯，必須釋放鏈接，而後再從新創建鏈接
      • 同步SYN:在鏈接創建時用來同步序號。當SYN=1，ACK=0，代表是鏈接請求報文，若贊成鏈接，則響應報文中應該使SYN=1，ACK=1；
      • 終止FIN:表示通知對方要關閉鏈接(攜帶FIN標誌的TCP報文段爲結束報文段)
    • 窗口：佔2個字節，指通知接收方，發送此報文你須要多大的空間來接受
    • 校驗和：佔2個字節，校驗首部和數據這兩部分
    • 緊急指針：佔2字節，指出本報文中緊急數據的字節數
    • 選項信息：長度可變，定義一些其餘的可選的參數

      

  • 三次握手：
    • 第一次握手：起初客戶端和服務端都是處於close關閉轉態，client將標誌位SYN（報文首部同步位）置爲1，隨機產生一個seq（初始序列號）=x,並將該數據包發送給server,client進入SYN-SENT（同步已發送）狀態，等待server的確認
    • 第二次握手：server收到請求報文後，有SYN=1得知，client創建了鏈接，server將SYN和ACK都置爲1，ack = x + 1,隨機產生一個值seq = y,並將該數據包發送給client確認鏈接請求，server進入SYN—RCVD轉態，此時操做系統爲該TCP鏈接分配TCP緩存和變量
    • 第三次握手：client收到確認信息後，檢查seq是否爲x+1,ACK是否爲1，若是正確則將標誌位ACK置爲1，ack =y+1;而且此時操做系統爲該TCP鏈接分配TCP緩存和變量，並將該數據包發送給 Server，Server 檢查 ack 是否爲 y + 1，ACK 是否爲 1，若是正確則鏈接創建成功，Client 和 Server 進入 established 狀態，完成三次握手，隨後 Client 和 Server 就能夠開始傳輸數據。

• TCP鏈接的釋放（四次揮手）
  • 第一次揮手：客戶端發出鏈接釋放報文，而且中止發送數據，釋放數據報文首部，FIN=1，其序列號爲：seq=u，此時的客戶端進入FIN-WAit-1狀態
  • 第二次揮手：服務器收到鏈接釋放報文後，發送確認報文ACK=1，ack= u+1，而且帶上本身的序列號，此時服務端進入關閉等待狀態CLOSED-WAIT，此時服務端通知高層應用進程，此時客戶端到服務端的鏈接就釋放了，這是出於半關閉狀態，即客戶端已經沒有數據要發送了，可是服務端仍是能夠向服務客服端端發送數據的這個事件還要持續一段時間就是咱們的CLOSE-WAiT
  • 第三次揮手：服務端將最後的數據發送完畢後，向客戶端發送連接釋放報文，FIN=1，ack=u + 1,因爲在半關閉狀態，服務器極可能有發送了一些數據，等數據發送完畢以後，服務器進入最後確認轉態，等待客戶端的確認，
  • 第四次揮手：客戶端收到服務器的釋放報文後必須向服務器發出ACK=1，ack = w + 1,本身的序列號是seq= w+ 1,此時的客戶端進入了事件等待轉態，注意:此時的TCP鏈接仍是沒有斷開，必須通過2 * MSL(最長報文段壽命)後斷開鏈接，此時客戶端才進入CLOSED狀態
  • 服務端收到客戶端發的確認信息後當即進入CLOSED狀態，能夠看到服務端結束TCP的時間要比客服端早

    

  • 爲何客戶端最後還要等待2MSL？
    • 保證客戶端發送的最後一個ACK報文可以到達服務器，由於這個ACK報文可能丟失
    • 站在服務器的角度看來，我已經發送了FIN+ACK報文請求斷開了，客戶端尚未給我回應，應該是我發送的請求斷開報文它沒有收到，因而服務器又會從新發送一次

ES6

• let const var它們之間的區別
• 變量的解構賦值
• 字符串的擴展
• 數值的擴展
• 函數的擴展
• 數組的擴展
• 對象的擴展
• Symbol
• Set和Map數據結構
• Promise
• async和await
• Class的繼承
• Module的語法和Module的加載實現
• 編程風格

Vue

• MVVM
• vue的聲明週期
  • 聲明週期參考案例
  • diff算法
• 雙向數據綁定
• virtual DOM
• template編譯
• nextTick
• 父子組件的通訊
• 兄弟組件之間的通訊
• keep-alive:keep-alive是vue內置的一個組件，能夠在切換組件的時候將狀態保存在內存中，避免從新渲染DOM，它是一個抽象組件，自身是不會渲染成DOM
• vue-router
• VueX
• vue中的跨域解決：使用代理的方式在config/index.js中配置

proxyTable: { 
  '/api': {  //使用"/api"來代替"http://f.apiplus.cn" 
    target: 'http://f.apiplus.cn', //源地址 
    changeOrigin: true, //改變源，容許跨域 
    pathRewrite: { 
      '^/api': '' //路徑重寫，能夠理解成 用/api代替target的地址
      } 
  } 
}
複製代碼

瀏覽器相關的知識

網絡協議

• 網絡的分層
  • OSI的七層：物理層、數據鏈路層、網絡層、傳輸層、會話層、表示層、應用層
  • TCP/Ip的四層協議（一般咱們都是按照五層劃分的）：物理層、數據鏈路層、網絡層、傳輸層、應用層
• HTTP和HTTPS
  • HTTP傳輸的數據都是未加密的，也就是明文傳輸，傳入隱私信息是很是不安全的
  • HTTPS：是以安全爲目標的傳輸通道。是在HTTP下加入SSL層實現的，SSL：指安全套階層，是爲網絡通訊傳輸安全和數據安全傳輸的一種安全協議
• HTTP狀態碼
  • 100開頭的：指示信息，表示信息已接收
  • 200開頭的：請求成功。
  • 300開頭的：請求重定向。
  • 400開頭的：請求錯誤,也就是服務器徹底解析不了這個路徑。
  • 500開頭的：服務器錯，服務器解析了這個路徑，可是在解析過程當中出現了錯誤。
• 常見的HTTP請求字段
  • referrer:用於指定該請求是從哪一個頁面跳轉來的，常被用於分析用戶來源，
  • referrer-policy取值爲：no-referrer-when-downgrade表示 當發生降級（好比從 https:// 跳轉到 http:// ）時，不傳遞 Referrer 報頭。可是反過來的話不受影響。一般也會看成瀏覽器的默認安全策略。
  • HTTP具體的一些參考
  • content-Encoding: Gzip表示服務器使用了Gzip的壓縮方式，目的也是爲了優化性能

性能優化

• 網絡方面：減小http請求（合併js文件、合併css文件、css sprite、使用base64表示簡單的圖片，字體圖標）
• 減小資源的體積：gzip壓縮（主要是針對HTML的）js混淆（主要是刪除代碼中的空格）、醜化（將js中的變量名用簡單的變量名代替）、css壓縮、圖片壓縮。這些事情在如今的前端開發中通通交給webpack幫咱們處理。
• 緩存：DNS緩存、CDN部署與緩存(這個是很是重要的)、http緩存。
• 渲染和DOM方面：HTML結構不要濫用標籤， CSS文件通常放在HTML文件頭部，JS採用異步加載的方式，儘可能避免直接操做DOM，虛擬DOM就是很好的解決方案。
• 數據方面：
  • 圖片加載處理：圖片預加載和圖片懶加載，首屏進度條的提示
  • 異步請求的優化：使用正常的json數據格式進行交互、部分經常使用數據的緩存、數據埋點和統計、合理的使用webworker給js建立多線程環境

基礎算法

視口適配問題

跨域問題

• 同源政策
  • 目的：保證用戶的信息安全和防止惡意的網站竊取信息
  • 同源政策的限制：
    • 沒法獲取非同源下的cookie localStorage IndexedDB
    • 沒法接觸非同源網頁的DOM
    • 沒法向非同源網頁發送ajax請求，注意是能夠發送的可是會被瀏覽器拒絕
• 跨域的幾種解決方式
  • jsonp
    • 原理：網頁經過添加一個script標籤，向服務器請求json數據，這種方法不受同源政策的限制，服務器接受到請求後，將數據放在一個指定的回調函數中傳回客服端，核心就是客戶端傳 遞一個callback函數給服務器
  • 動態script腳本的方式
    • 原理：動態腳本的方式和jsonp的方式有點像，只不過這個script標籤是咱們本身寫的
  • 基於jquery的跨域：jquery已經幫咱們把跨域封裝到了ajax方法上面，咱們能夠直接方便的使用，咱們只需將ajax傳入的對象中設置datatype:'jsonp',而後爲jsonpCallback:指定一個函數
  • 基於iframe的跨子域實現原理：主要是經過document.domain實現的，兩個頁面都經過強制的設置document.domain爲基礎主域
  • window.name + iframe實現跨域
  • WebSocket:WebSocket是一種全雙工通訊協議，同時也容許跨域通訊，經過ws://(非加密)或者wss://(加密)做爲協議前綴，該協議不實行同源政策，只要服務器支持就能夠實現跨域資源請求，裏面有一個很是重要的字段origin：表示請求源發自那個域名
  • CORS（跨域資源分享）：是W3C的標準，屬於跨域ajax請求的根本解決方式，相比json只能發個get請求，CORS容許任何類型的請求，瀏覽器默認是實現了CORS,只要咱們確保服務器端是實現了CROS的接口便可
    • 解決的問題：它容許瀏覽器向跨域的服務器發出XMLHttpRequest請求，從而克服了ajax只能同源請求的限制
    • 實現CORS的關鍵在服務器實現CROS的接口，就能夠實現通訊，客服端瀏覽器會默認加進去的不須要咱們處理
    • CORS請求分爲兩類：簡單請求和非簡單請求
    • 只要同時知足下面兩個條件就屬於簡單請求
      • 請求條件是GET POST HEAD
      • http的信息頭不超過規定的幾種，具體查文檔實現
  • Node.js中間件代理跨域：node + express + http-proxy-middleware