起因 要捕获 JavaScript 代码中的异常一般会采用 try catch，不过 try catch 的使用是否是对代码性能产生影响呢？答案是肯定有的，但是有多少不得而知。 前端线上脚本错误的捕获方法： window . JSTracker = window . JSTracker || [ ] ; try { //your code } catch ( e ) { JSTracker . push ( e ) ; throw e ; //建议将错误再次抛出，避免测试无法发现异常 } 设计实...
继前面几篇文章后再来说说老生常谈的话题，怎么样提升前端性能。文中很多取材自网络及《High Performance Web Sites》，并根据自己工作中所接触到的知识整理而成。http://hovertree.com/menu/webfront/ 1. 减少HTTP请求 终端用户响应时间80%消耗在前端，而大部分时间都是在下载页面的资源：图片，脚本，flash等等，减少请求资源简化页面设计成为了性能提升的关键。尽量合并CSS、JS及图片文件，减少HTTP请求。2. 使用内容分发机制 使...
HTML5性能优化在看完这两章内容之后，我意犹未尽，于是乎从网上搜索关键字“Java Web高性能”，在IBM社区找到两篇不错的文章，而让人更意外的是我发现那两篇文章的内容跟《高性能HTML5》前两章高度相似，不知道是谁抄袭谁的，大家可以鉴别下真伪，下面附上地址。http://dl2.iteye.com/upload/attachment/0097/9373/b0e69540-e703-3530-81bb-c93de7b850a6.pdfhttp://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/http:/...
atitit.提升性能AppCache1.1. 起源1 2. 离线存储2 3. AppCache2 3.1. Appcache事件点如图2 3.2. Manifest文件4 3.3. 自动化工具4 3.3.1. CACHE:（必须）5 3.4. 页面都离线了，ajax 更新5 3.5. 页面的参数如何携带使用js解析6 3.6. 离线页面的更新 长尾问题6 3.7. 如何更新缓存7 3.8. 注意事项81.1. 起源 html5之前的网页，都是无连接，必须联网才能访问，这其实也是web的特色，这其实对于PC是时代问题并不大，但到了移动互联网时代...
最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。 本文主要想谈谈页面优化之滚动优化。 主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读。滚动优化的由来 滚动优化其实也不仅仅指滚动（scroll 事件），还包括了例如 resize 这类会频繁触发的事件。简单的看...
昨天晚上写了一篇关于浏览器的渲染过程的随笔，但只是通过一小段代码解释了一下，并没有通过浏览器测试，说服力不够，而且还有很多不完善的地方，今天在浏览器中测试了一下，并把测试的结果分享给大家，测试过程可能有点乱，希望大家理解。 测试浏览器：Chrome v24.0.1312.52 m，Firefox v18.0，Opera v12.12。 在WebKit内核中，网页在显示的时候会有一个解析器（Parser）去解析html文档，然后去生成渲染树（Render Tree），最终渲...
最近在学习前端的性能优化，有必要了解一下页面的渲染流程，以便对症下药，找出性能的瓶颈所在。以下是我看到的一些东西，分享给大家。 参考：Understanding the renderer 页面的渲染有以下特点： •单线程事件轮询 •定义明确、连续、操作有序（HTML5） •分词和构建DOM树 •请求资源并预加载 •构建渲染树并绘制页面 具体来说： 当我们从网络上得到HTML的相应字节时，DOM树就开始构建了。由浏览器更新UI的线...
你怎么能提高网页性能？大多数开发者会通过JavaScript和图片来优化，通过服务器配置，压缩文件和合并文件 - 甚至调整CSS（合并小图片）。 可怜的HTML老是被忽视，尽管它一直是网络的核心语言。HTML正在变得越来越大。排名前100的网站每个HTML页面大多在40K左右。亚马逊和雅虎使用上千个HTML页面。在youtube.com主页面，HTML元素高达3500个。减少的HTML复杂性和一个页面的元素数量并不会明显提高解析时间 - 但HTML是构建极速网页，和...
我有一个网站,该网站运行缓慢.服务器对每个请求的响应时间大约为2-300毫秒,但是在浏览器中准备好页面需要花费1.5-2秒. 通过尝试禁用javascript和CSS,我确定了大部分时间都是由浏览器处理. 使用Firebug,我看到DOMContentLoaded事件似乎在从服务器接收到数据后约0.5到1秒后触发,而“ load”事件在另一半秒后触发. 使用Firebug的事件探查器,我发现javascript执行大约需要250毫秒. 因此,我的问题是： >在剩余的时间内,当Javascript执行...
我想知道哪个对性能更好…我有一个“ Web应用程序”之类的东西.它有很多的JavaScript.单击按钮时,隐藏的div变为可见.这个新的div有5个按钮.哪个对性能更好： 1.)将按钮单击事件放在每个按钮的html标记中,例如onClick =“ alert(‘hey’);”2.)当div可见时,将事件附加到每个按钮,然后在隐藏包含按钮的div时删除事件？ 我问的原因是因为我想如果html标签中的事件持续存在,那么页面可能会陷入困境.我认为,当用户可以看到单击按钮的事件...
我们正在构建一个在浏览器中运行的CAD应用程序. > C.A.D代表Computer Aided Design.> Illustrator,CorelDraw,AutoCAD等是CAD应用程序的一些示例. 它基于Paper.js,一个非常简洁的Canvas库,允许您以编程方式操作矢量. 问题 我目前面临的主要问题是重绘循环性能. 重绘算法是“哑”(就聪明的黑客而言,以提高性能)因而效率低且速度慢 – 渲染场景图项依赖于逐渐减慢的重绘周期. 随着绘图点的累积,每个重绘周期变得越来越慢. 重绘方案非常...
我正在开发一个显示推文列表的Backbone demo app.当我用不同的数据替换所有“推文”时,我使用$.html()清除列表render: function() {$("#item-table").html('');this.collection.each(this.addItem); }我想知道是否有人可以给我一个提示,我可以替换这个$.html()以获得更好的性能,因为通过使用$.html()我会导致回流并且会给出错误的布局处理时间. 在我使用$.html()的代码中还有另外两个地方,如果有人可以给我建议如果那些其他地方甚至...
当我将此xhtml文件解析为xml时,在这样一个简单的文件上进行解析大约需要2分钟.我发现如果删除doctype声明,它会立即解析.导致此文件花费这么长时间解析的错误是什么？ Java示例DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); dbf.setNamespaceAware( true ); DocumentBuilder bob = dbf.newDocumentBuilder(); Document template = bob.parse( new InputSource( new FileReader( xmlFile ) ) );XHTML示例<?xm...
我有一个大型HTML文件(在ASP.NET中),它有几个较小的…标签,用于根据我工作的公司的用户控制内容.在我当前的设置中,我加载整个页面,但是许多面板都是隐藏的,直到用户点击link.button然后我有一些JQuery显示或隐藏它. 该网站在性能方面似乎很好,但随着其他部门添加内容,我担心HTML文件本身会变得越来越大.这是最好的做法吗？几乎所有隐藏面板都可供每个用户使用,只需点击一下即可点击链接即可显示. Beloe是我想到的一些想法,并希望得...
我正在开发一款游戏,并且使用drawImage将一个画布绘制到另一个画布上会遇到一些性能问题.根据Chrome的Profiler,我只花了60％的时间用于这一次drawImage调用,10％用于它上面的clearRect … 源画布现在约为30003000(我会说这是非常小的),目标画布是1024768. 我认为不是绘制所有的瓷砖;墙壁等等每个循环(这给我大约15fps),将它们全部绘制到离屏画布然后将其绘制到我的主画布上,然后在顶部绘制实体等可能会更快.这给了我~30fps但是……...