关于大型网站性能的一些想法--站外预加载

前提:本人接触大型项目不多,所以可能对某些名词或者方法不熟悉,如果以下想法已经有了很成熟的模式 请告知 谢谢!

直入正题:

据我所了解的并且目前能理解的 前端优化方式为:

1、缓存技术 (时间戳 MD5等等)

2、图片懒加载

3、图片单独放到一个域名下

4、CSS Sprite

。。。。 等等

但是这些都是当用户正式的访问网站 才会发生的事情;

预想一下  如果用户没有打开网站,但是将要打开网站之前,

预加载一些比较耗费资源的内容, 比如主体的CSS  或者Sprite图片等等, 这样是不是能很大部分节约资源?

如何实现:

通过广告联盟类似的平台; 比如 优酷 或者土豆视频之前的广告是跳转到天猫1111活动的链接; 那么 在播放这段广告的同时 就开始加载活动链接页面的资源

时间: 2024-10-12 10:14:13

关于大型网站性能的一些想法--站外预加载的相关文章

前端性能优化 - 资源预加载

转帖: https://css-tricks.com/prefetching-preloading-prebrowsing 当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到. 引用 Patrick Hamann 的解释: 预加载是浏览器对将来可能被使用资源的一种暗示,一些资源可

前端性能优化 – 资源预加载

导语    当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能 当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到. 引用 Patr

网站优化--图片的预加载与懒加载(上)

1.延迟加载即懒加载,主要目的是作为服务器前端的优化,减少请求数或延迟请求数,在一些图片非常多的网站中非常有用,当图片位置进入到可视区的时候才会被加载,这样对于含有很多 图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽 最常用的方式是:监控滚动条的高度,当滚动条高度和可视区高度之和小于图片位置距离页面的高度时会被加载 2.预加载:在查看前面张图片的时候加载后面的图片,在提升用户体验的同时会增加服务器的压力 常用方式:创建image对象,通过src属性加载url资源,当资源加载完成后

懒加载和预加载---性能优化

懒加载 认识 懒加载是一种按需延迟资源的方式.在加载显示页面时,并不一次性加载所有该页面所需要的图像,对于在可视区域之外的图像,可以等到用户scroll到该区域的时候,再进行加载 实现方式 1.目前已经有很多库实现了懒加载,例如lazysizes,可以考虑使用 2.使用库这样的操作,相当于增加一个需要请求的js文件,增加一次http请求.所以如果能够实现原生的懒加载,能够更好的优化性能: 原生js实现图片懒加载 原理: 页面上图片的src属性设置为空字符串:(也可以设置为一个占位位图) 将真实路

页面性能优化:preload预加载静态资源

本文主要介绍preload的使用,以及与prefetch的区别.然后会聊聊浏览器的加载优先级. preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执行.提供的好处主要是 将加载和执行分离开,可不阻塞渲染和 document 的 onload 事件 提前加载指定资源,不再出现依赖的font字体隔了一段时间才刷出 如何使用 preload 使用 link 标签创建 <!-- 使用 link 标签静态标记需要预加载的资源 --><link r

前端性能优化 懒加载和预加载

懒加载 图片进入可视区域之后请求图片资源.对于电商等图片很多,页面很长的业务场景适用.减少无效资源的加载.并发加载的资源过多会阻塞 js 的加载,影响网站的正常使用. 浏览器解析的过程中,遇到image里面有src,他就会去请求 src 里面的资源,在真实场景中,我们希望图片进入可视区域之后,src 才会被设置进去,而不是一开始可视区域之外的 img 就设置了 src ,如果已经设置了,显然没在可是区域就去加载了.所以一开始不在可视区域的图片只是一个占位符,他真正的 url 存放在 data-u

抛砖引玉:大型网站性能优化之Javascript异步懒加载技术

懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 其实国内很多网站都用到了懒加载技术,比如国内两个大型电商网站的页面都运用到了这项技术: 天猫首页: 京东商品列表页: 最近在学习时,自己写了一个带懒加载功能的电影列表展示页,大家可以先看下页面效果: http://f81236211.w4w7.tumm.top/lazyload/ 然后自己在页面底部写了一个分页功能,页

Web前端性能优化——如何有效提升静态文件的加载速度

一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页面加载(或者渲染)速度呢?一般来说有三个方面: 1.代码逻辑:优秀的代码逻辑结构可以有效减少渲染页面使用的内存和速度(比如虚拟DOM),此方面不在本文讨论范围内. 2.SSR服务器渲染,也就是所谓的“直出”.将首屏所有内容在服务器端渲染成html静态代码后,直接输出给浏览器,可以有效加快用户访问站点时首屏的加载时间.不过此方面也不在本文讨论范围内. 3.提升静态文件的加

网站顶部显示预加载进度条preload.js

网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="js/preload.js"></script> <script type="text/javascript">