紸啶呮媞璐濄

导航

前端优化

 

(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要小而且可缓存

 

posted on 2016-12-27 17:59  紸啶呮媞璐濄  阅读(77)  评论(0编辑  收藏  举报