web前端开发模式

1.应用技术：

    HTML5+CSS3+JavaScript+JQuery+Ajax

2.页面优化:

    *

1.

*CSS引用写在head，JS引用写在body底部；

        引用顺序：基础类（初始化文件以及插件）、公用类（项目的公共部分），自身文件；引用文件中可能被修改的文件后加版本号或者时间戳或者随机数等参数，每更改一次文件内容更改参数，用来避免文件缓存。

    

2.

合并CSS，JS脚本，图片等资源，尽量减少css文件的大小和数量（减少重复代码，代码重复利用），减少HTTP请求。调整接口，尽量减少ajax的请求；尽可能用字体图标、css样式代替图片资源；（字体图标的使用：下载字体文件，在css中使用font-face声明字体，定义使用iconfont的样式）；

    

3.

使用缓存，通过修改版本号的方式更新文件；

css，JavaScript，logo，图标这些静态资源文件的更新的频率比较的话，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，就可以极好的改善性能；

    

4.

压缩资源，按需加载js；

3.代码优化：

    

1.

减少对DOM元素的操作，如要对一个元素进行多次操作，即可先取出该元素赋值给一个变量再使用；

    

2.

将全局变量存储为局部变量来减少查找，因为访问局部变量的速度比访问全局变量的速度要快些；重复使用的结果，事先保存到局部变量；

    

3.

在不断运行的代码中，尽量使用setInterval而不是setTimeout，因为setTimeout每次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器；

    

4.

优化循环：简化终止条件，简化循环体，使用后测试循环

（for(;;), while()）;减少eval函数的使用，消耗时间量大；

4.Ajax基本用法：

是实现客户端和服务器端交互的主要手段，在浏览器中一般分为同步交互和异步交互两种模式；

同步交互：客户端向服务器端发送请求，到服务器端进行响应，这个过程中用户是不能做任何事情的（只能等）。

异步交互：客户端向服务器端发送请求，直到服务器端进行响应，这个过程中用户可以做任何其他的事情（不用等）。

区别：同步交互执行速度相对异步交互慢，响应的是完整的HTML页面；异步交互执行的速度相对同步交互要快，响应的是部分数据。项目中统一使用封装好的jQuery.ajax，一般情况下使用异步通信的方式，设置相应的接口路径，按需求修改相应的参数，自定义回调函数对数据作相应的处理。