欢迎访问大高互联网络公司!实力接全国网站SEO优化快速上首页,精准锁定流量源,无排名不收费,快速建网站、开发|营销推广,SEO建站一站式服务!
资讯发布

您所在的位置: SEO快排 > 浙江 > 杭州 > 正文

浅谈网页基本性能优化规则小结

日期:2020-05-21 15:46:34 作者:大高SEO 杭州

针对浏览器网页的一些优化规则

页面优化

静态资源压缩

借助构建工具(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的类型加载不同类型的资源。

style

script

video

audio

image

font

document

...

该方式也可跨域预加载资源,设置crossorigin属性即可。

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

CSS

选择器

选择器的优先级从高到低排列为:

ID选择器

类选择器

标签选择器

相邻选择器

h1 + p{ margin-top: 15px; }

选择紧接在h1元素后出现的段落,h1和p元素拥有共同的父元素。

子选择器

h1 > strong {color:red;}

后代选择器

h1 em {color:red;}

通配符选择器

属性选择器

*[title] {color:red;} img[alt] {border: 5px solid red;}

伪类选择器

选择器使用经验:

优先选择类选择器,可替代多层标签选择器;

慎用ID选择器,虽然它效率高,但是在页面中是唯一的,不利于团队协作和维护;

合理利用选择器的继承性;

避免css表达式。
 

减少选择器的层级

建立在上一条选择器的优先级之上,应尽量避免多层次的选择器嵌套,最好不要超过3层。

.container .text .logo{ color: red; } /*改成*/ .container .text-logo{ color: red; }

精简页面样式文件,去掉不用的样式

浏览器会进行多余的样式匹配,影响渲染时间,另外样式文件过大也会影响加载速度。

利用css继承减少代码量

利用css的可继承属性,父元素设置了样式,子元素就不用再设置。

常见的可以继承的属性比如:color,font-size,font-family等;不可继承的比如:position,display,float等。

属性值为0时,不加单位

css属性值为0时,可不加单位,减少代码量。

.text{ width: 0px; height: 0px; } /*改成*/ .text{ width: 0; height: 0; }

JavaScript

使用事件委托

给多个同类DOM元素绑定事件使用事件委托。

<ul id="container"> <li class="list">1</li> <li class="list">2</li> <li class="list">3</li> </ul>

// 不合理的方式:给每个元素都绑定click事件 $('#container .list').on('click', function() { var text = $(this).text(); console.log(text); }); // 事件委托方式:利用事件冒泡机制将事件统一委托给父元素 $('#container').on('click', '.list', function() { var text = $(this).text(); console.log(text); });

需要注意的是,虽然使用事件委托时都可以将事件委托给document来做,但这是不合理的,一个是容易造成事件误判,另一个是作用域链查找效率低。应该选择最近的父元素作为委托对象。

使用事件委托除了性能上更优,动态创建的DOM元素也不需要再绑定事件。

DOMContentLoaded

可在DOM元素加载完毕(DOMContentLoaded)后开始处理DOM树,不必等到所有图片资源下载完后再处理。

更多相关推荐

【本文标题和网址】浅谈网页基本性能优化规则小结:http://yl6969.com/zhejiang/hangzhou/10451.html

资讯排行
搜索热点