最后更新一篇语法&规范，实在是一滴都没有辣~
HTML篇
启用标准模式
使用HTML5的Doctype来启用标准模式
<!DOCTYPE html>
自闭和标签无需闭合
例如：img,input,br等
<img src="https://xxx.png" />
</br>
<input type="text" />
使用语义化标签
HMTL标签能够语义化的尽量使用语义化标签，避免成为div侠！
<p>这是一个段落</p>
<header>我是头部</header>
<footer>我是尾部</footer>
属性书写顺序
HTML属性应该按照特定顺序出现，以保证易读性~
<div id="xx" class="xx" name="xx" data-xx="xx" src="xx" type="xx" alt="xx"></div>
CSS篇
之前在另一篇文章有提到过BEM命名原则，BEM即
- block：模块，名字单词间使用 - 连接
- element：元素，模块的子元素，使用__与block相连
- modifier：修饰，模块的变体，定义特殊模块，以--与block连接
css选择器的使用
- 保持简单，不使用过多的嵌套以及过于复杂的选择器；
- 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用；
- 不要使用类选择器和ID选择器修饰元素标签；
- 不要为了追求速度而放弃可读性与维护性；
- 避免使用 CSS 表达式；
慎重选择消耗性能的样式
高消耗性能的属性在绘制前需要浏览器进行大量的计算：
box-shadows
border-radius
transparency
transforms
CSS filters
避免重绘重排
当发生重排的时候，浏览器需要重新计算布局位置及大小，不利于性能优化！
常见引起重绘重排的属性和方法有：
- 添加或删除可见的
DOM元素 - 元素尺寸改变 —— 编辑、填充、边框、宽度、高度
- 内容变化，如用户在
input输入框输入文字 - 浏览器窗口尺寸发生改变 —— resize事件发生
- 计算
offsetWidth和offsetHeight属性 - 设置
style属性的值
减少重排重绘的方法
- 使用
transorm代替top； - 使用
visibility代替display: none，因为前者只会引起重绘，后者改变布局会引发回流； - 尽量不使用table布局，可能一个小改动会引起整个table的重新布局；
- 动画实现的速度越快回流次数越多，也可以选择使用
requestAnimationFrame；
JavaScript篇
命名规则
这篇文章里提到过了！关于一些令人舒适的命名，比代码写得好更令人愉悦~
命名语义化
is判断是否为某个值has判断是否含有某个值get获取某个值set设置某个值
字符串
统一使用单引号''而不是双引号""
const type = 'string'; √
const type = "string"; ×
for循环
使用for循环过程中，数组的长度用一个变量来接收，有利于代码执行效率提高，而不是每走一次循环都重新计算数组长度
for(let i = 0;i < arr.length;i++) {} ×
for(let i = 0;i < len = arr.length;i++) {} √
图片篇
- 项目中的图标我推荐使用 iconfont，可以线上选图，可以上传子的图标，还可以修改线性图标的颜色，在项目中使用class就可以修改图标，很方便~
- 图片懒加载，原理是暂时不设置图片的
src属性，将图片的url隐藏，比如先写在data-src中，等某些事件触发时再将真实的url塞进src中，从而实现图片的延迟加载~
