前端优化之资源压缩

傷城~ 2022-05-17 03:04 272阅读 0赞

## 一、基础知识 ##

### 0x1 浏览器请求过程 ###

![20180805125539.png][]  
请求过程中一些潜在的性能优化点

*  dns是否可以通过缓存减少dns查询时间？
 *  网络请求的过程走最近的网络环境？
 *  相同的静态资源是否可以缓存？
 *  能否减少请求http请求大小？
 *  减少http请求
 *  服务端渲染

### 0x2 资源的合并与压缩 ###

*  减少http请求数量
 *  减少请求资源的大小

## 二、资源压缩 ##

### 0x1 HTML压缩 ###

HTML代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。  
![20180805133220.png][]  
进行html压缩前后效果对比  
压缩方式

*  使用在线网站进行压缩
 *  nodejs提供了html-minifier工具
 *  后端模板引擎渲染压缩

### 0x2 CSS压缩 ###

![20180805133725.png][]  
无效代码删除  
css语义合并

压缩方式

*  使用在线网站进行压缩
 *  使用html-minifier对html中的css进行压缩
 *  使用clean-css对css进行压缩

### 0x3 Js压缩与混乱 ###

无效字符的删除  
剔除注释  
代码语义的缩减和优化  
代码保护

压缩方式

*  使用在线网站进行压缩
 *  使用html-minifier对html中的js进行压缩
 *  使用uglifyjs2对js进行压缩

## 三、资源合并 ##

![20180805210745.png][]  
合并前的问题：

*  文件与文件之间有插入的上行请求，增加了N-1个网络延迟受
 *  丢包问题影响更严重
 *  经过代理服务器时可能会被断开

合并后带来的问题：

*  首屏渲染问题
 *  缓存失效问题

解决方案：

*  公共库合并
 *  不同页面的合并
 *  见机行事，随机应变

合并方式：

*  使用在线网站进行文件合并
 *  使用nodejs实现文件合并

可以利用fis3对资源进行压缩。

[20180805125539.png]: /images/20220517/8a6388f46cb24c50bce133285e632018.png
[20180805133220.png]: /images/20220517/95ccbe83261440b1bb0c8e8f1e51921c.png
[20180805133725.png]: /images/20220517/b2929329890746fbb74d612ef19c11c7.png
[20180805210745.png]: /images/20220517/8f667be4fae34d3ab3278949fd06b5a7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，272人围观）

还没有评论，来说两句吧...

相关阅读

相关前端性能优化——启用文本压缩

一、发现性能问题 1、通过 Google Chrome 打开需要进行性能优化的站点 2、打开 Chrome 开发者工具 Lighthouse 面板：

向右看齐/ 2024年03月16日 17:42/ 0 赞/ 21 阅读

相关 web 前端图片优化之--图片压缩上传

[移动前端—图片压缩上传实践][Link 1] 　　此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能，最近有了点空闲时间，所以就实践了一下。demo效果

分手后的思念是犯贱/ 2023年10月11日 15:29/ 0 赞/ 61 阅读

相关 webpack压缩大图片之项目资源优化

> `webpack`打包时，会根据`webpack.config.js` 中`url-loader`中设置的limit大小来对图片进行处理，小于limit的图片转化成`bas

傷城~/ 2022年12月21日 12:56/ 0 赞/ 173 阅读

相关优化前端资源加载

一、优化前端资源加载 `js`加载资源方式： 1.1、使用内联图片，也就是将图片转换为base64编码的data-url。这种方式，其实是将图片的信息集成到css文件

水深无声/ 2022年12月18日 01:53/ 0 赞/ 205 阅读

相关前端代码和资源的压缩与合并

一般在网站发布时，会压缩前端HTML、CSS、JavaScript代码及用到的资源文件（主要是图片文件），目的是加快文件在网络中的传输，让网页更快的展现。当然，CDN分发、缓存

妖狐艹你老母/ 2022年09月28日 13:04/ 0 赞/ 179 阅读

相关前端资源请求速度优化

![5cd51a41accbd877cff95e6aeab6ad64.png][] 来源 | http://www.zhiqianduan.com DNS解析

╰+攻爆jí腚メ/ 2022年09月01日 10:57/ 0 赞/ 213 阅读

相关前端优化之资源加载

一、CSS、JS的装载与执行 html页面加载渲染的过程 ![20180806104814.png][] 特点： 1、顺序执行、并发加载一个域名并

谁践踏了优雅/ 2022年05月17日 03:54/ 0 赞/ 296 阅读

相关前端优化之资源压缩

一、基础知识 0x1 浏览器请求过程 ![20180805125539.png][] 请求过程中一些潜在的性能优化点 dns是否可以通过缓存减少dns查

傷城~/ 2022年05月17日 03:04/ 0 赞/ 273 阅读

相关前端性能优化压缩静态文件gzip

背景如果你是个前端开发人员，你肯定知道线上环境要把js，css，图片等压缩，尽量减少文件的大小，提升响应速度，特别是对移动端，这个非常重要。压缩方式前

客官°小女子只卖身不卖艺/ 2022年05月09日 13:03/ 0 赞/ 268 阅读

相关架构优化之高性能：web前端性能优化，静态资源缓存，文件压缩

web前端性能优化内容主要来自阿里架构一书。自己总结以及进行实践一.浏览器访问优化 1.减少http请求合并css，合并JS，合并图片：图片也可以进行合并

港控/mmm°/ 2022年04月05日 06:24/ 0 赞/ 318 阅读