<br />
<b>Warning</b>:  Use of undefined constant wp_title - assumed 'wp_title' (this will throw an Error in a future version of PHP) in <b>/www/wwwroot/songjiangjituan.com/wp-content/themes/onii/header-pc.php</b> on line <b>26</b><br />

行业新闻VIEWS

大型网站:前端性能优化和规范

来源:大型网站:前端性能优化和规范 发布于:2014-07-31 03:16   浏览:264

Web性能涉及的范围太广,但*般web*在程序上线以后很多都曾遇到过性能的问题。普遍表现为页面速度开始急剧变慢,正常访问时间变的很长,或则干脆给你抛出异常错误页面。这里会涉及到很多可能发生的情况,举例几个.主要发生的情况:

 * 数据库连接超过.大限制,*般表现为程序的连接池满,拒*了与数据库的连接。
 * 数据库.锁
 * Web Server 超过.大连接数(*般在虚拟主机上才会限制)
 * 内存泄漏
 * Http连接数太多,即访问量超过了机器和软件设计正常所能提*的服务 
 而今天分享的主要是比较偏向前端

浏览器请求和响应的过程

浏览器请求加载前过程 

.*步、浏览器预处理

查询Cache:读取Cache 或者发送304请求

.二步、查询DNS

优化规则--减少DNS查找

DNS缓存

浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存(TTL)

使用Keep-Alive.性 
减少DNS查找

当客户端的DNS缓存为空时,DNS查找的数量与Web页面中.*主机名的数量相等。减少.*主机名的数量就可以减少DNS查找的数量。

较少的域名来减少DNS查找(2-4个主机)

.三步、建立连接

优化规则-- 使用内容分发网络

美*十大Internet网站和CDN服务提*商

页面静态化,取决于发布系统

Ctrip使用的China-Cache和网宿

优化规则--用域名划分页面内容 

按页面内容划分域名,在合适的资源服务器上存放文件

.四步、发送请求

优化规则-- 减少HTTP请求

 HTTP请求30-40,合并文件,图片地图,内联图像

a)js文件(不超过7个)

1.tuna_090501_base.js和tuna_090501_module.js(拆分tuna_090501.js)2.数据文件js(1-2个)3.频道公用js(1个)和页面私有js(1-2个)

不含ga.js、uiscript.asp和外链其他网站的js

b) css文件不超过4个,各频道.页和全站.页不超过3个。

c) 目前无法解决的是allyes广告的请求数。

大量的广告和产品图片可能会造成,图片请求数很大,可能造成总请求数指标吃紧,

    这个只能从设计上搞定,需要权衡

目前老页面可能css和js文件请求数可能会超标

      优化规则- – 优化CSS Spirite

      图片地图   Ctrip.页例子 

优化规则– 避免404错误

  1. 避免内部无效的链接
  2. 规则优化 –不要使用frameset,少使用iframe
  3. 搜索引擎不友好、 

    即时内容为空,加载也需要时间、会阻止页面加载

  4. .止使用iframe引入外部资源,不包括allyes广告,不包括about:blank的空页面。

.五步、等待响应

优化规则 --避免重定向

在重定向完毕并且HTML下载完毕之前,是没有任何东西显示给用户的涉及服务器负载、数据查询、服务器端缓存等 

.七步、接收数据

优化规则 -- 压缩组件

HTML文档、脚本和样式表、XML和JSON的文本响应 压缩如何工作
压缩通常能将响应的数据量减少将近70%

优化规则 -- 精简Javascript和Css

从代码中移除不必要的字符以减少其大小,减少加载时间。

规则规则– 尽量缩减页面大小

页面必须小于150K(不含图片)
a) 静态文件是否gzip
b) 图片是否压缩优化过

.八步、读取Cache

优化规则-- 添加Expire或Cache-Control

应用于不经常变化的组件,包括脚本、样式表、Flash组件、图片
Expires和Cache-Control

规则规则 -- 使用外部的Js和Css文件

尽可能使用外部Js和Css,因为我们目前大部分Js和Css都做了Gzip和缓存技术,可以充分利用。

.九步、处理元素

不要对image和pdf等二进制文件进行gzip压缩

 .十步、渲染元素

优化规则 -- 将样式表放在.部

 界面原型页面必须将样式表置于页面.部,开发人员如无.殊原因也必须将样式表置于.部。 

以往多数是因为masterpage原因无法将所有样式表置.,在改版修改masterpage时,尽可能按照此原则进行设计。 

优化规则 – 建议将脚本放在底部

 *般浏览器可以允许并行下载,取决于主机个数、带宽等

(默认情况下,IE是2个而FF是8个)

下载脚本时并行下载实际上是被.用的。
 

优化规则-- 移除重复脚本

 必须为0 

优化规则 -- 避免CSS表达式

影响浏览器渲染时间

优化规则 – 优化图像

  1. 尽量使用GIF和PNG
  2. 尽量使用png/gif格式的图片,png的图片优先,但是必须注意如要兼容IE6,则png使用*定要注意透明问题。
  3. 图片在上次前*定要先用工具压缩优化(png、jpg)

 Javascript开发规范

大型的项目在前端 JS 方面有几个需要达成的目标: 

  1. 代码逻辑分层
  2. 避免全局变量
  3. 便于多人协作开发
  4. 各部分代码模块化,可以按需加载
  5. 保持全局变量的清洁
  6. 可进行单元测试







最新推荐:
  • ·【合肥天都路数据中心】冷水空调金属软接头合同
  • ·涪江水质个别指标超标,绵阳现市民囤水现象
  • ·*航未来:IS型卧式单*单吸离心泵减振降噪方案
  • ·双管齐下"让噪声治理不再成为烦恼
  • ·P17,橡胶接头检测设备,金属软管检测设备,弹簧减震器检测设备
  • ·贪心物业拆污水站水泵被当废铁卖真是胆大包天
  • ·【机械标准】JB/T 7339-2007挠性管接头“只为分享更多正确知识”
  • ·DN50上海淞江波纹补偿器 Corrugated compensator
  • ·美*JUMBO化工项目消防管线减振限位双球橡胶接头
  • ·【巨石集团九江工厂】橡胶接头合同