『壹』 常見的前端集成部署方案有哪些各自的優缺點是什麼
前端行業經歷了這么長時間的發展，技術元素非常豐富，這里列舉出一般web團隊需要用到的技術元素：
開發規范：包括開發、部署的目錄規范，編碼規范等。不要小瞧規范的威力，可以極大的提升開發效率，真正優秀的規范不會讓使用者感到約束，而是能幫助他們快速定位問題，提升效率。
模塊化開發：針對js、css，以功能或業務為單元組織代碼。js方面解決獨立作用域、依賴管理、api暴露、按需載入與執行、安全合並等問題，css方面解決依賴管理、組件內部樣式管理等問題。是提升前端開發效率的重要基礎。現在流行的模塊化框架有requirejs、seajs等。
組件化開發：在模塊化基礎上，以頁面小部件(component)為單位將頁面小部件的js、css、html代碼片段放在一起進行開發、維護，組件單元是資源獨立的，組件在系統內可復用。比如頭部(header)、尾部(footer)、搜索框(searchbar)、導航(menu)、對話框(dialog)等，甚至一些復雜的組件比如編輯器(editor)等。通常業務會針對組件化的js部分進行必要的封裝，解決一些常見的組件渲染、交互問題。
組件倉庫：有了組件化，我們希望將一些非常通用的組件放到一個公共的地方供團隊共享，方便新項目復用，這個時候我們就需要引入一個組件倉庫的東西，現在流行的組件庫有bower、component等。團隊發展到一定規模後，組件庫的需求會變得非常強烈。
性能優化：這里的性能優化是指能夠通過工程手段保證的性能優化點。由於其內容比較豐富，就不在這里展開了，感興趣的同學可以閱讀我的這兩篇文章 [1] [2]。性能優化是前端項目發展到一定階段必須經歷的過程。這部分我想強調的一點是性能優化一定是一個工程問題和統計問題，不能用工程手段保證的性能優化是不靠譜的，優化時只考慮一個頁面的首次載入，不考慮全局在宏觀統計上的優化提升也是片面的。
項目部署：部署按照現行業界的分工標准，雖然不是前端的工作范疇，但它對性能優化有直接的影響，包括靜態資源緩存、cdn、非覆蓋式發布等問題。合理的靜態資源資源部署可以為前端性能帶來較大的優化空間。
開發流程：完整的開發流程包括本地開發調試、視覺效果走查確認、前後端聯調、提測、上線等環節。對開發流程的改善可以大幅降低開發的時間成本，工作這些年見過很多獨立的系統（cms系統、靜態資源推送系統）將開發流程割裂開，對前端開發的效率有嚴重的阻礙。
開發工具：這里說的工具不是指IDE，而是工程工具，包括構建與優化工具、開發-調試-部署等流程工具，以及組件庫獲取、提交等相關工具，甚至運營、文檔、配置發布等平台工具。前端開發需要工具支持，這個問題的根本原因來自前端領域語言特性（未來我會單獨寫一篇文章介紹前端領域語言缺陷問題）。前端開發所使用的語言（js、css、html）以及前端工程資源的載入與定位策略決定了前端工程必須要工具支持。由於這些工具通常都是獨立的系統，要想把它們串聯起來，才有了yeoman這樣的封裝。前面提到的7項技術元素都直接或間接的對前端開發工具設計產生一定的影響，因此能否串聯其他技術要素，使得前端開發形成一個連貫可持續優化的開發體系，工具的設計至關重要。
『貳』 前端優化的目的是什麼Web前端從哪方面來優化網站
雖然不做前端，但與網頁源碼優化打交道比較多，前段要注意的有這幾方面：
1、代碼清晰、即功能標註明確，便於維護
2、js、css盡量不要寫在源碼頁中，便於維護，也減輕瀏覽器載入速度
3、用戶體驗度，頁面排版要合理，便於瀏覽
4、盡量學點簡單的seo基礎，這個對於網站以後做優化是有好處的
『叄』 如何優化前端頁面，網頁要如何優化（HTML5開發方面）
如何優化前端頁面 、如何優化網頁
作為前端開發人員來說，不但要開發出能兼容各大主流瀏覽器的頁面，而且還需要懂得去優化前端頁面，可以從「前期准備」「HTML結構」「CSS樣式」「JavaScript」以及「圖像」、「文件上線前的處理」等多個角度來考慮。
具體可以查看《如何優化前端頁面，HTML5開發如何優化網頁》
『肆』 如何做好網站前端優化
一. 清理 HTML 文檔
二. 優化 CSS 性能
三.減少外部HTTP請求
四. 壓縮 CSS, JS 和 HTML
五. 使用預先獲取
六. 使用 CDN 和緩存提高速度
七. 壓縮文件
八. 優化你的圖片
九. 使用輕量級框架
十.前端優化 – 總結
進行前端優化似乎需要花費很大的精力，相信這篇應用指南中的一些小技巧能幫你極大改善網站載入速度。網站載入地越快，則用戶體驗越佳。因此, 對前端進行優化能使給你和你的用戶都帶來益處。如果你有任何其他好的優化方法，請在評論區留下您的寶貴建議。
『伍』 常見的前端性能優化手段都有哪些都有多大收益
請求數量——合並腳本和樣式表，CSS Sprites，拆分初始化負載，劃分主域
請求帶寬——開啟Gzip，精簡JavaScript，移除重復腳本，圖像優化
緩存利用——使用CDN，使用外部JavaScript和CSS，添加Expires頭，減少DNS查找，配置ETag，使Ajax可緩存
頁面結構——將樣式表放在頂部，將腳本放在底部，盡早刷新文檔的輸出
代碼校驗——避免CSS表達式，避免重定向
『陸』 前端性能優化的具體方法有哪些
解決辦法一：
減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片伺服器。
前端模板 JS+數據，減少由於HTML標簽導致的帶寬浪費，前端用變數保存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數
用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。
當需要設置的樣式很多時設置className而不是直接操作style。
少用全局變數、緩存DOM節點查找的結果。減少IO讀取操作。
避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
圖片預載入，將樣式表放在頂部，將腳本放在底部 加上時間戳。
解決辦法二：
減少HTTP請求次數
使用CDN：CDN在前端開發的作用
避免空的src和href
為文件頭指定Expires
使用gzip壓縮內容
把CSS放到頂部
把JS放到底部
避 免使用CSS表達式
將CSS和JS放到外部文件中
避免跳轉
可緩存的AJAX
使用GET來完成AJAX請求
『柒』 在前端開發中如何做好seo優化
很多人學會了一些SEO的常識，就覺得自己已經學會了SEO了，能夠給很多網站提供意見，但是其實他們提出的意見，很多時候都是靠猜，靠感覺。至於實際上有沒有效果，會不會給網站帶來正面的影響，只能走一步看一步。
其實一個SEO做得如何，最了解的還是自己，好的SEOER，能夠通過平時一點一滴的數據，進行匯總，通過數據指導，來看清SEO的方向。
SEO是什麼，在我看來，SEO就是做搜索引擎的排名，而SEO最終的目的是什麼，答案只有一個，那就是通過有排名的關鍵詞，來獲得流量，也就是說我們最終的目的就是流量。那麼我們很多時候，SEO不要局限在自己的站點上面，我們要把思路拓展，拓展到各個不同的模塊領域去。
那麼作為SEO，如何科學的去分析自己做的效果如何，如何去更好的通過數據，來指導自己的思維呢？
我們都知道，流量跟排名點擊率、排名數、收錄數有關系，那麼我們的數據，最主要的就是監控這三個維度。
1、排名點擊率：
如果是自身網站的話，就比較簡單，裝個流量統計工具，就可以很好的監控到關鍵詞的點擊率。如果是外部的站點，可以通過關鍵詞覆蓋的查詢，來預估自己的排名點擊率。其實在站點和內容都不變的情況下，點擊率一般不會有太大的變化。所以排名和收錄的因素，就會影響比較大。
總結：
總體來看SEO的主要核心還是數據分析，具體的數據分析可以參考（網路排名只需分析關鍵詞數據）。其實SEO只要觀察細致，很多問題都會變得很簡單，你要真正搞清楚你想要什麼，你想要的流量，而流量跟網站的排名、網站的收錄、排名的點擊率是有直接關系。搞清楚這些關系，去逐一分析每一個細節，你會發現SEO會變得很簡單。
『捌』 如何進行前端優化
1.減少 HTTP 請求....
2.使用 HTTP2
3.使用服務端渲染
4.靜態資源使用 CDN
5.將 CSS 放在文件頭部，JavaScript 文件放 ...
6.使用字體圖標 iconfont 代替圖片圖標
7.善用緩存，不重復載入相同的資源
8.壓縮文件
9.圖片優化
(1).圖片延遲載入
(2). 響應式圖片
(3). 調整圖片大小
(4). 降低圖片質量
(5). 盡可能利用 CSS3 效果代替圖片
(6). 使用 webp 格式的圖片
10. 通過 webpack 按需載入代碼，提取第三庫代碼，減少 ES6 轉為 ES5 的冗餘代碼
11. 減少重繪重排
12. 使用事件委託
13. 注意程序的局部性
14. if-else 對比 switch
15. 查找表
16. 避免頁面卡頓
17. 使用 requestAnimationFrame 來實現視覺變化
18. 使用 Web Workers
19. 使用位操作
20. 不要覆蓋原生方法
21. 降低 CSS 選擇器的復雜性
(1). 瀏覽器讀取選擇器，遵循的原則是從選擇器的右邊到左邊讀取。
(2). CSS 選擇器優先順序
22. 使用 flexbox 而不是較早的布局模型
23. 使用 transform 和 opacity 屬性更改來實現動畫
24. 合理使用規則，避免過度優化
性能優化主要分為兩類：
載入時優化
運行時優化
『玖』 常用的前端性能優化方法有哪些
1、減少http請求，合理設置HTTP緩存
2、使用瀏覽器緩存
3、啟用壓縮
4、CSS Sprites，合並 CSS圖片，減少請求數
5、CSS放在頁面最上部，javascript放在頁面最下面
『拾』 簡單談談前端性能優化
這個話題，賊大。
個人認為：核心在於，HTTP 請求的減少和請求包大小的減少再加上對代碼的重構。
HTTP 請求的減少，瞧瞧現在的前端工程化，工程化的作用之一正是將那些散亂的 js 、css 庫全部都集成起來，壓縮成一個文件，這么多文件壓縮成一個，這請求不就減少了么~還有一個就是」精靈圖技術「也是優化的體現，就不展開了。
請求包大小的減少，這個簡直是能減就減啊，比如以前的時候，我們需要將圖片直接發送到瀏覽器上是吧，現在可以不用！如果只是發生一段代碼到客戶的瀏覽器上，然後客戶用自己的機器生成圖片，這得有多快啊，畢竟一段代碼大還是一張圖片大還是很容易分清的，特別的是 GIF 圖！這時候用上 svg 或是 canvas 技術，就不需要發送巨大的 GIF 圖片了，只需要調用瀏覽器的資源生成圖像即可。
重構，反正不滿意重構就是了，滿意了加功能然後繼續重構就是了。
但這都是還只是皮毛啊這是，如果用到框架，那還要講到框架的優化，因為前端框架的優化同樣是性能優化，那都能寫幾十頁了都......
如果再深入講到瀏覽器自身......啊，要死了死了，技術是無窮的，命是有限的！