前端性能优化(七)

PageSpeed 规则和建议

删除阻止呈现的 JavaScript 和 CSS

若要尽快完成首次呈现,您需要尽量减少甚至删除(如果有可能)网页所呈现关键资源的数量、尽量减少下载的关键字节数以及尽量缩短关键路径的长度。

优化 JavaScript 的使用

默认情况下,JavaScript 资源会阻止解析器,除非将其标为 async,或者使用特殊的 JavaScript 代码段进行添加。阻塞解析器的 JavaScript 强制浏览器等待 CSSOM,并暂停 DOM 的构建,继而大大延迟首次呈现的时间。

推荐使用异步 JavaScript 资源

异步资源会取消阻止文档解析器,使浏览器可以在执行标记之前不会在 CSSOM 上实施阻止。通常,如果可以将标记设置为异步,也就意味着该标记不是首次呈现所必需的 - 考虑在首次呈现之后加载异步标记。

延迟解析 JavaScript

任何非必需的标记(即对构建首次呈现的内容无关紧要的标记)都应予以延迟,从而尽量降低浏览器呈现网页时所需的工作量。

避免运行时间长的 JavaScript

运行时间长的 JavaScript 会阻止浏览器构建 DOM、CSSOM 以及呈现网页。因此,任何对首次呈现无关紧要的初始化逻辑和功能都应该延迟执行。如果需要运行较长的初始化序列,可以考虑分割成几个阶段,使浏览器可以间隔处理其他事件。

优化 CSS 的使用

CSS 是构建呈现树的必备元素,但在首次构建网页时,JavaScript 常常会在 CSS 上实施阻止。应该确保将任何非必需的 CSS 标记为非关键资源(例如 print 或者其他媒体查询),并应确保尽可能减少关键 CSS 数,尽可能缩短传输时间。

将 CSS 放入文档的 head 标签内

应该尽早在 HTML 文档中指定所有 CSS 资源,使浏览器可以尽早发现<link>标签,并尽早发出 CSS 请求。

避免使用 CSS import

CSS import (@import) 指令使一个样式表可以从另一个样式表文件中导入规则。但是,应避免使用这些指令,因为这会在关键路径中增加往返次数:只有在收到并解析完带有 @import 规则的 CSS 样式表之后,才会发现导入的 CSS 资源。

内联阻止呈现的 CSS

为了获得最佳效果,您也许会考虑将关键 CSS 直接内联到 HTML 文档中。这可以在关键路径中减少额外的往返次数。如果方法得当,在只有 HTML 是阻止资源时,就能实现’一次往返’的关键路径长度。

时间: 2024-10-18 07:56:08

前端性能优化(七)的相关文章

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决

基于GruntJS的前端性能优化

本文主要如何使用GruntJS来作简单的前端性能优化的自动化处理,我写了一个完整的例子放在Github上,可以参考一下.关于Yahoo的前端优化规则请参考:Best Practices for Speeding Up Your Web Site 前端性能主要有图片的压缩,JS和CSS的合并.压缩,对所有静态文件的文件根据其内容加上hash,然后把CSS.HTML等文件中对所有的静态文件名替换成加上hash的新文件名.对所有的静态内容的路径上加上CDN的URL,最后将所有的静态文件上传到七牛CDN

关于Yahoo十四条军规与前端性能优化

关于Yahoo十四条军规与前端性能优化 热度 4已有 223 次阅读2014-8-3 15:01 |个人分类:前端相关|系统分类:前端优化| 前端优化, yahoo, 性能优化 启用Gzip压缩.Gzip的思想就是把文件先在服务器端进行压缩,然后再传输.这样可以显著减少文件传输的大小.传输完毕后浏览器会 重新对压缩过的内容进行解压缩,并执行.目前的浏览器都能“良好”地支持 gzip.不仅浏览器可以识别,而且各大“爬虫”也同样可以识别,各位seoer可以放下心了.而且gzip的压缩比例非常大,一般

Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

【转】Web前端性能优化——如何提高页面加载速度

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

WebPack实例与前端性能优化

[前端构建]WebPack实例与前端性能优化 计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了.近年来Web前端开发领域朝着规范开发的方向演进.体现在以下两点: MVC研发构架.多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...) 构建工具层出不穷.多多益处(提

新产品为了效果,做的比较炫,用了很多的图片和JS,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。

第一篇:HTTP服务器 因tomcat处理静态资源的速度比较慢,所以首先想到的就是把所有静态资源(JS,CSS,image,swf) 提到单独的服务器,用更加快速的HTTP服务器,这里选择了nginx了,nginx相比apache,更加轻量级, 配置更加简单,而且nginx不仅仅是高性能的HTTP服务器,还是高性能的反向代理服务器. 目前很多大型网站都使用了nginx,新浪.网易.QQ等都使用了nginx,说明nginx的稳定性和性能还是非常不错的. 1. nginx 安装(linux) htt

前端性能优化归纳总结

关于前端性能优化的总结,随处都可以看到这方面的文章,而优化方法,也无外乎那些"固定"方面,当然,有些方面已经过时,所以,在这里,我自己也总结一遍吧,加深理解,也希望是一种不同的总结形式. -----------------------正文总这里开始------------------------------------ 一.什么是前端性能优化(what)? 从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度.

前端性能优化

前端性能优化的方法? content方面 1,减少HTTP请求:合并文件.CSS精灵.inline Image 2,减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件.方法:DNS缓存.将资源分布到恰当数量的主机名,平衡并行下载和DNS查询 3,避免重定向:多余的中间访问 4,使Ajax可缓存 5,非必须组件延迟加载 6,未来所需组件预加载 7,减少DOM元素数量 8,将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量 9,减少iframe数