一行css代码word-break:break-all,导致页面layout时间增加至少10秒

阅读更多

近期遇到个问题,用的xheditor编辑器,图片是base64解码直接存库里的,但每次编辑的时候,只要带有图片,页面加载非常慢

通过chrome的timeline录像,发现耗时在layout上


一行css代码word-break:break-all,导致页面layout时间增加至少10秒_第1张图片
 
一行css代码word-break:break-all,导致页面layout时间增加至少10秒_第2张图片
 google上胡乱搜了一把,定位到影响layout的要么是css,要么是js,主要是改变了页面布局或元素大小,页面就会重新layout。根据代码排除法,定位到是css导致的layout时间增长。

最后还是通过排除法,一个个文件的排除,定位到了具体的css文件。然后继续排除法,根据页面用到的该css文件的属性,定位到了导致问题的代码,就是这一行css:

word-break:break-all;

 

word-break是告诉浏览器单词截断的方式,break-all即对应的方式,具体看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html

 

为什么这一行代码引起layout增加这么长时间的原因我还不太清楚,我猜测是由于xheditor在将base64解码后的图片重新编码成图片形式时,由于base64解码后的图片是N多行字符,加上word-break要对每一行进行截断,于是每行后都要重新布局,导致图片大了之后,layout时间特别长

 

修复方式:不用word-break:break-all;的方式,改用word-wrap: break-word;

效果不会差太多。


一行css代码word-break:break-all,导致页面layout时间增加至少10秒_第3张图片
 
一行css代码word-break:break-all,导致页面layout时间增加至少10秒_第4张图片
 

改完之后,layout时间大幅缩短
 

  • 一行css代码word-break:break-all,导致页面layout时间增加至少10秒_第5张图片
  • 大小: 9.5 KB
  • 一行css代码word-break:break-all,导致页面layout时间增加至少10秒_第6张图片
  • 大小: 60.5 KB
  • 一行css代码word-break:break-all,导致页面layout时间增加至少10秒_第7张图片
  • 大小: 9.3 KB
  • 一行css代码word-break:break-all,导致页面layout时间增加至少10秒_第8张图片
  • 大小: 57.9 KB
  • 查看图片附件

你可能感兴趣的:(一行css代码word-break:break-all,导致页面layout时间增加至少10秒)