代码性能优化-创新互联

HTML
1.网页三要素title（标题）、keywords（关键字）、description（描述）
2.一个页面h2标签只能出现一次

CSS
1.命名与备注　　
命名是提高代码可读性的第一步，也是及其重要的一步。很多人都有这样的体会：命名是写代码中最让程序员头疼的事情之一，尤其是对母语非英语的开发人员来说，要找一个合适贴切的名字并不容易。提高自己命名的能力，可以多看看别人的代码。下面是CSS中的一些命名相关的建议：头：header　内容：content/container　尾：footer　导航：nav侧栏：sidebar　栏目：column　页面外围控制整体佈局宽度：wrapper　左右中：left right cente登录条：loginbar　标志：logo　广告：banner　页面主体：main　热点：hot　新闻：news　下载：download子导航：subnav　菜单menu子菜 submenu　搜索：search　友情链接：friendlink　页脚：footer版权：copyright　滚动：scroll　内容：content　标签：tags　文章列表：list　　提示信息：msg　　小技巧：tips　栏目标题：title　加入：joinus　指南：guide服务：service　注册：regsiter 状态：status　投票：vote　合作伙伴：partner　导航：nav　主导航：mainnav　子导航：subnav　顶导航：topnav　边导航：sidebar　左导航：leftsidebar　右导航：rightsidebar　　菜单：menu子菜单：submenu 标题: title 摘要: summary。

2.提取重复样式
这一个方法很容易理解，简单说就是提取相同的样式成为一个单独的类再引用，这样不仅可以精简CSS文件大小，而且CSS代码变少，更易于重用和维护。

3.书写顺序　　
这个书写顺序指的是各个样式的书写顺序，下面是推荐的CSS书写顺序(1)位置属性(position, top, right, z-index, display, float等)(2)大小(width, height, padding, margin)(3)文字系列(font, line-height, letter-spacing, color- text-align等)(4)背景(background, border等)(5)其他(animation, transition等)，reflow和repaint都是耗费浏览器性能的操作，这两者尤以reflow为甚；因为每次reflow，浏览器都要重新计算每个元素的形状和位置。由于reflow和repaint都是非常消耗性能的，我们的浏览器为此做了一些优化。浏览器会将reflow和repaint的操作积攒一批，然后做一次reflow。但是有些时候，你的代码会强制浏览器做多次reflow。

4.标准化各种浏览器前缀
带浏览器前缀的在前，标准属性在后。

5属性值为浮动小数0.，可以省略之前的0

6.如果只有一项值，最好不要应用复合属性。以免带来不必要的麻烦。
比如 .sample1 {font-weight: bold} ，如果写成 .sample1 {font: bold} 就没任何作用了。再举个列子，比如 .sampl2 {background-color: #CCCCCC; } ，如果写成 .sampl2 {background: #CCCCCC; } ，浏览器虽然能正确解释，但这不是规范的写法，因为这样会导致浏览器多次计算其他无用的属性。

7.减少文件的大小
比如属性值简写#FFFFFF可以简写为#FFF,#BB44DD可以简写为#B4D

8.多用精灵图
一个网页上有很多的小图片，比如有20个，如果我们都请求一遍，就需要使用20个http请求，这是很耗时的，但是我们可以把这些图片合成一个大的图片，然后将之作为 background-img插入进去， 根据不同的图片设置不同的background-postion即可，虽然在不同的位置需要请求很多的图片，但是，实际上我们查看网络只会请求一次

9.精简页面的样式文件，去掉不用的样式　　
很多时候，我们会把所有的样式文件合并成一个文件，但是这样有一个问题：很多其他页面的CSS同时引用到当前页面中，而当前页面并没有用到它们，这种情况会造成两个问题:(1)样式文件偏大，影响加载速度　(2)浏览器会进行多余的样式匹配，影响渲染时间。正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。PS：合并成一个文件有一个优点：样式文件会被浏览器缓存，进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待，如果是大项目，应该合并成不同的样式文件，如果是简单的项目，建议合并成一个文件即可。如果无法确认项目规模，建议分开成不同的样式文件，日后要合并也比较方便。

10.将 css放在 head中　　
如果将 css放在其他地方比如 body中，则浏览器有可能还未下载和解析到 css就已经开始渲染页面了，这就导致页面由无 css状态跳转到 css状态，用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。

11.避免使用css @import
这样做会导致css无法并行下载，因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。 浏览器会在页面所有css下载并解析完成后才会开始渲染页面，因此css @import引起的css解析延迟会加长页面留白期。 所以，要尽量避免使用css @import而尽量采用link标签的方式引入。

12.避免使用复杂的选择器，层级越少越好
有时候项目的模块越来越多，功能越来越复杂，我们写的CSS选择器会内套多层，越来越复杂。建议选择器的嵌套最好不要超过三层

13.避免让选择符看起来像正则表达式
css添加了一些类似~=的复杂属性，也不是所有浏览器都支持，需谨慎使用

14.正确使用display的属性
由于display的作用，某些组合样式会无效，徒增样式体积的同时也影响性能
display:inline;后不应再使用width、height、margin、padding、float。
display：inline-block后不应再使用float。
display:block后不应再使用vertical-align。
display:table后不应再使用margin、left。

15.利用继承减少代码量　　
我们知道有一部分CSS代码是可以继承的，如果父元素已经设置了该样式，子元素就不需要去设置该样式，这个也是提高性能的行之有效的方法。常见的可以继承的属性比如：Color、Font 、Letter-spacing、Line-height 、List-style 、Text-align 、Text-indent 、Text-transform 、White-space 、Word-spacing 等等。不可继承的比如：position，display，float等。

16.不滥用浮动
虽然浮动不可避免，但不可否认很对css bug是由浮动引起的，css Lint一旦检测出样式文件中有超过10次的浮动便会提示警告

17.不滥用web字体
对于中文网站来说，Web Fonts可能很陌生，但是国外却很流行，Web Fonts通常体积庞大，而且一些浏览器在下载Web Fonts时会阻塞页面渲染，损伤性能。

18.不重复定义h2~h7元素，不给h2~h7元素定义过多的样式

19.不声明过多的font-size

20.不在选择符中使用ID标识符

21.值为0时不需要任何单位

22.移除空的规则

23.不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，前方嵌套完全是浪费性能。

24.减少通配符*或者类似[hidden="true"]这类选择器的使用，挨个查找所有...这性能能好吗？当然重置样式这些必须的东西是不能少的。

25.有些人喜欢在类名前面加上标签名：p.ty_p 来进行更加精确的定位，但是这样往往效率更差，类名应该在全局范围除非公用是唯一的，所以这种做法是应该便面的。

26.避免使用 Filter：
IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器，停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素（使用到该 filter 样式）渲染时都会被浏览器分析一次，而不是像一般的背景图片渲染模式：使用过该背景图片的所有元素都是被浏览器一次性渲染的。
针对这种情况，最好的解决办法就是使用 PNG8。

JS
1.减少DOM操作
在脚本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的 “访问集合” 包括读取集合的 length属性、访问集合中的元素。因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。

2.减少http请求
一方面，恰当的缓存设置可以大大的减少 HTTP请求，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。另一方面，Lazy Load Images，能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了

3.js脚本写在body标签的最下方
浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。

4.for循环最佳写法(把length提出来或者预存出来，用一个内存地址变量指引数值来替代迭代器，这样写的好处是降低时间复杂度)
var divs = document.getElementsByITagName('div')

for(var i=0,len = divs.length;i

}
for(var i = 0 , div ; div = divs[ i++ ] ; ){
dosomething(div)
}

4.实现元素移动的动画过程有三中方法 定位 、 margin 、translate ，但是transform里面的translate 是最佳选择，它比前两者的效率高几十倍，因为它不会
触发整个页面的重排，从而大大降低了页面渲染时间

5.能用css实现的效果就不要用js

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。