⑴ 前端開發，頁面優化，性能優化有哪些方面
常用的優化有兩部分
第一：面向內容的優化
1. 減少 HTTP 請求
2. 減少 DNS 查找
3. 避免重定向
4. 使用 Ajax 緩存
5. 延遲載入組件
6. 預先載入組件
7. 減少 DOM 元素數量
8. 切分組件到多個域
9. 最小化 iframe 的數量
10. 不要出現http 404 錯誤
第二：面向 Server
1. 縮小 Cookie
2. 針對 Web 組件使用域名無關性的
⑵ 在前端開發中如何做好seo優化
很多人學會了一些SEO的常識，就覺得自己已經學會了SEO了，能夠給很多網站提供意見，但是其實他們提出的意見，很多時候都是靠猜，靠感覺。至於實際上有沒有效果，會不會給網站帶來正面的影響，只能走一步看一步。
其實一個SEO做得如何，最了解的還是自己，好的SEOER，能夠通過平時一點一滴的數據，進行匯總，通過數據指導，來看清SEO的方向。
SEO是什麼，在我看來，SEO就是做搜索引擎的排名，而SEO最終的目的是什麼，答案只有一個，那就是通過有排名的關鍵詞，來獲得流量，也就是說我們最終的目的就是流量。那麼我們很多時候，SEO不要局限在自己的站點上面，我們要把思路拓展，拓展到各個不同的模塊領域去。
那麼作為SEO，如何科學的去分析自己做的效果如何，如何去更好的通過數據，來指導自己的思維呢？
我們都知道，流量跟排名點擊率、排名數、收錄數有關系，那麼我們的數據，最主要的就是監控這三個維度。
1、排名點擊率：
如果是自身網站的話，就比較簡單，裝個流量統計工具，就可以很好的監控到關鍵詞的點擊率。如果是外部的站點，可以通過關鍵詞覆蓋的查詢，來預估自己的排名點擊率。其實在站點和內容都不變的情況下，點擊率一般不會有太大的變化。所以排名和收錄的因素，就會影響比較大。
總結：
總體來看SEO的主要核心還是數據分析，具體的數據分析可以參考（網路排名只需分析關鍵詞數據）。其實SEO只要觀察細致，很多問題都會變得很簡單，你要真正搞清楚你想要什麼，你想要的流量，而流量跟網站的排名、網站的收錄、排名的點擊率是有直接關系。搞清楚這些關系，去逐一分析每一個細節，你會發現SEO會變得很簡單。
⑶ 前端性能優化的具體方法有哪些
解決辦法一：
減少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請求
⑷ 簡單談談前端性能優化
這個話題，賊大。
個人認為：核心在於，HTTP 請求的減少和請求包大小的減少再加上對代碼的重構。
HTTP 請求的減少，瞧瞧現在的前端工程化，工程化的作用之一正是將那些散亂的 js 、css 庫全部都集成起來，壓縮成一個文件，這么多文件壓縮成一個，這請求不就減少了么~還有一個就是」精靈圖技術「也是優化的體現，就不展開了。
請求包大小的減少，這個簡直是能減就減啊，比如以前的時候，我們需要將圖片直接發送到瀏覽器上是吧，現在可以不用！如果只是發生一段代碼到客戶的瀏覽器上，然後客戶用自己的機器生成圖片，這得有多快啊，畢竟一段代碼大還是一張圖片大還是很容易分清的，特別的是 GIF 圖！這時候用上 svg 或是 canvas 技術，就不需要發送巨大的 GIF 圖片了，只需要調用瀏覽器的資源生成圖像即可。
重構，反正不滿意重構就是了，滿意了加功能然後繼續重構就是了。
但這都是還只是皮毛啊這是，如果用到框架，那還要講到框架的優化，因為前端框架的優化同樣是性能優化，那都能寫幾十頁了都......
如果再深入講到瀏覽器自身......啊，要死了死了，技術是無窮的，命是有限的！
⑸ 前端開發人員需要具備哪些SEO優化技巧
前端開發人員需要具備哪些SEO優化技巧
前端開發工程師不僅需要要跟視覺設計師、互動式設計師配合，完美還原設計圖稿，編寫兼容各大瀏覽器、載入速度快、用戶體驗好的頁面。現在還需要跟SEO人員配合，調整頁面的代碼結構和標簽。一些成熟的平台，在開發初期並沒有考慮優化問題，所以做出來的頁面，就算是效果很炫，功能很強，但是對搜索引擎非常的不友善。任何一個成熟的網站，後期頁面都是動輒幾百萬的，到這個時候再來調整結構，既費時又費力，最怕的還是會影響到排名和收錄。
所以說與其在後期碰到問題再來調整，還不如把問題解決在源頭。我本人也是從事前端開發工作的，下面把我工作過程中，積累的幾個開發過程中就需要做好的SEO優化技巧，分享給大家。
1、簡化代碼結構，更利於搜索引擎分析抓取有用內容：頁面盡量採用DIV+CSS，當然，表格展現模式用table還是比div方便很多的;所有js、css採用外聯方式，圖片採用css精靈，減少請求次數。看下下面同樣的內容，用div和talbe布局的代碼比較，顯而易見用div簡便的多。
2、重要內容優先載入(第一個鏈接最好是網站主關鍵詞，不刻意要求)，可以用css來處理，索引一篇文章的長度也是有限制的，一定要把最重要的內容，優先展現給蜘蛛，這方面你可以通過查看一些比較大的網頁快照來求證。
3、每個頁面只能出現一次H1標簽，H2標簽可以多次：H1權重很高，普遍認為僅次於title，一般資訊詳情頁的標題、商品詳情頁的標題，都放在H1里。
4、圖片一定要添加alt屬性，title屬性可選：蜘蛛不認識圖片上的內容，只能通過alt屬性來判斷，如果是商品列表頁，所有商品都加了alt和title的話，容易造成堆砌關鍵詞，所以我一般是只加alt屬性。
5、圖片大小聲明：如果圖片大小不做定義的話，頁面需要重新渲染，就會影響到載入速度。
6、鏈接可根據需求添加title屬性以及nofllow值;非特殊性鏈接，鏈接地址一定要寫入herf屬性，有些前端開發人員為了省事，直接用div加個click事件當鏈接，在視覺上和使用上確實是實現了鏈接效果，但是做過SEO優化的人
員都知道，蜘蛛目前對於js的支持很差，基本無法讀取裡面的鏈接地址。所以說用click事件是絕對不允許的，特別是一些重要的導航鏈接。
7、頁面內容盡量不要做成flash、圖片、視頻，這些東西蜘蛛是抓不到的，就算是必須的，也要生成相應的靜態頁面。有很多企業站看著很炫，全站flash，老闆看著是爽了，做SEO優化的人員就要抓狂了，全站沒一個鏈接。
8、除首頁外別的頁面最好要加上麵包屑型導航，導航結構一定要清晰。
9、做好404頁面，一般會加首頁鏈接及錯誤提示，並測試其返回狀態碼為404：1、用戶體驗友好，可以留住用戶，不至於直接關閉頁面;2、蜘蛛友好，可以返回抓取其他頁面。
10、網站結構呈扁平狀樹型，目錄結構不宜過深，每個頁面離首頁最多點擊不超過3次，過深不利於搜索引擎的抓取。
⑹ 如何對前端性能進行優化
前端開發代碼優化、可維護性、瀏覽器兼容性是非常重要的課題。從實際的工程應用角度出發，最常遇見的前端優化問題。前端性能進行優化規則，基本可以涵蓋現在前端大部分的性能優化原則了，很多更加geek和精細優化方法都是從這些原則裡面延伸出來的。
前端性能進行優化都有哪些規則
減少HTTP請求次數
盡量合並圖片、CSS、JS。比如載入一個頁面有5個css文件的話，把這個5個文件合成一個的話，就只需要發出一次http請求，節省網路請求時間，加快頁面的載入。
2. 使用CDN
網站上靜態資源即css、js全都使用cdn分發，包括圖片
3. 避免空的src和href
當link標簽的href屬性為空、script標簽的src屬性為空的時候，瀏覽器渲染的時候會把當前頁面的URL作為它們的屬性值，從而把頁面的內容載入進來作為它們的值。所以要避免犯這樣的疏忽。
4. 為文件頭指定Expires
Exipres是用來設置文件的過期時間的，一般對css、js、圖片資源有效。 他可以使內容具有緩存性，這樣下回再訪問同樣的資源時就通過瀏覽器緩存區讀取，不需要再發出http請求。如下例子：
新浪微博的這個css文件的Expires時間是2016-5-04 09:14:14.
5. 使用gzip壓縮內容
gzip能夠壓縮任何一個文本類型的響應，包括html，xml，json。大大縮小請求返回的數據量。
6. 把CSS放到頂部
網頁上的資源載入時從上網下順序載入的，所以css放在頁面的頂部能夠優先渲染頁面，讓用戶感覺頁面載入很快。
7. 把JS放到底部
載入js時會對後續的資源造成阻塞，必須得等js載入完才去載入後續的文件 ，所以就把js放在頁面底部最後載入。
8. 避免使用CSS表達式
舉個css表達式的例子
font-color: expression( (new Date()).getHours()%3 ? 「#FFFFFF" : 「#AAAAAA" );
這個表達式會持續的在頁面上計算樣式，影響頁面的性能。並且css表達式只被IE支持。
9. 將CSS和JS放到外部文件中
目的是緩存文件，可以參考原則4。 但有時候為了減少請求，也會直接寫到頁面里，需根據PV和IP的比例權衡。
10. 權衡DNS查找次數
減少主機名可以節省響應時間。但同時，需要注意，減少主機會減少頁面中並行下載的數量。
IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。
下面是新浪微博的圖片域名，我們可以看到他有多個域名，這樣可以保證這些不同域名能夠同時去下載圖片，而不用排隊。不過如果當使用的域名過多時，響應時間就會慢，因為不用響應域名時間不一致。
11. 精簡CSS和JS
這里就涉及到css和js的壓縮了。比如下面的新浪的一個css文件，把空格回車全部去掉，減少文件的大小。現在的壓縮工具有很多，基本主流的前端構建工具都能進行css和js文件的壓縮，如grunt，glup等。
12. 避免跳轉
有種現象會比較坑爹，看起來沒什麼差別，其實多次了一次頁面跳轉。比如當URL本該有斜杠（/）卻被忽略掉時。例如，當我們要訪問http:// .com時，實際上返回的是一個包含301代碼的跳轉，它指向的是http:// .com/（注意末尾的斜杠）。在nginx伺服器可以使用rewrite；Apache伺服器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來避免。
另一種是不用域名之間的跳轉， 比如訪問http:// .com/bbs跳轉到http:// bbs..com/。那麼可以通過使用Alias或者mod_rewirte建立CNAME（保存一個域名和另外一個域名之間關系的DNS記錄）來替代。
13. 刪除重復的JS和CSS
重復調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重復運算JavaScript的問題。
14. 配置ETags
它用來判斷瀏覽器緩存里的元素是否和原來伺服器上的一致。比last-modified date更具有彈性，例如某個文件在1秒內修改了10次，Etag可以綜合Inode(文件的索引節點(inode)數)，MTime(修改時間)和Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 伺服器集群使用，可取後兩個參數。使用ETags減少Web應用帶寬和負載
15. 可緩存的AJAX
非同步請求同樣的造成用戶等待，所以使用ajax請求時，要主動告訴瀏覽器如果該請求有緩存就去請求緩存內容。如下代碼片段, cache:true就是顯式的要求如果當前請求有緩存的話，直接使用緩存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. 使用GET來完成AJAX請求
當使用XMLHttpRequest時，瀏覽器中的POST方法是一個「兩步走」的過程：首先發送文件頭，然後才發送數據。因此使用GET獲取數據時更加有意義。
17. 減少DOM元素數量
這是一門大學問，這里可以引申出一堆優化的細節。想要具體研究的可以看後面推薦書籍。總之大原則減少DOM數量，就會減少瀏覽器的解析負擔。
18. 避免404
比如外鏈的css、js文件出現問題返回404時，會破壞瀏覽器的並行載入。
19. 減少Cookie的大小
Cookie裡面別塞那麼多東西，因為每個請求都得帶著他跑。
20. 使用無cookie的域
比如CSS、js、圖片等，客戶端請求靜態文件的時候，減少了 Cookie 的反復傳輸對主域名的影響。
21. 不要使用濾鏡
IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了內存開支，因此它的問題是多方面的。
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。
22. 不要在HTML中縮放圖片
比如你需要的圖片尺寸是50* 50
那就不用用一張500*500的大尺寸圖片，影響載入
23. 縮小favicon.ico並緩存
⑺ 可以哪些方面對前端開發進行優化
1. JavaScript 壓縮和模塊打包
2. 按需載入資源
3. 在使用 DOM 操作庫時用上 array-ids
4. 緩存
5. 啟用 HTTP/2
6. 應用性能分析
7. 使用負載均衡方案
8. 為了更快的啟動時間考慮一下同構
9. 使用索引加速資料庫查詢
10. 使用更快的轉譯方案
11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12. 用於未來的一個建議：使用 service workers + 流
13. 圖片編碼優化
⑻ 常用的前端性能優化方法有哪些
1、減少http請求，合理設置HTTP緩存
2、使用瀏覽器緩存
3、啟用壓縮
4、CSS Sprites，合並 CSS圖片，減少請求數
5、CSS放在頁面最上部，javascript放在頁面最下面
⑼ 如何進行Web前端優化
web前端優化要從幾個方面入手
1.考慮頁面的用戶體驗。用戶體驗包括界面的美觀性、頁面請求響應速度、資源消耗要盡量少（如腳本執行時cpu資源的消耗要盡可能的少）、界面是否友好，可交互性強不強等方面去優化。
2.前端代碼的可維護性。代碼的規范，組件的可重用性，注釋是否充分，盡量加強代碼的可讀性等方面去優化。
⑽ 前端性能如何優化
參考《前端性能優化指南》《前端性能優化進階指南》等