精华内容
下载资源
问答
  • 如果一个大型网站有很多图片加载很慢,怎么优化 1.图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。 2.如果为幻灯片、相册等...

    如果一个大型网站有很多图片加载很慢,怎么优化

    1.图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。

    2.如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载。

    3.如果图片为css图片,可以使用CSSsprite,SVGsprite,Iconfont、Base64等技术。

    4.如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。

    如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致。

    展开全文
  • 网站加载图片慢

    2018-11-21 19:16:14
    前言:今天小萌新想弄一个网站,搭建一个小型网站图片不过才几张图片,然而加载的是真的…,所以在网上找了多文章,最后总结一下。 web性能的终极目标是减少资源到客户端的延迟,但是我们在HTTP1.0/HTTP1.1协议...

    前言:今天小萌新想弄一个网站,搭建一个小型网站图片不过才几张图片,然而加载的是真的慢…,所以在网上找了很多文章,最后总结一下。

    web性能的终极目标是减少资源到客户端的延迟,但是我们在HTTP1.0/HTTP1.1协议中经常会遇到加载的图片太多或者太大导致页面加载完成慢的问题:图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长.

    更详细的:https://blog.csdn.net/u012496505/article/details/73824327

    压缩网站:https://tinypng.com/
    在这里插入图片描述

    展开全文
  • 使用jq延迟加载图片, 用到那个 加载哪个.4.加大服务器宽带 5.检查服务器硬盘读取速度. 压缩图片: png建议使用https://tinypng.com/ 非常给力 直接上传图片就可以进行压缩、 转载于:...

    1.使用缓存

    2.使用CDN加速
    3.使用jq延迟加载图片, 用到那个 加载哪个.
    4.加大服务器宽带

    5.检查服务器硬盘读取速度.

     

    压缩图片:

    png建议使用https://tinypng.com/  非常给力  直接上传图片就可以进行压缩、

    转载于:https://www.cnblogs.com/yuancr/p/8351030.html

    展开全文
  • 前言:今天小萌新想弄一个网站,搭建一个小型网站图片不过才几张图片,然而加载的是真的…,所以在网上找了多文章,最后总结一下。 web性能的终极目标是减少资源到客户端的延迟,但是我们在HTTP1.0/HTTP1.1协议...

    前言:今天小萌新想弄一个网站,买了一个1G的服务器搭建一个小型网站。可是图片不过才几张图片,加载的是真的慢…,作为一个前端,这不能忍。所以记录一下老生常谈的网页优化的问题。

    这段时间整理自己的笔记,发现不够详细,以前写的东西也不够系统,所以有时间来重新详细的整理一下。本来图片加载慢就属于网页优化的问题,所以这里总体来说一下关于优化的那些事儿

    Ⅰ、图片优化

    1. 优化图片
      可以使用简单的方式直接压缩图片,压缩程度就看各自的需求了,https://tinypng.com/,网上自行搜索还有很多类似的网站。
    2. 优化CSS Sprite
      在Sprite图片中横向排列一般都比纵向排列的最终文件小组合Sprite图片中的相似颜色可以保持低色数,最理想的是256色以下PNG8格式“对移动端友好”,不要在Sprite图片中留下太大的空隙。虽然不会在很大程度上影响图片文件的大小,但这样做可以节省用户代理把图片解压成像素映射时消耗的内存。100×100的图片是1万个像素,而1000×1000的图片就是100万个像素了。
      不过这也有一定的缺点:在长期开发多人合作的项目中,会不好维护这些sprites,每次对icon做修改,都得相应的改动css里background-position的值,相当繁琐.
    3. 不要用HTML缩放图片
    <img width="100" height="100" src="mycat.jpg" alt="My Cat" />
    不要因为在HTML中可以设置宽高而使用本不需要的大图。如果需要那么图片本身(mycat.jpg)应该是100x100px的,而不是去缩小500x500px的图片。
    
    1. 用小的可缓存的favicon.ico(P.S. 收藏夹图标)
       favicon.ico是放在服务器根目录的图片,它会带来一堆麻烦,因为即便你不管它,浏览器也会自动请求它,所以最好不要给一个404 Not Found响应。而且只要在同一个服务器上,每次请求它时都会发送cookie,此外这个图片还会干扰下载顺序,例如在IE中,当你在onload中请求额外组件时,将会先下载favicon。
      所以为了缓解favicon.ico的缺点,应该确保:足够小,最好在1K以下设置合适的有效期HTTP头(以后如果想换的话就不能重命名了),把有效期设置为几个月后一般比较安全,可以通过检查当前favicon.ico的最后修改日期来确保变更能让浏览器知道
    2. 使用云连接,把图片存在服务器或者云

    Ⅱ、减少http请求,杜绝404请求

    80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。

    减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢?嗯,确实有鱼和熊掌兼得的办法。

    合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的,当然,也可以合并所有的CSS。如果各个页面的脚本和样式不一样的话,合并文件就是一项比较麻烦的工作了,但把这个作为站点发布过程的一部分确实可以提高响应时间。

    CSS Sprites是减少图片请求数量的首选方式。把背景图片都整合到一张图片中,然后用CSS的background-image和background-position属性来定位要显示的部分。

    图像映射可以把多张图片合并成单张图片,总大小是一样的,但减少了请求数并加速了页面加载。图片映射只有在图像在页面中连续的时候才有用,比如导航条。给image map设置坐标的过程既无聊又容易出错,用image map来做导航也不容易,所以不推荐用这种方式。

    行内图片(Base64编码)用data: URL模式来把图片嵌入页面。这样会增加HTML文件的大小,把行内图片放在(缓存的)样式表中是个好办法,而且成功避免了页面变“重”。但目前主流浏览器并不能很好地支持行内图片。

    减少页面的HTTP请求数是个起点,这是提升站点首次访问速度的重要指导原则。

    Ⅲ、减少DNS查找

    域名系统建立了主机名和IP地址间的映射,就像电话簿上人名和号码的映射一样。当你在浏览器输入www.yahoo.com的时候,浏览器就会联系DNS解析器返回服务器的IP地址。DNS是有成本的,它需要20到120毫秒去查找给定主机名的IP地址。在DNS查找完成之前,浏览器无法从主机名下载任何东西。

    DNS查找被缓存起来更高效,由用户的ISP(网络服务提供商)或者本地网络存在一个特殊的缓存服务器上,但还可以缓存在个人用户的计算机上。DNS信息被保存在操作系统的DNS cache(微软Windows上的”DNS客户端服务”)里。大多数浏览器有独立于操作系统的自己的cache。只要浏览器在自己的cache里还保留着这条记录,它就不会向操作系统查询DNS。

    IE默认缓存DNS查找30分钟,写在DnsCacheTimeout注册表设置中。Firefox缓存1分钟,可以用network.dnsCacheExpiration配置项设置。(Fasterfox把缓存时间改成了1小时 P.S. Fasterfox是FF的一个提速插件)

    如果客户端的DNS cache是空的(包括浏览器的和操作系统的),DNS查找数等于页面上不同的主机名数,包括页面URL,图片,脚本文件,样式表,Flash对象等等组件中的主机名,减少不同的主机名就可以减少DNS查找。

    减少不同主机名的数量同时也减少了页面能够并行下载的组件数量,避免DNS查找削减了响应时间,而减少并行下载数量却增加了响应时间。我的原则是把组件分散在2到4个主机名下,这是同时减少DNS查找和允许高并发下载的折中方案。

    Ⅳ、避免重定向

    重定向用301和302状态码,下面是一个有301状态码的HTTP头:

    HTTP/1.1 301 Moved Permanently
    Location: http://example.com/newuri
    Content-Type: text/html
      浏览器会自动跳转到Location域指明的URL。重定向需要的所有信息都在HTTP头部,而响应体一般是空的。其实额外的HTTP头,比如Expires和Cache-Control也表示重定向。除此之外还有别的跳转方式:refresh元标签和JavaScript,但如果你必须得做重定向,最好用标准的3xxHTTP状态码,主要是为了让返回按钮能正常使用。

    牢记重定向会拖慢用户体验,在用户和HTML文档之间插入重定向会延迟页面上的所有东西,页面无法渲染,组件也无法开始下载,直到HTML文档被送达浏览器。

    有一种常见的极其浪费资源的重定向,而且web开发人员一般都意识不到这一点,就是URL尾部缺少一个斜线的时候。例如,跳转到http://astrology.yahoo.com/astrology会返回一个重定向到http://astrology.yahoo.com/astrology/的301响应(注意添在尾部的斜线)。在Apache中可以用Alias,mod_rewrite或者DirectorySlash指令来取消不必要的重定向。

    重定向最常见的用途是把旧站点连接到新的站点,还可以连接同一站点的不同部分,针对用户的不同情况(浏览器类型,用户帐号类型等等)做一些处理。用重定向来连接两个网站是最简单的,只需要少量的额外代码。虽然在这些时候使用重定向减少了开发人员的开发复杂度,但降低了用户体验。一种替代方案是用Alias和mod_rewrite,前提是两个代码路径都在相同的服务器上。如果是因为域名变化而使用了重定向,就可以创建一条CNAME(创建一个指向另一个域名的DNS记录作为别名)结合Alias或者mod_rewrite指令。
     
    摘自连接: 
    https://blog.csdn.net/u012496505/article/details/73824327
    https://www.cnblogs.com/xianyulaodi/p/5755079.html

    展开全文
  • ”1、图片加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。2、如果为幻灯片、相册等,可以使用图片加载技术,将当前展示图片的前...
  • 图片加载 在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶 端的距离与页面的距离,如果前者小于后者,优先加载。 如果为幻灯片、相册等,可以使用图片加载技术,将当前展示图片的前一张和...
  • 据近期调查,有40% 的用户, 会因为网站加载时间超过3秒而放弃访问,这年头,千兆光纤,4K视频串流,还有大型在线多人游戏遍地跑,为什么只包含文字和图片的网页,经常要等半天才能加载出来?说到底,导致网页加载慢...
  • 网站建设中建站企业最重视...天津网站建设相信多的网民在浏览网页的过程中会发现并不是所有的网站页面都能够快速被打开并可以顺利浏览,尤其是在遇到内容丰富且价值高的网站加载速度极,而这必定会降低用户体验...
  • 一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验[性能优化] a. 图片懒加载,滚动到相应位置才加载图片 b. 图片预加载,如果为幻灯片、相册等,将当前展示图片...
  • 图片加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。 如果为幻灯片、相册等,可以使用图片加载技术,将当前展示图片的前一张和...
  • 1、精灵图技术产生的目的:很多大型网页在首次加载的时候都需要加载很多的小图片,而考虑到在同一时间,服务器拥堵的情况下,为了解决这一问题,采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题...
  • 一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优 化这些图片的加载,给用户更好的体验? 图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端 的距离与页面的...
  • 但是在大量的图片中找到合适还是不容易的,尤其是在没有分类标签的情况下就更难找了,当然,更便捷的办法还是在图片网站上搜索合适的图片下载使用。给大家推荐Android手机端的壁纸软件——Resplash和Walldrobe时...
  • 图片加载,滚动到相应位置才加载图片 b. 图片加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载 c. 使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话 d. 如果图片...
  • 如何优化图片加载慢

    2019-10-06 13:22:48
    1、压缩图片 2、懒加载(页面上图片多,但用户并不是要求立即就能看到全部图片,可以当用户将要看到的时候,再去加载,先加载用户看的,让出网络带宽) 3、对页面进行分帧Frame加载,比如页面长,可以只加载前面...
  • 图片加载,滚动到相应位置才加载图片。 b.图片加载,如果为幻灯片、相册等,将当前展示图片的前一张和后一张优先下载。 c.使用CSSsprite,SVGsprite,Iconfont、Base64等技术,如果图片为css图片的话。 d....
  • 如何解决网站图片过大加载慢的问题? 图片过大加载慢?而不是图片太多加载慢? 首先要尽可能的压缩,看用户的忍受程度。jpg 可以用多方法压缩,png 推荐使用 TinyPNG 工具(不过正文图片,...
  • 而不是图片太多加载慢? 首先要尽可能的压缩,看用户的忍受程度。jpg 可以用多方法压缩,png 推荐使用 TinyPNG 工具(不过正文图片,显然要选择 jpg 格式的)。 然后 1,不太“在乎”用户体验的省事方法: ...
  • 图片出自【码迷SEO工具-摩天楼内容助手】优化网页加载速度的方法在这个互联网主导的大环境之下,网站已经成为多企业的支柱,无论是对于大型企业网站还是中小型企业网站来说,蓬勃发展都显得至关重要,随着搜索引擎...
  • ②本机的硬件配置低(CPU或者是内存被占满的时候,打开网页很是会很慢的) 2.连接过程 ①DNS解析慢(在http请求的过程中,域名解析和建立连接占的时间很多) ②接受数据时间过长。(因为下载的内容太重,例如大...
  • 网站图片延时加载

    2017-08-16 18:57:13
    网站上有很多图片的时候就会加载速度很慢(如果3S内首页打不开,已经算是死亡页面) html> html lang="en"> head> meta charset="UTF-8"> title>图片延迟加载/懒加载title> style type="text/css"> * { margin...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 299
精华内容 119
关键字:

网站图片加载很慢