前言:

最近做一个地图展示页面,业务初期没什么问题,运行一阵后报错:

Error during serialization or deserialization using the JSON JavaScriptSerializer.
The length of the string exceeds the value set on the maxJsonLength property.

Google 了一下,原来是由于业务数据的增多, ajax 后台返回时报错,参考网上的方法,在返回时设置一下 MaxJsonLength

            var jsonResult = Json(jsonString);jsonResult.MaxJsonLength = int.MaxValue;return jsonResult;

报错的问题是解决了,可还有一个问题就是页面加载时间过长。为了地图展示的效果,不能进行数据分页。

期间尝试了很多方法,记录如下:

 列表与地图同步:

页面的布局是左边显示数据列表,右边显示 GoogleMap 。刚开始拼列表的 html 和地图的初始化、加载是在同一个方法里面执行的,这样的效果就是列表和地图同时显示,由于地图的初始化、加载比较耗时,就想让列表先显示,地图初始化完后再显示。也就是列表显示和地图初始化同步执行,改后代码:

                    if(pageData.length>0){SetListHtml(1);$("#loadGif").hide();setTimeout(function () {SetMap();}, 0);}else{$("#loadGif").hide();}

 存储过程和缓存:

列表与地图同步可以让用户的体验好一些,但是页面加载时间还是过长,于是就把后台取数据改成存储过程、把一些不是经常改变的数据做成缓存。在做缓存的过程中,由于不是经常改变的数据有时也会改变,因此缓存依赖要设成 SqlCacheDependency 。具体方法网上有很多。

        public DataTable GetCacheGpsBoundary(){string cacheKey = "dtCustomerBoundary";DataTable dtCustomerBoundary = (DataTable)HttpRuntime.Cache.Get(cacheKey);if (dtCustomerBoundary == null){log.Debug("dtCustomerBoundary从数据库中获取");dtCustomerBoundary = new DataTable();string sql = "";SqlCacheDependency sqlCacheDependency = null;string connectionString = ConfigurationManager.AppSettings[""];using (SqlConnection cn = new SqlConnection(connectionString)){using (SqlCommand cmd = cn.CreateCommand()){cn.Open();cmd.CommandText = sql;sqlCacheDependency = new SqlCacheDependency(cmd);//当有DML操作时,onChange事件会接收来自Sql Server通过sq_DispatcherProc存储过程发送给应用程序的消息。using (SqlDataAdapter adapter = new SqlDataAdapter()) //查询数据
                        {adapter.SelectCommand = cmd;adapter.Fill(dtCustomerBoundary);}}}HttpContext.Current.Cache.Insert(cacheKey, dtCustomerBoundary, sqlCacheDependency);}else{log.Debug("dtCustomerBoundary从缓存中获取");}return dtCustomerBoundary;}

View Code

 GZip压缩:

存储过程和缓存在本机测试的确加快了页面加载速度,可是发布到服务器后页面加载速度还是不理想。想分析具体原因在哪里,在网上找到一个工具:

HttpWatch Basic 9.2
Copyright: Copyright 2002 -2014 Simtec Limited
Version: 9.2.6

先看下图例颜色的意义:

我理解 Wait 就是服务器执行用时, Receive 就是传输用时。

没有加存储过程和缓存:

再来看下改成存储过程和加缓存后

最后是启用 GZip 后的图

通过 HttpWatch 我们可以看出压缩后数据的大小 853424 ,为压缩前 4309641 的 19.80% 、用时也由 8.623 缩短到 3.119 ,由于服务器当前资源、网络情况等每次时间会有所不同。

启用 GZip 压缩后,服务器和客户端 CPU 负担会加大,但对页面加载速度效果还是很明显的,刚开始通过 HttpWatch 看出是由于传输数据过大使页面加载时间过长时,就想到要用压缩,可在后台 ajax 方法中对返回的 Json 字符串 采用 GZipStream 压缩后,在前台 JavaScript 一直找不到好的方法去解压,尝试了很多加解压算法 Zlib、LZString 等等,加解压的时间都太长了,没什么效果。

看了 单程列车 博客上 .NET MVC 简单实现GZIP  后在后台添加一个 Filter 就可以实现服务端 gzip 压缩,客户端会自动解压,客户端 ajax 时可能要加一句

headers: { "Accept-Encoding" : "gzip" } ,其实我觉得 ajax 就是异步的去打开某一网页。

 总结:

分析、看清问题,找到问题真实原因,才有可能找到好的解决方法;

刚开始想在取数据这块优化,看 sql 的执行计划看的一头雾水,今年要买些数据库优化方法的书补补;

对 JavaScript、HTTP、C#、MVC、SQL 等等掌握的是否系统、全面在综合运用时起着决定性的作用

解决一个问题的时候还是很高兴的。

 参考:

http://stackoverflow.com/questions/5692836/maxjsonlength-exception-in-asp-net-mvc-during-javascriptserializer

http://www.cnblogs.com/zhaojingjing/archive/2011/01/20/1940357.html

http://www.cnblogs.com/willick/p/3331520.html

HTTP权威指南

转载于:https://www.cnblogs.com/cg6811568/p/3594149.html

MVC页面加载速度优化小记相关推荐

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

    1.合并Js文件和CSS 将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文件比较多,就需要进行多次"Get"请求,延长加载速 ...

  2. web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  3. python网页优化_400% 的飞跃-web 页面加载速度优化实战

    前言 一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. 正常 ...

  4. web 页面加载速度优化实战

    前言 一个网站的加载速度有多重要? 反正我相信之前来博主网站的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图  首页完整加载时间 8.18s ,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  5. 需要某个字体包才能正确显示此页面_[三分钟小文]前端性能优化-页面加载速度优化...

    本期内容请记住一个核心:JavaScript很快,DOM很慢 阅读本文您将收获: 从用户输入URL到看得到页面的过程 页面渲染过程 在页面加载层级的性能优化 用户看到页面之前都经历了什么 这一部分是面 ...

  6. java加快页面加载速度方法_关于页面加载速度优化的11种方法

    1.合并js和css文件 将js和css分别合并到一个共享文件,这样不仅能够简化代码,而且在执行js文件是,如果js文件较多,就需要多次向服务器请求数据,这样将会延长加载速度,将js文件合并在一起,减 ...

  7. Dns-prefetch DNS 预解析优化页面加载速度

    Dns-prefetch DNS 预解析优化页面加载速度 浏览器访问一个链接时并不是直接将请求到网页对应的服务器上,而是先要做域名解析--将域名解析到网页对应的服务器 ip 地址,然后浏览器才能和服务 ...

  8. WEB前端性能优化,提高页面加载速度

    可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too simple.事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传 ...

  9. 前端性能优化:如何提高页面加载速度和用户体验

    第一章:介绍 当今互联网时代,网站的性能对于用户体验至关重要.一个快速加载的网页不仅能提高用户的满意度,还能增加页面的转化率.而在前端开发中,性能优化是一个永恒的话题.本篇博客将为大家分享一些关于前端 ...

最新文章

  1. Atlas学习手记(9):异步调用Page Method
  2. 诗与远方:无题(四十二)
  3. 【u107】数字游戏(bds)
  4. 创业一定要做自己“喜欢”并且有“优势”的事情
  5. python配置文件转dict
  6. pushViewController自定义动画http://blog.csdn.net/ralbatr/article/details/22039233
  7. 解决eclipse配置Tomcat时找不到server选项
  8. 关于AJAX的安全性
  9. js并列排名之div图片加载
  10. [unity独立游戏]多人游戏插件
  11. 题目 2291: [蓝桥杯][2018年第九届真题]调手表(BFS)
  12. Aras innovator: TOC目录简单汉化方法
  13. 从淘宝网买衣服, 感受淘宝
  14. 使用wireshark抓取聊天信息与爬虫入门
  15. Java基础知识提炼与总结
  16. “墨子”升空 首席科学家谈中国量子通信技术
  17. 苹果笔记本上网很慢怎么回事?macbook无线上网慢的解决方法
  18. filebrowser实现私有网盘
  19. 花火4G聚合路由器无线网络支持5G户外直播应急通讯工作
  20. sdlc esd.oracle.com,jdk下载安装

热门文章

  1. 无需自己输入include这些的方法
  2. 固定table标题头、标题列(兼容多种浏览器)
  3. 【Sql Server】DateBase-触发器
  4. SpringBoot (七) :SpringBoot 整合dubbo
  5. pytorch之expand,gather,squeeze,sum,contiguous,softmax,max,argmax
  6. LeetCode简单题之判断路径是否相交
  7. TVM量化路线图roadmap
  8. 华为+长安研发芯片?长安蔚来更名“阿维塔科技”
  9. 服务器技术综述(三)
  10. ❤️让人心跳加速的陌陌案例,大数据必需学会的基础案例!❤️ 【推荐收藏】