前端為什么非要動靜分離 說一下CDN托管的意義

大型Web應用對速度的追求并沒有止步于僅僅利用瀏覽器緩存,因為瀏覽器緩存始終只是為了提升二次訪問的速度,對于首次訪問的加速,我們需要從網絡層面進行優化,最常見的手段就是CDN(Content Delivery Network,內容分發網絡)加速。通過將靜態資源緩存到離用戶很近的相同網絡運營商的CDN節點上,不但能提升用戶的訪問速度,還能節省服務器的帶寬消耗,降低負載。

技術分享
遍布全國的CDN節點和內容源示意圖

  不同地區的用戶會訪問到離自己最近的相同網絡線路上的CDN節點,當請求達到CDN節點后,節點會判斷自己的內容緩存是否有效,如果有效,則立即響應緩存內容給用戶,從而加快響應速度。如果CDN節點的緩存失效,它會根據服務配置去我們的內容源服務器獲取最新的資源響應給用戶,并將內容緩存下來以便響應給后續訪問的用戶。因此,一個地區內只要有一個用戶先加載資源,在CDN中建立了緩存,該地區的其他后續用戶都能因此而受益。

技術分享
使用CDN緩存技術加速網絡訪問速度

  如上圖所示,之所以不同地區的用戶訪問同一個域名卻能得到不同CDN節點的IP地址,這要依賴于CDN服務商提供的智能域名解析服務,瀏覽器發起域名查詢時,這種智能DNS服務會根據用戶IP計算并返回離它最近的同網絡CDN節點IP,引導瀏覽器與此節點建立連接以獲取資源。

  結合上述兩點,為了使用CDN網絡緩存,我們至少要對靜態資源的部署做兩項改變:

    1、將靜態資源部署到不同網絡線路的服務器中,以加速對應網絡中CDN節點無緩存時溯源的速度。

    2、加載靜態資源時使用與頁面不同的域名,一方面是便于接入為CDN而設置的智能DNS解析服務,另一方面因為靜態資源和主頁面不同域,這樣加載資源的HTTP請求就不會帶上主頁面中的Cookie等數據,較少了數據傳輸量,又進一步加快網絡訪問。

  CDN服務基本上已經成為現代大型Web應用的標配,這項技術“幾乎”是一種對開發透明的網絡性能優化手段,使用它的理由很充分,但是這里既然強調了“幾乎透明”而不是“完全透明”,是因為使用CDN服務所需要的兩項改變對前端工程產生了一定的影響,而這些影響我在之前的文章中已經介紹了,就是前端工程必須引入非覆蓋式發布的根本原因。

  技術分享
  前端工程多米諾骨牌

  上圖向大家展示了整個前端靜態資源緩存技術所帶來的連鎖性工程問題。很多人不理解為什么要選擇FIS,而不是grunt,從本質上來說,工具并么有什么差異,只是fis的設計出發點是以上這些工程問題,設計中優先考慮了現代互聯網應用是如何進行工程化部署與開發的,面臨的問題是哪些,基于這些問題,要怎么解決。

  比如我們在上圖中可以看到,整個靜態資源緩存技術的最終影響的節點是前端靜態資源定位問題,而且前端資源定位又會進一步影響到開發,包括代碼中的模塊化加載、各種資源加載等。所以fis的設計核心之一就是資源定位。比如fis的核心配置roadmap,其目的就是為了解決在前端代碼中的所有資源定位問題,連接開發和部署規范:

  技術分享

  此外,fis的靜態資源表生成功能也是為了給模塊化框架提供加載部署到其他域名下的路徑中md5戳的資源部署路徑,并建立資源之間的依賴關系。

至于文件壓縮之類的功能,那只是工具問題,而非工程問題。

?

原文地址:https://div.io/topic/930

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370142.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370142.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370142.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

unity語音聊天之 www.GetAudioClip

最近在開發語音聊天功能,游戲需要跨平臺安卓與ios,上傳本地錄制的wav文件至服務器后,需要根據服務器返回的地址進行語音文件的下載并進行播放。 這里通過使用www進行下載并播放 其中在ios播放時卻不行了,查詢官方文檔后發現,ios必…

輕談BFC

BFC 定義 CSS2.1的定義 Block formatting contexts 9.4.1 Block formatting contexts Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with overflow other …

Java中的Selenium / WebDriver示例

幾年前,我正在忙于一些工作,客戶希望了解如何解決現實世界中的問題。 他們要求我自動化woot.com網站上的某些任務。 他們的任務是訪問各個網站,并閱讀當天商品的名稱和價格。 我寫了一些Selenium代碼,以為可以將其張貼在這里&am…

c語言中怎樣實現空格的替換,C語言實現去除字符串中空格的簡單實例

在網上看了些去除空格的代碼,覺得都不是很簡潔,就自己寫代碼實現它本著高效率,不使用額外存儲空間的想法實現該功能去除空格一共有三種:1、去除全部空格;2、一種是去除左邊空格;3、去除右邊空格想去除左右兩邊空格,只要先去除左邊…

python消息隊列中間件_python-RabbtiMQ消息隊列

1.RabbitMQ簡介AMQP,即Advanced Message Queuing Protocol,高級消息隊列協議,是應用層協議的一個開放標準,為面向消息的中間件設計。消息中間件主要用于組件之間的解耦,消息的發送者無需知道消息使用者的存在&#xff…

CSS position(定位)屬性

關于CSS position,來自MDN的描述: CSS position屬性用于指定一個元素在文檔中的定位方式。top、right、bottom、left 屬性則決定了該元素的最終位置。 然后來看看什么是文檔流(normal flow),下面是 www.w3.org 的描述: Normal flo…

tomcat配置文件server.xml詳解

版權聲明:本文為博主原創文章,未經博主允許不得轉載。 目錄(?)[] 元素名 屬性 解釋 server port 指定一個端口,這個端口負責監聽關閉tomcat 的請求 shutdown 指定向端口發送的命令字符串 service name 指定service 的名字 Con…

均值,方差,協方差,協方差矩陣,特征值,特征向量

大牛博客,收藏一下 http://blog.csdn.net/yangleo1987/article/details/52845912轉載于:https://www.cnblogs.com/gaohai/p/8086626.html

Java ByteBuffer –速成課程

以我的經驗,當開發人員第一次遇到java.nio.ByteBuffer時,會引起混亂和細微的錯誤,因為如何正確使用它尚不明顯。 在我對API文檔感到滿意之前,需要反復閱讀API文檔和一些經驗以實現一些微妙之處。 這篇文章是關于如何正確使用它們的…

c語言cth三角函數表示,三角函數與雙曲函數基本公式對照表

圓函數(三角函數)1.基本性質:sin tan cos x x x ,cos cot sin xx x 1sec cos x x ,1csc sin x x tan cot 1x x sin csc 1x x sec cos 1x x 22sin cos 1x x 221tan sec x x ,221cot csc x x 2.奇偶性:sin()sin x x -- cos()cos x x - tan()tan x x --3.…

實現編輯功能有哪幾個action_Web 應用的撤銷重做實現

背景前不久,我參與開發了團隊中的一個 web 應用,其中的一個頁面操作如下圖所示:GIF這個制作間頁面有著類似 PPT 的交互:從左側的工具欄中選擇元素放入中間的畫布、在畫布中可以刪除、操作(拖動、縮放、旋轉等&#xff…

為什么我們要做三份 Webpack 配置文件

時至今日,Webpack 已經成為前端工程必備的基礎工具之一,不僅被廣泛用于前端工程發布前的打包,還在開發中擔當本地前端資源服務器(assets server)、模塊熱更新(hot module replacement)、API Pro…

使用maven插件構建docker鏡像

為什么要用插件 主要還是自動化的考慮,如果額外使用Dockerfile進行鏡像生成,可能會需要自己手動指定jar/war位置,并且打包和生成鏡像間不同步,帶來很多瑣碎的工作。 插件選擇 使用比較多的是spotify的插件:https://github.com/spo…

windows下如何安裝pip以及如何查看pip是否已經安裝成功?

最近剛學習python,發現很多關于安裝以及查看pip是否安裝成的例子都比較老,不太適合于現在(python 3.6 )因此,下一個入門級別的教程。 0:首先如何安裝python我就不做介紹了。 1:如果安裝的是pyth…

檢查用戶顯示器的分辨率

檢查用戶顯示器的分辨率 轉載于:https://www.cnblogs.com/Renyi-Fan/p/8088012.html

android 字體 dpi,詳解Android開發中常用的 DPI / DP / SP

Android的碎片化已經被噴了好多年,隨著國內手機廠商的崛起,碎片化也越來越嚴重,根據OpenSignal的最新調查,2014年市面上有18796種不同的Android設備,作為開發者,一個無法回避的難題就是需要適配各種各樣奇奇…

android studio閃退代碼不報錯_代碼不報錯,不代表真的沒錯

今天是生信星球陪你的第695天大神一句話,菜鳥跑半年。我不是大神,但我可以縮短你走彎路的半年~就像歌兒唱的那樣,如果你不知道該往哪兒走,就留在這學點生信好不好~這里有豆豆和花花的學習歷程,從新手到進階&#xff0c…

Centos7操作系統部署指南

一、硬件環境: Dell R620 二、軟件環境: Centos6.4 X86_64 KVM Windows7vnc 三、安裝說明 操作系統更新之迅速,讓作為新手的系統運維人員有點措手不及,相對于老手就胸有成竹。怎么講?由于老手對技術方向把握的非常好&…

Eclipse插件中的SLF4J登錄

一直都在使用Maven和純Java庫進行開發,我從沒想過在開發Eclipse插件時發出一些日志語句可能會成為問題。 但是,在Eclipse開發人員的想象中,一切似乎總是在Eclipse環境中,而Eclipse宇宙之外則什么都沒有。 如果您使用Google搜索上…

CSS(四)

css元素溢出 當子元素的尺寸超過父元素的尺寸時,需要設置父元素顯示溢出的子元素的方式,設置的方法是通過overflow屬性來設置。 overflow的設置項: 1、visible 默認值。內容不會被修剪,會呈現在元素框之外。2、hidden 內容會被修…