网站性能优化系统前端性能优化——加载性能

网站性能优化系统前端性能优化——加载性能

性能和体验是前端的核心竞争力，是反映页面是否易于使用的直观标准。用户在页面上花费的时间不应该等待页面加载和响应，而应该是平滑使用和浏览的时间。因此，如何提高页面的性能和体验，使页面更具交互性，浏览和滚动更流畅，需要您不断的研究、优化和推广。在不断的应用开发和rax成熟的过程中，我们总结了一系列性能体验的措施和实践，可以帮助您大大提高页面的性能。

图片占据了网页的大部分空间，特别是对于电子商务企业来说，商品图片占据了网页90%以上的空间。因此，优化图片和减小图片大小可以显著降低带宽，提高页面的加载性能。

图像优化是技术和视觉游戏的产物。它要求您在保证用户视觉体验的前提下，在视觉恢复和清晰度的可接受范围内尽可能优化，从而降低图像带宽，提高页面加载性能。

对于按需加载图像，rax提供图像组件供您选择。所谓合适的画面就是根据不同的环境场景，如屏幕分辨率和网络环境，选择的画面显示。

对于分辨率和网络环境，我们提供了一个自动组件rax picture，可以方便地根据不同分辨率设置不同大小的图片，同时识别网络环境，增加质量控制。对于weex，客户机的底层图像库也将自动帮助您进行处理。

进入无线时代后，受网络环境的制约，仍然存在许多困难和瓶颈，特别是在网络环境薄弱的情况下，如2G/3G的网速较低，将大大减缓页面资源的加载速度，导致页面打开缓慢甚至无法打开，用户体验是很穷。因此，资源缓存、减少网络请求、避免网络环境对页面的影响，是目前一种有效的改进。

数据预取用于提前页面中请求的数据并与页面呈现并行，大大减少了用户查看页面效果数据的等待时间，提高了用户体验。总体思路如下：

路由容器和WebView容器的启动/初始化时间用于获取异步数据。当页面的真实呈现需要数据时，通过jsbridge直接获取需要的数据进行呈现。可以保存的时间=容器路由时间（要查找哪个容器进行着色）+容器开始时间+容器初始化时间+页面帧呈现时间