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

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

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



 

 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;

效果不会差太多。



 

 

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

猜你喜欢

转载自laibulai.iteye.com/blog/2303383