一行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时间大幅缩短