A. Web前端入門知識之Web前端性能優化
今天小編要跟大家分享的文章是關於Web前端入門知識之Web前端性能優化。性能優化一直以來都是前端工程領域中的一個重要部分。很多資料表明，網站應用的性能優化對於提高用戶留存、轉化率等都有積極影響。可以理解為，提升你的網站性能，就是提升你的業務數據(甚至是業務收入)。
性能優化廣義上包含前端優化和後端優化。後端優化的關注點更多的時候是在增加資源利用率、降低資源成本以及提高穩定性上。相較於後端，前端的性能優化會更直接與用戶的體驗掛鉤。從用戶體驗側來說，前端服務
5s的載入時間優化縮減80%(1s)與後端服務50ms的響應優化縮減80%(10ms)
相比，用戶的體驗提升會更大。因此很多時候，與體驗相關的性能的瓶頸會出現在前端。
作為前端工程師，大家其實都具備一定的性能優化意識，同時也有自己的優化「武器庫」，例如懶載入、資源合並、避免reflow
等等。雖然大家對性能優化都有自己的思路，不過大多是分散在某幾個點，較難形成一個完整的體系。下面來和小編一起看一看web前端性能優化該怎麼做。
一、html文檔結構標簽語義化
1、首先什麼是語義化呢?
語義化是指用合理HTML標記以及其特有的屬性去格式化文檔內容。機器在需要更少的人類干預的情況下能夠研究和收集信息,讓網頁能夠被機器理解,最終讓人類受益。即用正確的標簽做正確的事。
2、語義化的好處或者說存在的意義
①有利於搜索引擎抓取
②結構清晰的HTML在團隊合作中的作用：代碼可讀、便於維護、提高開發效率、快速達成共識、利於二次開發。
③有利於盲人屏幕閱讀器
二、css、js文件數量及大小
優化一般對於css、js是建議使用外聯式來進行導入。我們可以對css、js做相應的規劃也可以減少css、js的個數以減少http請求。同時也要注重減少重復代碼，注重代碼重復利用，以達到用最少的代碼干最多的事。同時當項目要投入上線使用的時候，可以對css、js文件進行壓縮，文件的減小可以加速文件的鏈接導入，以便加速網頁的載入渲染。
可通過使用webpack，gulp等工具對Js文件進行合並。
三、圖片的數量和大小
多個伺服器請求會對站點的性能產生顯著的影響。對一張圖片進行導入又是一個http請求，因此我們應該減少圖片的導入數量以便減少http請求。此處，我們必須提到一個名詞「css精靈spirit」。css精靈是指包含多個不同的圖標、按鈕或圖形的單個圖像。因此我們可以把多張背景圖片合並為一張然後對背景圖片進行相應的定位。同時使用PNG8格式的圖片相對於GIF來說比較少。而對於內容圖片，可以對其進行適當的壓縮，可以加快文檔內容載入，或者如果是需要用戶下載的圖片，小的圖片可以加快用戶下載的速度。
使用較為廣泛的web圖片格式有：JPEG/JPG、PNG、WEBP、Base64、SVG。
1.JPEG/JPG
特點是有損壓縮，體積小，載入快，不支持透明。
使用場景：JPG適合用於呈現熱菜豐富的圖片，在日常的開發中，JPG圖片經常作為大的背景圖、輪播圖或是Banner圖。比如兩大電商網站對大圖片的處理，就是對JPG圖片應用場景的最佳寫照。用JPG來呈現大圖片，既可以保留圖片的質量，又不會擔心圖片的體積，是一種比較廣泛使用的方案。
缺點：在處理一些矢量圖形和logo等這些線條感很強、顏色對比強烈的圖片時，認為壓縮就導致圖片模糊非常明顯。另外，JPG圖像不支持透明度處理，透明圖片只能用PNG來呈現了。
2.PNG-8和PNG-24
特點是無損壓縮、質量高、體積大、支持透明
優點：無損壓縮的高保真圖片格式。8和24都是二進制數的位數，8位的PNG支持256中顏色，24位的PNG可以支持1600萬種顏色。在不考慮文件大小隻在乎最佳的顯示效果時，推薦使用PNG-24。但是在適合使用PNG時會優先選擇PNG-8
應用場景：主要用PNG來呈現小的LOGO、顏色簡單對比強烈的圖片或是背景。
3.SVG
特點是文本文件，體積小，不失真，兼容性好
優點：SVG是一種基於XML語法的圖像格式。SVG對圖像的處理不是基於像素，而是基於對圖像的形狀描述。
和JPG、PNG相比較，SVG文件體積更小，可壓縮性更強。SVG作為矢量圖最大的優點在於圖片可以無限放大還不失真，一張SVG圖片可以適配多種解析度。另外SVG是文本文件，可以像寫代碼一樣定義SVG，放在HTML中稱為DOM的一部分。也可以把對圖像的描述寫入以.svg為後綴的文件中，在img標簽中引入即可。
4.WebP
優點：WebP是一款比JPG、PNG等在壓縮方面更加優越的圖片格式，同時也不會影響其圖片質量，使用該格式時最好將同名文件格式化，當檢測瀏覽器不兼容時自動切換jpg格式
缺點：是一個相對較新的技術，所以對於目前市面上的瀏覽器能否完美的兼容，其可用和實用性就變得很現實了，再好的東西如果沒有好的兼容性，也是非常難以普及和被廣泛使用的
5.Base64
優點：減少請求，加快首屏數據顯示。對於jpg格式的圖片，每一個圖片相當於一次http請求，圖片多了的話，伺服器耗性能比較嚴重。而將jpg轉化成base64格式的圖片，則極大地減少了請求數，因為Base是文本格式。
缺點：base64格式圖片比原圖大，佔用更多存儲空間，同時，瀏覽器不會對該資源緩存。
使用方法：background:url(data:image/png;base64,{img_data})
應用場景：一般對於小於10KB大小的圖片進行base64轉碼。
至於動態圖有GIF與APNG：後者APNG這東西是mozilla搞出來的，
它是24位的，而且也是動圖，可以容納1680萬種顏色，也是為了取代GIF，但是....也就火狐支持，IE10和chrome，safari全部不行，
如果說gif圖片是卡片機的話，APNG就是單反
四、有效性驗證
除了根據語義加標記之外，HTML文檔還需要用有效的代碼來編寫，如果代碼是無效的，瀏覽器會嘗試解釋標記本身，有時候會產生錯誤的結果。更糟的是，如果發送具有正確的MIME類型的XHTML文檔，理解XML的瀏覽器將不顯示無效的頁面。因為瀏覽器需要知道要使用什麼DTD(文檔類型定義)才能正確地處理頁面，所以對頁面進行有效性驗證要求有DOCTYPE聲明。
有效性驗證工具徑：
①
W3C驗證器(bookmarklet)，這是一小段可以存儲在瀏覽器的書簽或收藏夾中的Javascript。單擊這個書簽就會觸發Javascript動作。
②可以訪問http://validator.w3.org/，通過輸入自己的URL來對自己的站點來進行在線驗證。
③使用firefox瀏覽器的可以下載插件FirefoxWebDeveloperExtension
五、雅虎的Web優化最佳實踐
1、內容優化
①盡量減少HTTP請求：常見方法包括合並多個CSS文件和JavaScript文件，利用CSSSprites整合圖像，Image
map(圖像中不同的區域設置不同的鏈接)，內聯圖象(使用data:URLscheme在實際的頁面嵌入圖像數據)等。
②減少DNS查找，一般dns查找需要花費20-120ms，Windows的DNS緩存，可以通過ipconfig/displaydns
這個命令來查看。
③避免重定向
④使Ajax可緩存
⑤延遲載入組件：考慮哪些內容是頁面呈現時所必需首先載入的、哪些內容和結構可以稍後再載入，根據這個優先順序進行設定。
⑥
預載入組件：預載入是在瀏覽器空閑時請求將來可能會用到的頁面內容(如圖像、樣式表和腳本)。當用戶要訪問下一個頁面時，頁面中的內容大部分已經載入到緩存中了，因此可以大大改善訪問速度。
⑦減少DOM元素數量：頁面中存在大量DOM元素，會導致JavaScript遍歷DOM的效率變慢。
⑧根據域名劃分頁面內容：把頁面內容劃分成若幹部分可以使你最大限度地實現平行下載。但要確保你使用的域名數量在2個到4個之間(否則與第2條沖突)。
⑨最小化iframe的數量：iframes
提供了一個簡單的方式把一個網站的內容嵌入到另一個網站中。但其創建速度比其他包括JavaScript和CSS的DOM元素的創建慢了1-2個數量級。
⑩
避免404：HTTP請求時間消耗是很大的，因此使用HTTP請求來獲得一個沒有用處的響應(例如404沒有找到頁面)是完全沒有必要的，它只會降低用戶體驗而不會有一點好處。
2、伺服器優化
①使用內容分發網路(CDN)：把你的網站內容分散到多個、處於不同地域位置的伺服器上可以加快下載速度。
添加Expires或Cache-Control信息頭：對於靜態內容，可設置文件頭過期時間Expires的值為「Never
expire(永不過期)」;對於動態內容，可使用恰當的Cache-Control文件頭來幫助瀏覽器進行有條件的請求。
②Gzip壓縮
③設置ETag：ETags(Entity
tags，實體標簽)是web伺服器和瀏覽器用於判斷瀏覽器緩存中的內容和伺服器中的原始內容是否匹配的一種機制。
④
提前刷新緩沖區：當用戶請求一個頁面時，伺服器會花費200到500毫秒用於後台組織HTML文件。在這期間，瀏覽器會一直空閑等待數據返回。在PHP中，可以使用flush()方法，它允許你把已經編譯的好的部分HTML響應文件先發送給瀏覽器，這時瀏覽器就會可以下載文件中的內容(腳本等)而後台同⑤時處理剩餘的HTML頁面。
⑥
對Ajax請求使用GET方法：當使用XMLHttpRequest時，瀏覽器中的POST方法會首先發送文件頭，然後才發送數據。因此使用GET最為恰當。
⑦避免空的圖像src
3、Cookie優化
①減小cookie大小：去除不必要的coockie，並使coockie體積盡量小以減少對用戶響應的影響
②
針對Web組件使用域名無關的Cookie：對靜態組件的Cookie讀取是一種浪費，使用另一個無Cookie的域名來存放靜態組件是一個好方法，或者也可以在Cookie中只存放帶www的域名。
4、CSS優化
①將CSS代碼放在HTML頁面的頂部
②避免使用CSS表達式：CSS表達式在執行時候的運算量非常大，會對頁面性能產生大的影響
③使用來代替@import
④避免使用Filters：IE獨有屬性AlphaImageLoader用於修正IE
7以下版本中PNG圖片的半透明效果，但它的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。
5、JavaScript優化
①將JavaScript腳本放在頁面的底部
②
將JavaScript和CSS作為外部文件來引用：在實際應用中使用外部文件可以提高頁面速度，因為JavaScript和CSS文件都能在瀏覽器中產生緩存。
③縮小JavaScript和CSS
④刪除重復的腳本
⑤最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢
⑥開發智能的事件處理程序
6、圖像優化
①優化圖片大小
②通過CSSSprites優化圖片
③不要在HTML中使用縮放圖片
④favicon.ico要小而且可緩存
7、針對移動優化
①保持組件大小在25KB以下：主要是因為iPhone不能緩存大於25K的文件(注意這里指的是解壓縮後的大小)。
②將組件打包成為一個復合文檔：把頁面內容打包成復合文本就如同帶有多附件的Email，它能夠使你在一個HTTP請求中獲取多個組件。
以上就是小編今天為大家分享的關於Web前端入門知識之Web前端性能優化的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工作順利。
B. 前端項目的開發流程
前端開發流程概述
前端開發流程可分為需求分析、開發階段、測試階段、維護階段，下面分別進行敘述。
2.1 需求分析
這個環節中，首先是和客戶進行交流，了解客戶的需求，然後分析項目的可行性，撰寫項目需求文檔。如果項目可行，則起討論具體方案，分模塊分步驟進行規劃，分析項目進度安排、所需成本，進行原型設計（包括頁面布局圖，頁面邏輯流程圖，說明文檔等。通過原型設計，可以讓項目組和客戶都可以對項目有一個直觀感受，同時可以低成本高效率的復現業務場景和各模塊流程）。
可以說需求分析階段是整個前端項目的基礎，基礎不牢，地動山搖。可以試想，如果和客戶溝通不順暢，有的方面客戶沒搞清楚是什麼效果，開發完成後就可能與客戶發生糾紛；如果可行性有問題，有的模塊很難實現或成本超出預算，就很難處理。
2.2 開發階段
這個環節是前端工程師主要參與的部分，按照需求分析階段的規劃按步驟完成任務。
根據產品需求分析文檔和原型圖進行UI設計，對產品的整體美術風格、交互設計、界面結構、操作流程等做出設計。負責項目中各種交互界面、圖標、LOGO、按鈕等相關元素的設計與製作。
根據UI設計進行規劃，提取界面中可以復用的模塊方便重復利用，分析界面是否有實現難度比較困難的地方，進行溝通和功能排期，按功能大小以及難度進行功能時間的評估，和後端溝通好排期時間，保證大家能夠更有效地開發合作，針對功能復雜的地方要先理清思路。
不要盲目開發前端搭建框架。根據設計圖進行前端界面開發，以及遇到的問題及時與產品、UI、後台人員溝通，保持大家信息一致，針對不清楚的地方也要及時溝通，以免做錯功能。
根據後端介面進行欄位填充，以及部分功能開發。針對缺少的欄位或者數據結構進行提出，及時與後端反應，盡量讓大家都能以最小的改動完成後續開發工作。前後端都要按照規范進行開發，針對不規范的地方要給與提出、指正，營造出規范的工作模式，以後維護成本和溝通成本更低以及開發效率更高。如果前端的設計進度遠遠超前後端的介面和數據結構設計，也不必等後端，可以自行開發nodejs伺服器配合postman等介面軟體進行開發。
前後端功能聯調、完成自測。檢查功能完成情況，看是否有遺漏，出現問題及時溝通解決。
2.3 測試階段
發布測試、修改bug、發布上線，自測完成後提交測試，測試根據提交的項目以及需求進行測試，提出bug給相關人員修改，開發人員周期性的配合修改bug，保證今天能夠修復昨天的bug。
發布dev環境，配合測試，修復bug以及需求優化
發布test環境，修復bug以及需求優化
發布it環境，修復bug以及需求優化
發布pre環境，修復bug以及需求優化
pre驗收之後，發布線上環境，產品進行驗收
2.4 維護階段
如果客戶驗收通過，項目就進入了維護階段，程序的維護包括程序上線後後續bug的修復和程序版本的更新。
3 個人經驗總結
3.1 文檔很重要
前端項目的文檔似乎已經作為前端工程化的標准流程之一了，文檔寫的好，可以便於同事快速了解你的代碼功能和需求，便於協作。可以想像，隨之項目復雜度增加，體量越來越龐大，開發團隊人數也越來越多。這種情況下，如果像變魔術一樣隱匿中間流程而直接得出結果，後果可想而知：項目復雜度越增加就越難以管理，開發效率低，合作混亂，結果甚至導致項目死亡。
好的文檔看起來就像一個產品說明書，但作用卻遠遠超過了說明書，不僅僅告訴你如何使用，還應該告訴你項目的設計思路，用了哪些組件，哪些部分不完善，將來有什麼規劃等等。這是一份比較好的說明文檔。
3.2 與客戶及時溝通很重要
3.3 扎實的基本功很重要
盡管當下框架、函數庫、工具包等更新迭代非常快，前端工程師有很多新的知識要學，但原生JS、HTML和CSS依然是重要的基本功，在學習前沿工具的同時不能放棄基本功的訓練。
C. 一般前端做項目，你們會選擇什麼
之所以Web前端框架這個話題熱度那麼高，很大程度上是因為受眾眾多。這一點我要解釋給Web前端小白聽一下，雖然你在剛開始學習的時候往往是從HTML，CSS，JS學起的，但是一個完整的課程最後肯定是少不了Web框架的。因為最後在實際工作的時候，一般都是在框架上搭建網站的，是不會真的從底層開始寫代碼的。
因此框架作為項目接近100%利用率的好工具，也是網站的基礎，他的好壞也就顯得尤為重要了。說到這里大家應該能夠明白，大家嘴裡的三大框架，肯定是平分秋色，各有優劣的。不然這樣激烈的市場，一無是處的框架一早就被淘汰了。
1、Angular
大家眼裡比較「叼」的框架，甚至有人說三大框架中只有她能稱的上一個完整的框架，因為他包含的東西比較完善，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能。對於剛開始學習使用框架的小夥伴們，可以推薦這個框架，學會之後簡直能顛覆之前你對前端開發的認知。使用 TypeScript能夠提高代碼可維護性，有利於後期重構。雙向數據流很方便，但是等業務復雜之後，你可能就搞不清楚數據流了。還有令人不開心的臟值檢查，以及directive的封裝並沒有解決視圖與數據關系完全分離，有時候還要用$digist強制觸發檢測。
2、React
這個框架本身比較容易理解，他的結構很清晰，就是由十幾個API組成，然後非同步渲染，我們只需要處理好介面和維護就好了，但是很多人反映上手還是有一定的的難度的。React是單向數據流，代碼寫起來會較雙向數據流的多一些，但是同樣的排查問題時思路清晰很多。
3、Vue
號稱是最簡單，最容易上手的框架，同時也是行內的大趨勢，還可以用來開發最火的小程序。畢竟用這神器，代碼碼的飛快，項目也能快速上線。同時他也是雙向數據流。有些人認為Vue是Angular和React的結合，既有Angular的模板語法也有React的組件化體系。
當你學會其中某個框架之後，你再轉用其他框架的時候，學會是很容易的，因為方法都是大同小異的。具體的使用還是得看公司的項目適合或者要求哪個框架。之前小編在網上暗訪了一下，看看有沒有人這三個框架都十分精通的，但是很遺憾的發現，都用過的人不少，但是真正敢說精通的還是沒有。這些框架學會使用還比較容易，但是裡面的「水太深」，精通還需長久的時間，望大家共勉，一起學習進步呀！
前端框架很多，比如node.js也是很重要的，我們做微信小程序員用的比較多的。
D. web前端維護是做什麼的
前端開發工程師的主要職責是與交互設計師、 視覺設計師協作，根據設計圖用HTML和CSS完成頁面製作（也可能是一個人完成所有）。同時，在此基礎之上，對完成的頁面進行維護和對網站前端性能做相應的優化。另外，一名合格的前端開發工程師，應該具有一定的審美能力和基礎的美工操作能力，能很好的與交互及視覺協作。
現在的前端工程師可能都需要一定程度上的全棧了，也就是前後端都需要會。不僅需要製作靜態頁面，包括網站架構，H5等。
如今市場上招聘web前端需要你會寫JS、會用JS、能設計、切圖、懂用戶交互等，還需要前端架構是開發和優化框架，及伺服器，用戶體驗等涉汲就比較廣，當然全棧式前端工程師工資也就比較高了。
E. JAVA新項目上線後,該怎麼維護主要做些什麼
查看伺服器運行狀況，以及出現的bug...查看運行日誌。新的需求調研。
F. 為啥現在這么缺前端，到底都是些什麼樣的項目需要前端
前端就是用戶端、客戶端，作用是向用戶展現數據內容，提供功能操作和數據交互。凡是面向用戶的項目都需要前端。WEB網頁、桌面軟體、手機APP等都需要前端。
G. 四五個項目三個前端正常嗎
正常，有些公司所有的項目用一個前端，不過，每個項目都有專門的後台工作小組。
前端即網站前台部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。隨著互聯網技術的發展，HTML5，CSS3，前端框架的應用，跨平台響應式網頁設計能夠適應各種屏幕解析度，完美的動效設計，給用戶帶來極高的用戶體驗。
做互聯網產品（如已知的差不多），將有一個特殊的角色，產品的設計，這個角色通常被稱為一個產品經理。產品經理的產品，觀眾定位的基礎上，用戶需要設計網站所提供的功能和服務。
H. 前端工作的時候主要做些什麼
隨著WEB前端技術發展，前端的技術已經擴展到任何網站、系統、應用。web前端有廣闊的發展空間，app、小程序、移動端、pc端等都是需要前端技術的開發支持才能夠完成，技術門檻相對較低、需求量較大，薪資待遇良好。只要是互聯網端的客戶界面，就需要前端來製作完成，前端開發的編程量不大，但是需要部分編程，入門簡單，但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...
在互聯網行業，前端有WEB前端、HTML前端等，隨著互聯網技術發展，就業方向也有很多。web前端的就業方向有web架構師、web前端工程師、HTML前端開發工程師、網頁設計師等等。
HTML前端開發
與Web前端開發不同的是，使用HTML5不僅僅可以開發前端，還有網頁游戲，手機APP，使用瀏覽器進行3D渲染等一系列建立在HTML5標准與搭載其標准瀏覽器上的開發，而未來可能會有更多的功能分支並入HTML5標准。web前端工程師
這個方向是目前從事Web前端開發的主要就業方向
Web架構師
薪資普遍比較高，技術要求高，掌握多種技能，包括：後端技術、DBA、Platform等等，甚至包括網站優化SEO技術。
數據方向
數據研發這個是在Web開發的基礎上用數據附能，懂可視化的一定是有前端能力的，懂hadoop的一定java要熟悉，屬於Web開發的拓展方向。
大前端方向
比如阿里，在大量實踐rn和weex;由於公司內部安卓/ios式微，一定程度上，前端把ios和安卓收編了，統稱大前端。
圖形學方向
前端自然是與圖形學有千絲萬縷的聯系，除了上面提到了可視化，還有相關3d引擎的開發工作。做這一行要求也非常高了，圖形學相關的演算法，3d引擎的開發，這都需要圖形學相關知識。
I. Web前端開發的工作內容有哪些
狹義的：主要就是展示層開發，說白了就是頁面開發，需要把頁面風格、表單元素（控制項）等都設計開發出來。如果是基於J2EE架構，需要Html、JSP、JavaScript、CSS、Htc等基本知識，有美工功底當然最好，沒有的話也可以做，只是效果可能沒有這么理想。
廣義的：除了後台資料庫應用開發外，前面的開發都可以叫做Web前端開發。後台DB開發主要包括函數、過程、觸發器、視圖、JavaSource等用戶對象的開發。前端開發除了包括展示層外，控制層和模型層也要進行開發，直白一點說：就是包括Java代碼的編寫。
各個公司的開發模式不同，一般來說，規模大點的公司習慣分工開發：有人做展示層（前端開發），有人做控制層，有人做模型層，有人負責DB開發。