說道性能優化,相信你們都看過網頁的源代碼,和咱們日常寫的可能有些不一樣,在審查元素裏面看到的代碼都是通過壓縮過的,這也是咱們前端優化的一種,在一些比較大的公司會使用到grunt來進行代碼的壓縮或者是合併,在一些小的公司就會使用一些別的方法,下面我就簡單介紹一下比較常見的前端優化。css
在這裏咱們主要分爲三個方向來介紹,首先咱們要介紹的就是網絡方面的,這個主要分爲DNS的解析,CDN的加速,和延遲加載以及預加載在這裏的cdn主要是藉助於一些大型公司的服務器,進行加載,這樣會提高加載的效率。html
第二個就是咱們瀏覽器端的優化,最主要的仍是咱們靜態資源的緩存,主要分爲html模板 css js還有就是images,另一個大類就是動態資源的緩存,這個主要是說的ajax,對於動態緩存ajax來講會減小每次都發送ajax的帶寬,主要便於提高咱們瀏覽的響應速度,用於提高用戶的體驗。還有一點就是本地數據庫的緩存,這一點在咱們的html5的webstorage中用的比較多,最後在瀏覽器端的就是離線緩存。前端
第四個是咱們最重要的就是咱們的代碼層面上的,這個分別體如今html的佈局上面,還有就是css的選擇器問題,這裏咱們都知道id選擇器的效率是最高的,可是最好是在一個頁面中不要濫用,接下來就是對圖片處理的sprite技術,css代碼的壓縮與合併,在一些簡單的動畫儘可能使用咱們的css代碼來代替咱們的js代碼,由於在二者代碼的執行上,css的性能確實是要高於js的,還有就是儘可能使用一些圖標字體來代替圖片的使用,此外還有一個較難理解的迴流與重回,這個談到的主要的css層面的,還有就是咱們js代碼層面的,這裏就主要包括對於dom節點的緩存,經過執行此項操做會減小咱們對於節點的訪問次數,以此提高性能。別的就是和咱們的css相似的代碼的壓縮和合並。
以上就是咱們前端性能優化的一部分,還有一些就是,咱們服務器端和後臺方面的優化,在這裏咱們暫且不談。
html5