廈門Web前端培訓機構選哪個？

廈門Web前端培訓機構選哪個?優(yōu)化一般對于css、js是建議使用外聯(lián)式來進行導入。我們可以對css、js做相應的規(guī)劃也可以減少css、js的個數(shù)以減少http請求。同時也要注重減少重復代碼，注重代碼重復利用，以達到用較少的代碼干較多的事。同時當項目要投入上線使用的時候，可以對css、js文件進行壓縮，文件的減小可以加速文件的鏈接導入，以便加速網(wǎng)頁的加載渲染。

廈門Web前端培訓機構選哪個?

作為國內IT培訓的實力品牌，達內集團的每一名員工都以"幫助每一個學員成就夢想"為己任，也正因為達內人的執(zhí)著與努力，達內集團已成功為社會輸送了50000余名合格人才，為中國IT行業(yè)的發(fā)展做出了貢獻。

可通過使用webpack，gulp等工具對Js文件進行合并。

圖片的數(shù)量和大小

多個服務器請求會對站點的性能產(chǎn)生顯著的影響。對一張圖片進行導入又是一個http請求，因此我們應該減少圖片的導入數(shù)量以便減少http請求。此處，我們必須提到一個名詞“css精靈spirit”。css精靈是指包含多個不同的圖標、按鈕或圖形的單個圖像。因此我們可以把多張背景圖片合并為一張然后對背景圖片進行相應的定位。同時使用PNG8格式的圖片相對于GIF來說比較少。而對于內容圖片，可以對其進行適當?shù)膲嚎s，可以加快文檔內容加載，或者如果是需要用戶下載的圖片，小的圖片可以加快用戶下載的速度。

使用較為廣泛的web圖片格式有：JPEG/JPG、PNG、WEBP、Base64、SVG。

1.JPEG/JPG

特點是有損壓縮，體積小，加載快，不支持透明。

使用場景：JPG適合用于呈現(xiàn)熱菜豐富的圖片，在日常的開發(fā)中，JPG圖片經(jīng)常作為大的背景圖、輪播圖或是Banner圖。比如兩大電商網(wǎng)站對大圖片的處理，就是對JPG圖片應用場景的較佳寫照。用JPG來呈現(xiàn)大圖片，既可以保留圖片的質量，又不會擔心圖片的體積，是一種比較廣泛使用的方案。

缺點：在處理一些矢量圖形和logo等這些線條感很強、顏色對比強烈的圖片時，認為壓縮就導致圖片模糊非常明顯。另外，JPG圖像不支持透明度處理，透明圖片只能用PNG來呈現(xiàn)了。

2.PNG-8和PNG-24

特點是無損壓縮、質量高、體積大、支持透明

優(yōu)點：無損壓縮的高保真圖片格式。8和24都是二進制數(shù)的位數(shù)，8位的PNG支持256中顏色，24位的PNG可以支持1600萬種顏色。在不考慮文件大小只在乎較佳的顯示效果時，推薦使用PNG-24。但是在適合使用PNG時會優(yōu)先選擇PNG-8

應用場景：主要用PNG來呈現(xiàn)小的LOGO、顏色簡單對比強烈的圖片或是背景。

3.SVG

特點是文本文件，體積小，不失真，兼容性好

優(yōu)點：SVG是一種基于XML語法的圖像格式。SVG對圖像的處理不是基于像素，而是基于對圖像的形狀描述。

和JPG、PNG相比較，SVG文件體積更小，可壓縮性更強。SVG作為矢量圖較大的優(yōu)點在于圖片可以無限放大還不失真，一張SVG圖片可以適配多種分辨率。另外SVG是文本文件，可以像寫代碼一樣定義SVG，放在HTML中稱為DOM的一部分。也可以把對圖像的描述寫入以.svg為后綴的文件中，在img標簽中引入即可。

4.WebP

優(yōu)點：WebP是一款比JPG、PNG等在壓縮方面更加優(yōu)越的圖片格式，同時也不會影響其圖片質量，使用該格式時較好將同名文件格式化，當檢測瀏覽器不兼容時自動切換jpg格式

缺點：是一個相對較新的技術，所以對于目前市面上的瀏覽器能否的兼容，其可用和實用性就變得很現(xiàn)實了，再好的東西如果沒有好的兼容性，也是非常難以普及和被廣泛使用的

5.Base64

優(yōu)點：減少請求，加快首屏數(shù)據(jù)顯示。對于jpg格式的圖片，每一個圖片相當于一次http請求，圖片多了的話，服務器耗性能比較嚴重。而將jpg轉化成base64格式的圖片，則極大地減少了請求數(shù)，因為Base是文本格式。

缺點：base64格式圖片比原圖大，占用更多存儲空間，同時，瀏覽器不會對該資源緩存。

使用方法：background:url(data:image/png;base64,{img_data})

應用場景：一般對于小于10KB大小的圖片進行base64轉碼。

至于動態(tài)圖有GIF與APNG：后者APNG這東西是mozilla搞出來的， 它是24位的，而且也是動圖，可以容納1680萬種顏色，也是為了取代GIF，但是....也就火狐支持，IE10和chrome，safari全部不行， 如果說gif圖片是卡片機的話， APNG就是單反