1. 重复的 HTTP 请求数量应尽量减少
(1)减少调用其他页面, 文件的数量.
(2)在使用 CSS 格式时, 常会采用 background 载入图形文件, 而每个 background 的图像都会产生 1 次 HTTP 请求, 为了让页面生动活泼大量使用 background 来加载背景图, 可以采用 CSS 的 1 个有用的 background-position 属 性来加载背景图加以改善, 将需要频繁加载的多个图片合成为 1 个单独的图片, 加载时采用: background:url(....) no-repeat x-offset y-offset 的形式加载, 图片加载的 HTTP 请求缩减为 1 个.
background:url(....) no-repeat x-offset y-offset
2. 压缩 JavaScript,CSS 代码
一般 JS,CSS 文件中存在大量的空格, 换行, 注释, 这些利于阅读, 如果能够压缩掉, 将会很有利于网络传输. 这方面的工具也有很多, 可以在百度里搜索一下 关键字 "css 代码压缩", 或者 "js 代码压缩" 将会发现有很多网站都提供这样的功能, 当然了你也可以自己写程序来做这个工作, 如果你会的话. 就拿我们这 个网站来说吧. 刚开始上传这个网站的时候, 我的很多 CSS 代码都没有压缩, 后面发现了这个问题, 我就上网找了相关的网站的压缩代码的功能, 最后就把很多 CSS 文件都压缩了. 这个压缩比率还是比较高的, 一般都有百分五十左右. 这个代码压缩对于网页的加载还是很有用的.
3. 在文件头部放置 CSS 样式的定义
这项设置对于用户端是慢速网络或网页内容比较庞大的情况比较有利, 可以在网页逐步呈现的同时仍会保持格式信息, 不影响网页美感.
4. 在文件末尾放 JavaScript 脚本
网页文件的载入是从上到下加载的, 很多 JavaScript 脚本执行效率较低, 或者在网页前面都不需要执行的, 如果将这些脚本放置到页面比较靠前的位置, 可能导致网站内容载入速度下降或加载不了, 将这些脚本放置在网页文件末尾, 一定要放 置在前面的脚本要改用所谓的 "后载入" 方式加载, 在主体网页加载完成后再加载, 防止其影响到主体网页的加载速度.
5. CSS,JavaScript 改由外部调用
如果 CSS,JS 内容比较庞大, 尽量不要写到同 1 个页面中去, 改由外部载入比较妥当, 因为浏览器本身会对 CSS,JS 文件进行缓存.
6. 尽可能减少 DCOM 元素
尽可能减少网页中各种 <> 元素数量, 例如 < table > 的冗余很严重, 而我们完全可以用 < div > 取代之.
7. 避免使用 CSS 脚本(CSS Expressions)
有时为了要 CSS 的参数动态改变, 可能会采用 CSS expression 来实现, 但这样做得不偿失, 会使用户端浏览器负担明显加重, 所以不建议这样做, 如果需要改变, 可以使用 JavaScript 脚本去实现.
8. 添加文件过期或缓存头
对于同一用户频繁访问的图片, JS 脚本文件等可以在 Apache 或 Nginx 设置其缓冲时间, 例如设置 24 小时过期时间, 这样用户在访问过该页面之后再次访问时, 同一组图片或 JS 不会再重复下载, 从而减少了 HTTP 请求, 用户访问速度明显有所提升, 同时服务器负载也会下降. 下面给出 nginx 配置中缓存控制的例子:
- location ~ .*\.(gif|jpg|jpeg|PNG|bmp|swf)$
- {
- expires 30d;# 设置 30 天过期
- }
- location ~ .*\.(JS|CSS)?$
- {
- expires 1h;# 设置 1 小时过期
- }
9. 使用 CDN(Content Delivery Network)网络加速
现在国内做 CDN 加速业务的公司很多, 简单讲, 就是将你的图片, 视频扩散到 CDN 网络所能到达之处, 让用户访问时能就近下载到这些文件, 从而达到网络提速的目的, 这样做, 同时能减轻你自己网站的负载.
10. 服务器启用 gzip 压缩功能
将要传输的文件压缩后传输到客户端再解压, 在网络传输数据量会大幅减小. 在服务器上的 Apache,Nginx 可直接启用, 也可用代码直接设置传输文件头, 增加 gzip 的设置, 也可从 负载均衡设备直接设置. 不过需要留意的是, 这个设置会略微增加服务器的负担. 服务器性能不是很好的网站, 要慎重考虑.
11. Ajax 采用缓存调用
Ajax 调用都采用缓存调用方式, 一般采用附加特征参数方式实现, 注意其中的
<script src="xxx.js?{VERHASH}",
{VERHASH}就是特征参数, 这个参数不变化就使用缓存文件, 如果发生变化则重新下载新文件或更新信息.
12. Ajax 调用尽量采用 GET 方法调用
实际使用 XMLHttpRequest 时, 如果使用 POST 方法实现, 会发生 2 次 HTTP 请求, 而使用 GET 方法只会发生 1 次 HTTP 请求. 如果改用 GET 方法, HTTP 请求减少 50%!
13. 养成良好的开发维护习惯, 尽量避免脚本重复调用
14. 缩减 iframe 的使用, 如无必要, 尽量不要使用
iframe 通常用于不同域名内容的加载, 这同时也可能因 iframe 内容加载速度影响到主网页加载速度, 如果可能, 把需要加载的内容抓取到本地直接嵌入. 如果实在需要 iframe 加载, 采用后载入方式实现.
15. 合理使用 Flush
用户端发送浏览请求后, 服务器端一般要花销 200-500ms 去处理这些请求, 在此期间, 用户端浏览器处于等待状态, 如果要减少用户等待时间, 可以在适当的位置使用 flush, 将已经就绪的内容推送到用户端, 这在 PHP 中很容易实现例如:
- <!-- css, js -->
- </head>
- <?PHP flush();?>
- <body>
- ... <!-- content -->
16. 避免采用 301,302 转向
当浏览器, 代理或搜索引擎派出的 "爬虫" 对某一页面或网址请求调用时, 该调用页面或网址所在的网络服务器将会检查一个名为. htaccess 的文件. 该文件包含如何处理特定请求的指令, 并在安全性上扮演关键角色. 用户可对该文件进行修改, 通过这个文件来通知浏览器, 代理或 "爬虫", 被调用页面属于临时移走 (302 重定向)还是永久性移走(301 重定向). 我们也可以通过网络托管服务而不是. htaccess'文件来实现 301/302 永久性重定向.
17. 优化图片文件
优化图片文件, 减小其尺寸, 特别是缩略图, 一定要按尺寸生成缩略图然后调用, 不要在网页中用 resize 方法实现, 虽然这样看到的图片外形笑了, 但是其加载的数据量一点也没减少. 曾经见过有人在网页中加载的缩略图, 其真实尺寸有 10M 之巨...
普通图像, icon 也要尽可能压缩后, 可以采用 web 图像保存, 减少颜色数等等方法实现.
18. 当页面内容庞大到一定程度, 可以采用分页的方式展现, 或者 taobao 的那种翻页后载入方式.
19. 使用多域名负载网页内的多个文件, 图片
有资料说明, IE 在网页载入过程中, 在同 1 时刻, 对同 1 域名并行加的 HTTP 请求数 量最高为 2 个, 如果网页需要加载的文件数量超过 2 个(通常远远超过..), 要加快网页访问速度, 最好将文件分布到多个域名, 例如 19 楼, 其 JS 文件采用独 立的域名, 据说百度的图片服务器数量在 20 台以上.
20. 配置 ETags
(详见: 优化网站设计(十三): 配置 ETags)
-------------------------------------------------------------------------------------------------
转载自: https://www.cnblogs.com/shenxiaolin/p/5390237.html
来源: http://www.bubuko.com/infodetail-3334271.html