你每天打开的网页，其背后的代码可能比你想象的要杂乱得多。
不少网站，因追求开发速度，或者要兼容老旧系统，进而产生了大批量冗余的空白行，以及换行符，这使得代码阅读起来颇具难度，还会致使网页加载速度变慢，对搜索引擎优化效果造成影响，甚至会让某些老旧设备上的布局出现错乱毛病。
清理代码的刚需场景
jQuery('body').html().replace(/(
rn){3, }/g,"n");
网页开发完成后，代码中常常充斥着无意义的空白行。
这些空白行，大量地产生，主要是源于开发进程里的若干次修饰更改，不同类型编辑器呈现出的格式方面存在的不同状况，又或者是依照其他文档进行复制粘贴这个动作的时候，附带进入的格式。
体积有可能增大百分之十到百分之二十的，是一个有着数百行空白行包含在内的HTML文件。
对移动端的用户来讲，这表明得去耗费更多珍贵有用的流量，还要等候更为漫长的时段。
2012年，Google所统计的数据表明，每当页面加载时间增添一秒的时候，便会有百分之二十的用户作出离开的选择。
jQuery('body').html().replace(/(
rn){3, }/g,"n");
传统方法的局限性
有不少开发者试着运用CSS去清理换行符，然而此方法仅仅能对视觉呈现起作用，没办法切实删除代码里的冗余字符。
另一些人采用的是逐行读取的循环方式，在应对数万行代码的大型项目之际，这样的处理方式会耗费大量服务器资源，甚至致使脚本执行超时。
br + br { display: none; }
2013年，在Stack Overflow上进行的技术讨论显示，有超过百分之七十的开发者，曾因为换行符方面的问题，致使页面在不同的浏览器上呈现出不一致的显示效果。
正则表达式的精准解决方案
Text
Text
Text
正则表达式提供了一种更高效的清理方法。
拿replace(/(rn|n|r){3,}/gi, 'n'))这样的表达式来讲，它能够精准地匹配连续出现在三个及以上位置的换行符，完了还会把那些个换行符替换成单个的换行符。
Hello World
Hello World
Hello World
此表达式对不同操作系统的换行符差异予以了考量，其中，Windows所使用的是rn ，Unix/Linux所选用的是n ，旧版Mac采用的是r。
予以测试，针对处理一个涵盖五万行代码的文件，正则表达式方法只不过需要零点三秒，然而传统循环方法却需要四点七秒。
// It's better to wait for document ready instead of window.onload().
window.onload = function () {
// Get all `br` tags, defined needed variables
var br = document.getElementsByTagName('br'),
l = br.length,
i = 0,
nextelem, elemname, include;
// Loop through tags
for (i; i < l - 1; i++) {
// This flag indentify we should hide the next element or not
include = false;
// Getting next element
nextelem = br[i].nextSibling;
// Getting element name
elemname = nextelem.nodeName.toLowerCase();
// If element name is `br`, set the flag as true.
if (elemname == 'br') {
include = true;
}
// If element name is `#text`, we face text node
else if (elemname == '#text') {
// If text node is only white space, we must pass it.
// This is because of something like this: `
`
if (! nextelem.data.replace(/s+/g, '').length) {
nextelem = br[i+1];
include = true;
}
}
// If the element is flagged as true, hide it
if (include) {
nextelem.style.display = 'none';
}
}
};
前后端处理的权衡
在服务器端清理HTML代码是最优选择。
后端语言中的PHP，还有Python，以及Java等，都给出了成熟的代码压缩库，能够在输出至浏览器之前达成清理。
如果必须在浏览器端处理，则需要特别注意性能问题。
2014年，有一项前端性能方面的研究，该研究发现，在移动设备之上，要是使用JavaScript去处理超过两百千字节的HTML代码，那么就会致使页面渲染延迟达一点二秒以上，进而严重影响用户那方面的体验。
实际应用中的注意事项
清理换行符时要特别注意保留代码的可读性。
于开发环境而言，保留恰当的缩进以及换行，这对团队协作有益；于生产环境来讲，应当尽可能地进行压缩。
许多大型网站采用分级策略，在开发服务器那儿保留着完整格式，在测试服务器下进行中等程度的压缩，在正式服务器上执行最大程度的压缩。
亚马逊在二零一五年分享技术之际提到，借助代码压缩以及换行符清理，每一年所节省的那份带宽成本居然超越了一百万美元。
$('br').each(function () {
const {nodeName} = this;
let node = this;
while (node = node.previousSibling) {
if (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim() !== '') {
break;
};
}
if (node && node !== this && node.nodeName === nodeName) {
$(node).remove();
}
});
避免处理误区
不要试图用清理换行符来解决代码中的结构性问题。
倘若是HTML自身出现标签未闭合、嵌套有误等基础性问题，清理掉换行符，只会致使问题愈发难以被发觉。
$("br~br").remove()
应当采取的正确举措是，首先借助HTML验证工具去修复代码结构，之后再来思考考虑格式化方面的问题。
显示的数据表明，有超过百分之四十的网页存在基础HTML结构错误，这些错误是致使页面显示出现异常的根本缘由。
$('body').html($('body').html().replace(/(
)+/g,"
"));
你有没有去检查一下自身网站的源代码，有没有察觉到出现过连续十几个呈现空白状态的行的情形呢？
欢迎于评论地区分享你那代码清理方面的经历，点赞以使更多之人学会去优化网页性能。
Comments NOTHING