提升网页性能实践手册

5星 · 超过95%的资源需积分: 0 190 浏览量更新于2024-07-23 收藏 2.85MB PDF 举报

"《高性能网站建设指南》是一本深入探讨如何优化网页性能的书籍，主要关注JavaScript（js）、CSS和HTML这三个关键元素。作者通过压缩、优化这些技术来提升网站加载速度和用户体验。书中包含了HTML加载流程的解析，旨在帮助开发者理解和实施有效的性能优化策略。这本书得到了业界专家的高度评价，被认为是对提升网络性能的重要贡献。" 在构建高性能的网站时，JavaScript、CSS和HTML是基础，而优化这三者是提高网页性能的关键步骤。以下将详细介绍这些知识点： 1. **JavaScript (js) 优化**： - **延迟加载**：非关键脚本可以延迟加载，减少初始页面渲染的时间。 - **合并脚本**：将多个JS文件合并成一个文件，减少HTTP请求次数。 - **压缩代码**：使用工具如UglifyJS或Terser去除注释和空格，减小文件大小。 - **异步加载**：利用async或defer属性，防止阻塞HTML解析。 - **缓存利用**：设置合适的Cache-Control和Expires头，使浏览器缓存脚本。 2. **CSS (css) 优化**： - **CSS Sprites**：将多个小图像合并到一张大图，减少HTTP请求。 - **选择器优化**：避免使用复杂选择器，降低解析时间。 - **内联CSS**：对于关键样式，可将其内联在HTML中，加速首次渲染。 - **移除未使用的CSS**：确保只加载实际需要的样式，避免冗余。 - **压缩CSS**：使用工具如CSSNano压缩文件，减小文件大小。 3. **HTML (html) 优化**： - **减少HTTP请求**：合并CSS和JS，减少图片数量，使用数据URI编码小图标。 - **优化图片**：正确设置图片尺寸，压缩图片，使用WebP等高效格式。 - **减少DOM节点**：简化HTML结构，避免过多的嵌套和空元素。 - **缓存利用**：设置HTML的Cache-Control和ETag，利用浏览器缓存。 - **预加载和预读取**：使用link rel预加载关键资源，改善用户体验。 4. **HTML加载流程解析**： - **DNS查找**：浏览器首先解析URL并进行DNS查找。 - **建立TCP连接**：找到对应IP后，建立TCP连接（可能涉及SSL握手）。 - **发送HTTP请求**：发送HTTP请求到服务器。 - **接收HTTP响应**：服务器返回HTML文档。 - **解析HTML**：浏览器开始解析HTML，遇到外部资源时并发请求。 - **渲染页面**：解析到`<head>`时开始加载CSS，解析到`<body>`时开始加载JavaScript，同时构建渲染树。 - **DOMContentLoaded事件**：HTML解析完成，DOM树构建完成。 - **load事件**：所有资源加载完毕，包括图片和异步脚本。 5. **性能工具**： - **YSlow**：Steve Souders开发的浏览器扩展，用于评估网页性能并提供优化建议。 - **Fiddler**：微软开发的Web调试代理，帮助开发者分析HTTP通信。 - **Firebug**：JavaScript调试工具，对网页元素、网络请求等进行调试。《高性能网站建设指南》提供了实用的指导，帮助开发者通过优化JavaScript、CSS和HTML实现网站性能的显著提升。这本书不仅是新UE开发者和性能工程师的必备读物，也是任何希望提升网页加载速度和用户体验的专家的宝贵资源。

Preface

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, file extensions, path-

names, directories, Unix utilities, and general emphasis.

Constant width

Indicates computer code in a broad sense. This includes commands, options,

switches, variables, attributes, keys, functions, types, classes, namespaces, meth-

ods, modules, properties, parameters, values, objects, events, event handlers,

XML tags, HTML tags, macros, the contents of files, and the output from

commands.

HTTP requests and responses are designated graphically as shown in the following

example.

GET / HTTP/1.1 is an HTTP request header

HTTP/1.1 200 OK is an HTTP response header

Code Examples

Online examples can be found on this book’s companion web site:

http://stevesouders.com/hpws

Examples are included in each chapter in the context in which they are discussed.

They are also listed here for easy review.

No Image Map (Chapter 1)

http://stevesouders.com/hpws/imagemap-no.php

Image Map (Chapter 1)

http://stevesouders.com/hpws/imagemap.php

CSS Sprites (Chapter 1)

http://stevesouders.com/hpws/sprites.php

Inline Images (Chapter 1)

http://stevesouders.com/hpws/inline-images.php

Inline CSS Images (Chapter 1)

http://stevesouders.com/hpws/inline-css-images.php

Separate Scripts (Chapter 1)

http://stevesouders.com/hpws/combo-none.php

剩余169页未读，继续阅读

iamleesong

粉丝: 0
资源: 2

提升网页性能实践手册

高性能网站建设指南2.pdf

高性能网站建设指南2 中文版 高性能网站建设指南(中文版)

高性能网站 建设指南

高性能网站建设 指南

高性能网站建设指南 高性能网站建设指南

改进YOLO用于水下探测

人工智能和机器学习之关联规则学习算法：Eclat算法：关联规则学习基础理论.pdf

【图像处理】基于图形的 SLIC 集群表示附matlab代码.rar

RJFireWall-mastedgs

全球与中国商用车摄像系统市场现状及未来发展趋势（2024版）.docx

最新资源

高性能网站建设指南2 中文版高性能网站建设指南(中文版)

高性能网站建设指南

高性能网站建设指南

高性能网站建设指南高性能网站建设指南