前端开发注意点

1.尽量使用transform改变dom的属性

误区：平时对着重的部分会修改字体大小(font-size)，但是这个是会引起重绘的，消耗较多。
【解决】多用transform。比如针对上面的用transform:scale(1.5)来修改字体的大小。原因是transform只会重进进入渲染的最后一步，不会引起浏览器重绘或者重流的。

2.不要频繁地操作dom树

误区：比如不要频繁地上面sppendChild
【解决】如果要加入多个dom，则先创建一个代码片段createDocumentFragment()，往代码片段里面增加dom，最后统一一次将代码片段加到指定位置。

	let frag = document.createDocumentFragment(); // 创建一个文本片段,避免dom.ul.appendChild(li)会频繁地操作DOM树
	for (let i = 0; i < lrcList.length; i++) {
		let li = document.createElement("li");
		li.textContent = lrcList[i].content;
		frag.appendChild(li); // 需要加入的元素先全部加入到代码片段中；
	}
	dom.ul.appendChild(frag); 

3.动画-requestAnimationFrame()

一般使用css的transition和animation来渲染动画，尽量少用js来操作动画。js操作动画时，元素少和对时间精度不要求的时候可以用setTimeout和setInterval，但是会出现延时等操作，此时用requestAnimationFrame()，该函数是在渲染进程中执行的，js代码的运行不会堵塞该部分。

Tips

以下具有先后顺序

• 数据逻辑
• 界面逻辑
• 事件