【转】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

时间: 2024-11-05 10:20:09

【转】WEB前端调优的相关文章

http协议的访问之前端调优

http协议的访问之前端调优 大家伙估计都知道在浏览器的页面上面输入http://www.baidu.com:之后回车后就会进入百度的页面搜索自己想要的结果,但是不知道大家伙知道吗在你输入这个url路径之后,在这个过程当中经过了多少个过程?当然这里面的内容作为用户可以不用知道,只要得到自己想要的结果便可.但是作为运维人员这里面的门门道道必须知道并且有利与解决日常的错误. 今天就为大家带来有关于http这个过程经过了什么流程的介绍 http(超文本传输协议) 主要用于Web服务.通过计算机处理文本

Java Web应用调优线程池

最简单的单线程 我们先从基础开始.无论使用哪种应用服务器或者框架(如Tomcat.Jetty等),他们都有类似的基础实现.Web服务的基础是套接字(socket),套接字负责监听端口,等待TCP连接,并接受TCP连接.一旦TCP连接被接受,即可从新创建的TCP连接中读取和发送数据. 为了能够理解上述流程,我们不直接使用任何应用服务器,而是从零开始构建一个简单的Web服务.该服务是大部分应用服务器的缩影.一个简单的单线程Web服务大概是这样的: ServerSocket listener = ne

性能调优篇一

性能调优篇一 开篇话题调优 ? 在业务展开到一定情况下,当业务出现等待时间长.不流畅的情况下,这个时候就应该对整体进行调优.性能调优这个话题时一直持续性的被追求,探索更好的架构,更优的配置等等,其实调优这个话题一直存在于一个误区,就是必须在基础架构正确的情况下进行调优会得到更好的效果,点与面都需要调优,不要以为简单调整下配置文件就可以达到很好的效果,其实不然从前端到业务逻辑到负载架构网络容器数据索引内核参数等都需要进行调整,往往单点调优实际效果收益甚微,精准把握短板才能有效提升客户体验. ? 本

web前端性能调优

web前端性能调优 最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心应手.参照了<高性能网站建设指南-前端工程师技能精髓>,本文主要主要概述前端的性能调优的方法. 第一条优化:减少http请求 一想到调优好多人都会想到减少http请求,但是可能好多人都会不知道具体操作,我一开始也不知道.项目刚好使用fis发现fis可以打包脚本和样式表.perf

对 Web 应用程序进行性能调优

动态的 Web 应用程序能够存储大量信息,让用户能够通过熟悉的界面立即访问这些信息.但是,随着应用程序越来越受欢迎,可能会发现对请求的响应速度没有以前那么快了.开发人员应该了解 Web 应用程序处理 Web 请求的方式,知道在 Web 应用程序开发中可以做什么,不能做什么,这有助于减少日后的麻烦. 静态的 Web 请求(比如图 1 所示的请求)很容易理解.客户机连接服务器(通常通过 TCP 端口 80),使用 HTTP 协议发出一个简单的请求. 图 1. 客户机通过 HTTP 请求静态的文件 服

提高 web 应用性能之 CSS 性能调优

CSS 性能调优 CSS 代码的分析与渲染都是由浏览器来完成的,所以,了解浏览器的 CSS 工作机制对我们的优化有至关重要的作用.这篇文章我们主要从如下几个方面入手来介绍一下 CSS 的性能优化: Style 标签的相关调优 特殊的 CSS 样式使用方式 CSS 缩写 CSS 的声明 CSS 选择器 把 Stylesheets 放在 HTML 页面头部: 浏 览器在所有的 stylesheets 加载完成之后,才会开始渲染整个页面,@import 就相当于是把 <link> 标签放在页面的底部

项目总结50:Linux服务器上web项目Java项目性能调优

项目总结50:Linux服务器上web项目Java项目性能调优 最近上线的电商项目,发现非常卡,用户体验非常差,折腾了好久之后,也逐渐找到原因,并针对原因解决方案,先整理总结. 项目基本情况: 1-使用阿里ECS.OSS等一系列相关服务: 2-用户总量1W+,日活量500+ 3-电商项目,有APP.小程序.管理平台三个模块,其中接口150+ 4-项目使用SSM框架: 5-项目tomcat服务,数据库Mysql,Redis放在一个同一个服务器上: 问题表现: 1-接口反应非常慢,导致APP和小程序

web及性能调优

nginx 的性能调优 1 修改CPU的核心数对应的Nginx work进程 这个一般是你CPU核心数的两倍,方正是倍数,具体要几倍可看具体硬件配置 2 修改文件描述符  65536 ulimit -n 永久生效可改/etc/sysctl.conf 3 修改Linux内核的调度算法    epoll 4 修改连接数  在理论上来讲是工作进程数* 连接数 但是,Nginx的理论并发值是65536,所以 ..... 你懂得 5 在多少时间之内要达到多少的并发量就缓存,否则......  你懂得 6

记一次Web服务的性能调优

前言 一个项目在经历开发.测试.上线后,当时的用户规模还比较小,所以刚刚上线的项目一般会表现稳定.但是随着时间的推移,用户数量的增加,qps的增加等因素会造成项目慢慢表现出网页半天无响应的状况.在之前的工作中也恰巧遇到这个过程,当时对项目进行了很多性能测试和调优,今天借助博客园,将这次性能调优的过程进行整理后写成随笔,希望给广大Java后端开发的工程师提供帮助,也借此机会,对性能调优进行一些总结工作,达到备忘的目的. 测试工具与环境 性能测试工具 Loadrunner:一种预测系统行为和性能的负