前端性能优化01

---

title: 前端性能优化01
date: 2020-01-15 09:02:52
tags:

• 前端性能优化
  categories:
• 前端性能优化

---

目录

• 目标
• HTML压缩
  • 如何进行html压缩
  • CSS压缩
    • 处理原则
    • 如何进行CSS压缩
  • JS压缩与混乱
    • 处理原则
    • 如何进行JS压缩和混乱
• 文件合并
  • 优点
  • 缺点
  • 解决办法
  • 如何进行文件合并
• 新闻列表页面实战
  • 新闻列表页面代码开发
  • 使用网站进行压缩与合并
  • 使用fis进行自动化的压缩与合并
  • fis3使用
  • 使用过程

目标

1. 理解减少http请求数量和减少请求资源大小两个优化要点
2. 掌握压缩与合并的原理
3. 掌握通过在线网站和fis3两种实现压缩与合并的方法

浏览器的一个请求从发送到返回都经历了什么？

HTML压缩

一个简单的计算：

google的流量，占到整个互联网的40%，如果google每1MB请求减少一个字节，每年可以节省500TB流量

如何进行html压缩

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

CSS压缩

处理原则

1. 无效代码删除
2. CSS语义合并

如何进行CSS压缩

1. 使用在线网站进行压缩
2. 使用html-minifier对html中的css进行压缩
3. 使用clean-css对css进行压缩

JS压缩与混乱

处理原则

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

如何进行JS压缩和混乱

1. 使用在线网站进行压缩
2. 使用html-minifier对html中的js进行压缩
3. 使用uglifyjs2对js进行压缩

文件合并

优点

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

缺点

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

解决办法

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

如何进行文件合并

1. 使用在线网站进行文件合并
2. 使用nodejs实现文件合并

新闻列表页面实战

新闻列表页面代码开发

使用网站进行压缩与合并

tool.oschina.net/jscompress

使用fis进行自动化的压缩与合并

fis3使用

使用过程

• 单文件编译过程
• 打包过程