前端开发的奇技淫巧 --- 持续更新中

【点赞收藏加关注，前端技术不迷路~】

一、排版技巧

        在前端排版中大部分情况是对齐的问题，尤其是在跨层级、跨内容块结构的对齐，那么我们就可以利用手边的一起来协助对齐调整。

1.桌面的其他应用框

        应用框的边框一定是水平或竖直的，将应用框拖拽至需要对齐的标签的侧面，就可以视对齐程度进行微调了。

        但这里出现一个问题，就是应用框的边框一般式有阴影的，一定程度上来说，不利于精准对齐。

2.截图工具精准对齐

        截图工具含有高亮标线，明暗对比图层，是最便捷的对齐技巧。

二、console.log()的妙用

        作为控制台输出语句console.log()，可以用来观察程序执行过程中的数据变化。

1.数据流向

        注意同步异步数据流向，尤其是同步代码调用多个异步请求时，多个请求回调执行顺序要捋清。

2.观察目标类型

        当观测目标是对象类型数据时，console.log()的语句执行，传入的就是一个地址，如果在同步代码执行结束前，目标数据发生了变化，那么在浏览器上打印出的数据也会发生变动，可采取Object.assign({}，target))来解决。对于多层数据来说，转成Json格式的string串更稳妥。

三、代码执行效率优化

1.循环展开

        循环展开来提高代码执行效率，循环展开通过CPU内部可实现多条指令流水线，让多次循环并行执行来提高效率，必须保证多展开的下一次循环处理时不用到上一次循环的任何变量，否则循环展开无意义。

        循环展开是一种牺牲程序的尺寸来加快程序的执行速度的优化策略。在循环展开优化中，循环体内的指令被“展开”指令集合形式，即拆分成一组相互独立的指令，每次执行一组指令替代每次执行循环体内一行指令（因此执行指令的次数变为原来的一半）。

let sum = 0;
for (let i = 0; i < 100; i++) {sum += students[i].shuxue;
}// 循环展开
let sum1 = 0;
let sum2 = 0;
for (let i = 0; i < 50; i++) {sum1 += students[i].shuxue;sum2 += students[i + 1].shuxue;
}
sum = sum1 + sum2;

本帖子持续更新中...