前端性能优化01
title: 前端性能优化01 date: 2020-01-15 09:02:52 tags: 前端性能优化 categories: 前端性能优化 目标 理解减少http请求数量和减少请求资源大小两个优化要点 掌握压缩与合并的原理 掌握通过在线网站和fis3两种实现压缩与合并的方法 浏览器的一个请求从发送到返回都经历了什么? HTML压缩 一个简单的计算: google的流量,占到整个互联网的40%,如果google每1MB请求减少一个字节,每年可以节省500TB流量 如何进行html压缩 使用在线网站进行压缩 nodejs提供了html-minifier工具 后端模板引擎渲染压缩 CSS压缩 处理原则 无效代码删除 CSS语义合并 如何进行CSS压缩 使用在线网站进行压缩 使用html-minifier对html中的css进行压缩 使用clean-css对css进行压缩 JS压缩与混乱 处理原则 无效字符的删除 剔除注释 代码语义的缩减和优化 代码保护 如何进行JS压缩和混乱 使用在线网站进行压缩 使用html-minifier对html中的js进行压缩 使用uglifyjs2对js进行压缩 文件合并 优点 文件与文件之间有插入的上行请求,增加了N-1个网络延迟 受丢包问题影响更严重 keep-alive 经过代理服务器时可能会被断开 缺点 首屏渲染问题 缓存失效问题 解决办法