搜索
首页web前端html教程提高前端性能的黄金法则_html/css_WEB-ITnose

前端近几年变化很大,各种工具,库,框架并发。虽然如此,但是网站前端性能优化的思路基本没变。为什么前端性能如此重要?数据显示:

  • 只有 10%~20% 的最终用户响应时间花在了下载 HTML 文档上。其余的 80%~90% 时间花在了下载页面中的所有组件中;

  • 另外一点是,优化后台需要花费比较大的成本,优化前端只需要适当地遵循一些法则会有较大的提升,相对低成本高收益。

最近读了 Steve Souders 的《高性能网站建设指南》,觉得很不错在此做一下总结。Steve 是 Firebug 和 Yslow 的作者,相信大家都使用过。虽然书中的很多手段都已经过时了,但是思路基本没变,取其精华就好。

本书提出了一套性能黄金法则,优先级越高排名越前,一共14则:

1. 减少HTTP请求2. 使用内容发布网络(CDN)3. 添加Expires头4. 压缩组件5. 将样式表放在顶部6. 将脚本放在底部7. 避免使用CSS表达式8. 使用外部JavaScript和CSS9. 减少DNS查找10. 精简JavaScript11. 避免重定向12. 删除重复的脚本13. 配置ETag14. 使Ajax可缓存

以下分别简单介绍每条法则的缘由:

1. 减少HTTP请求

一般来说,使用外链的脚本和样式表更加有利。分别把外链脚本和样式表进行合并会减少HTTP请求,以节省客户端和服务器之间的通讯次数来加快页面打开速度。但是出于开发的便利,开发的时候一般会采取模块化的方式;这时候可以在部署前采用一些前端构建工具把这些模块文件合并起来再发布。

2. 使用内容发布网络(CDN)

CDN是一组分布在多个不同地理位置的Web服务器,由于距离用户 物理距离比较短,所以能够更加有利于用户获取到静态资源;这种服务通常需要购买,也有一些免费、通用的CDN可使用,国内的可以使用 BootCDN。

3. 添加Expires头

Expires头是用来告诉浏览器该相应的有效期,可以理解为该资源的“保质期”,在期限内可以使用该资源的缓存不需要重新请求。由于浏览器与服务器存在时钟同步问题,HTTP1.1还添加胡了Cache-Control和max-age来弥补Expires头的不足。通常用于脚本,样式表、图片等静态资源。

使用这种策略可能会遇到一个问题是,开发者可能想要在资源过期前这段时间更新它们。这时候,由于浏览器的缓存还没失效,这就需要通过更改文件名来令静态资源 强制失效。有很多种方式给静态资源打上版本号,可以一本正经地打上数字版本号,根据内容生成哈希码也行,甚至有人用π来给自己的资源打版本号(每次。

4. 压缩组件

本书介绍的是gzip的方式压缩静态资源,实际上,这种方式会消耗额外的CPU资源。这种手段通常能够使文件大小减少70%。

5. 将样式表放在顶部

如果把样式表放在底部时,浏览器会延迟显示任何可视化组件。另外,使用 CSS 的 @import等同于把想要加载的样式放在底部,所以不建议使用。对于浏览器的渲染机制,本书并没有过多提及,只是对现象做出了描述以及提供了解决办法。

如果样式表仍然在加载,构建呈现树就是一种浪费,因为在所有样式表加载并解析完毕之前无需绘制任何东西。否则,在其准备好之前显示内容会遇到 FOUC(无样式内容的闪烁,Flash of Unstyled Content)问题。

就是说,如果不把样式表放在

中,当遇到样式时,浏览器就会阻止页面呈现,等待样式表下载完毕。

如果把样式表放在底部,在 IE 中还会产生白屏现象。总之,把样式表放进

就能避免这些问题。

6. 将脚本放在底部

脚本对页面的影响是:

  1. 阻塞对齐后面内容的呈现

  2. 阻塞后面组件的下载

浏览器会在下载脚本的时候阻塞并行下载,因为需要确保脚本能够顺序执行。

关于这点,这里有一篇讲解的比较深入的文章:

JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

但是,实际开发中有时候很难完全遵守这条准则,那只能把能够放在最后的都放在最后。

7. 避免使用CSS表达式

使用CSS 的expression()通常会造成多次运算。实际上,需要用到CSS 表达式的地方,通常能够找到其他替代方案,所以避免使用CSS表达式。

8. 使用外部JavaScript和CSS

使用外部静态文件的优点有:

  1. 可以被浏览器缓存起来

  2. 组件可以重用

  3. 可模块化

  4. 能够被构建(合并压缩打版本)

缺点:

  1. 需要额外创建HTTP 请求

9. 减少DNS查找

简单来说,DNS 查找就是输入域名对服务器IP 地址的查找过程。DNS 缓存又分为浏览器DNS 缓存、操作系统DNS 缓存。当你输入 www.google.com的时候,浏览器会先去自身的 DNS 缓存里面查找有没有 google 服务器的 IP 地址;如果找不到则继续到操作系统的 DNS 缓存查找;如果浏览器在这两个容器都没有找到 google 的IP 地址记录,则会向广域域名体系查找。

10. 精简JavaScript

减少JavaScript 文件大小的有几种手段,通常被广泛使用的是 精简。精简就是去除JavaScript 代码中的空格、注释等多余的字符,这种方式基本上没有什么缺点。

另外一种方式是 混淆。混淆是在精简的基础上,把函数、变量名都用较短小的字符来替换,从而达到减少文件大小的效果。但是混淆会产生不少麻烦,很有可能会引入错误,虽然有利于防止逆向工程,当同时也增加了自己在线上环境调试的难度。

现在普遍的做法是发布前利用 Gulp、Grunt 等自动化构建工具对资源进行压缩。

11. 避免重定向

以下是一个重定向的过程:

浏览器发送请求  --  服务器返回302  --  服务器返回200  -- 浏览器开始呈现

就是说,在发送请求到返回200这段时间,页面完全是空白的;对比普通的请求多了一段空白时间。

12. 删除重复的脚本

重复的脚本对增加HTTP 请求次数和脚本执行的时间。

13. 配置ETag

这个规则应该过时了,现在比较好的实践是直接根据内容给静态资源打上哈希版本号。

14. 使Ajax可缓存

适用于以上的优化,大部分同样适用于Ajax请求。

总结:

总的来说, 前端优化的总体思路是提高浏览器与服务器沟通的效率。

前端性能优化一味奉行“最佳实践”有时候反而过而不及,所以针对项目的实际情况来优化才是明智的选择。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML中的布尔属性是什么?举一些例子。HTML中的布尔属性是什么?举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性,不需要值即可激活。1.布尔属性通过存在与否控制元素行为,如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性,高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值,正确写法应简洁。5.最佳实践是保持代码简洁,合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码?如何验证您的HTML代码?Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器