记一次前台展示数据（ajax数据多）的优化过程
1。该项目中期数据加载过慢，首次进去可能需要几十秒的反应时间。后台记录时间，发现除了一个请求封装数据有问题，耗时五六百毫秒，其他的时间可以接受。
但真实时间确是花了几十秒，问题主要出在前台，加载播放器的时候，过于缓慢。首先是播放器的字体耗时 775 ms,其次播放器的图片加载
耗时 1.48s 和 1.76s,ajax请求为 632ms,主要时间都花在css以及js的加载上，故进行优化
2。通过实验发现，之所以js、css加载慢，都是因为这些资源都需要通过下载，而有些大点的资源耗时就会很高。
3、普遍的做法是压缩js以及延迟加载。压缩js可以在能下载到的资源上做文章，这点应该很有效，压缩级别高的话，可以极大地节省时间。
如果要使用延迟加载，其原理是优先加载静态资源，这样就可以不会让人感到厌烦，但是这只是一种投机取巧的行为，因为像播放器这种，再如何延迟加载
如果要播放以及初始化好，还是需要那么长的时间，因此不是很建议
转载于:https://www.cnblogs.com/yxb-ylp-520/p/7932308.html
记一次前台展示数据（ajax数据多）的优化过程相关推荐
- 记一次java程序从6H到30min的优化过程
背景 我们有一个java系统,需要从固定的文件目录中读取csv格式的文件,然后将文件内容读取后在进行一系列的转换以及数据库操作,包含文件内容转换为java对象.内容去重.查询oracle.生成目标数据 ...
- ASP.NET前台table通过Ajax获取绑定后台查询的json数据
上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax J ...
- ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据
摘要:最近在写网站,好不容易弄好了需求又变了,没错企业的门户网站硬要弄成后台管理系统一样,没办法作为小工的我只能默默的改.前台HTML页面需要提交数据到后台处理,又不能用form表单,于是乎研究了1天 ...
- 跨平台获取外部系统的数据解析成json并传输到前台展示成列表
最近在做项目的过程中,做过这样一个功能,通过soap协议跨平台获取外部系统文件柜的信息,并将所需要的字段解析出来传输至前台页面上展示成列表的形式.说实话,做了这么多的soap协议项目,做过编写PC服务 ...
- spring返回数据使用ajax,【spring 后台跳转前台】使用ajax访问的后台，后台正常执行，返回数据，但是不能进入前台的ajax回调函数中...
问题1: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中 问题展示: 问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...
- redis一般缓存什么样数据_门户数据展示_Redis缓存数据
学习主题:门户数据展示_Redis缓存数据 一.Redis_3主3从集群环境搭建 谈单你对读写分离和主从同步的理解 读写分离:Master负责写数据的操作,salve负责读数据的操作 主从同步:sal ...
- vue绑定后台数据ajax,vueJS 获取后台数据 绑定data
//vue 环境安装 http://blog.csdn.net/u013182762/article/details/53021374 一开始使用安装环境配置一些东西 ,后来发现太麻烦了 . 直接C ...
- Bootstrap4+MySQL前后端综合实训-Day07-PM【用户信息管理页面——功能展示(分页显示数据、添加用户、批量删除用户、编辑用户信息)、servlet项目代码整理汇总】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记][附:实训所有代码] 目 录 页面展示 分页显示数据 添加用户信息 (单个/批量)删除用户 编辑 ...
- web.xml.jsf_使用JSF 2.2功能来开发可滚动，可延迟加载的Ajax数据表
web.xml.jsf 这次,我想与您分享我最近从JSF 2.2功能中学到的知识. 为此,我决定创建一个简单的ajax,可滚动,延迟加载的数据表. 请注意, 绝不这是相当大的库如Primefaces ...
- 使用JSF 2.2功能来开发可滚动，可延迟加载的Ajax数据表
这次,我想与您分享我最近从JSF 2.2功能中学到的知识. 为此,我决定创建一个简单的ajax,可滚动的延迟加载数据表. 请注意, 绝不这是相当大的库如Primefaces , RichFaces的或 ...
最新文章
- Reverse Engineering Custom DataTypes - GUID() in SQL Server to PostgreSQL
- Navicat设置字段类型
- python无向加权图_图：无向图(Graph)基本方法及Dijkstra算法的实现 [Python]
- 通过简单的Linux命令，编译一个C语言代码
- c语言不循环链表,无头单向不循环链表相关接口实现（C语言）
- linux连接建立的时间,用timedatectl在Linux中检查当前时区及更改时区(创建符号链接来更改时区)...
- Java设计模式笔记（4）模版方法模式
- it devops_DevOps是IT商店的战场
- win11开始菜单如何分组 Windows11开始菜单进行分组的设置方法
- 话里话外：传统到按单制造业的ERP变革
- 设计模式(15)——抽象工厂模式(Abstract Factory)
- 计算机ping命令6,Mac电脑ping命令区别和IPv6命令
- html语言黄色,HTML黄色欧美形式音频工作室网页模板代码
- Linux和操作系统从入门到进阶2020最新书单大佬力荐
- PointNet论文翻译
- 游戏Call技术-绑定主线程调用CALL技术(反游戏检测call)
- Jenkins集成Sonar（3/3）- 安装SonarQube Scanner进行扫描（离线安装）
- 【音视频】国标双向对讲方案
- 基于自适应形态学的探月雷达噪声压制方法
- web项目引入PDF.js并添加水印禁止下载