zeromike

转载：http://www.ghugo.com/chrome-timeline/ 概述这个工具真的很强大，Timeline工具栏提供了对于在装载你的Web应用的过程中，时间花费情况的概览，这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件，框架，和实时内存用量3个方面的数据来监测网页，通过这些数据，我们可以方便的找出页面中存在问题的地方。T...

转：http://www.ghugo.com/chrome-rendering-tools-1/ 页面的绘制时间（paint time）是每一个前端开发都需要关注的的重要指标，它决定了你的页面流畅程度。而如何去观察页面的绘制时间，找到性能瓶颈，可以借助Chrome的开发者工具。本文主要介绍Chrome渲染分析工具 Rendering。如上图，按F12调出开发者工具，然后按“E...

转：http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles 我们都希望创建高性能的Web应用程序。由于我们的应用程序变得越来越复杂，我们可能想要支持丰富的画面以及理想的60帧/秒，这能保证我们的应用程序响应灵敏且生动流畅。知道如何衡量和提高性能，是一个有用的技...

       webkit一般性渲染过程             在浏览器中，有一个最重要的模块，它主要作用是将页面转变成可视化的图形结果，这就是浏览器内核。通常，它也被称为渲染引擎。所谓的渲染，就是根据描述或者定义构建数学模型，通过模型生成图像的过程。浏览器的渲染引擎就是能够将HTML/CSS/JavaScript文本及其相应的资源文件转换成图像结果的模块。     根据渲染引...

     个人翻译能力有限,凑活着看吧,原链接      https://developers.google.com/web/tools/javascript/console/      这次先翻译了前两节(浏览控制台/诊断和打日志到控制台),后三节会陆续翻译      使用控制台            当一个页面在浏览器中的时候，控制台允许使用标准的JavaScript语句和控...

    比较相似数据对象     使用table()方法查看结构数据和比较数据对象    table()方法提供了一个简单的方式查看那些包含相似数据的对象和数组。当被调用的时候，该方法将提取一个对象的属性，并且将其建立一个Header。每一个属性就会按照索引在一行里输出。    基本用法：打印一个数组对象    在大多数form中，你需要的是一个数组，里面有大量相同属性的对象...

     异常和错误处理      Chrome DevTools提供了在javascript中抛出异常和调试错误信息帮助你来修正web页面.      页面异常和js错误实际上相当有用--你能获取它们背后的详细信息.当一个页面抛出异常或者一个脚本产生错误时,控制台提供了详细的,可依赖的信息帮你定位和纠正问题.      在控制台你可以追踪异常和追踪执行路径,明确地或者隐含地捕获它们(...

     Console API     Console API为web应用提供了写信息到控制台的方法,创建了js 的profiles,初始化一个debugging session     console.assert(expression,object)     假如执行expression是false,那么信息会以堆栈跟踪的方式显示的console中.在下面的例子,断言信息会...