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

【转】WEB前端调优相关推荐

java web 线程数_Java Web应用调优线程池
最简单的单线程我们先从基础开始.无论使用哪种应用服务器或者框架(如Tomcat.Jetty等),他们都有类似的基础实现.Web服务的基础是套接字(socket),套接字负责监听端口,等待TCP连接, ...
Java Web应用调优线程池
最简单的单线程我们先从基础开始.无论使用哪种应用服务器或者框架(如Tomcat.Jetty等),他们都有类似的基础实现.Web服务的基础是套接字(socket),套接字负责监听端口,等待TCP连接, ...
web前端|品优购|html+css|代码
项目名称:品优购电商网页制作前端小白的熬夜+入门边缘试探+颓废中热情之作,欢迎各位小可爱交流~ 参考教程:(戳一下)b站黑马教程链接https://www.bilibili.com/video/B ...
放在请求头目的_YSLOW性能测试前端调优23大规则（三）添加Expires头
正常如果要访问的组件,都必须建立相对应的HTTP请求从服务器端查找所需要的组件,这样每次访问都得重新从服务器读取信息,为了提高性能我们想出一种方法,如果可以使用浏览器或代理的缓存来减少HTTP请求的数 ...
web前端-仿优车诚品首页二级分类菜单
效果图: 实现代码: 给出的HTML代码为整个块的代码,从left-bottom开始是二级分类菜单部分,用==号进行了划分 <div id="middle-one">& ...
web前端品优购首页+源代码(2)
目录 main 首页主体模块制作 recom 今日推荐模块 ulike 猜你喜欢模块 main 模块不再时公共模块,新建一个index.css文件在该文件中编写css代码分类部分在nav 导航模 ...
web前端品优购首页+源代码(1)
首页构成 shortcut 快捷导航模块 header 头部模块 nav 导航模块 footer 底部模块(优先做页面公共模块) 快捷导航模块 <sec ...
BEA WebLogic平台下J2EE调优攻略--转载
BEA WebLogic平台下J2EE调优攻略 2008-06-25 作者:周海根出处:网络前言随着近来J2EE软件广泛地应用于各行各业,系统调优也越来越引起软件开发者和应用服务器提供 ...
java调优方法，jvm监控工具
graph LR A-->B 性能概述程序性能表现形式执行速度:程序响应速度,总耗时是否足够短内存分配:内存分配是否合理,是否过多消耗内存或者存在泄漏启动时间:程序运行到可以正常处理业务 ...

【转】WEB前端调优

【转】WEB前端调优相关推荐

最新文章

热门文章