网页性能优化：规则与实战技巧
5 浏览量
更新于2024-09-01
收藏 121KB PDF 举报
"本文主要探讨了网页性能优化的基本规则，包括静态资源的压缩、CSS雪碧图和base64内联图片的使用、样式置顶和脚本置底的策略、外链CSS和JS的优势、避免空src图片的请求、避免HTML中缩放图片以及Preload预加载技术的应用。这些规则旨在提升网页加载速度，提供更好的用户体验。"
网页性能优化是提高网站质量的关键，它涉及到一系列旨在减少加载时间、改善用户交互和提升资源利用率的技术。以下是对标题和描述中提及的知识点的详细说明：
1. **静态资源压缩**：通过使用像webpack和gulp这样的构建工具，可以对图片、JavaScript脚本和CSS样式进行压缩，减少文件大小，从而加快页面加载速度。
2. **CSS雪碧图**：将多个小图标合并到一张大的图片中，通过CSS的background-position属性定位显示所需图标。这种方法减少了HTTP请求的数量，提高了加载效率。
3. **base64内联图片**：对于小图标，可以将其转换为base64编码并内联在CSS中，避免额外的HTTP请求，但要注意，大图使用base64可能会增加CSS文件的大小，所以要权衡利弊。
4. **样式置顶，脚本置底**：将CSS放置在<head>中，确保样式尽早应用，加快页面初步渲染。而JavaScript则放在<body>底部，防止阻塞页面解析，让页面内容先呈现给用户。
5. **使用外链的CSS和JS**：将公共的CSS和JS文件作为外部链接，实现资源复用，减少HTTP请求，提高性能。
6. **避免空src的图片请求**：空src的图片也会发起HTTP请求，应避免这种情况以减少不必要的网络流量。
7. **避免在HTML中缩放图片**：加载与实际显示尺寸不符的图片，然后在HTML中进行缩放，会浪费带宽和计算资源。应尽量提供与需求尺寸匹配的图片。
8. **Preload预加载**：通过<link rel="preload">预加载关键资源，如样式表和脚本，可以在主渲染流程之前就开始下载，提升页面加载速度。指定`as`属性可以加载不同类型的资源，如style、script、video、audio、image和font等。
以上这些规则都是为了优化浏览器的渲染流程，减少延迟，提升网页加载速度，最终提供更加流畅的用户体验。通过综合运用这些技巧，可以显著改善网页的性能表现。
浅谈网页基本性能优化规则小结浅谈网页基本性能优化规则小结
主要介绍了浅谈网页基本性能优化规则小结的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个
参考。一起跟随小编过来看看吧
针对浏览器网页的一些优化规则
页面优化页面优化
静态资源压缩静态资源压缩
借助构建工具（webpack、gulp）适当压缩图片、脚本及样式等网页静态资源。
CSS雪碧图、雪碧图、base64内联图片内联图片
将站内小图标合并成一张图，使用css定位截取对应图标；适当使用内联图片。
样式置顶、脚本置底样式置顶、脚本置底
页面是一个逐步呈现的过程，样式置顶能更快呈现页面给用户；<script> 标签置顶会阻塞页面后面资源的下载。
使用外链的使用外链的css和和js
多个页面引用公共静态资源，资源复用减少额外的http请求。
避免空避免空src的图片的图片
避免不必要的http请求。
<!-- 空src的图片依然会发起http请求 -->
<img src="" alt="image" />
避免在避免在html中缩放图片中缩放图片
图片尽量按需求使用指定规格的尺寸，而不是加载一张大图片再将它缩小。
<!-- 实际图片尺寸为600x300，在html中缩放为了200x100 -->
<img src="/static/images/a.png" width="200" height="100" alt="image" />
Preload预加载预加载
给link标签的rel设置preload属性，可以让浏览器在主渲染机制介入前就预加载资源。这种机制可以更早的获取资源且不阻塞页
面的初始化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link ref="preload" href="style.css" as="style">
<link ref="preload" href="main.js" as="script">
<link ref="stylesheet" href="style.css">
</head>
<body>
<script src="main.js"></script>
</body>
</html>
例子中预加载了css和js文件，在之后的页面渲染中，一旦使用它们就会立即调用。
可指定as的类型加载不同类型的资源。
1. style
2. script
3. video
4. audio
5. image
6. font
7. document
8. ...
该方式也可跨域预加载资源，设置crossorigin属性即可。
下载后可阅读完整内容，剩余6页未读，立即下载
2021-01-21 上传
2020-12-13 上传
2020-12-14 上传
2021-01-21 上传
2020-11-26 上传
2013-05-08 上传
2020-08-29 上传
weixin_38669091
- 粉丝: 4
- 资源: 871
我的内容管理
展开
最新资源
- SSM动力电池数据管理系统源码及数据库详解
- R语言桑基图绘制与SCI图输入文件代码分析
- Linux下Sakagari Hurricane翻译工作：cpktools的使用教程
- prettybench: 让 Go 基准测试结果更易读
- Python官方文档查询库，提升开发效率与时间节约
- 基于Django的Python就业系统毕设源码
- 高并发下的SpringBoot与Nginx+Redis会话共享解决方案
- 构建问答游戏：Node.js与Express.js实战教程
- MATLAB在旅行商问题中的应用与优化方法研究
- OMAPL138 DSP平台UPP接口编程实践
- 杰克逊维尔非营利地基工程的VMS项目介绍
- 宠物猫企业网站模板PHP源码下载
- 52简易计算器源码解析与下载指南
- 探索Node.js v6.2.1 - 事件驱动的高性能Web服务器环境
- 找回WinSCP密码的神器：winscppasswd工具介绍
- xctools：解析Xcode命令行工具输出的Ruby库
