首页 > 优化 > 关键词 > 网站优化最新资讯 > 正文

Web程序优化的最佳实践:JavaScript和CSS篇

2015-07-20 17:21 · 稿源:Hugo Web前端开发
文章目录

Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了 一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。

Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7 大类 34 条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。

本文为CSS和Javascript部分:

除此之外,JavaScript 和 CSS 也是我们页面中经常用到的内容,对它们的优化也提高网 站性能的重要方面:

CSS:

1. 把样式表置于顶部

2. 避免使用CSS表达式(Expression)

3. 使用外部JavaScript和CSS

4. 削减JavaScript和CSS

5. 用<link>代替@import

6. 避免使用滤镜

JavaScript

7. 把脚本置于页面底部

8. 使用外部JavaScript和CSS

削减JavaScript和CSS 和 剔除重复脚本(参考3、4)

9. 减少DOM访问

10. 开发智能事件处理程序

1、把样式表置于顶部

在研究Yahoo!的性能表现时,我们发现把样式表放到文档的<head />内部似乎会加快页 面的下载速度。这是因为把样式表放到<head />内会使页面有步骤的加载显示。

注重性能的前端服务器往往希望页面有秩序地加载。同时,我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。

向用户返回可视化的反馈,比如进程指针,已经有了较好的研究并形成了正式文档。在我们的研究中HTML页面就是进程指针。当浏览器有序地加载文件头、导航栏、顶部的logo等对于等待页面加载的用户来说都可以作为可视化的反馈。这从整体上改善了用户体验。

把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中 止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不 得不面对一个空白页面。

HTML规范清楚指出样式表要放包含在页面的<head />区域内:"和<a />不同,<link /> 只能出现在文档的<head />区域内,尽管它可以多次使用它"。无论是引起白屏还是出 现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文档<head />内加载你的样式表。

2、避免使用CSS表达式(Expression)

CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版 本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色:

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00″ );

如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的 计算结果来设置。expression方法在其它浏览器中不起作用,因此在跨浏览器的设计中

单独针对Internet Explorer设置时会比较有用。 表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到 10000 次以上的计算量。

一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结 果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性必须在页面周 期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。

3、使用外部JavaScript和CSS

很多性能规则都是关于如何处理外部文件的。但是,在你采取这些措施前你可能会问到 一个更基本的问题:JavaScript和CSS是应该放在外部文件中呢还是把它们放在页面本 身之内呢?

在实际应用中使用外部文件可以提高页面速度,因为JavaScript和CSS文件都能在浏览 器中产生缓存。内置在HTML文档中的JavaScript和CSS则会在每次请求中随HTML文档重 新下载。这虽然减少了HTTP请求的次数,却增加了HTML文档的大小。从另一方面来说, 如果外部文件中的JavaScript和CSS被浏览器缓存,在没有增加HTTP请求次数的同时可 以减少HTML文档的大小。

关键问题是,外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然 有一定的难度,但是仍然有一些指标可以一测量它。如果一个会话中用户会浏览你网站 中的多个页面,并且这些页面中会重复使用相同的脚本和样式表,缓存外部文件就会带 来更大的益处。

许多网站没有功能建立这些指标。对于这些网站来说,最好的坚决方法就是把 JavaScript和CSS作为外部文件引用。比较适合使用内置代码的例外就是网站的主页, 如Yahoo!主页和My Yahoo!。主页在一次会话中拥有较少(可能只有一次)的浏览量,你可以发现内置JavaScript和CSS对于终端用户来说会加快响应时间。

对于拥有较大浏览量的首页来说,有一种技术可以平衡内置代码带来的HTTP请求减少与 通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置JavaScript和CSS, 但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓 存到浏览器了。

4、削减JavaScript和CSS

精简是指从去除代码不必要的字符减少文件大小从而节省下载时间。消减代码时,所有 的注释、不需要的空白字符(空格、换行、tab缩进)等都要去掉。在JavaScript中, 由于需要下载的文件体积变小了从而节省了响应时间。精简JavaScript中目前用到的最 广泛的两个工具是JSMin和YUI Compressor。YUI Compressor还可用于精简CSS。

混淆是另外一种可用于源代码优化的方法。这种方法要比精简复杂一些并且在混淆的过 程更易产生问题。在对美国前 10 大网站的调查中发现,精简也可以缩小原来代码体积 的 21%,而混淆可以达到 25%。尽管混淆法可以更好地缩减代码,但是对于JavaScript 来说精简的风险更小。

除消减外部的脚本和样式表文件外,<script>和<style>代码块也可以并且应该进行消 减。即使你用Gzip压缩过脚本和样式表,精简这些文件仍然可以节省 5%以上的空间。由于JavaScript和CSS的功能和体积的增加,消减代码将会获得益处。

5、用<link>代替@import

前面的最佳实现中提到 CSS 应该放置在顶端以利于有序加载呈现。

在 IE 中,页面底部@import 和使用<link>作用是一样的,因此最好不要使用它。

6、避免使用滤镜

IE 独有属性 AlphaImageLoader 用于修正 7.0 以下版本中显示 PNG 图片的半透明效果。 这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个 元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。 完全避免使用 AlphaImageLoader 的最好方法就是使用 PNG8 格式来代替,这种格式能在 IE 中很好地工作。如果你确实需要使用 AlphaImageLoader,请使用下划线_filter 又使之对 IE7 以上版本的用户无效。

7、把脚本置于页面底部

脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议,浏览器每个主机 名的并行下载内容不超过两个。如果你的图片放在多个主机名上,你可以在每个并行下 载中同时下载 2 个以上的文件。但是当下载脚本时,浏览器就不会同时下载其它文件了, 即便是主机名不相同。

在某些情况下把脚本移到页面底部可能不太容易。比如说,如果脚本中使用了 document.write来插入页面内容,它就不能被往下移动了。这里可能还会有作用域的问 题。很多情况下,都会遇到这方面的问题。 一个经常用到的替代方法就是使用延迟脚本。DEFER属性表明脚本中没有包含 document.write,它告诉浏览器继续显示。不幸的是,Firefox并不支持DEFER属性。在 Internet Explorer中,脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚

本可以被延迟,那么它就可以移到页面的底部。这会让你的页面加载的快一点。

8、剔除重复脚本

在同一个页面中重复引用 JavaScript 文件会影响页面的性能。你可能会认为这种情况

并不多见。对于美国前 10 大网站的调查显示其中有两家存在重复引用脚本的情况。有 两种主要因素导致一个脚本被重复引用的奇怪现象发生:团队规模和脚本数量。如果真 的存在这种情况,重复脚本会引起不必要的 HTTP 请求和无用的 JavaScript 运算,这降 低了网站性能。

在 Internet Explorer 中会产生不必要的 HTTP 请求,而在 Firefox 却不会。在 Internet Explorer 中,如果一个脚本被引用两次而且它又不可缓存,它就会在页面加载过程中产 生两次 HTTP 请求。即时脚本可以缓存,当用户重载页面时也会产生额外的 HTTP 请求。

除增加额外的 HTTP 请求外,多次运算脚本也会浪费时间。在 Internet Explorer 和 Firefox 中不管脚本是否可缓存,它们都存在重复运算 JavaScript 的问题。 一个避免偶尔发生的两次引用同一脚本的方法是在模板中使用脚本管理模块引用脚本。 在 HTML 页面中使用<script />标签引用脚本的最常见方法就是:

<script type="text/javascript" src="menu_1.0.17.js"></script>

在 PHP 中可以通过创建名为 insertScript 的方法来替代:

<?php insertScript("menu.js") ?>

为了防止多次重复引用脚本,这个方法中还应该使用其它机制来处理脚本,如检查所属 目录和为脚本文件名中增加版本号以用于 Expire 文件头等。

9、减少 DOM 访问

使用 JavaScript 访问 DOM 元素比较慢,因此为了获得更多的应该页面,应该做到:

• 缓存已经访问过的有关元素

• 线下更新完节点之后再将它们添加到文档树中

• 避免使用 JavaScript 来修改页面布局

有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章"高性能Ajax应该程序"。

10、开发智能事件处理程序

有时候我们会感觉到页面反应迟钝,这是因为DOM树元素中附加了过多的事件句柄并且 些事件句病被频繁地触发。这就是为什么说使用event delegation(事件代理)是一种 好方法了。如果你在一个div中有 10 个按钮,你只需要在div上附加一次事件句柄就可 以了,而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是 哪个事件发出的。

你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中 你要访问的元素出现。你也不用等待所有图像都加载完毕。 你可能会希望用DOMContentLoaded事件来代替onload,但是在所有浏览器都支持它之前 你可使用YUI 事件应用程序中的onAvailable方法。

有关此方面的更多信息请查看Julien Lecomte在YUI专题中的文章"高性能Ajax应该程序"。

  • 相关推荐
  • 大家在看
  • 百度SEO优化,外链自动优化与推广的工具,你真的需要吗?

    当我们做外链建设的时候,经常想寻找一个快速自动发布SEO外链的工具,并且希望在SEO工作中可以利用更多的工具,来加快SEO优化的工作进度,这些想法是可以理解的,但我们真的需要这样做吗?

  • 携程回应比价搜索网站 Skyscanner 裁员:将进行组织结构优化

    针对裁员问题,携程方面回应称,由于全球疫情的冲击,天巡(Skyscanner)计划采取一系列措施加以应对,其中包括组织结构的优化。在此过程中,天巡还将产生约 60 个新工作岗位,并优先考虑现有的员工。此前,网传携程旗下机票比价搜索网站 Skyscanner 宣布至多20%,将近 300 人的裁员。

  • 帮别人做seo推广优化如何赚钱

    很多人都知道网站搭建完后,需要做seo推广优化,不过大家一定没想到的是,做seo推广优化也可以赚钱。之前的文章都有说到,现在做seo推广优化越来越困难,搜索引擎的规则越来越严格,大家付出了很多的时间去做seo推广优化,网站的效果还是不明显。确实如此,但是如果用对了seo推广优化工具,不但让您的网站推广有效,还能够借助这个工具帮您赚到钱。现在就看看帮别人做seo推广优化如何赚钱吧。线上业务需求量大,潜在客户多根据数据显示,我国在

  • 以兴趣为第一维度,大鹏教育不断优化教学服务内容

    大鹏教育是一家定位于互联网+教育,致力于打造更高效、更优质、更具性价比、更有体验感的线上教育平台。根据教育市场现状,以技能增长、兴趣驱动为出发点,大鹏教育相继推出了了设计、美术、国画、书法等学院,满足了不同学员的多元化学习需求。大鹏教育不忘教育惠普的初心不忘教育普惠的初心,大鹏教育致力于打造多品类、高质量的免费课程,并提供丰富的免费答疑、免费作业点评等服务,满足了学员的兴趣爱好与技能提升需求。据悉?

  • Salesforce体验不佳?LinkWAN助力企业优化访问

    近日,全球最大的CRM服务商、SaaS云服务的代表Salesforce市值一度达到了 1791 亿美元。首次超过了曾经的全球第二大软件公司甲骨文(Oracle)。这是一场SaaS之王和传统软件的旧霸主的交锋,意义不言自明。Salesforce是客户关系管理(CRM)软件的全球领导者,于 2000 年首推CRM革新理念,并将其服务扩展到新的领域和行业,引入了新功能和平台功能,其创新式云平台已成为世界首屈一指的CRM解决方案。Salesforce在中国也逐渐拥有了超过 10

  • 腾讯回应微信读书侵害用户信息:相关功能已优化

    7月30日消息,日前,北京互联网法院作出一审宣判,认定抖音、微信读书两款App均有侵害用户个人信息的情形。对此,腾讯已作出回应:我们尊重法院判决。保障用户信息安全是微信读书一直坚守的首

  • 知乎与PingCAP达成战略合作 推动全场景体验优化

    近日,知乎与PingCAP达成战略合作,将从产品与技术、社区与内容以及人才培养等方面展开长期深入的战略合作,双方将充分发挥和共享各自优势,共同推动知乎全场景体验优化以及 TiDB 社区用户生态的发展。知乎从问答起步,目前已经成长为一个综合性知识内容平台,聚集了中文互联网科技、商业、影视、时尚、文化等领域最具创造力的人群。截至 2019 年 1 月,知乎已拥有超过 2.2 亿用户,共产出 1.3 亿个回答。同时还沉淀了数量众多的优

  • DNF刨冰达人活动优化补丁 DNF刨冰达人答案补丁下载

    DNF刨冰达人活动优在最近开启了,很多玩家还不清楚怎么玩这类活动,不过不用担心,有玩家搞了刨冰达人的活动补丁,可以方便大家玩刨冰达人,下面就来为大家详细的介绍一下。

  • 持续提升特色内容吸引力,趣头条不断优化内容生态

    根据QuestMobile报告显示,我国新兴市场用户规模超过 6 亿。 并且,无论是移动互联网人均使用时长还是用户增长速度,下沉用户均取得领先。 下沉用户不仅在数量上超越了非下沉用户,而且占比也超过了50%! 相比于非下沉用户,下沉用户与手机的联系更为紧密,有更多的闲暇时间去刷手机。然而新兴市场的现状是:高质量产品极其欠缺。同时,商业设施不发达,商品种类不够丰富、服务消费相对滞后。种种反映:新兴市场居民的消费需求,还远

  • 腾讯回应微信读书侵害用户信息:相关功能已进行迭代优化

    今日,针对“微信读书被判侵害用户个人信息”一事,腾讯方面回应称,尊重法院判决。保障用户信息安全是微信读书一直坚守的首要原则。 2019 年 5 月底,收到该案诉讼后第一时间进行了核实,确认相关功能已在之前进行了迭代优化,优化后的版本更加尊重用户的选择权并对相关社交功能进行了强提示。

  • 内容赛道太挤了?趣头条强化AI技术优化内容生态

    时势造英雄,下沉巨头的崛起无法脱离时代背景。三个条件的达成,让互联网新巨头的诞生成为可能。 1:千元智能手机性能的全面提升 2:全国生活区4G网络覆盖的基本完成 3:4G网络速度提升而套餐资费连续下降 此三项的实现,代表着全国范围的互联网基础设施建设的基本完成。据今年三月的数据,我国网民数量已经达到9. 04 亿,其中手机接入的比例达到99.3%。所谓要想富先修路,设备与网络的普及,释放了五环外用户对于互联网产品的需求,

  • 请回答,搜索引擎!在自我提问中找到的SEM优化技巧

    SEMer一直在做优化,加词,改创意,调整排名,其实更需要停下来想一想。包括做信息流推广也是一样,抓取精准用户群体,哪些才是我们精准用户呢?我们很少去探究搜索词后面,网民在想啥?他为啥这样去搜索?

  • Exynos与骁龙版Galaxy Note 20差距大?三星:Exynos版优化更好

    7月24日消息,据WinFuture报道,三星Galaxy Note 20提供Exynos 990和骁龙865 Plus两种选择,其中欧洲、中东等市场将发售Exynos 990版本,美国、国行等将发售骁龙865 Plus版本。外媒指出,Exyn

  • 美菜网,打造合作伙伴的经营投资优化大数据平台

    美菜网不仅是一个互联网生鲜电商平台,同时还是一个大数据服务平台。 美菜网以全价值链多元数据为基础,通过对数据的抽取、加工、分析,一键就能了解商品价格走向、各品类商品阶段性数据分析,解决信息不对称问题,帮助商户降低成本,提升效率。01智能推荐,让客户更精准的匹配需求如果您是客户,美菜网根据客户经营业态、所需商品不同,通过了解客户的日常采购习惯,及对您下单数据的分析,能够根据算法模型实时为您提供个性化的?

  • Chrome/Edge优化内存占用 结果导致Intel CPU变慢发热:已被叫停

    今年6月,微软工程师兴奋地表示,经过代码优化,在Win10五月更新正式版系统中,Edge浏览器的内存占用最高下降了27%。谷歌随后表示,会审查微软团队面向Chromium的贡献提交,尽快将相关成果

  • 全方位优化手游体验, 用 ColorOS 7.2 玩游戏更稳更快

    如今的移动互联网的功能日益强大,可以帮助大家完成很多事情,如观看 VR 全景视频、与朋友们视频聊天、组队开黑等等。而在组队开黑上,肯定有人惊讶于为什么有的小伙伴游戏加载那么快,还能在游戏中变声、无缝回微信消息。没错,现在的厂商们根据用户需求,开发出越来越多样化的游戏体验,今天就以 ColorOS 7.2 为例,跟大家聊聊手游体验这回事。功能日益贴心在 ColorOS 7.2 中,游戏可以收纳在「游戏空间」APP 中,方便用户查找与

  • 穿山甲新解工具行业增长痛点:提升变现效率,优化运营技巧

    伴随移动应用迈入用户存量的时代后,工具类App的增长与变现一直成为行业关注的核心议题。7 月 9 日,巨量引擎旗下视频化广告平台穿山甲举办了主题为「释放 V力」的穿山甲工具行业私享会并首发《穿山甲 2020 移动工具行业流量变现白皮书》,基于工具行业的现状、发展趋势和变现痛点等进行分析,从「场景案例剖析」、「运营优化技巧」、「用户拉新增长」等方面,为工具类应用提供了新阶段增长的商业解决方案。聚焦 5 大场景,穿山甲?

  • 榕树贷款:持续优化平台服务功能 提升金融服务质效

    随着金融经济的发展,金融服务平台的重要性日益得到重视。作为服务、支持中小微企业发展的金融创新举措,各地不断推出省级金融服务平台,助力实现资金供需双方的智能匹配,提升融资效率,解决中小微企业融资难、融资贵难题,助力企业复工复产。 以安徽为例,安徽省持续优化省中小微综合金融服务平台功能,强化政务信息资源整合,截至目前,平台共完成包括电力、税务、工商等 20 家数据源单位接入, 30 家金融及类金融机构入驻,发

  • Chrome优化软件功耗:打开37个标签后续航还能增加两小时

    虽然贵为全球第一大桌面浏览器,但Chrome的顽疾也不少,比如CPU、内存占用较高,运行时也比较耗电等。谷歌在最新的技术文档中表示,优化了多标签情况下的功耗情况。具体来说,Chrome 86中添

  • 索尼公布首批PS5特别优化电视:清一色120Hz、CP必须官方的好

    日前,索尼公布首批“Ready for PlayStation5”的BRAVIA电视阵容,索尼中国调皮地表示“CP,必须官方的好”。具体来说,阵容涵盖全阵列式背光4K HDR电视X9000H/X9088H/X9

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签