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
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券