网络性能优化实战（一）
这是一篇用于本公司定期技术交流分享的一篇整理文章。
首屏一秒渲染原则
对于APP里面的H5页面首屏渲染时间不能超过1秒，首屏不要加载太多资源。Google提出了1秒钟完成首屏页面的渲染！
- 服务器响应必须小于200ms
- 尽量少的重定向
- 尽量少的第一次渲染请求数
- 避免过多阻塞的JS、CSS
- 给浏览器留200ms的渲染时间
- 优化我们的JS执行效率和渲染时间
加载优化
- 减少HTTP请求
尽量减少页面对后台的请求数，能合并的合并。- 合并CSS、JavaScript等代码
- 合并小图片，使用雪碧图
- 使用响应性网页设计，避免重定向
响应性网页设计是指通过同一网址提供相同HTML代码的网站设计方法，使用户不用考虑所使用的是PC、Pad、APP设备，自动适应所使用的设备屏幕。 - 使用浏览器缓存
使用浏览器缓存减少对服务器的请求，所有可缓存静态资源（JS、CSS、图像、媒体文件、PDF文件）都应该在服务器端启用浏览器缓存（缓存一切可以缓存的资源）。注： HTML不是静态资源。- 设置Expires报头为将来某个时间，比如设置为1周。则浏览器在这一周内访问将使用已经缓存的资源，不会发出GET请求去网络查看资源是否发生改变。除非用户手动清除了缓存。
对于设置了缓存的网络请求我大致画了一个流程图如下： - 上面提到的使用外联式引用CSS、JavaScript可以启动浏览器的缓存功能
- 设置Expires报头为将来某个时间，比如设置为1周。则浏览器在这一周内访问将使用已经缓存的资源，不会发出GET请求去网络查看资源是否发生改变。除非用户手动清除了缓存。
- 启用压缩、合并功能
通过对HTML、CSS、JavaScript等资源进行压缩合并。并在服务器端设置GZip。- 文件资源压缩：将多余的空格、换行符、缩进、注释等不必要的字节去掉从而提高下载、解析、执行速度，这一类的在线工具比较多，这里列举几个如下：
- 合并文件：每一个CSS、JS文件都是一个HTTP请求，适当将相关的多份文件合并成一个文件以减少HTTP的请求数。
- 启动网络服务器压缩功能：Apache、Nginx、IIS都支持配置压缩功能，由于我们后台项目采用了.NET/IIS架构，所以我们在此针对IIS进行压缩功能的配置。IIS默认是启动压缩功能的，IIS支持“静态内容压缩”和“动态内容压缩”两种，如下图：
另外微软为我们提供了一份很好的文档：Configuring HTTP Compression in IIS 7
- 首屏加载、按需加载、预加载
首屏应该尽量控制在1秒之内；对于相当屏幕不用的资源应该放到用户需要的时候再加载（延迟加载、上拉滚屏加载）；可感知和不可感知的加载(Loading加载进度条、提前加载下一页)。
渲染优化
- HTML中添加
Viewport来加速页面的渲染
<meta name="viewport" content="width=device-width, initial-scale=1">- 减少DOM节点
DOM节点太多会影响页面的渲染，尽量减少DOM节点 - 动画优化
- 尽量使用CSS3动画
- 合理使用requestAnimationFrame动画代替setTimeout
- 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）
CSS优化
- 避免内联式和嵌入式代码
- 避免在HTML标签中写
style属性(内联式) - 避免在
<style>标签中定义CSS(嵌入式)
- 避免在HTML标签中写
- 使用
<link>将CSS写在头部<head>标签中,而不要使用@import - 合并CSS以减少文件个数 每一个文件就是一个HTTP请求
- 避免CSS表达式
CSS表达式的执行需跳出CSS树的渲染，请避免CSS表达式 - 移除空的CSS规则
空的CSS规则增加CSS文件的大小，影响CSS树的执行，需要移除空的CSS规则 - 尽量少用Web字体
Web字体需要下载，解析，重绘当面页面 - 不声明过多的Font-Size
过多的Font-Size引发CSS树的效率 - 值为0时不需要任何单位
JavaScript执行优化
- 避免内联式和嵌入式代码
- 避免在HTML标签中写类似于
onclick这类属性(内联式) - 尽量避免使用
<script>标签定义JS代码(嵌入式)
- 避免在HTML标签中写类似于
- JavaScript写在尾部或异步
- 优先考虑在
<script>标签中使用src属性引入外部JS文件 -
能够异步延迟加载的JS尽量放到首屏加载完成之后加载，避免因为要下载、解析、执行再去渲染HTML造成页面的阻塞：
<script async src="async.js">
- 优先考虑在
// 如何异步加载多个第三方JS组件
// https://gist.github.com/zenorocha/5161860
(function() {
var script,
scripts = document.getElementsByTagName('script')[0];
function load(url) {
script = document.createElement('script');
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
}
load('//apis.google.com/js/plusone.js');
load('//platform.twitter.com/widgets.js');
load('//s.widgetsite.com/widget.js');
}());- 减少重绘（外观发生变化）和回流（布局发生变化）
避免不必要的DOM操作，尽量改变Class而不是Style - 缓存DOM选择和列表.length
每次DOM选择和列表length都要计算，特别是在for循环里面使用时，请用一个变量保存这个值以减少每次for循环时的重新计算 - 尽量使用ID选择器
ID选择器是最快的
图片优化
- 优先考虑其它图片代替方案
网络上往往最耗流量的就是图片，特别是用户在手机上访问，优先考虑有没有其它的方案可以代替图片，比如：- CSS3
- SVG，是一个XML文件，在任何屏幕分辨率上任意缩放都是边缘清晰的，清晰度不会被破坏。比GIF和JPEG格式的文件要小很多
- IconFont,阿里巴巴矢量图标库
- Srcset(响应式图片)
- 压缩图片
可以使用图片压缩工具对图片进行压缩使图片尽可能小- 使用图片压缩工具，比如腾讯智图
- 选择适当的图片格式
WebP优于JPG,PNG8优于GIF;请勿使用BMP和TIFF格式.这里借用Google的一张图片格式选择方案：
1、WebP是什么？
加快图片加载速度的图片格式,图片压缩体积只有JPEG的2/3,目前Facebook,Google、taobao等知名公司都在自己的应用里面使用WebP格式的图片。
2、哪些设备支持WebP？
Chrome、Android、iOS(原生不支持，但可以通过第三方方案来解决)
- 使用CSS Sprite雪碧图
将多个图片整合到一个图片中，再利用CSS属性（background-image、background-position、background-repeat）来精确定位要显示的图片，减少了HTTP的请求数和请求大小。 - 避免图片和iframe等的空的Src
空Src会重新加载当前页面，影响速度和效率。
相关网址：Empty image src can destroy your site
CDN加速
通过CDN来加速是一项相对而言成本比较高的优化手段，所以这些把它放在所有优化方法的最后，但它是一项非常有效的优化方案
CDN(Content Delivery Network)即内容分发网络，将源站内容分发至全国所有的节点，缩短用户查看对象的延迟，提高用户访问网站的响应速度与网站的可用性，解决网络带宽小、用户访问量大、网点分布不均等问题。
在线工具
- PageSpeed Insights
- GTmetrix tells you a lot about your website performance
- 改善 UI 响应能力
- Chrome DevTools
参考资料
- Improving the Performance of your HTML5 App
- High Performance Animations
- A new image format for the Web
- WEBP - ADVANCED IMAGE OPTIMIZATION USING ASP.NET MVC
- How Browsers Work: Behind the scenes of modern web browsers
- Image Optimization
- Best Practices for Speeding Up Your Web Site