我是怎么发现并解决项目页面渲染效率问题的(IE调试工具探查器的使用)
2014-02-08 17:48
555 查看
#我是怎么发现并解决项目页面渲染效率问题的(IE调试工具探查器的使用) ##背景 之前的项目中,有很多的登记页面,一般都有100-200甚至更加多的字段,而且还涉及到字典、日期及其他效果的显示,载入时很慢,而且会有卡死的现象,IE下特别明显 ##IE调试工具探查器的使用 当时找了不少资料,不过最后还是把目光聚焦到IE自带的调试工具了 目前我电脑里面的是IE10,当时分析时用的是IE9,里面有一页**探查器**引起了我的注意,经过一轮的折腾,掌握了其分析方法如下: 1. 打开要分析的页面,F12进入开发人员工具,并切换到**探查器**页面 2. 在点击`开始采样`后进行一系列的操作(由于我的问题是载入页面的效率,自然是刷新页面),结束后再次点击该按钮 3. 则会有结果,把视图切换成` 调用树`,则最耗时的函数调用就会一目了然 ![探查器](http://images.cnitblog.com/blog/84053/201402/081733408821679.jpg) ##找到问题 用这个方法分析了一下 [示范页面](http://p2227.github.io/demo/applyLayout/elayout.html),对于结果层层展开(抽丝剥茧)后,终于发现罪魁祸首了: ![耗时函数](http://images.cnitblog.com/blog/84053/201402/081740283894518.jpg) 原来是easyui的下拉框、日期框及布局组件最耗时。知道问题所在,就可以针对地解决了。 ##解决结果 于是经过一翻的调整,重新定义了页面和HTML结构,使得效率有了大的提升 [调整后的页面](http://p2227.github.io/demo/applyLayout/playout.html) ![调整后的效率](http://images.cnitblog.com/blog/84053/201402/081755503737248.jpg) ##解决过程小结 * [详细方案](http://www.cnblogs.com/p2227/p/3541162.html)
相关文章推荐
- IntelliJIdea 2016.2 使用 tomcat 8.5 调试spring的web项目时,bean被实例化两次导致timer和thread被启动了两遍的问题的解决
- 完美解决IE兼容模式问题(使IE使用固定的渲染模式)
- 一个页面中使用多个iframe导致在ie中假死问题的解决方法
- 强制IE使用最高版本引擎渲染页面,避免默认使用IE7引擎导致的页面布局混乱及其它问题
- oracle ilearning中文汉字问题解决办法以及HTTP调试工具Fiddler的使用方法介绍
- IE8″开发人员工具”使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)
- 关于VS 使用GDB工具调试ADT下JNI时遇到的一些问题的解决
- 问题解决:iOS项目使用百度地图只显示灰色方格,调试报iError - 300错误
- 常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)
- 使用myeclipse开发工具新建maven项目方式二并解决只有src/main/resources问题
- 最近在编写一些bat工具时,发现自己对lua的io和正则表达式使用没什么了解,网络上转载解决问题后的文章。
- 解决问题:vs 使用命令行参数调试时出现"当前项目设置指定将使用特定的安全权限对该项目进行调试.在此模式下,命令行参数将不会传递给可执行文件."
- vs2008与IIS 7.0使用在vista上时出现的问题及解决方法(Internet Explorer 无法显示该页面)(VS2008: IE Cannot Display Web Page)
- IE8"开发人员工具"使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)
- 前后端分离的j2ee的web项目,使用vue方式,即{{}}方式批量传入前端参数,遇到一个一个问题,页面上一开始有{{}},怎么处理?
- Android开发-工具:Android Studio 怎么添加使用第三方jar包及无法编译的问题解决方法
- 项目中遇到的超卖问题及解决办法(使用go做测试工具)
- IE调试网页之七:使用探查器工具分析代码性能 (Windows)
- IE8"开发人员工具"使用详解下(模式,JS调试,探查器)
- IntelliJ IDEA 工具使用中 WebLogic配置项目路径过长问题解决