通过Chrome浏览器检测和优化页面

1、访问(http://www.cnblogs.com/viaiu/)

2、点击F12

前两步就在扯淡

3、点击Audits标签,进入测试界面

4、点击按钮开始检测

5、如下图可以进行页面加载资源的详情查看,包括页面的图片是否有定义宽和高,所加载的css类有哪些是无用的,页面是否进行Gzip压缩等

一家之言,欢迎拍砖!

时间: 2024-10-31 05:56:03

通过Chrome浏览器检测和优化页面的相关文章

django xadmin中logout页面在chrome浏览器中点击关闭页面无效

问题现象 django xadmin中logout页面在chrome浏览器中点击关闭页面无效,无法关闭相应的页面 问题原因 高版本的chrome等浏览器不支持在window.colse()的写法 问题源码 在xadmin的templates的xadmin的views的logged_out.html中找到以下源码 <a href="#" onclick="javascript:window.opener=null;window.open('','_self');windo

chrome 浏览器插件开发(二)—— 通信 获取页面 编写chrome插件专用的库

在chrome插件的开发过程中,我遇到了一些问题,在网上找了不少文章,可能是浏览器升级的原因,有一些是有效的也有无效的.下面我简单的分享一下我遇到的坑,以及我把这些坑的解决方案整理而成的js库 —— crxTool . 一.坑和铲子 1.browser action或page action与content script通信 在网上找了不少方法,最后选择的方法如下: 发送消息: 1 var send= function(data, cb){ 2 chrome.tabs.query({active:

第二章:WebDriver 打开Firefox浏览器 和 Chrome 浏览器

1. 使用Firefox 和 Chrome 来打开浏览器代码如下: 2. 使用 Firefox 浏览器打开百度网页: 3. 使用 Chrome 浏览器中打开 百度页面

通过chrome浏览器调试手机页面(IOS和Android)

开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设备连接到PC,使用PC的开发者工具检测 一.针对android设备 1.在android设备上开始开发者模式 2.将设备连接到PC,在chrome浏览器地址栏输入:chrome://inspect/#devices 3.在手机上打开网页的时候,chrome就会检测到网页,可以直接调试 二.针对IOS

使用 Chrome Timeline 来优化页面性能

有时候,我们就是会不由自主地写出一些低效的代码,严重影响页面运行的效率.或者我们接手的项目中,前人写出来的代码千奇百怪,比如为了一个 Canvas 特效需要同时绘制 600 个三角形,又比如 Coding.net 的任务中心需要同时 watch 上万个变量的变化等等.那么,如果我们遇到了一个比较低效的页面,应该如何去优化它呢? 优化前的准备:知己知彼 在一切开始之前,我们先打开 F12 面板,熟悉一下我们接下来要用到的工具:Timeline: 嗯没错就是它.下面逐一介绍一下吧.区域 1 是一个缩

Chrome浏览器优化技巧

Chrome浏览器开发者工具Network窗口下,可以查看下载各组件所需的具体时间 根据上表进行简要分析-- Stalled(阻塞) 浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经超过上限,那么其余请求就会被阻塞,等待新的可用连接:此外脚本也会阻塞其他组件的下载: 优化措施: 1.将资源合理分布到多台主机上,可以提高并发数,但是增加并行下载数量也会增大开销,这取决于带宽和CPU速度,过多的并行下载会降低性能: 2.脚本置于页面底部: DNS Lookup(域名解析) 请求某域

爬虫动态渲染页面爬取之selenium驱动chrome浏览器的使用

Selenium是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样,可以用其进行网页动态渲染页面的爬取. 支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Firefox,Safari,Google Chrome,Opera等. 1. 示例 ### selenium的使用 ''' Selenium是一个用于Web应用程序测试的工具. Selenium测试直接运行在浏览器中,就像真正的用户在操作一样. 支持的浏览器包括IE(7

Chrome浏览器扩展开发系列之七:override页面

Chrome浏览器通常提供了一些默认页面,如标签管理器页面chrome://bookmarks.浏览历史记录页面chrome://history或新建Tab页面chrome://newtab等. Chrome浏览器扩展中的override页面,顾名思义就是重写的页面,可以替换上述默认页面.不过,一个Chrome浏览器扩展只能替换一种默认页面.Chrome浏览器扩展可替换的默认页面如下: 如标签管理器页面chrome://bookmarks 浏览历史记录页面chrome://history 新建T

chrome浏览器下页面顶部出现一条空白解决

最近遇到页面在chrome浏览器下,顶部会出现一条空白的问题.后来知道是bom头的问题. 1.什么是bom头? BOM签名的意思就是告诉编辑器当前文件采用何种编码,方便编辑器识别,但是BOM虽然在编辑器中不显示,但是会产生输出,就像多了一个空行. 一般的编码集中并不会出现bom头,unicode编码集中会出现. 类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM).它是一串隐藏的字符,用于让记事