資訊專欄INFORMATION COLUMN
摘要：減少請求合并打包小圖標等用代替作為單個節點使用，可以設置大小顏色等，非常便利。前后端分離項目，不論是還是，都有相應的工具包。不過，大部分前端對應該陌生一些，為了實踐技術，用熟悉的即可，真正的項目部署，有專業的實施人員來搞使用緩存
減少HTTP請求
CSS/JS 合并打包
小圖標等用iconfont代替：作為單個DOM節點使用，可以設置大小、顏色等，非常便利。個人建議前端來維護這個字體包，每次有新增的圖標，讓設計師給我們對應的svg文件即可，前端自己去 icomoon.io/ 這個網站，導入原來的selection.json文件，增量生成新的css，無比方便。之前，我一直以為iconfont只能是單色的呢，其實也可以是多色的，svg里面多一些path而已，設計師會搞定的。生成字體后，前端正常引用即可（引用的時候，多色字體會多一些標簽）
使用base64格式的圖片：有些小圖片，可能色彩比較復雜，這個時候再用iconfont就有點不合適了，此時可以將其轉化為base64格式（不能緩存），直接嵌在src中，比如webpack的url-loader設置limit參數即可
減少靜態資源的體積
壓縮靜態資源：合并打包的js、css文件體積一般會比較大，一些圖片也會比較大，這個時候必須要壓縮處理。前后端分離項目，不論是gulp還是webpack，都有相應的工具包。針對個別圖片，有時候也可以多帶帶拿出來處理，我個人經常使用這個網站 tinypng.com/ 在線壓縮
編寫高效率的CSS：涉及到代碼層面的優化比較多也比較細，不同水平的技術人員寫出來的肯定不一樣，這里不做進一步的分析。但是為什么要把CSS拿出來說一說呢？因為現在項目里面基本上都在使用CSS預處理器，Less、SaaS、Stylus等等，這導致了某些初級前端的濫用：嵌套5、6層，甚者能達到7、8層，嚇死個人！嵌套這么深，影響瀏覽器查找選擇器的速度不說，這也一定程度上產出了很多冗余的字節，這個要改、要提醒，一般建議嵌套3層即可。關于編寫高效率的CSS，推薦一篇文章，《Writing efficient CSS selectors》
服務端開啟gzip壓縮：大招，最近剛知曉，真是太牛逼了，一般的css、js文件能壓縮60、70%，當然，這個比率可以設定的。前后端分離，如果前端部署用node、express作服務器的話，使用中間件compression即可開啟gzip壓縮：
// server.js
var express = require("express");
var compress = require("compression");
var app = express();
app.use(compress());復制代碼
對于一般的SPA項目，如果node服務器的作用比較簡單，比如只是做個接口轉發之類的，很多人更傾向用Nginx作服務器，Nginx在轉發接口、壓縮、緩存等功能上更勝一籌。不過，大部分前端對Nginx應該陌生一些，為了實踐技術，用熟悉的node即可，真正的項目部署，有專業的實施人員來搞
使用緩存
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114983.html
摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...
摘要：在所有的網站優化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現的，并使用進行合并。可以減少請求，還可以配合離線存儲做性能優化。創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。 前言 第一篇文章，小弟先做一番自我介紹^ω^姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業生，大四前的暑假起對web前端產生興趣并有半年實習經驗。ng...
摘要：在所有的網站優化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現的，并使用進行合并?？梢詼p少請求，還可以配合離線存儲做性能優化。創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。 前言 第一篇文章，小弟先做一番自我介紹^ω^姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業生，大四前的暑假起對web前端產生興趣并有半年實習經驗。ng...
摘要：對于廣大的前端開發人員來說，網站構建本是家常便飯其中也不得不涉及到性能優化的問題。將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載，可以大大提升重要資源的顯示速度和降低總體流量按需加載會導致大量重繪，影響渲染性能。對于廣大的前端開發人員來說，網站構建本是家常便飯；其中也不得不涉及到性能優化的問題。之前也有接觸過，今天總結一下這方面的技巧，下面是我的一下認知，歡迎探討： ? Nu...
摘要：性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加載卡頓網頁加載速度慢等問題，這篇文章將會將我以往對圖片的處理做個總結。 性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加...
閱讀 3735·2023-01-11 11:02
閱讀 4244·2023-01-11 11:02
閱讀 3050·2023-01-11 11:02
閱讀 5180·2023-01-11 11:02
閱讀 4737·2023-01-11 11:02
閱讀 5534·2023-01-11 11:02
閱讀 5313·2023-01-11 11:02
閱讀 3989·2023-01-11 11:02
