【转】WEB前端调优

首先从一次完整的的请求说起:(以此为例get,www,baidu.com)

1,webbrower 发出request,

2,然后解析www.baidu.com为ip,找到ip的服务器,

3,服务器处理请求资源并返回请求的内容,

4,browser接受请求内容过程,(返回内容是按顺序读取的)

4.1遇到外联css,就会并发去读取css内容(),

4.2遇到图片时,回去并发读取图片,目前浏览器的并发数为2,

4.3遇到js时则会阻塞其他请求。

4.4加载完css后,browse开始渲染页面,

4.5直到加载完页面中的文本资源,这时dom的结构已经确定,会触发 document.ready方法

4.6 browse继续加载 图片和js,完成后。页面就全部加载完成,这时会触发 window.onload()方法

 

来分析一下里面具体的时间开销:

1,从1--4.4 用户才开始看到页面上有内容,在这以前页面就是空白的

2,解析域名也是有一定时间开销的,如果是大机房的可以通过路由配置 dns 缓存,依赖于外部机房环境,可控性比较小。  

3,这是服务器处理的时间,优化程序代码可以减少这里的时间

   4,

4.1浏览器在接收完css之前,一般是不去渲染dom的,以避免无所谓的刷新和闪烁。所以直到4.4用户才真正在页面上看到内容。

4.2 浏览器的单域名并发访问数 为2,多域名下并发数没限制,可以通过定义域名别名改善

4.3 浏览器加载js时会阻塞其他请求,直到加载完成。改善的话可以把js放到页面下面去加载。

 

从上面的流程可以分析出以下建议:

1,减少连接数(原因:并发限制,dns开销)

2,将css放到 head中。(1,首先这符合w3c规范,2,应为css加载完后,遇到dom对象时就会直接显示,可以更快的显示页面。)

3,将js放到页面底部,(加载js时会阻塞其他请求,这段时间页面没有反映,如果js中没有write的话应该放到底部,页面渲染完后再加载js)

4,减少下载内容(网络是有速度限制的,内容越少当然加载越快)

 

针对上面4条建议给出具体做法:

1,使用 css sprite将小图片合并,合并css、js。使用浏览器缓存: cache-control、expires。不使用etag

2、3不用说了,上面已经解释清楚了。

4,采用gzip压缩,可以使用 jsmin 将js精简,使用工具将css,html精简,尽可能缩减图片。

按照 性能黄金法则 说明: 文本内容只占所有时间的10%-20%, 这样做以后 至少能将时间缩小40%-50%。能明显改善用户体验。

 

这只是一些建议参考,具体的需要你针对自己的网站进行分析,分析工具可以使用firedebug,yslow,(这两个可以集成)

yslow会直接给出你建议。


转自:http://www.iteye.com/topic/1010833

转载于:https://www.cnblogs.com/xpengfee/p/4581304.html

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

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

相关文章

浅谈从学校(培训机构)跳跃到企业初/中级java开发工程师的学习路线(由浅入深)

1.先别学SSM,也别学Mybatis ,直接百度SpringBoot 为什么学它呢,简单,还有你要用到的几乎所有框架都可以以最简单的模式去学习,比如mybatis。 springboot天然集成了你在校学习的ssm以及任何你需要用到的东西,真正意义…

interface接口_接口 interface

接口不是类,而是对类的一组需求描述。Arrays类中的sort方法承诺可以对对象数组进行排序,但要求满足下列条件:对象所属的类必须实现了Comparable接口。public interface Comparable {int compareTo(Object other); }Java SE5.0,Com…

代码视图与StoryBoard.Xib文件视图的跳转

在storyboard中拖拽的控件,当我们使用纯代码进行编写的时候,进行跳转的时候用我们平时用的[self.navigationController popToViewController:Vc animated:YES], 你会发现跳转的后出现的页面只有你用用纯代码写的,而storyboard中的没有,这时候我们使用这个方法还是比较简单不能实…

influxdb mysql对比_InfluxDB读写性能测试

这里将告诉您InfluxDB读写性能测试,教程操作步骤:今天进行了InfluxDB和MySQL的对比测试,这里记录下结果,也方便我以后查阅。操作系统: CentOS6.5_x64InfluxDB版本 : v1.1.0MySQL版本:v5.1.73CPU : Intel(R)…

Nginx windows安装部署

一、Nginx简介 Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.ru 站点(俄文:Рамблер)开发的. 它也是一种轻量级的Web服务器…

前端学习(1514):vue-router使用步骤

<!-- 1引入插件的js --> <!-- 2设置链接 --> <!-- 3设立容器部分 --> <!-- 4提供要渲染的组件 --> <!-- 5配置路由 --> <!-- 6挂载路由 --> <!DOCTYPE html> <html lang"en"><head><meta charset"UT…

python函数实例与类实例_python – 在类和实例上表现不同的函数

好问题&#xff01;您使用描述符可以轻松完成您所寻求的内容.Descriptors是实现描述符协议的Python对象,通常以__get __()开头.它们主要存在于不同类中的类属性.在访问它们时,将调用它们的__get __()方法,并传入实例和所有者类.class DifferentFunc:"""Deploys …

1024电商项目的邮箱验证码与图形验证码功能模块

项目基于springcloudalibaba&#xff0c;模块功能大致概括就是登录页面的时候先完成图形验证码的校验&#xff0c;输入的数字和字母与图片上的相对应之后&#xff0c;会向对应的邮箱或手机号发送邮箱/短信验证码二次验证。这里展示的是邮箱验证码。 用到的技术点有&#xff1a…

Android自己的自动化测试Monkeyrunner和用法示例

眼下android SDK在配有现成的测试工具monkey 和 monkeyrunner两。也许我们不看一样的兄弟名字。但事实是完全跑了两个完全不同的工具。在测试的不同区域的应用程序。总体&#xff0c;monkey主要用于压力和可靠性测试&#xff0c;拟键盘事件流。而且能够自定义发送的次数&#x…

内存大对象dump linux_在 Linux 上创建并调试转储文件 | Linux 中国

了解如何处理转储文件将帮你找到应用中难以重现的 bug。• 来源&#xff1a;linux.cn • 作者&#xff1a;Stephan Avenwedde • 译者&#xff1a;Xingyu.Wang •(本文字数&#xff1a;5501&#xff0c;阅读时长大约&#xff1a;6 分钟)崩溃转储、内存转储、核心转储、系统转储…

关于软件工程的那些事儿————《人·绩效·职业道德》和《一个程序员的生命周期》读后感...

对于这片文章&#xff0c;首先标题很亮眼--------“人绩效职业道德”。 首先&#xff0c;是“人”。我个人的理解&#xff0c;“人”在团队中有着重要的作用。一个人不可能独立的存在&#xff0c;无论是在学习工作还是生活中&#xff0c;都需要与他人的合作才能完成每项任务。通…

爬虫用mysql存储还是mongodb_【面试题】Mongodb和MySQL存储爬虫数据的特点是什么?...

(1)问题分析面试官主要考核Mongodb和MySQL数据库的特点&#xff0c;以及关系型与非关系型数据库。(2)核心问题讲解MySQL属于关系型数据库&#xff0c;它具有以下特点&#xff1a;在不同的引擎上有不同的存储方式。查询语句是使用传统的sql语句&#xff0c;拥有较为成熟的体系&a…

mysql originator_MySQL数据库事件调度(Event)

4.创建事件调度每5秒在表中插入数据MySQL> create event if not exists event_t1 on schedule every 5 second do insert into t values(1,1,sysdate());Query OK, 0 rows affected (0.01 sec)mysql> select * from t; --查看事件执行数据-------------------…

你的灯亮着么阅读笔记3

第五章问题从哪来的。我们要探寻问题的根源&#xff0c;而问题的根源往往出现在自身。因此我们要时常的反思自己&#xff0c;是否在团队中拖了后腿&#xff0c;而不是一味的去指责队友对自己的埋怨。只有发现自身的问题&#xff0c;才能改正自我。 第六章我们真的想解决问题么。…

python web 框架的flash消息_Flask flash 消息闪现

浮生梦&#xff0c;三生渺渺&#xff0c;因缘无踪&#xff0c;虽堪恋&#xff0c;何必重逢。息壤生生&#xff0c;谁当逝水&#xff0c;东流无终。flash传递与获取数据#coding:utf-8# flash是生成传递数据&#xff0c;get_flashed_messages是获取传递过来的数据from flask impo…

OC-NSFileManager和NSFileHandle的使用

对于objective-c中的有关文件目录的操作和文件的操作。 通过一道习题来熟悉NSFileManager和NSFileHandle中的方法的使用。 本题原意:将指定目录下所有后缀名为XXX(可以自己输入)的文件中字符串为"him"(可以自己输入)改为"me"(可以自己输入) 1.首先新建了一…

前端学习(1520):vue-router嵌套路由

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title></head> <!-- 1引入…

python与sql连接不上_Python连接不上SQL Server的两种根治思路

连接不上数据库&#xff0c;首先可以排除是代码的问题&#xff0c;连接方式都是千篇一律的。大多数问题都是本机的两个原因造成的&#xff0c;1.服务没有开启,2.没有启动SQL配置的TCP/IP下面给出统一解决方案&#xff1a;首先从开始菜单找到SQL数据库的配置工具&#xff0c;比如…

Bootstrap系列 -- 23. 图片

图像在网页制作中也是常要用到的元素&#xff0c;在Bootstrap框架中对于图像的样式风格提供以下几种风格&#xff1a; 1、img-responsive&#xff1a;响应式图片&#xff0c;主要针对于响应式设计  2、img-rounded&#xff1a;圆角图片  3、img-circle&#xff1a;圆形图片…