Web前端性能优化（一）
Unsplash
1. 静态资源的压缩与合并
我们在开发的时候会习惯缩进和写注释，方便我们在日常的维护，但将代码上传至服务端后，我们完全可以把那些空格、制表符、换行符进行压缩，以此减少请求资源的大小；同样的，我们在服务端所引用的第三方库进行合并，能减少 HTTP 的请求数量
- 将 HTML 文件里的空格、制表符、换行符进行压缩，并剔除所有注释
- 将 CSS 文件里的空格、制表符、换行符进行压缩，无效代码删除，CSS 语义合并
- 将 JS 文件压缩与混乱，无效字符的删除，剔除注释，代码语义的缩减和优化（变量名过长，使用其他字符进行代替），代码保护
代码压缩可以使用 开源中国_在线工具 进行压缩，不过这种方式面对需要大量压缩的代码会显得效率低下，推荐大家使用 html-minifier 插件进行压缩，CSS 还可以使用 clean-css 进行压缩，JS 可以使用 uglifyjs2 进行压缩
在 CSS 或 JS 文件中引用第三方插件，即表明我们在引用第三方资源时需要请求大量的文件，在 keep-alive 模式下，文件与文件直接会插入上行请求，增加网络延迟，受到丢包影响会更严重，经过代理服务器时也可能会断开
在将文件进行合并前，有两个地方需要大家注意下，① 将公共库和业务库分开合并，这样的好处是，我们迭代版本的时候，只需要更新业务库即可，在 Vue, React 框架中也是作同样处理；② 若是在 Vue 或 React 项目中，还建议大家将不同页面所需要的 JS 进行合并，只有当路由到该页面的时候，才请求该页面所需要的组件
合并之后的文件要占据更多容量，所请求时间更久，若是首屏渲染依赖 JS，则会出现首次加载出现白屏的情况，这种场景一般存在于Vue，React框架使用过程中，在没有使用服务端渲染的情况下，是将整个过程通过框架进行接管的
我们在标记 JS 文件是否被更改时，通常会在该 JS 文件后加一个 MD5 戳，用来唯一标识该 JS 文件是否被更改，若是合并前的任一个文件有改动，那么合并后的整个文件缓存都会失效
文件合并的方式同样可通过在线网站或 NodeJS 进行合并，在此不再复述
2. 图片优化
我们一般所用到的图片格式为 jpg, png, webp, svg，而不同的图片格式所对应的业务场景也不相同，jpg 格式图片为有损压缩，压缩率高，不支持透明，适用大部分不需要透明图片的业务场景；png 格式图片支持透明，浏览器兼容好，其中 png8 为 256 色，支持透明，png24 为 2^24 色，不支持透明，png32 为 2^24 色，支持透明；webp 格式图片压缩程度好，在 iOS webview 中有兼容性问题，推荐在 Android 中使用该格式图片；svg 格式图片，将图片内容内嵌到 HTML 中，通过使用 iconfont 解决 icon 问题，减少 HTTP 请求，适用于图片样式相对简单的场景
webp 为谷歌开发的图片格式，其优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 jpeg 和 png 上的转化效果都非常优秀、稳定和统一
雪碧图 CSS sprite 就是讲网站上用到的一些 icon 整合到一张单独图片中，通过 background-position 属性来显示相对应的图片，使用雪碧图的优点为，减少你的网站 HTTP 请求数量，相对而言，加载比较慢
同样推荐几个图片优化的在线网站， 图片压缩 TinyPNG，PNG 转换 Webp ，CSS Sprite 制作
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
