图片多的网页如何提高浏览加载速度?
[问题点数：50分，结帖人atubo1234]
图片多的网页如何提高浏览加载速度?
[问题点数：50分，结帖人atubo1234]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关推荐：
本帖子已过去太久远了，不再提供回复功能。查看: 9742|回复: 17
chrome浏览论坛，图片多的网页图片显示很慢，有什么方法改善吗？？
本帖最后由 jrhuang08 于
14:28 编辑
如题，chrome浏览器浏览图片比较多的网页，图片打开的速度都很慢，有什么方法改善一下？？？或者这些都是浏览器的通病，跟网速的关系有关？？我的是电信的2M
本帖最后由 xique1123 于
14:00 编辑
进chrome://flags/里开启“对所有网页进行GPU合成”和“GPU加速画布2D”，会有所改善，如果浏览器花屏或崩溃，建议关闭“对所有网页进行GPU合成”或全关闭
这个是测试浏览器GPU加速的，开与不开“GPU加速画布2D”分别测试能明显感觉出来区别的
/testdrive/Performance/FishIETank/
这个只是一个单纯的大尺寸图片，无论开不开，区别打不，不止chrome开这个，好像很多浏览器都卡这个，不过OP和IE9好像不卡，IE9我亲测的，不卡，OP是看别人说的
如果是图片加载速度，那基本没什么办法，这个是看你上的网站是不是夸运营商，还有你的网速，和与对方IP的PING值了，都是硬性指标，没法靠技巧改善的，最多只能换个PING值更低的DNS
感谢解答： ）
苏帅其实不帅
xique1123 发表于
进chrome://flags/里开启“对所有网页进行GPU合成”和“GPU加速画布2D”，会有所改善，如果浏览器花屏或崩溃 ...
2L好详细。。顺便你看这里
老大已经给过了解释
版区有你更精彩： ）
感谢支持，欢迎常来： ）
xique1123 发表于
进chrome://flags/里开启“对所有网页进行GPU合成”和“GPU加速画布2D”，会有所改善，如果浏览器花屏或崩溃 ...
gpu加速的我都是开了的，不知道是不是图片大的问题，一般都是浏览产品测试的网页出现卡状况比较明显，一般都是十几个图片以上的啦。这些图片都是上百K的大小的。
染指红颜。
苏帅其实不帅 发表于
2L好详细。。顺便你看这里 /thread--1.html 老大已经给过了解释
楼主所说不是这个问题。他是说2M的网速显示图片慢。
大概是这个，我觉得清理缓存试试是很有必要的
感谢补充解答！
苏帅其实不帅
本帖最后由 苏帅其实不帅 于
14:07 编辑
染白。 发表于
楼主所说不是这个问题。他是说2M的网速显示图片慢。
大概是这个，我觉得清理缓存试试是很有必要的
- -&&我让2L看的
2M网速我看图片多了也很慢。。
刚才看到一个 给你试一下&&几分钟才刷到15L……
PS：点X停止 加载之后 滚动很流畅
苏帅其实不帅 发表于
2L好详细。。顺便你看这里 /thread--1.html 老大已经给过了解释
谢谢。不止是卡饭这里，其他的也有这样的情况，可能跟chrome的内核有关吧
七月暮枫 发表于
详情请看/thread--1.html
jrhuang08 发表于
喜欢chrome就行了，一点小事没什么的
Copyright & KaFan & All Rights Reserved.
Powered by Discuz! X3.1( 苏ICP备号 ) GMT+8,　　优化了加载速度的网站不仅可以提高其搜索引擎的排名，同时也可以降低网站的跳出率，提高其转换率，还能提供更好的终端用户体验，这是当今基于Web环境取得成功的关键。
　　下面我将介绍几个优化网站加载网页速度的简单方法，一起来看一下。
　1.服务器响应时间
　　即使网站已经格外优化，但是除非服务器响应时间非常快，否则就不会有什么大的效果。当涉及到提高网站的速度，服务器响应时间起着重要的作用。下面是一些提高服务器响应时间的小贴士。
有独立的服务器，而不是选择共享/托管服务器。
提高Web服务器的质量。
移除不必要的插件，只有那些必要的插件，才需要一直保持启用状态。
　2.浏览器缓存
　　浏览器缓存可以减少HTTP请求，从而反过来提高网站的加载速度。下面就是如何利用浏览器缓存的代码示例：
&IfModule mod_expires.c&
ExpiresActive On
ExpiresByType image/jpg &access 1 year&
ExpiresByType image/jpeg &access 1 year&
ExpiresByType image/gif &access 1 year&
ExpiresByType image/png &access 1 year&
ExpiresByType text/css &access 1 month&
ExpiresByType text/html &access 1 month&
ExpiresByType application/pdf &access 1 month&
ExpiresByType text/x-javascript &access 1 month&
ExpiresByType application/x-shockwave-flash &access 1 month&
ExpiresByType image/x-icon &access 1 year&
ExpiresDefault &access 1 month&
&/IfModule&
　　注意：如果过期时间与文件挂钩，而此时文件中的内容需要更改的话，那必须先重命名文件，以便浏览器可以获取新添加的代码。
　3.gzip压缩
　　gzip压缩是一个压缩实用程序，我们可以用它来快速加载网站。它的工作原理是在发送HTML和CSS文件到互联网浏览器之前，先压缩文件大小。允许mod_defalte模块启用Gzip压缩，下面是如何使用它的代码示例：
&IfModule mod_deflate.c&
# Compress HTML, CSS, JavaScript, Text, XML
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
&/IfModule&
　4.异步脚本
　　还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本，网站访问者也不再需要不得不按捺下性子，等待所有的脚本加载完之后才能呈现页面。在异步模式中，脚本是在后台下载的。通常，我们会将第三方脚本作为异步脚本，因为下载这些脚本时常会让网站速度变得非常慢。
&script async src=&/script.js&&&/script&
　5.内容分发网络（CDN）
　　内容分发网络（CDN）是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。要是有网站访问者请求文件和网页时，就可以直接从就近的网站服务器发送过来（也可以是从负载最小的服务器）。
　6.优化JavaScript、HTML和CSS
　　优化JavaScript和CSS也可以提高一个网站的网页速度，而且这个方法非常简单。优化JavaScript、HTML和CSS就是删除所有不必要的空格和注释，从而减小文件大小。下面是一些最小化JavaScript和CSS的流行工具，非常有用。
　7.置于顶部的样式表和底部的脚本
　　将样式表放在顶部有助网站的迅速加载，因为这样可以使得网页渐进式呈现。一般地，所有的互联网浏览器都支持在给定时间内并行下载两个组件（图像、样式和脚本）。但是通常而言，霸道的脚本会在并行下载时会阻止其他的下载，直到脚本下载完毕。
　8.避免阻塞型的JavaScript和CSS
　　在浏览器呈现网页之前，它首先需要通过解析HTML标记语言来构建一个DOM树。在此过程中，如果遇到了脚本，此过程就会中止，转而先执行脚本，完了才会继续原先的活动。因此建议避免阻塞型的JavaScript，尤其是外部脚本。
　　阻塞型JavaScript还会导致网站的延迟。所以不妨推迟加载那些不重要的JavaScript，或者采用异步加载的方式。另一种选择是将这些HTML代码内嵌到网站上，同时需要确保CSS的优化。
　9.JavaScript的延迟解析
　　为了加载网页，浏览器必须解析所有的&script&标记内容，从而增加了网站的加载时间。通过延迟解析脚本，那么就可以减少初始网站的加载时间了。
　10.启用Keep Alive
　　当用户通过浏览器请求网页时，浏览器首先需要访问HTML文件。然后它才能读取这些文件，并请求与其他资料相关联（此处的资料可以是CSS，JavaScript，也可以是任何相关的图像）。
　　如果&Keep Alive&选项被禁止，那么下载网站的进程通常就会增加，从而拖累了网站速度。启用KeepAlive的另一个好处是，它可以减少CPU的使用。
语法: KeepAlive On
　11.图像和文件格式
　　图像对于任何网站都非常有价值，因为它能传达一些强有力的信息给网站的访问者。最常见的图像格式是GIF、JPEG、PNG等。每种格式都有其长处和局限。建议使用JPEG格式，而不是GIF和PNG图像，除非图像包含Alpha因子或者是透明的。
　12.优化代码：不使用内联CSS
　　内联了样式就不能清清楚楚地将内容从设计中剥离开来。同时可能还会需要大量的维护工作，给网站管理员带来各种不便，还会进一步增加网页的大小。
　13.文件分离
　　网站的文件可以分为CSS、JavaScripts和图像。文件分离虽然并不能直接改善网站的加载时间。但是，这么做可以提高服务器的稳定性，特别是当网站流量突然出现了尖峰的时候。子域也可以用于托管文件，这样可以增加并行下载的数量。
　14.尽量减少HTTP请求
　　还有一种简单的优化网页速度的方法是，减少HTTP请求。当一个网站一下子收到太多的HTTP请求，它的访客就会有响应时间延迟的体验，这不仅增加了CPU使用率也增加了页面的加载时间。那么，又该如何减少HTTP请求？请见以下步骤。
减少网站上的对象数量。
最小化网站上的重定向数量。
使用CSS Sprites技术（只要你需要的那部分图片内容）。
结合JavaScripts和CSS。
　　上述建议已被证明在优化网站的页面加载速度上非常有效。总之，炫彩夺目的图形，有趣的内容和更好的导航可以帮助你获得更多的网站访问者，但更快的网页加载速度则能帮助你留住他们。
　　英文原文：&翻译：
验证消息：Admin10000
提示：常上QQ空间的朋友可关注，精彩内容不错过。
理智评论文明上网，拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心如何通过预加载器提升网页加载速度
预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发布数据，通过预加载器技术网页的加载性能提升了19%，Chrome测试了 Alexa 排名前2000名网站，性能有20%的提升。
它并不是一门新技术，有人认为只有 Chrome 才具备这个功能。也有人认为它是有史以来提升浏览器性能最有效的方法。如果你第一次接触预加载器，也许心中已经有了无数个问号。什么是预加载器？它是如何提升浏览器性能的？
首先需要了解浏览器是如何加载网页的
一个网页的加载依赖于脚本文件、CSS样式文件。让我们看看浏览器加载网页的过程。
首先，浏览器下载 HTML 并开始解析。如果浏览器发现外部CSS资源链接则发送下载请求。 浏览器可以在下载CSS资源的同时，并行解析HTML文件，但是，一旦发现有脚本文件的引用，则必须等待脚本文件完成下载并且执行后才能继续解析。 脚本文件完成下载并且执行后，浏览器可以继续解析HTML工作，如果遇到非阻塞资源 i.e. 图片浏览器会发送下载请求并且继续解析。
即使浏览器可以并行执行多个请求，但是无法与针对脚本文件的操作并行执行。
可以通过IE7打开链接中的网页进行测试。我们可以看到，网页head标签内包含2个样式文件和2个脚本文件。在body 中，包含3个图片、1个脚本文件。
通过瀑布流我们可以查看资源加载的过程：
脚本文件的下载和执行，会阻断其他资源文件的下载，无疑将大大降低浏览器性能。
预加载器如何提高网络利用率
2008 年，IE、WebKit和Mozilla都实现了预加载器功能，来提升网络的利用率，改善脚本文件对其他资源文件的阻塞现状。
当浏览器被脚本文件阻塞时，另一个轻量级的解析器会继续浏览剩余的标记，寻找需要下载的资源i.e. 样式文件， 脚本文件，图片 等。
一旦发现，预加载器既可以在后台开始接收这些资源，等待主解析器完成当前的脚本操作，其他资源已经完成下载，这样就减轻了脚本阻塞带来的性能损耗。
下面这个瀑布流是使用IE8打开链接中网页的结果，性能有显著的提升：IE8=7S & IE7=14S。
预加载功能仍然是各大浏览器厂商乐此不疲的实验领域。很多浏览器尝试设置资源下载的优先级。例如，Safari降低了不作用于当前视图区域样式文件的优先级。Chrome 则设置脚本文件的优先级高于图片，即使脚本文件位于HTML底部。
预加载器的陷阱
预加载器只能检索HTML标签中的URL，无法检测到使用脚本代码添加的URL，直至脚本代码执行时才可以获取这类资源。
我曾经遇到过一个通过javascript判断当前Window宽度，进而决策加载CSS样式文件的例子。预加载器无法识别此类资源。
var file = window.innerWidth & 1000 ? "mobile.css" : "desktop.css";
document.write('&link rel="stylesheet" type="text/css"
href="css/' + file + '"/&'); &/script&
&img src="img/gallery-img1.jpg" /&
&img src="img/gallery-img2.jpg" /&
&img src="img/gallery-img3.jpg" /&
&img src="img/gallery-img4.jpg" /&
&img src="img/gallery-img5.jpg" /&
&img src="img/gallery-img6.jpg" /&
上面这段代码可以轻松的骗过IE9的预加载机制，在下面的瀑布流中我们可以看到，加载图片占用了所有的连接，直至第一个图片加载完成后，CSS文件才开始下载。
影响预加载器的加载顺序的因素
当前，有几种方式来控制预加载器的加载顺序（使用javacript隐藏资源文件既是其中一种），同时，W3C Resource Priorities 中也提供两个特性来影响预加载器。
lazyload : 直至没有被标记为lazyload 资源下载完毕后才下载被标记资源。
postpone: 资源在对最终用户可见之后才开始下载。i.e. 标签的display属性被设置为 none。
预加载VS预读取
预读取（Pre-fetching）可以通知浏览器哪些资源可能会在未来的某一时机，在当前页面或者其他页面中使用。
下面是预读取的一个简单的应用，通知浏览器为将要访问的其他站点加载资源：
&link rel="dns-prefetch" href=""&
Chrome允许我们预先通知浏览器加载未来会用到的资源，被声明的资源将以较高的优先级被下载
&link rel="subresource" href="/some_other_resource.js"&
(Chromium 源码中提到，被标记为subresource的资源下载的优先级低于样式文件和脚本文件，但不低于图片加载优先级)
还有标记可以通知浏览器哪些文件是较低级别的预读取文件。
预读取未来将被使用的独立资源文件。&
&link rel="prefetch" href="/some_other_resource.jpeg"&
通过预读取方式，在后台渲染整个页面。&
&link rel="prerender" href="///next_page.html"&
预加载不是一门新技术，它对提高浏览器性能具有纪念意义，我们不需要做任何操作既可以使用预加载。
它广泛应用，我测试了以下浏览器，都具有预加载功能：
IE8 / 9 / 10
Chrome (inc Android)
Safari (inc iOS)
Android 2.3
Bruce Lawson (Opera公司总裁)也宣布Opera Mini 同样支持预加载。
注：相关网站建设技巧阅读请移步到频道。
最新图文推荐
最新专栏文章
大家感兴趣的内容
网友热评的文章
seajs.config({
base: "/resource/passapi/scripts/"
seajs.use('seajs/seajs-css');
seajs.use(['artdialog/src/dialog-plus'], function (dialog) {
$('#favorite').on('click', function(){
$.getJSON('/passapi.php?op=userstatus&callback=?', function(data){
if (data.status == 1) {
var _this = $('#favorite').find('span');
$.getJSON('/?app=favorite&controller=favorite&action=add&jsoncallback=?&contentid='+contentid, function(json){
if(json.state){
_this.html('}