关于页面的加载速度

关于页面的加载速度

??12月初的时候,刚刚换完项目组的我终于迎来了自己独立完成的第一个项目:旅游产品活动页面.这是目前我接手的独立完成的最大的一个项目.

  • 整个项目周期大约为两个礼拜,内容包括:

    • 根据活动时间判断一键领取多个优惠券;
    • 九宫格式抽奖及轮播中奖信息;
    • 根据时间轴返回每天的秒杀数据;
    • 遍历不同的产品列表等...

??其实整个项目看起来真的没有什么,而且有些功能自己之前也是写过的,但是真正自己做的时候却漏洞百出,今天先不说那些小错误小漏洞,说一下自己千辛万苦写完的页面遇到的最大的问题:加载速度巨慢!

??项目刚完成的时候内心非常的开心,但当上线之后发现打开自己的页面居然最少需要20s,最多甚至达到了30s,有的用户反馈根本的打不开,反思一下,自己如果是用户的话根本就不能忍受啊,于是在公司前辈的帮助下开始着手优化速度.

??1.首先最简单的,页面的图片加载速度.因为有的一些图片UI给我的时候是很高清的图片,很多都是大小超过2M的了,这样的图片加载起来真的很慢,所以就在线压缩了一下,压缩过后真的快了一些,推荐一个在线压缩网站:Timog这个真的很好用,单张图片的大小最大支持30M,完全够用啊.

??如果是jpg文件也可以尝试把它用PS转化为渐进式加载,这样图片是以由模糊逐渐清晰的加载的,有的时候也蛮好用的.

??当然如果项目是用jQuery开发的,那么也可以用lazyload实现懒加载,这个方法对于图片比较多的页面是很好用的,推荐推荐.

??2.因为项目中有一个功能是返回用户中奖信息,虽然之前活动有过这个功能,这次只是在之前的基础上改动一下,但就是这次发现了问题.之前返回的用户中奖记录是所有用户的,而之前的活动一般的时间都很短,所以用户的中奖信息很少,但这次的活动持续的时间很长,每天都有用户抽中奖品,大量的用户抽奖记录导致页面加载的时候很慢,于是就和产品经理和后端工作人员沟通了一下改动了接口,从之前返回所有的用户中奖记录改成只返回最近50条用户的中奖记录.这样又大大的优化了加载速度.

??3.关于产品渲染.因为这次做的项目有大量的产品渲染,很大一部分的渲染是不需要任何逻辑的只是单纯的显示,对于这部分产品数据在调用的时候我选择了异步加载"async = true",这也提升了加载速度.

??4.避免多次频繁调用接口,尤其是会返回大量数据的接口.我的项目中就有一个接口同时给我返回两个模块的数据,但在书写代码的时候我并不是把渲染两个模块数据的代码写在同一个接口中,而是将这个接口调用了两次!优化了之后提速了很多啊,然后又发现了一些其他的无用接口,删除了之后加载速度也得到了优化.

??以上就是我在第一个项目中关于页面加载速度学习到的一些东西,都是很肤浅的很简单的东西,希望各位大神多多指教多多批评,感激不尽.

原文地址:https://www.cnblogs.com/tobacco-pipe/p/10243830.html

时间: 2024-10-28 10:09:47

关于页面的加载速度的相关文章

前端设计师---优化页面的加载速度

一:从脚本入手的优化: 删除javascript中不必要的注释,简洁优化代码是必须养成的好习惯,尽量不要将函数的调用直接加在HTML标签中<div onclick="">这种用法不被提倡.尽量使用js动态添加,减少标签污染,提高代码的可复用性. 合并相似的js代码,或者可以直接封装成函数,既提高代码复用性,又省去加载脚本的时间. 引入JavaScript 编写的 jQuery 插件Lazy Load,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片不会被载入,直到用户

页面加载速度优化的12个建议

Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性,同时指出很多网站都没有利用最佳的页面优化技术,页面加速速度都存在很大缺陷.那么该如何补救,提高网站页面的加载速度呢? 报告给出了12个页面加载速度优化的补救措施,用以改善加载时间,改善站长浏览者的用户体验.网站运营人员可以通过这些建议来解决页面加载速度难题.编译如下: 1.合并Js文件和CSS 将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文

提高页面加载速度的方法

提高页面加载速度的方法有如下几个方面:(一)减少HTTP强求(1)增加并行连接(2)合并资源文件:将多个小的css还有javascript文件进行合并成一个大文件,这样页面在加载页面的相关资源的时候,就会减少HTTP的请求,从而加快页面的加载速度(3)使用CSS sprite:将整个网站上所有共用的小图片都合成一张图片,然后使用background-position进行控制所需要的图片位置.原理是虽然每次只是使用了一张小图片,但是整个图片都已经被保存到了缓存中,这样每次使用就不需要再去请求图片

Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

提高页面加载速度

在做项目的是时候;有时候为了方便把平时需要的插件 css js都写在了layouts页面中,这样其他页面中就不需要再写一次了, 但是 但是 但是 这样不需要这些文件的页面也需要花时间去加载 有的特别耗费时间,这样就拖慢了页面的加载速度 所以最好的是把最基本的,每个页面都需要的css js写在layouts中, 然后其他的各自所需的css js写在各自的页面中, 这样就很耗费时间 layouts页面 <!DOCTYPE html> <html lang="zh-CN"&

【转】Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

提高网站页面加载速度的方法

我们在访问一些网站时,总是感觉页面加载的速度不够快,这是什么原因导致的呢?作为网站的开发者又能做哪些优化,来提高页面的加载速度呢? 工具/原料 网页开发工具 方法/步骤 1 优化图像.图像能吸引访客的注意,但是每一张图片都需要从服务器下载到访客的电脑中,这无疑增加了页面的加载时间.因此,必须优化图像.优化方法包括适当减小图片尺寸,降低图片的颜色深度. 2 去掉不必要的插件.一些免费的插件能够增强网页的功能,但是如果添加了过多的插件,就会增加服务器的负担和页面加载时间.在构建页面时,去掉不必要的插

Web前端优化,提高加载速度

研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决定了这个网站的生死存亡. 可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too sim

优化JavaScripe 提升首页加载速度的几种方案解析

优化目的: 1. 减少load量. 2. 优化js,加快页面加载速度. 网站中最影响网站打开速度的是什么?我会告诉是网站中的javascript,简称JS.模板中引用的JS文件越多,打开速度越慢,细读完这篇文章,够你优化大半天的了,关于JS优化方法大都脱离不了这三种方法. 方法一:把不重要的JS放在页面最底部 这是最简单,也是效果最好的优化方法,把不重要的JS通通放到页面的最下面body的上面,实现异步加载,也就是等网页都加载完了,最后在加载这些不重要的JS,这样就不影响网页速度了.如公共的co