干货必读提升性能：二、页面拉伸的使用
本帖最后由 Joe.xu 于 2022-10-27 10:49 编辑市面上形形色色的大屏幕层出不穷，那作为页面设置者的我们必然要站在第五层，通通给支持了。
现在一般我们推荐使用流式布局来让页面自适应屏幕，可以参考这个教程
看完必恍然大悟的活字格内幕：五十、流式布局的正确打开方式
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=92533&fromuid=60953
(出处: 葡萄城产品技术社区)
在流式布局出现之前，活字格也有页面拉伸来处理这类问题，据了解有些格友现在也还在使用，
活字格的拉伸模式主要有以下五种
无拉伸：页面在浏览器中不会进行拉伸，与在设计器中保持一致。
水平拉伸：页面在不同浏览器中随着浏览器尺寸进行水平方向上的拉伸。
垂直拉伸：页面在不同浏览器中随着浏览器尺寸进行垂直方向上的拉伸。
双向拉伸：页面在不同浏览器中随着浏览器尺寸进行水平和垂直方向上的拉伸，使得在充满不同分辨率的浏览器时都具有较好的视觉效果。
等比拉伸（填满宽度）：页面将填满浏览器的宽度，再等比对高度进行拉伸。
针对这几种拉伸的使用，其实也有些许的性能差异，一般来说页面越复杂差异越明显，
接下来我们分别用使用最广泛的无拉伸，双向拉伸，等比拉伸做个测试，
每个页面都有同样的四个表格
（1）无拉伸（3.443s）
（2）双向拉伸（3.655s）
（3）等比拉伸（5.272s）
（4）流式布局（3.578s）
综合来看，双向拉伸、流式布局、无拉伸基本无差异，等比拉伸在页面渲染时耗时长，性能会差一些。
拉伸模式无拉伸双向拉伸等比拉伸流式布局
耗时（s/秒）3.4433.6555.2723.578
基于以上结果，推荐大家在有需要的时候尽量使用流式布局，减少等比拉伸的使用。
页:
[1]