GitHub 上一份很受欢迎的前端代码优化指南-强烈推荐收藏
看到一份很受欢迎的前端代码指南，根据自己的理解进行了翻译，但能力有限，对一些JS代码理解不了，如有错误，望斧正。
HTML
语义化标签
HTML5 提供了很多语义化元素，更好地帮助描述内容。希望你能从这些丰富的标签库中受益。
请确保正确使用语义化的标签，错误的用法甚至不如保守的用法。
简洁
确保代码简洁性，不要再采用XHTML的旧做法。
可用性
可用性不应该是事后才考虑的事情。你不必成为WCAG专家来改进网站，你可以通过简单的修改做出不错的效果，例如；
正确使用alt属性
确保链接和按钮正确使用（不要用
这种粗暴的做法）
不依赖于颜色来传达信息
给表单做好lable标记
语言
定义语言和字符编码是可选项，建议在文档级别处定义。使用UTF-8编码。
性能
除非有非要在加载内容前加载脚本的必要性由，不然别这样做，这样会阻碍网页渲染。如果你的样式表很大，必须独立放到一个文件里。两次HTTP 请求不会显著降低性能。
CSS
分号
不能漏写分号
盒模型
整个文档的盒模型应该要相同，最好使用global * { box-sizing: border-box; }定义。不要修改某个元素的盒模型。
流
尽量不要改变元素默认行为。保持默认的文本流。比如，移出一个图片下面的一个白块，不影响原本的显示：
类似的，尽量不要改变浮动方式。
定位
有很多CSS定位方法，尽量避免使用以下方法，根据性能排序：
选择器
紧密耦合DOM选择器，三个层级以上建议加class：
避免不必要的写法：
指明
不要让代码难于重写，让选择器更精确，减少ID、避免使用!important
覆盖
覆盖样式会使维护和调试更困难，所以要尽量避免。
继承
不要把可继承的样式重复声明：
简洁
保持代码的简洁。使用属性缩写。不必要的值不用写。
语言
能用英文的时候不用数字。
供应商的前缀
砍掉过时的供应商前缀。必须使用时，需要放在标准属性前：
动画
除了变形和改变透明度用animation，其他尽量使用transition。
单位
可以不用单位时就不用。建议用rem。时间单位用s比ms好。
颜色
需要做透明效果是用rgba，否则都用16进制表示：
绘图
减少HTTPS请求，尽量用CSS绘图替代图片：
注释
JavaScript
性能
有可读性、正确性和好的表达比性能更重要。JavaScript基本上不会是你的性能瓶颈。有些可优化细节例如：图片压缩、网络接入、DOM文本流。如果你只能记住本指南的一条规则，那就记住这条吧。
Statelessness
尽量保持代码功能简单化，每个方法都对其他其他代码没有负影响。不使用外部数据。返回一个新对象而不是覆盖原有的对象。
尽量使用内置方法
严格条件
在非必要严格条件的情况不要使用。
对象
不要在循环里强制改变对象的值，，可以利用array.prototype方法。
Arguments
忘记arguments对象吧，其他参数是更好的选择，因为：
它已经被定义
它是一个真的数组，很方便使用
Apply
忘记apply()，改用运算操作。
Bind
不用bind()方法，这有更好的选择：
更好的排序
避免多重嵌套：
Composition
避免方法嵌套调用，改用composition：
缓存
缓存性能测试，大数据结构和任何高代价的操作。
变量
const 优于 let， let 优于 var。
条件判断
用多个if，优于 if 、else if、else 和switch。
对象的操作
避免使用for...in。
使用map
合理使用的情况下，map更强大：
Curry
在别的语言里有Curry的一席之地，但在JS里避免使用。不然会是代码阅读困难。
可读性
不要使用自以为是的技巧：
代码重用
对写些小型、组件化、可重用的方法。
依赖
减少第三方库的使用。当你无法完成某项工作时可以使用，但不要为了一些能自己实现的小功能就加载一个很大的库。
关注我们
- 发表于:
- 原文链接：http://kuaibao.qq.com/s/20171226B0UKZ400?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
