热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Chrome对网页性能的检测--2015-05-05总结

Chrome浏览器非常强大,使用Chrome浏览器对页面性能进行检测,根据测试的结果进行优化。当然这个结果只是参考,在实际的项目中肯定有特殊情况存在,并不能为了满足某项测试结果而忽略特定情况的存在。1

Chrome浏览器非常强大,使用Chrome浏览器对页面性能进行检测,根据测试的结果进行优化。当然这个结果只是参考,在实际的项目中肯定有特殊情况存在,并不能为了满足某项测试结果而忽略特定情况的存在。

1、Chrome检测工具

F12之后点击Audits然后出现了如下界面,选中重载页面开始检测按钮,然后点击Run按钮,之后就是等待结果。

2、检测结果

这个检测结果分为2类,一个是网络,一个是网页性能;
检测结果不仅列出了问题,还定位问题在哪里,可以很快入手解决对应的问题。 问题一:总共有29个可以压缩的JS文件
  1. 合并JS文件:Combine external Javascript
  2. There are multiple resources served from same domain. Consider combining them into as few files as possible.一个域名有多个文件,可以考虑将他们压缩为尽可能少的文件。

  3. 启用gzip压缩:Enable gzip compression
  4. Compressing the following resources with gzip could reduce their transfer size by about two thirds (~715 B).启用gzip压缩降低传输大小。

  5. 浏览器缓存:Leverage browser caching 
  6. The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers。资源没有指定过期时间,浏览器可能不会缓存。

  7. 代理缓存:Leverage proxy caching (38) ?
  8. Resources with a "?" in the URL are not cached by most proxy caching servers:

  9. Minimize COOKIE size
  10. The average COOKIE size for all requests on this page is 36 B

  11. Serve static content from a COOKIEless domain (35)
  12. 12.8 KB of COOKIEs were sent with the following static resources. Serve these static resources from a domain that does not set COOKIEs:

  13. Specify image dimensions (10)
  14. A width and height should be specified for all images in order to speed up page display. The following image(s) are missing a width and/or height:

网页性能部分
  1. 1、优化样式和脚本的顺序:Optimize the order of styles and scripts (4)
    1. The following external CSS files were included after an external Javascript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external Javascript.

  1. 2、把CSS放到head中:Put CSS in the document head (3)
  2. CSS in the document body adversely impacts rendering performance.
  3. 3、删除没用的CSS:Remove unused CSS rules (44)
    1. 44 rules (19%) of CSS not used by the current page.
  4、Use normal CSS property names instead of vendor-prefixed ones (3)






推荐阅读
  • 深入解析WebP图片格式及其应用
    随着互联网技术的发展,无论是PC端还是移动端,图片数据流量占据了很大比重。尤其在高分辨率屏幕普及的背景下,如何在保证图片质量的同时减少文件大小,成为了亟待解决的问题。本文将详细介绍Google推出的WebP图片格式,探讨其在实际项目中的应用及优化策略。 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • 阿里云 Aliplayer高级功能介绍(八):安全播放
    如何保障视频内容的安全,不被盗链、非法下载和传播,阿里云视频点播已经有一套完善的机 ... [详细]
  • ASP.NET 进度条实现详解
    本文介绍了如何在ASP.NET中使用HTML和JavaScript创建一个动态更新的进度条,并通过Default.aspx页面进行展示。 ... [详细]
  • 在使用 Nginx 作为服务器时,发现 Chrome 能正确从缓存中读取 CSS 和 JS 文件,而 Firefox 却无法有效利用缓存,导致加载速度显著变慢。 ... [详细]
  • OBS Studio自动化实践:利用脚本批量生成录制场景
    本文探讨了如何利用OBS Studio进行高效录屏,并通过脚本实现场景的自动生成。适合对自动化办公感兴趣的读者。 ... [详细]
  • IO流——字符流 BufferedReader / BufferedWriter 进行文件读写
    目录节点流、处理流读文件:BufferedReader的使用写文件:BufferedWriter的使用节点流处理流节点流和处理流的区别和联系字符流Buf ... [详细]
  • 开发笔记:前端之前端初识
    开发笔记:前端之前端初识 ... [详细]
  • 本文详细介绍如何安装和配置DedeCMS的移动端站点,包括新版本安装、老版本升级、模板适配以及必要的代码修改,以确保移动站点的正常运行。 ... [详细]
  • JavaScript 跨域解决方案详解
    本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]
  • 本文探讨了如何利用RxJS库在AngularJS应用中实现对用户单击和拖动操作的精确区分,特别是在调整区域大小的场景下。 ... [详细]
  • 深入探讨前端代码优化策略
    本文深入讨论了前端开发中代码优化的关键技术,包括JavaScript、HTML和CSS的优化方法,旨在提升网页加载速度和用户体验。 ... [详细]
  • Bootstrap 的轮播图(Carousel)组件提供了一种简单而灵活的方法,用于在网站上实现响应式幻灯片效果。此组件不仅支持图片展示,还兼容嵌入式框架、视频等多媒体内容。 ... [详细]
  • 在 Ubuntu 22.04 LTS 上部署 Jira 敏捷项目管理工具
    Jira 敏捷项目管理工具专为软件开发团队设计,旨在以高效、有序的方式管理项目、问题和任务。该工具提供了灵活且可定制的工作流程,能够根据项目需求进行调整。本文将详细介绍如何在 Ubuntu 22.04 LTS 上安装和配置 Jira。 ... [详细]
  • 在Java开发中,保护代码安全是一个重要的课题。由于Java字节码容易被反编译,因此使用代码混淆工具如ProGuard变得尤为重要。本文将详细介绍如何使用ProGuard进行代码混淆,以及其基本原理和常见问题。 ... [详细]
author-avatar
洋索菲命_563
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有