前端优化

 

（1） 减小http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

（2） 前端模板 JS+数据，减小因为HTML标签致使的带宽浪费，前端用变量保存AJAX请求结果，每次操做本地变量，不用请求，减小请求次数

（3） 用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能。

（4） 当须要设置的样式不少时设置className而不是直接操做style。

（5） 少用全局变量、缓存DOM节点查找的结果。减小IO读取操做。

（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

（8） 避免在页面的主体布局中使用table，table要等其中的内容彻底下载以后才会显示出来，显示比div+css布局慢。
对普通的网站有一个统一的思路，就是尽可能向前端优化、减小数据库操做、减小磁盘IO。向前端优化指的是，在不影响功能和体验的状况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减小数据库操做指减小更新次数、缓存结果减小查询次数、将数据库执行的操做尽量的让你的程序完成（例如join查询），减小磁盘IO指尽可能不使用文件系统做为缓存、减小读写文件次数等。程序优化永远要优化慢的部分，换语言是没法“优化”的。

 

 

请说出三种减小页面加载时间的方法。
1.优化图片
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS（压缩合并css，如margin-top,margin-left...)
4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
5.标明高度和宽度（若是浏览器没有找到这两个参数，它须要一边下载图片一边计算大小，若是图片不少，浏览器须要不断地调整页面。这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，即便图片暂时没法显示，页面上也会腾出图片的空位，而后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

6.减小http请求（合并文件，合并图片）。

javascript之DOM优化
最小化DOM访问，在javascript端作尽量多的事。
在反复访问的地方使用局部变量存放DOM引用。
当心地处理HTML集合，由于他们表现出“存在性”，老是对底层文档从新查询。将集合length属性缓存到一个变量中，在迭代中使用这个变。若是常常操做这个集合，能够将集体拷贝到数组中。
可能的话，使用速度更快的API，诸如querySelectorAll()和firstElementChild。
注重重绘和重排版：批量修改风格，离线操做DOM树，缓存并减小对布局信息的访问。
(1)批量修改
(2)离线操做DOM
(3)缓存布局信息
动画中使用绝对坐标，使用拖放代理。
使用事件托管技术最小化事件句柄数量。

 

1. JavaScript 压缩和模块打包
打包css文件，合并图片
2. 按需加载资源
资源（特别是图片）的按需加载或者说图片懒加载
减小向服务器发出的并发请求数量
减小浏览器的内存使用率
减小服务器端的负载
3. 缓存

页面级优化
1. 减小 HTTP请求数
减小 HTTP请求数的主要途径包括：
(1). 从设计实现层面简化页面
(2). 合理设置 HTTP缓存 例子：缓存css文件和js文件
(3). 资源合并与压缩
CSS、 Javascript、Image 均可以用相应的工具进行压缩
(4). CSS Sprites（合并 CSS图片）

2. 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
3. 异步执行 inline脚本(其实原理和上面是同样，保证脚本在页面内容后面加载。)
4. Lazy Load Javascript（只有在须要加载的时候加载，在通常状况下并不加载信息内容。）
5. 将 CSS放在 HEAD中
6. 异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）
7. 减小没必要要的 HTTP跳转
8. 避免重复的资源请求
代码级优化
1. Javascript
(1). DOM
(2). 慎用 with
(3). 避免使用 eval和 Function
(4). 减小做用域链查找
(5). 数据访问
(6). 字符串拼接
2. CSS选择符
3. HTML
4. Image压缩

把样式表置于顶部
把脚本置于页面底部
避免使用 CSS 表达式（Expression）
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
用 <link> 代替 @import
避免使用滤镜
剔除重复脚本
减小DOM访问

Coockie:

减少Cookie体积
对于页面内容使用无coockie域名

图片：

优化图像优化CSS Spirite不要在HTML中缩放图像favicon.ico要小并且可缓存