목차
1. 减少HTTP请求
2. 使用内容发布网络(CDN)
3. 添加Expires头
4. 压缩组件
5. 将样式表放在顶部
6. 将脚本放在底部
7. 避免使用CSS表达式
8. 使用外部JavaScript和CSS
9. 减少DNS查找
10. 精简JavaScript
11. 避免重定向
12. 删除重复的脚本
13. 配置ETag
14. 使Ajax可缓存
总结:
웹 프론트엔드 HTML 튜토리얼 提高前端性能的黄金法则_html/css_WEB-ITnose

提高前端性能的黄金法则_html/css_WEB-ITnose

Jun 21, 2016 am 08:53 AM

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

  • 只有 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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

See all articles