web性能优化与最佳实践

一、Web前端开发概述

1. web前段开发入门难度并不高，但是初学者如果没有一个很好的学习和编码习惯，则开发水平的提高速度就会变得很慢。在这里我总结了如何高效的进行web前段的开发。

2. Web前端开发的范畴：

Web前端开发设计网站开发的方方面面，从前端UI到后端的数据交互都属于前端开发的范畴。Web前端既要考虑页面的美感和操作体验，又要关注前端代码的质量。

3. Web前端开发必备的技能

a) 页面标记（HTML）；

b) 页面样式（CSS）；

c) 前端编程（JavaScript）；

d) 后端编程（PHP，JSP）；

e) 跨平台，跨浏览器；

f)  前端框架（JQuery等）：要了解如何编写框架的扩展插件；

g) 调试工具（Firebug等）；

h) 沟通能力。

4. Web前端开发的现状

a) 前段技术发展迅速，但起步较晚，基础薄弱；

b) 前端工程师热情高涨，但缺乏足够技能培训，对代码规范重视不足，对一些基础原理的理解不够深刻。

5. 规范的前端代码应该具有以下特征

a)符合标准：W3C制定的web标准。

b) 格式规范统一：主要包括命名，代码缩进，空格，空行的使用以及代码注释等。为了提高代码的可读性和可维护性。

c)  高性能：主要包括网页的加载速度和页面的交互响应速度。

d) 高安全性：比如像跨站点攻击，Cookie劫持等。

e) 酷炫的技术只是“浮云”，良好的编码习惯和意识才是真功夫。

二、高效Web前端开发

1. 前端代码的结构组织和文件命名

a) 代码文件的组织结构：在同一项目中代码的组织结构一定要清晰，同类型的代码文件或者相同模块的代码文件尽量放在相同的文件夹下。

b) 代码文件的命名：文件的命名规则统一并有意义。

2. 前端代码重构（对已有的项目进行重构）

a) 删除无用代码，精简代码。

b) 前端代码规范化：把HTML中内嵌的CSS和Js代码放到独立的文件中，更改已经不使用的标签等。

c)  整理基础类库：因为不同的类库中会存在相同的功能，因此在项目中同一个功能使用的是不同的类库，所以我们应该统一使用一种类库。

d)  前段代码模块化：按照模块归类CSS代码，放到模块对应的单独CSS文件中等。

e)  提高页面加载性能

i.  将部分不影响首页展示的js文件延迟到页面加载后加载；

ii. 删除页面中初始化隐藏的区域，该为通过js来按照需求动态生成；

iii. 页面中的部分图片延迟加载；

iv. 调整css和js文件的引用顺序，即css在前，js在后；

v. 该静态文件设置缓存等。

3. 合理使用前端框架

前端工程师有必要了解和学习这些常用的框架，理解这些框架的功能，性能，设计原理等，在实际项目中选择合适的框架才会得心应手，不至于盲目选择。

4. 前端代码基本命名规范和格式规范

a) HTML命名规范及格式规范：标签名和属性名都应该为小写的，属性值使用双引号闭合。给html代码添加必要的注释。

b) CSS命名规范及格式规范：id属性中多个单词之间使用“_”来连接，class中用“-”来连接多个单词。增加Css的注释，提高可读性。

c) Javascript命名规范及格式规范：命名时采用有意义的单词，局部变量采用首字母小写，其他单词首字母大写的方式。增加注释等。

三、HTML最佳实践

1. 标准的HTML代码（符合W3C的最新标准）

a) 非自闭合标签必须有开始标签和结束标签，而自闭合标签没有闭合标签，自闭合标签必须添加“/”；自闭合标签如：<br/>等。

b) 停止使用不标准的标签和属性，简化HTML代码；比如像“marquee”,如果能用js和CSS能代替的样式，则就不要使用HTML的标签或属性来设置样式了。

c)  样式和结构分离：应该把CSS样式写到单独的文件中，在HTML中通过link来引入，这样就实现了样式和结构的分离，这种模式是最佳实践模式，如果需要修改页面样式，直接修改CSS文件即可。而且此方式最大的优点是提高了性能，当多个页面共用一个相同的样式时，只会在首个页面访问时需要下载CSS文件，随后其他页面访问时则只需要下载页面本身，CSS文件可直接从缓存中的到，不用再次到服务器下载，从而提高了页面的加载速度。

d) 添加必要的meta标签：这些信息有助于搜索引擎更准确地识别网页的内容，也有助于第三方工具抓取网站基本信息。

2. 高可读性的HTML

a)  HTML语义化：就是HTML的含义，从HTML代码中使用的标签本身就可以说明标签包含内容的含义。

b)  高语义化的页面就是去掉CSS样式后页面仍能保持良好的外观，并且可以正常阅读。

c)   <div>和<span>标签是最没有语义的两个标签，因此要做到语义化，就应该少使用这两种标签。

d)  设置网页标题层级

i. <hx>标签会受到搜索引擎的“特别照顾”。

ii. 在页面内容的标题部分使用<hx>标签；

iii. 页面中只要使用一个<h1>标签：<h1>表示页面内容最高层级的标题，这样有助于页面搜索引擎优化。

iv. <hx>标签在使用过程中不要跳级：要保持标题层级的连贯性，不要从<h1>直接跳到<h3>；

v. HTML代码应该只关注语义不关注其外观，页面的外观都应该通过CSS样式控制，HTML和CSS应该各司其职。

e) 如何正确设计表单

i. 错误设计：使用<table>标签布局会导致页面HTML代码臃肿，所有不应该用table来布局表单；

ii. 正确设计：使用<label>来展示文本标签，使用<fieldset>和<legend>来对这些控件进行分组，使用html5中的提示框等进行提示，引入html5中输入控件类型等进行设计表单。

四、CSS最佳实践

1. 高维护性的CSS

样式声明的顺序：样式声明的顺序应该按照模块中元素的层级关系来处理，比如应该从父元素开始定义。如果是同一级的元素，则按照元素的页面的位置从上到下，从左到右地定义对应的样式。在多个元素共用相同的声明时，则先声明共同样是，再声明个体样式。

2. 高性能的CSS

a) 高效的CSS选择器：能被浏览器快速解析和匹配的CSS选择器，CSS选择器的匹配原理与我们的习惯相反，它是从右到左进行匹配的，比如匹配“.cs #id div{}”匹配的顺序为：先匹配“div”，再匹配“#id”,最后匹配“.cs”。

b)我们也应该遵循以下原则：

i. 避免使用通配符（*是匹配全体元素，计算量大）；

ii. 不要在id选择器前加标签名：因为id标签在页面中是唯一的；

iii. 尽量不要在选择符中定义过多的层级，做好不要超过三层等。

c) CSS相关图片的处理

i. 不要设置图片的尺寸：在制作图片时，尽量按照实际需求的尺寸制作。

ii. 使用CSS Sprite技术：可以制作一些下图，通过background-position进行定位或则通过其他属性来平铺等。把多个小图合并为一个大图，这样即保证了传输效率，也增加了背景的样式。

3. 减少CSS的代码量

a) 合并相关的CSS规则：比如关于字体的有多个属性：font-family，font-size，font-style，font-weight，font-height等，我们可以把他们合并到一起，变成“font:italicbold 12px 楷体”。

b) 定义简洁的属性值：比如像颜色值“#00ffee”可以简化为“#0fe”,尺寸值“0.8em”简化为“.8em”等。

c) 合并相同定义：如果两个不同的规则中有相同的部分，我们可以把相同的部分提取出来，然后合并到一起。比如“#id{color:red；font-size;20px}”和 “#ss{color:red；font-height:20px}”可以合并在一起为：“#id，#ss{color:red}”和“#id{font-size;20px}”和 “#ss{font-height:20px}”。

d) 删除无效的定义：比如像失效的CSS未能及时删除和设置的一些样式未能起作用等。

五、JavaScript最佳实践

1. 高维护性的JavaScript

a) 避免定义全局变量和函数：定义全局变量和函数，会影响代码的可维护性。定义变量时使用var关键字，如果定义时没有使用var，浏览器会自动把变量解析为全局变量。

b) 使用简化的编码方式：可以使用JSON方式创建对象和数组，比如像“对象的创建：per = {age:25,name:’shen’};”，“数组的创建：list=[12,23,12]；”等；

c) 使用比较运算符“===”而不是“==”：“===”会比较两个基础类型值是否相等，或者两个复杂对象是否指向同一个地址，而“==”会先把比较值进行类型转化，转化为相同类型时才进行比较。为了避免出现隐含的错误，推荐使用===和！==运算。

d) 避免使用with语句

i.  在Javascript中，with语句可以用来快捷的访问对象的属性，其使用原理为：JavaScript解析和运行时，会给with语句单独建立一个作用域，而和with语句结合的对象中的属性则成为了此作用域的局部变量，因此可以直接访问。

ii. With语句存在设计上的缺陷，而且可读性很差，因此少用with语句。

e) 避免使用eval

i. 在JavaScript中，eval函数的用法很简单，他会接受一个字符串参数，把字符串作为代码执行，并返回结果。

ii.  Eval函数会让代码难以阅读，影响代码的可维护性。除此之外，eval的使用也存在安全性问题，因为他会执行传入的任意字符串，而有些传入的字符串不安全，所以尽量避免使用eval。

f) 事件处理和业务逻辑分离：把业务逻辑处理代码写到一个函数中封装起来，然后通过事件处理函数进行传值调用。

g) 把配置数据和代码逻辑分离：在一些逻辑代码中经常会用到一定的常量值，但是这些常量值会因为逻辑的不同而变化，我们可以把那些要经常变化的常量值提取出来写成配置数据的格式。以后需要修改的时候，直接修改配置数据即可。

2. 高性能的JavaScript

a) 在大部分浏览器中，JavaScript代码文件的加载和执行都是以阻塞方式进行的，并且浏览器是以单线程运行javaScript代码和UI更新的，浏览器加载和运行Js代码时会暂停页面上的其他响应。

b) 加快JavaScript文件的加载速度：浏览器在解析页面时遇到JavaScript引用时就会停止后续的HTML代码的解析，直到JavaScript执行完成后再接着解析HTML.,如果JavaScript执行越长，用户体验就会变差。因此我们可以加快js加载的速度，或者我们可以把js代码放到body的下端，先使页面先加载出来，最后在加载js代码。

c) 养成良好的编码习惯：

i. 少使用for-in循环：它的性能很差，应尽量使用for循环代替。

ii.  正确使用数组：应使用数组保存单一类型的数据。如果需要使用混合数据类型，我们可以采用对象的形式。

注：上面的性能优化，只是我自己总结而来，并不是经过大众认可的定理而来。望周知。。。