[web性能優化] - 使用在線工具對html、js、css進行壓縮

參考

1. 學習點

  • 使用 在線工具對html、css、js進行壓縮
  • 學會分析壓縮前后的效率提高點

2. 解決方案:

2.1 HTML壓縮

  1. 在線壓縮
  2. nodejs提供了 html-minifier工具(在構建層對代碼進行壓縮)
  3. 后端模板引擎渲染壓縮
    在這里插入圖片描述

2.2 CSS壓縮

  1. 使用html-minifier對html中的css進行壓縮
  2. 使用clean-css對css進行壓縮

使用在線壓縮如下圖所示。
在這里插入圖片描述

2.3 js壓縮與混亂

  1. 使用html-minifier對html中的js進行壓縮
  2. 使用uglifyjs2對js進行壓縮
  3. ps: 注意依賴關系
    在這里插入圖片描述

3. 壓縮對比

在這里插入圖片描述

  1. 對js進行了合并壓縮
  2. 合并之后頁面空白時間(DOMContentLoaded)從原來的2.70s降低到現在的936ms
  3. 頁面加載時間(Load)從原來的2.93s降低到現在的1.24s

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250070.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250070.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250070.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【LOJ】 #2540. 「PKUWC2018」隨機算法

【LOJ】 #2540. 「PKUWC2018」隨機算法

題解 感覺極其神奇的狀壓dp \(dp[i][S]\)表示答案為i，然后不可選的點集為S 我們每次往答案里加一個點，然后方案數是，設原來可以選的點數是y，新加入一個點后導致了除了新加的點之外x個點不能選，那么方案就是把x個數在y …
閱讀更多...
Shiro的authc過濾器的執行流程

Shiro的authc過濾器的執行流程

1.先執行isAccessAllowed()，通過subject.isAuthenticated()判斷當前session中的subject是否已經登陸過。如果在當前session即會話中已經登陸過，返回true，authc過濾器放行請求到loginUrl。 問題? 這里會有一個問題，如果我登陸成功…
閱讀更多...
SpringBoot之基礎

SpringBoot之基礎

簡介 背景 J2EE笨重的開發 / 繁多的配置 / 低下的開發效率 / 復雜的部署流程 / 第三方技術集成難度大 特點 ① 快速創建獨立運行的spring項目以及主流框架集成 ② 使用嵌入式的Servlet容器, 應用無需達成war包 ③ starters自動依賴和版本控制 ④ 大量自動配置, 簡化開發, 也可修…
閱讀更多...
[Java核心技術(卷I)] - vscode手動編譯運行繼承類

[Java核心技術(卷I)] - vscode手動編譯運行繼承類

參考 - P160~P161 主要有3個類: 一個測試類(ManagerTest)、一個子類(Manager)、一個父類(Employee) 注意點: -1. 使用 javac -d . *.java進行預編譯 目錄結構入下: 此時會生成目錄結構如下: 之后運行 java com.inheritance.ManagerTest 附上幾個類的代碼 // com.inhe…
閱讀更多...
mysql常用語句和函數

mysql常用語句和函數

mysql語句如果長期不寫，就會忘掉，所以要時常復習，溫故而知新。 1.select length("中國人"),select char_length("中國人"); 2建立數據庫的語句 use new_schema;create table ta(id int primary key);這是小括號&#xff…
閱讀更多...
shiro框架@RequiresPermissions 解釋

shiro框架@RequiresPermissions 解釋

RequiresAuthentication 驗證用戶是否登錄，等同于方法subject.isAuthenticated() 結果為true時。 RequiresUser 驗證用戶是否被記憶，user有兩種含義： 一種是成功登錄的（subject.isAuthenticated() 結果為true）&…
閱讀更多...
【Social Listening實戰】當數據分析遭遇心理動力學：用戶深層次的情感需求浮出水面...

【Social Listening實戰】當數據分析遭遇心理動力學：用戶深層次的情感需求浮出水面...

本文轉自知乎 作者：蘇格蘭折耳喵 ————————————————————————————————————————————————————— 本文篇幅較長，分為五部分，在中間部分有關于心理分析工具的介紹，案例分散在第二部…
閱讀更多...
Python 字符串切片

Python 字符串切片

#-*- coding:utf-8 -*-#字符串切片names "abcdefgh"切片語法 names[起始位置:終止位置:步長] 起始位置:即字符串的下標，可以是正序下標(0,1,2...)，也可以是逆序下標(-1,-2,-3...) 終止位置:也是字符串的下標，但是和起始位置下標不…
閱讀更多...
[Java核心技術(卷Ⅰ)] - 判斷相等

[Java核心技術(卷Ⅰ)] - 判斷相等

參考 - P184 public boolean equals(Object otherObject) {// a quick test to see if the objects are identicalif (this otherObject) return true;// must return false if the explicit parameter is nullif (otherObject null) return null;// if the classes dont ma…
閱讀更多...
Oracle 11g DG主庫節點2 ORA-00245: control file backup fail

Oracle 11g DG主庫節點2 ORA-00245: control file backup fail

--節點1報錯 Sun Dec 09 08:29:57 2018Control file backup creation failed: failure to open backup target file /u01/app/oracle/product/11.2.0/db_1/dbs/snapcf_zwdb.ctl.Errors in file /u01/app/oracle/diag/rdbms/zwdb/zwdb2/trace/zwdb2_arc0_167660.trc:ORA-27037: …
閱讀更多...
hive字符函數

hive字符函數

轉載于:https://www.cnblogs.com/ggzhangxiaochao/p/9222732.html
閱讀更多...
java動態編譯

java動態編譯

編譯，一般來說就是將源代碼轉換成機器碼的過程，比如在C語言中中，將C語言源代碼編譯成a.out,，但是在Java中的理解可能有點不同，編譯指的是將java 源代碼轉換成class字節碼的過程，而不是真正的機器碼&#xf…
閱讀更多...
[c++] - 簡單的冒泡

[c++] - 簡單的冒泡

#include <iostream> using namespace std;int main() {// 利用冒泡排序實現升序序列int arr[9] {4, 2, 8, 0, 5, 7, 1, 3, 9};cout << "排序前: " << endl;for (int i 0; i < 9; i){cout << arr[i] << " ";}cout <…
閱讀更多...
Python爬蟲之解析網頁

Python爬蟲之解析網頁

常用的類庫為lxml, BeautifulSoup, re(正則) 以獲取豆瓣電影正在熱映的電影名為例,urlhttps://movie.douban.com/cinema/nowplaying/beijing/ 網頁分析 部分網頁源碼 <ul class"lists"><liid"3878007"class"list-item"data-title"…
閱讀更多...
騰訊企業郵箱報錯 smtp.exmail.qq.comport 465, isSSL false

騰訊企業郵箱報錯 smtp.exmail.qq.comport 465, isSSL false

一、報錯 "smtp.exmail.qq.com" port 465, isSSL false 通過網上搜索查詢一些資料&#xff0c;推測是郵箱的配置出問題了。 二、修改郵箱配置 1 // 創建屬性2 Properties props new Properties();3 props.setProperty("mail.transport.protocol", "s…
閱讀更多...
spring與JDK版本對應關系

spring與JDK版本對應關系

搭建spring框架得時候要考慮jdk的版本&#xff0c;提供一下參考 JDK 8 中可以使用 Spring Framework 5.x JDK 7 中可以使用 Spring Framework 4.x JDK 6 中可以使用 Spring Framework 4.x JDK 5 中可以使用 Spring Framework 3.x
閱讀更多...
Markdown預覽功能不可用解決方案

Markdown預覽功能不可用解決方案

初學者在使用Markdown時也許會遇到這個問題 原因是電腦缺少一個組件&#xff0c;解決方案很簡單&#xff0c;安裝上就好了&#xff0c;以下是鏈接 http://markdownpad.com/download/awesomium_v1.6.6_sdk_win.exe轉載于:https://www.cnblogs.com/j9oker/p/10092829.html
閱讀更多...
Linux 中yum的配置

Linux 中yum的配置

1.進入yum的路徑 cd /etc/yum.repos.d 2.將原始的repo文件移入一個新建的backup文件下做備份 mv CentOS* backup 3.在/etc/yum.repos.d下新建一個自己的文件(這里的文件必須以repo結尾); vi zhi.repo 其中&#xff0c;第一行必須是[文件名]的格式　　是一個標記 name*** 這是一…
閱讀更多...
[生態建設] - js判斷小技巧

[生態建設] - js判斷小技巧

0、參考 說明: 從幾個易得的點出發,逐步向外擴展延申,保證代碼的可靠性 1、判斷是否為某個類型 // 判斷是否為 null const isNull o > {return o null; };// 判斷是否為 undefined const isUndefined o > {return o undefined; };// 判斷是否為 null or undefined…
閱讀更多...
Spring中Bean的概念

Spring中Bean的概念

一、Bean的定義 <beans…/>元素是Spring配置文件的根元素&#xff0c;<beans…/>元素可以包含多個<bean…/>子元素&#xff0c;每個<bean…/>元素可以定義一個Bean實例&#xff0c;每一個Bean對應Spring容器里的一個Java實例定義Bean時通常需要指定兩…
閱讀更多...
最新文章

Copyright @ 2022~2023