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

news/2024/5/20 7:48:53/文章来源:https://blog.csdn.net/weixin_30897233/article/details/97445516
大型网站--前端性能优化和规范
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. 可进行单元测试
posted on 2015-05-12 13:20 玲儿灵 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/jymz/p/4497062.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_767004.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网页设计-第四天-个人(个性)网站设计

个性网站设计 head 60px (50~70)banner 550px(500~600)色彩可以比企业站随意、鲜活,不用遵循3,6,9的原则footer 50px 小于head logo 可以设计的个性化一点,使用多边形,类似QQ登录时,多边形背景 使用钢笔…

网站易用性

1. 给logo添加替代文本 这样有两个好处&#xff1a;屏幕阅读器能识别logo图片代表的含义&#xff0c;图片未加载到时&#xff0c;也能告诉非视障用户那里是你的logo。 几种方法&#xff1a; <img src"logo.png" alt"前端界"> 或者&#xff0c;你用背…

【消息队列】转-大型网站架构之分布式消息队列

大型网站架构之分布式消息队列 以下是消息队列以下的大纲&#xff0c;本文主要介绍消息队列概述&#xff0c;消息队列应用场景和消息中间件示例&#xff08;电商&#xff0c;日志系统&#xff09;。 本次分享大纲 消息队列概述消息队列应用场景消息中间件示例JMS消息服务常用消…

实现网站国际化

插件&#xff1a;i18n项目管理工具&#xff1a;grunt需安装&#xff1a; grunt 和properties-reader&#xff08;i18n运行依赖&#xff09;在根目录下新建i18n文件夹&#xff0c;然后把i18n-parsers.coffee和i18n.coffee放在该文件夹(两文件在笔记最后)在js下面放**.json&#…

可视化网站教程:最流行的搭建工具及必学的7个功能

摘 要 记得刚进大学的时候&#xff0c;一位教授说大学里有十件必学的事情&#xff0c;其中有一件是&#xff1a;学会做网站。无论你是学什么的&#xff0c;像数据可视化&#xff0c;演示简历、作品或产品&#xff0c;都需要前端的知识。虽然目前有各种前端语言&#xff0c;像V…

网站变更服务器要重新备案吗,网站更换服务器要重新备案吗

网站更换服务器要重新备案吗 内容精选换一换Joomla是一套全球知名的内容管理系统&#xff0c;即Joomla CMS(Content Management System)。Joomla是使用PHP语言加上Mysql数据开发的软件系统&#xff0c;是网站的一个基础管理平台&#xff0c;适合从个人网站到各种企业网站、分类…

电脑配置太低?使用这几个网站,你的电脑软件要少装一半!

你还在为你的电脑配置太低导致软件过多而卡顿感到烦恼&#xff1f;还是电脑游戏太多&#xff0c;无法运行一些其他软件而不开心&#xff1f;其实不用难过&#xff0c;小编教你们使用一些在线网站&#xff0c;可以轻松的将你的电脑上的软件少安装一半&#xff01;你们准备好了吗…

statuml怎么添加用户_网站推广好怎么样的?来看看以下指引

网站推广好怎么样的&#xff1f;很多人刚开始接触推广&#xff0c;心里会有这么一个疑问&#xff0c;怎么做才可以&#xff1f;不会做怎么办&#xff1f;网站推广并不是单单做了一个网站&#xff0c;最理想化往往跟现实差别很大&#xff0c;找对方法不迷路&#xff0c;我这边给…

php网站栏目隐藏,zblogphp代码:首页不显示指定分类ID栏目的文章(可隐藏多个分类)...

有的时候&#xff0c;我们并不想要某个分类栏目的文章显示在zblogphp首页的中&#xff0c;也就是说&#xff0c;我们可以让某一个或多个分类ID下的文章隐藏不显示在网站首页中&#xff0c;操作方法如下&#xff1a;第一种&#xff1a;判断分类方式此方法可以通过指定分类ID或分…

php301内页重定向,通过修改.htaccess批量实现网站内页301重定向跳转

本文主要介绍如何通过正则表达式实现批量内页跳转。在写之前我们先来认识几个简单的符号所代表的含义1、(.) 代表任意字符(包括汉字、英文字母等)2、(\d)代表是任意数字(仅仅是阿拉伯数字)3、$1、 $2 、$3 、$4表示的是对前面出现的变量的引用(你理解这个意思就行了)一、简单的…

linux系统服务部分,linux系统由哪几部分组成_网站服务器运行维护

笔记本如何禁用自带键盘_网站服务器运行维护笔记本禁用自带键盘的方法&#xff1a;1、首先右键点击【计算机】&#xff0c;选择【属性】&#xff1b;2、然后打开【设备管理器】&#xff0c;右键点击【PS/2标准键盘】&#xff0c;选择【更新驱动程序软件】&#xff1b;3、最后安…

Flask项目之手机端租房网站的实战开发(五)

说明&#xff1a;该篇博客是博主一字一码编写的&#xff0c;实属不易&#xff0c;请尊重原创&#xff0c;谢谢大家&#xff01; 接着上一篇博客继续往下写 &#xff1a;https://blog.csdn.net/qq_41782425/article/details/85706012 目录 一丶图片验证码前端编写 二丶短信验证码…

服务器配置iis,php网站

1.在iis中选择物理路径。配置域名 2.添加php默认文档 3.修改处理程序映射 4.设置模块映射信息 转载于:https://www.cnblogs.com/zhangyouwu/p/10277174.html

linux boost内存池,Boost内存池的分类 - 开源C++函数库Boost内存池使用与测试_Linux编程_Linux公社-Linux系统门户网站...

4. Boost内存池的分类Boost内存池按照不同的理念分为四类。主要是两种理念的不同造成了这样的分类。一是Object Usage和Singleton Usage的不同。Object Usage意味着每个内存池都是一个可以创建和销毁的对象&#xff0c;一旦内存池被销毁则其所分配的所有内存都会被释放。Single…

黑科技网站

1&#xff1a;PDF派 https://www.pdfpai.com/&#xff08;20个好用的PDF在线工具&#xff0c;完全免费&#xff01;&#xff09; PDF派 是一个完全免费的网站&#xff0c;非常良心实用。 把PDF转换成Office&#xff0c;iWork&#xff0c;图片等其他格式 把Office文件或图片…

网站加载 Waiting (TTFB) 时间过长的原因和解决办法

关注网页前端性能的朋友&#xff0c;在优化网页性能的时候都会遇到网站加载 Waiting&#xff08;TTFB&#xff09;时间过长的问题。对于没有优化过的 WordPress 站点&#xff0c;TTFB 时间经常超过了页面内容的下载时间&#xff0c;为用户带来不必要的等待时间。这个问题的主要…

linux ipv4 keepalive,性能优化策略 - RHEL 4 性能优化详述_Linux教程_Linux公社-Linux系统门户网站...

RHEL 4 性能优化详述性能优化策略[日期&#xff1a;2007-08-22]来源&#xff1a;Linux公社作者&#xff1a;Linuxidc[字体&#xff1a;大 中 小]七、性能优化策略7.1 基本优化1) 关闭后台守护进程系统安装完后&#xff0c;系统会默认启动一些后台守护进程&#xff0c;有些…

未备案服务器有影响吗,未备案的服务器对网站seo有影响吗?

原标题&#xff1a;未备案的服务器对网站seo有影响吗&#xff1f;在早期的SEO工作中&#xff0c;我们经常在国内选择一些特殊线路&#xff0c;可以有效的避免网站备案所带来的麻烦&#xff0c;但随着近几年&#xff0c;ICP备案审查越发严格&#xff0c;导致在中国大陆上线的网站…

php网站套模板教程,PTCMS小说网站全新版源码+内附4套精美模板+教程

源码介绍&#xff1a;最新PTCMS小说精美多风格四套全新版源码模板内附详细的安装教程&#xff0c;亲测完美搭建。安装教程安装宝塔面板一键安装环境宝塔&#xff1a;www.bt.cn必装环境&#xff1a;nginx(apache.iis也可)&#xff0c;mysql,php5.6,memcached1.上传网站文件到网站…

worepress使用相对路径访问网站

在wp-config.php写入以下语句&#xff1a; define(WP_HOME, /); define(WP_SITEURL, /);这样在设置中的URL会显示空白&#xff0c;这就是使用了相对路径&#xff0c;不然的话难以兼容http和https协议。