網易財經web前端開發方法是什么

本篇內容介紹了“網易財經web前端開發方法是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1、Make Fewer HTTP Requests 

眾所周知，http請求是要開銷的，減少請求數可以提高網頁加載速度。常用的方法，合并css，js以及 Image maps和css sprites等。筆者所在團隊的做法是根據功能分開開發，然后通過內部系統對js，css進行分組合并，這樣對于瀏覽器來說是一個請求，但是開發時仍然能還原成多個，方便管理和重復引用。值得一提的是，網易內部的前端代碼發布系統是很值得學習、借鑒的，對于fiddler調試和性能優化工作很是方便，這里不方便透露更多，有興趣的單獨聊，哈。而css sprites是指只用將頁面上的背景圖合并成一張，然后通過background-position來取背景。這里筆者并不提倡看到像圖片的都用圖片來處理，就該項目的

這些部分，都是通過css實現的。作為程序猿，新技術我們要及時掌握并加以運用，尤其是所謂的大公司，更要有這種氣魄，不要因為某些***的瀏覽器不兼容而放棄，慶幸的是，我們領導也很認同，哈哈～～

2、Use a Content Delivery Network (CDN 內容分發網絡)

簡單地講，通過在現有的Internet中增加一層新的網絡架構，將網站的內容發布到最接近用戶的 cache服務器內，通過DNS負載均衡(可選根據時間或訪問速度來決定訪問哪臺服務器資源，筆者剛到不久，沒有深入去研究公司這部分底層)的技術，判斷用戶來源訪問cache服務器取得所需的內容。這樣可以有效減少數據在網絡上傳輸的時間，提高速度。相信這個很多公司都有做，這里就不多說了。

3、Add an Expires Header

4、Gzip Components

當然，這幾部分內容后端幫我們完成了，3主要通過服務器端腳本設置Cache-Control和Expires完成；Gzip的思想就是把文件先在服務器端進行壓縮，然后再傳輸。這個壓縮率很高，基本上可以壓縮到原來的1/4。筆者過去是phper，所以對這塊也略知一二，對于前端攻城獅，我們還是有必要了解這塊的內容。

5、Put Stylesheets at the Top

我們知道，css，Cascading Style Sheets (層疊樣式表)。層疊即意味后面的css可以覆蓋前面的css，級別高的css可以覆蓋級別低的css。。ie，firefox等瀏覽器在css全部傳輸完全之前不會去渲染任何的東西。很多瀏覽器下，如IE，把樣式表放在頁面的底部的問題在于它禁止了網頁內容的順序顯示。瀏覽器阻止顯示以免重畫頁面元素，那用戶只能看到空白頁了。Firefox不會阻止顯示，但這意味著當樣式表下載后，有些頁面元素可能需要重畫，這導致閃爍問題。所以我們應該盡快讓css加載完畢。實際上很多網站也是這么做的，當然有需要分屏顯示的網站，為了讓用戶看到的首屏頁面盡快顯示，也可以分開放置，當然，這里要根據具體項目需求來討論了。實際上筆者該項目也分了三個css文件，比如說是延時顯示的廣告，我們為了提高css加載速度，也獨立出來了放在頁面的底部。

6、Put Scripts at the Bottom

原因：首先，防止script腳本的執行阻塞頁面的下載。在頁面loading的過程中，當瀏覽器讀到js執行語句的時候一定會把它全部解釋完畢后在會接下來讀下面的內容。瀏覽器這么做的邏輯是因為js隨時可能執行 location.href或是其他可能完全中斷此頁面過程的函數，即如此，當然得等他執行完畢之后再加載咯。所以放在頁面***，可以有效減少頁面可視元素的加載時間。其次，腳本引起的第二個問題是它阻塞并行下載數量。HTTP/1.1規范建議瀏覽器每個主機的并行下載數不超過2個（IE只能為2個，其他瀏覽器如ff等都是默認設置為2個，不過新出的ie8可以達6個）。因此如果您把圖像文件分布到多臺機器的話，您可以達到超過2個的并行下載。但是當腳本文件下載時，瀏覽器不會啟動其他的并行下載。

7、Avoid CSS Expressions

盡量減少或者不使用css表達式，其實大部分可以用js實現。

8、Make JavaScript and CSS External

把css和js寫在頁面內容可以減少2次請求，但也增大了頁面的大小。我們的網站已經對靜態文件做了緩存，那也就沒有2次多余的http請求了。

9、Reduce DNS Lookups

一次DNS的解析過程會消耗20-120毫秒的時間,在dns查詢結束之前，瀏覽器不會下載該域名下的任何東西。所以減少dns查詢的時間可以加快頁面的加載速度。yahoo的建議一個頁面所包含的域名數盡量控制在2-4個。這就需要對頁面整體有一個很好的規劃。目前我們這點做的不好，尤其是對于單純靠廣州收入的網站，很多廣告投放系統拖累了我們，前端攻城獅們也無可奈何。

10、Minify JavaScript

壓縮js和css的作用很顯然，減少頁面字節數。我們的前端部門，也有專門做后端的，為的是給前端開發提供工具，快速開發。Js雖然壓縮了，降低了可讀性，但是在調試的時候，工具可以將其復原，也就是調用本地的，這里做法應該贊一個，哈～～～

11、Avoid Redirects

重定向是需要消耗時間的。當然這只是一個例子，發生重定向的原因很多，比如跳轉后面缺少 /等，有興趣的可以去研究研究。

12、Remove Duplicate Scripts 

13、Configure ETags

14、Make Ajax Cacheable

這幾個就不一一細講了。

再有就是講一下seo方面的問題。

1、標簽語義化。提供給搜索引擎友好的提示，使得每個html標簽都有它自己的含義和作用，使爬蟲理解你寫那個到底是個啥玩意。比如這里

我們的網易財經這幾個文字，其實是沒展示在頁面中的，但是我們實際上代碼是有寫的，然后用樣式使其隱藏起來。再如：

幻燈片的切換，可能這里的數字沒有實際性的作用，而且也根本無需顯示在頁面中，很多時候我們就忽略不寫了，寫了反而還要使其文字不出現在頁面中(比如設置text-indent值為負的)。其實不然，我覺得我們是有必要寫上去的，這樣別人(或機器)能方便的理解我們的真實意圖了。這里不得不提的是，筆者該項目有些地方卻故意跟標簽語義化做對，比如這里：

沒見過后面跟_ntesquote_這樣的標簽的吧，其實該頁面存在大篇幅的這樣的標簽，為的是js統一獲取該標簽，一次性發送請求，獲取異步數據，減少后端負荷。

2、權重控制。搜索引擎會根據我們設置的頁面權重來劃分頁面重點，比如，h2~h7吧，其權重依次遞減，一般h2是頁面中重要的元素，這里可以設置為網站的logo或其說明文字，但不宜過多，太多了，搜索引擎就不知道該頁面到底哪個是重要的了。

“網易財經web前端開發方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！