前端性能优化和规范

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错误

避免内部无效的链接

规则优化 –不要使用frameset,少使用iframe

搜索引擎不友好、

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

禁止使用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表达式

影响浏览器渲染时间

优化规则 – 优化图像

尽量使用GIF和PNG

尽量使用png/gif格式的图片,png的图片优先,但是必须注意如要兼容IE6,则png使用一定要注意透明问题。

图片在上次前一定要先用工具压缩优化(png、jpg)

Javascript开发规范

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

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

推荐书籍

转帖注明:http://www.cnblogs.com/and/p/3390676.html

时间: 2024-11-16 04:47:50

前端性能优化和规范的相关文章

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

Web性能涉及的范围太广,但一般web开发者在程序上线以后很多都曾遇到过性能的问题.普遍表现为页面速度开始急剧变慢,正常访问时间变的很长,或则干脆给你抛出异常错误页面.这里会涉及到很多可能发生的情况,举例几个最主要发生的情况: * 数据库连接超过最大限制,一般表现为程序的连接池满,拒绝了与数据库的连接. * 数据库死锁 * Web Server 超过最大连接数(一般在虚拟主机上才会限制) * 内存泄漏 * Http连接数太多,即访问量超过了机器和软件设计正常所能提供的服务 而今天分享的主要是比较

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决

WebPack实例与前端性能优化

[前端构建]WebPack实例与前端性能优化 计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了.近年来Web前端开发领域朝着规范开发的方向演进.体现在以下两点: MVC研发构架.多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...) 构建工具层出不穷.多多益处(提

2017前端性能优化清单

https://github.com/Findow-team/Blog/issues/11?utm_source=tuicool&utm_medium=referral 2017前端性能优化清单 你开始使用渐进启动了么?是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具?有没有用过Brotli.Zofli和HPACK这几种压缩技术,或者OCSP协议(在线证书状态协议)?知不知道资源提醒,客户端提醒和CSS containment一类的技术?

前端性能优化的14个规则

作为一个半前端工程师,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益匪浅,为了让自己印象更深刻点,决定作此文,当做学习笔记也好,知识总结也罢,总归看过的东西要让自己很好地掌握很好地运用起来才是王道.在解读这些规则的同时,我会用我一年半多的移动网站开发经历提出一些针对移动网站的优化建议. 规则01:尽量减少HTTP请求前端优化的黄金准则指导着前端页面的优化策略:只有10%-20

【前端构建】WebPack实例与前端性能优化

计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了.近年来Web前端开发领域朝着规范开发的方向演进.体现在以下两点: MVC研发构架.多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...) 构建工具层出不穷.多多益处(提升团队协作,以及工程运维,避免人工处理琐碎而重

前端性能优化 - 资源预加载

转帖: https://css-tricks.com/prefetching-preloading-prebrowsing 当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到. 引用 Patrick Hamann 的解释: 预加载是浏览器对将来可能被使用资源的一种暗示,一些资源可

浅谈前端性能优化(移动端)

上一篇讲了PC端的部分:前端性能优化(PC端),这次继续说移动端的.相对于PC端的,移动web浏览器上有一些明显的特点:设备的屏幕小.新特性兼容性较好.支持一些比较新的HTML5和CSS3.需要与Native应用交互等.但移动端可用的CPU资源和网络资源极为有限,因此要做好移动端web上的优化往往需要考虑做更多的事情.首先在移动web的前端页面渲染中,PC的优化规则同样适用,此外针对浏览器也要做一些更细节的优化达到更好的效果.需要注意的是,并不是移动端的优化在PC端不适用,而是由于兼容性的原因,

Web前端性能优化的9大问题

1.请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时,将