❶ 前端性能優化--圖片篇
有損壓縮，高品質的壓縮方式。圖片體積壓縮至原有體積的50%以下時，jpg仍然可以保持60%的品質。原理為以24位存儲單個圖，可以呈現多達1600萬種顏色，足以滿足大多數場景下對色彩的要求，這一點決定了它壓縮前後的質量損耗並不容易被肉眼察覺。
優點：
缺點：
使用場景：
無損壓縮，高保真的圖片格式。同時支持8位和24位二進制的位數，八位的png最多指出256種顏色，24位可以呈現約1600萬種。
優點：
缺點：
使用場景：
最多支持256種顏色的8位無損圖片格式。
優點：
缺點：
使用場景：
同時提供了有損壓縮和無損壓縮（可逆壓縮）的圖片文件格式。像JPEG一樣對細接豐富的圖片信手拈來，像PNG一樣支持透明，像GIF一樣可以顯示動態圖片。
優點：
缺點：
在壓縮文件大小的過程中，損失了一部分圖片的信息，也降低了圖片的質量，並且這種損失是不可逆的。常見的壓縮手段是按照一定的演算法將鄰近的像素點進行合並，去除了人肉眼無法識別的圖片細節。jpg圖片使用的就是有損壓縮。
在壓縮的過程中，圖片的質量沒有任何損傷。任何時候都可以從無損壓縮過的圖片中恢復出原來的信息。壓縮演算法是對圖片的所有的數據進行編碼壓縮，能在保證圖片的質量的同時降低圖片的體積。例如png、gif使用的就是無損壓縮。
https://tinypng.com/
https://tu.isux.us/
https://compressor.io/
webpack配置imge-webpack-loader進行圖片壓縮
1.安裝依賴
2.配置webpack
雪碧圖，CSS Sprites，國內也叫 CSS 精靈，是一種 CSS 圖像合成技術，主要用於小圖片顯示。
瀏覽器請求資源的時候，同源域名請求資源的時候有最大並發限制，chrome 為 6 個，就比如你的頁面上有 10 個相同 CDN 域名小圖片，那麼需要發起 10 次請求去拉取，分兩次並發。第一次並發請求回來後，發起第二次並發。如果你把 10 個小圖片合並為一張大圖片的畫，那麼只用一次請求即可拉取下來 10 個小圖片的資源。減少伺服器壓力，減少並發，減少請求次數。
優點：
缺點：
有相應的插件提供了自動合成雪碧圖的功能並且可以自動生成對應的樣式文件webpack-spritesmith
將src/ico目錄下的所有png文件合成雪碧圖，並且輸出到對應目錄，同時還可以生成對應的樣式文件，樣式文件的語法會根據你配置的樣式文件的後綴動態生成。
將圖片轉換為base64編碼字元串inline到頁面或css中。
優點：
缺點：
圖片懶載入的原理就是暫時不設置圖片的 src 屬性，而是將圖片的 url 隱藏起來，比如先寫在 data-src 裡面，等當前圖片是否到了可視區域再將圖片真實的 url 放進 src 屬性裡面，從而實現圖片的延遲載入。
優點：
將圖片提前載入到本地緩存中，從而提升用戶體驗。
高品質圖像載入完之前會先顯示低畫質版本。低畫質版本由於畫質低、壓縮率高、尺寸小、載入很快。
註：
很多工具和庫都支持導出漸進式JPEG，比如 ImageMagick, libjpeg, jpegtran, jpeg-recompress以及imagemin。 也可以使用 gulp-imagemin 進行批量轉換。
Photoshop導出漸進式圖片，保存為JPEG格式，勾選連續。
❷ 2020-05-09 前端圖片太多，圖片太大怎麼優化
1、小圖多可以用圖標，例如阿里巴巴iconfont庫 https://www.iconfont.cn/home/index 。
2、使用精靈圖。
3、大圖可以進行壓縮，壓縮網站eg: https://tinypng.com/ 。
4、圖片懶載入，像淘寶或者京東這樣的APP頁面上有很多圖片,當我們滑到下一屏時下一屏的圖片才會載入,這就採用了圖片懶載入的方式.圖片懶載入,簡單來說就是在頁面渲染過程中,圖片不會一次性全部載入,會在需要的時候載入,比如當滾動條滾動到某一個位置時觸發事件載入圖片,通過js將img標簽的data-src屬性賦值給src屬性。
5、使用webp格式，缺點：瀏覽器支持度不夠
❸ 淺談前端的圖片優化
近期一直在和朋友討論前端性能優化的問題，著重聊到了圖片相關的優化，就想著總結記錄一下。
說到圖片優化主要從兩個點入手，分別是優化體積和合並請求，下面我分別展開說下這兩點。
就優化體積來說，方法還是比較有限，無外乎壓縮圖片大小，根據視圖需要選擇合適的圖片尺寸。
我們知道圖片是有很多格式的，包括jpg、png、gif等，單就大小來說有損壓縮的jpg格式一般是會比無損壓縮的png要小的多的，但是它不支持透明；且單就png來說還區分png8、png24、png32，我們需要根據自身業務使用場景選擇最優的格式，當然如果支持webp的話webp一定是最優解。
選擇尺寸就更好理解了，比如視圖是一個固定400*300的區域，你肯定不需要放一個4000*3000的圖片上去，當然現代的前端項目或多或少都需要考慮不同端的適配，我這邊的處理方式是通過公司私有的圖片伺服器處理，你只需要上傳一張原圖，獲取圖片時根據需要帶長寬參數即可獲得相應大小的圖片。
請求合並是前端優化的必要手段，不止是針對圖片，這里我只列舉針對圖片優化的方案，當然每種方案都有他的弊端。
用雪碧圖來合並多張小圖片的方案已經有很多年了，它成本低兼容好，確實能解決不少問題，但是使用雪碧圖同時會帶來一些副作用需要我們解決。
首先就是內存問題，由於我們把多張圖片合並成一張大圖，所以渲染時每次都會載入整張雪碧圖，這樣對於內存的開銷來說實際上是更大的，解決的辦法就是盡量減少圖片間的留白，以及控制一張雪碧圖的內容不要太多。
還有就是縮放的問題，我們都知道background-size是針對整張圖片的縮放，在移動端適配多尺寸時再使用固定的px定位就會出現偏差，一般這個時候我們都會使用百分比或者rem的方式來處理，不過在部分機型上還是會出現邊緣的情況，一個朋友提出了transform的解決方案，不過筆者目前還沒有驗證。
toDataUrl的方案相比於雪碧圖晚了些，它可以通過base64字元串來描述圖片本身從而減少圖片的請求；它所帶來的問題是會增大體積頁面本身文件大小，而且由於是內聯字元串會導致圖片無法緩存。
最後就是通過iconfont/svg/CSS等方式來模擬圖片展示，這個方案可以算是是最通用的兼容最好的方案，但是也不是絕對的完美方案；就iconfont來說只能是純色的，不能像圖片那樣顏色豐富，而svg和css或多或少都有一些兼容性問題。
我們在優化圖片的時候還可以設置一些緩存策略以及根據業務場景使用一些懶載入的策略，因為這兩條屬於所有請求通用的方案，這里就不展開說了。最後說一句我們在進行前端優化時需要根據自身需要定製優化方案，切不可為了優化而盲目優化。
❹ JS圖片懶載入——前端性能優化
意義
懶載入（LazyLoad） 是前端優化的一種有效方式，能極大的提升用戶體驗，圖片載入是其重點，如果載入圖片過多將大大增 http請求次數或大小 ，然而更多時候 用戶並不會瀏覽到全部載入進來的圖片 ，這種代價是非常不值得的，所以當用戶 瀏覽到當前視口時再去載入相應的圖片 無疑是兩全其美的選擇
原理：只有 img 標簽中的 src 寫入了圖片的地址，載入頁面時才會請求圖片，所以使用懶載入時在 src 中並不寫入任何地址，把圖片的真實地址放到 data- (標簽內部屬性可存數據) 屬性中，在 js 中綁定滑鼠滾動事件，其回調中遍歷所有圖片並作出判斷， 將出現在視口中的圖片的 'data-' 屬性保存的地址放到 'src' 中即可
實現
HTML：
❺ web前端開發圖片放大了不清晰
web前端開發圖片放大了不清晰，需要優化瀏覽器的縮放演算法
在網頁上通過CSS樣式對圖片進行縮放從而導致圖片模糊，究其原因是因為瀏覽器的縮放演算法和圖片處理軟體的不同導致的差異。
所以，要解決這個問題，就需要優化瀏覽器的縮放演算法。CSS屬性image，rendering正是為此而存在的。CSS 屬性用於設置圖像縮放演算法。它適用於元素本身，適用於元素其他屬性中的圖像，也應用於子元素。
❻ Web前端新手如何做好性能優化
今天小編要跟大家分享的文章是關於Web前端新手如何做好性能優化?影響用戶訪問的最大部分是前端的頁面。網站的劃分一般為二：前端和後台。我們可以理解成後台是用來實現網站的功能的，比如：實現用戶注冊，用戶能夠為文章發表評論等等。而前端呢?其實應該是屬於功能的表現。
而我們建設網站的目的是什麼呢?不就是為了讓目標人群來訪問嗎?所以我們可以理解成前端才是真正和用戶接觸的。
除了後台需要在性能上做優化外，其實前端的頁面更需要在性能優化上下功夫，只有這樣才能給我們的用戶帶來更好的用戶體驗。不僅僅如此，如果前端優化得好，他不僅可以為企業節約成本，他還能給用戶帶來更多的用戶，因為增強的用戶體驗。說了這么多，那麼我們應該如何對我們前端的頁面進行性能優化呢?
前端性能優化的方法?
一、content方面
1，減少HTTP請求：合並文件、CSS精靈、inlineImage
2，減少DNS查詢：DNS查詢完成之前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分布到恰當數量的主機名，平衡並行下載和DNS查詢
3，避免重定向：多餘的中間訪問
4，使Ajax可緩存
5，非必須組件延遲載入
6，未來所需組件預載入
7，減少DOM元素數量
8，將資源放到不同的域下：瀏覽器同時從一個域下載資源的數目有限，增加域可以提高並行下載量
9，減少iframe數量
10，不要404
二、Server方面
1，使用CDN
2，添加Expires或者Cache-Control響應頭
3，對組件使用Gzip壓縮
4，配置ETag
5，FlushBufferEarly
6，Ajax使用GET進行請求
7，避免空src的img標簽
三、cookie方面
1，減小cookie大小
2，引入資源的域名不要包含cookie
四、CSS方面
1，將樣式表放到頁面頂部
2，不使用CSS表達式
3，使用不使用@import
4，不使用IE的Filter
五、JavaScript方面
1，將腳本放到頁面底部
2，將javascript和css從外部引入
3，壓縮javascript和css
4，刪除不需要的腳本
5，減少DOM訪問
6，合理設計事件監聽器、
六、圖片方面
1，優化圖片：根據實際顏色需要選擇色深、壓縮
2，優化css精靈
3，不要在HTML中拉伸圖片
4，保證favicon.ico小並且可緩存
七、移動方面
1，保證組件小於25k
2，
以上就是小編今天為大家分享的關於Web前端新手如何做好性能優化的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解
更多web前端知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利！
❼ 常用的前端性能優化方法有哪些
常用的優化有兩部分
第一：面向內容的優化
1. 減少 HTTP 請求
2. 減少 DNS 查找
3. 避免重定向
4. 使用 Ajax 緩存
5. 延遲載入組件
6. 預先載入組件
7. 減少 DOM 元素數量
8. 切分組件到多個域
9. 最小化 iframe 的數量
10. 不要出現http 404 錯誤
第二：面向 Server
1. 縮小 Cookie
2. 針對 Web 組件使用域名無關性的
❽ 前端性能優化-雪碧圖及其實現
CSS Sprites 因其英文被稱為 雪碧圖 。
主要用於把一堆小圖標整合在一張背景透明的大圖上，通過設置對應的位置來顯示不同的圖片，目的是大幅減輕伺服器對圖片的請求數量，是前端性能優化的一種方式。
1、 減少網頁的HTTP請求，提高頁面性能
2、減少圖片命名的困擾
1、需要計算每個圖片的位置
2、後期維護困難
通過設置每個 <i></i> 對應的 background-position 來展現不同位置的圖標。
其中第一個參數代表x軸控制左右，第二個參數代表y軸控制上下。
默認情況下為
當設置x為負數，相當於固定展現框不動，圖片向左側移動，展現的是相對右側的內容。同理當y為負數，圖片向上側移動，展現的是相對下方的內容。
❾ 前端圖片壓縮優化工具conversion
image-conversion 是一個簡單易用的 JS 圖片轉換工具，提供了多種 Image、Canvas、File 和 dataURL 之間的轉換方法。
另外，image-conversion 可以指定大小來壓縮圖片。
1、將圖像壓縮到 200kb：
2、以 0.9 的質量壓縮圖像
image-conversion 提供了多種方法來實現 Image、Canvas、File 和 dataURL 之間的轉換，如下：
1、imagetoCanvas(image[, config]) {Promise(Canvas)}
將圖像對象轉換為畫布對象。
2、dataURLtoFile(dataURL[, type]) {Promise(Blob)}
將 dataURL 字元串轉換為 File(Blob) 對象，相當於把畫布的內容轉換成blob，type可以設置最終圖片的格式。
type的值可以為："image/png", "image/jpeg", "image/gif"
3、compress(file, config) {Promise(Blob)}
壓縮文件（Blob）對象。
4、compressAccurately(file, config) {Promise(Blob)}
根據大小壓縮文件（Blob）對象。
5、canvastoDataURL(canvas[, quality, type]) {Promise(string)}
將 Canvas 對象轉換為 dataURL 字元串，該方法可以進行壓縮。
6、canvastoFile(canvas[, quality, type]) {Promise(Blob)}
將 Canvas 對象轉換為 Blob 對象，此方法可以進行壓縮。
7、dataURLtoImage(dataURL) {Promise(Image)}
將 dataURL 字元串轉換為圖像對象。
8、downloadFile(file[, fileName])
下載圖片到本地。
9、filetoDataURL(file) {Promise(string)}
將 File(Blob) 對象轉換為 dataURL 字元串。
10、urltoBlob(url) {Promise(Blob)}
通過圖像 url 載入所需的 Blob 對象。
11、urltoImage(url) {Promise(Image)}
通過圖片 url 載入所需的 Image 對象。
覺得效果不錯的請幫忙加個關注點個贊，經常分享前端實用開發技巧
❿ 前端性能優化之路——圖片篇。
本人是一名前端開發者，在公司負責目前負責信息流服務，為五大手機廠商和各大App提供服務，每天的請求就是以億計算，加上我們又做了SSP和DSP，就是類似於網路廣告聯盟，騰訊廣點通這種。接觸過的應該知道，所以前端優化一直是我頭痛的問題，不僅要注重用戶體驗，同時要兼顧收益，有時候必須犧牲一些用戶體驗，但是作為一名有思想的前端，還是努力規避掉，希望能和從事相同業務的同學一起學習交流一下，話不多說，就來分享我的性能優化之路，有什麼不對的知識點，麻煩大家指出批評。
yahoo軍規把大部分的前端優化都提到了，而在js優化這一塊如果有興趣的額，推薦大家去看《 高性能javascript 》,書里講的非常詳細。 https://segmentfault.com/a/1190000008481413
Media Queries 調用高清背景圖
通過 devicePixelRatio的值，就可以區分普通顯示屏和高清屏，當devicePixelRatio值等於1時（也就是最小值），那麼它普通顯示屏，當devicePixelRatio值大於1(通常是1.5、2.0)，那麼它就是高清顯示屏。這時候我們可以讓UI准備2套圖片，甚至是3套圖片，不同像素的圖利用媒體查詢結合 devicePixelRatio 可以區分普通顯示屏和高清顯示屏，並給出了如下CSS設計方案：
也可以用less或者sass
如果省時間通用性高，就像我們是服務端用nginx對圖片進行處理，想要什麼樣尺寸的圖片自己裁切,我們提供了按比例縮放和自定尺寸的裁切方法，地址後拼接字元串就行。
與其他圖片格式相比，在肉眼無法分辨圖片質量差異的情況下，WebP的空間佔用是最小的，目前國內外各大互聯網公司都已經開始應用這一圖片格式。比如美團
想實現首先是判斷，即識別單次訪問的來源瀏覽器是否支持 webp 格式，其次是執行，如果該瀏覽器支持，則將原圖替換為 webp 格式，並返回。如果不支持，則顯示原格式圖片。 http://caniuse.mojijs.com/Home/Html/item/key/webp/index.html
在識別階段，我們有兩種方法：
1. Server 處理
只要有請求，服務端就能拿到你的User-Agent信息，通過對瀏覽器進行分類，支持webp放在白名單里，不支持的則為黑名單。判斷為白名單，則直接調用，返回webp格式圖片；反之，則顯示原圖。這種方式的優點在於，只需定期維護白名單即可，邏輯簡單；缺點則在於不可擴展、不可測試、UA判斷會出現不準確的情況。
Server處理中的另一種方式是通過讀取 JavaScript 種下的 cookie來實現判斷。這種方式的優點是表現穩定，訪問速度更快，切換無壓力。但缺點是，頁面靜態化會導致用戶切換瀏覽器時不能自主更新，圖片服務失效。比如用戶用支持webp的瀏覽器A請求頁面，這時緩存的靜態頁面均使用webp圖片，但當該用戶使用不支持webp的瀏覽器B時，訪問網頁則會出現請求不到圖片的報錯。
Client 處理，是美團雲為美團主站提供的處理方式。在這種處理方式中，瀏覽器端發送的beacon webp 請求後，通過檢測其載入情況來判定 webp 支持情況，然後瀏覽器寫一個cookie。之後通過讀取瀏覽器cookie判斷是否支持webp，就可以進行下一步替換操作了。
2.替換圖片過程中也是有兩種處理方式：
在 server 端處理的優點是對下游開發者透明，缺點是靜態頁面的緩存數量會翻倍。
替換方式如下：
在 client 端處理可以比較好地應對頁面靜態化的情況，主要針對懶載入（非首屏）的圖片進行處理，直接通過修改懶載入器來實現。
對非懶載入的圖片暫時沒有特別好的辦法。目前，可用替換路徑的方式來處理。
Client 處理實際上效果也是不錯的，美團頁面里90%以上的圖片都是懶載入的，基本上都可以滿足需求。對於大多數用戶來說，採用Client 處理實現webp轉換是個不錯的選擇。
既然提到圖片這一塊，我有忍不住想扯寫些題外的tracking Pixel（像素追蹤），幾乎所有網站都會做數據的採集，上報統計。特別是我們做SSP、DSP廣告這塊需要獲取例如
數據永遠說的是實話，數據證明一切可能。如facebook廣告投放的跨境電商朋友都會使用facebook Pixel(像素追蹤)以獲得各環節的精準數據。這樣追蹤數據後，我們才能投放廣告後銷量上去了，哪個才是效果最好的，哪個效果不好，進而通過多個數據對比，對廣告進行合理的調整優化。
國內搜狗、網路、360、新浪都是用這種 tracking Pixel 方法，實際就是利用1px 的圖片，在圖片地址後綴拼接你需要的信息參數，瀏覽器在請求任何資源的時候會發送當前系統的數據，比如瀏覽器信息，操作系統信息，作為http請求頭送過去，他們就能統計了。
為什麼不用js請求統計？
並不是所有的頁面都支持JS的！NoJSStats的實現機制就是網站分析中點擊流數據獲取的方式之一——Web Beacons，即在頁面中嵌入一個1像素的透明圖片，當該頁面被瀏覽時，圖片就會被請求載入，於是在後端的伺服器日誌中就會記錄該圖片的請求日誌，這樣就可以獲得日誌記錄。
例如網路：
本文引用@美團雲 提供的webP方法，感謝。