这次给大家带来前端网页基本性能优化,的注意事项有哪些,下面就是实战案例,一起来看一下。 页面优化 静态资源压缩 借助构建工具(webpack、gulp)适当压缩图片、脚本及样式等网页静态资源。 CSS雪碧图、base64内联图片 将站内小图标合并成一张图,使用css定位截取对应图标;适当使用内联图片。 样式置顶、脚本置底 页面是一个逐步呈现的过程,样式置顶能更快呈现页面给用户; 标签置顶会阻塞页面后面资源的下载。</p> <p style="text-align: left;"><strong>使用外链的css和js</strong></p> <p style="text-align: left;">多个页面引用公共静态资源,资源复用减少额外的http请求。</p> <p style="text-align: left;"><strong>避免空src的图片</strong></p> <p style="text-align: left;">避免不必要的http请求。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!-- 空src的图片依然会发起http请求 --> <img src="" alt="image" /></pre><div class="contentsignin">Salin selepas log masuk</div></div> <p style="text-align: left;"><strong>避免在html中缩放图片</strong></p> <p style="text-align: left;">图片尽量按需求使用指定规格的尺寸,而不是加载一张大图片再将它缩小。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!-- 实际图片尺寸为600x300,在html中缩放为了200x100 --> <img src="/static/images/a.png" width="200" height="100" alt="image" /></pre><div class="contentsignin">Salin selepas log masuk</div></div> <p style="text-align: left;"><strong>Preload预加载</strong></p> <p style="text-align: left;">给link标签的rel设置preload属性,可以让浏览器在主渲染机制介入前就预加载资源。这种机制可以更早的获取资源且不阻塞页面的初始化。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!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">