页面的绘制时间(paint time)是每一个前端开发都需要关注的的重要指标,它决定了你的页面流畅程度。而如何去观察页面的绘制时间,找到性能瓶颈,可以借助Chrome的开发者工具。

本文主要介绍Chrome渲染分析工具 Rendering。

如上图,按F12调出开发者工具,然后按“ESC”调出Rendering界面。

以上5个选项的意思如下:

阅读全文——共1874字

概述

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

Timeline面板

打开chrome开发者工具,切换到Timeline选项卡,界面如下:

阅读全文——共1703字

在chrome浏览器或者firefox浏览器里,由于安全限制的原因,本地调试JS,如果不配服务器环境而直接打开页面,那所有的AJAX操作会抛出下面错误:

XMLHttpRequest cannot load file:///D:/file.html. Origin null is not allowed by Access-Control-Allow-Origin.

Origin null is not allowed by Access-Control-Allow-Origin. 的意思就是由于安全原因浏览器不允许跨域访问。

chrome、firfox、opera都出现了这种情况,因为有安全沙箱,它们认为加载本地其它html文件为跨域访问。但是使用IE8就不会出现这种错误,很多人不是很理解。

这里Windows help and support 做出了解释 IE本身也并不是允许跨域的因为这样很不安全,但是如果不跨域的话又带来很多不便,所以会让你手动的选择一下是否允许跨域。而chrome、firfox、opera则默认就是不允许。

阅读全文——共620字