首页- 百度SEO资源- 网页性能优化基本规则综述

网页性能优化基本规则综述

来源:seo优化 发布时间:2020-05-14 17:00:00


借助于webpack、gulp等构建工具,对网页的图片、脚本、样式等静态资源进行了适当的压缩。将站点中的小图标组合成一张图片,使用CSS定位并截取相应的图标;适当使用内联图片。页面是一个渐进的呈现过程,顶部样式可以更快地呈现给用户;顶部脚本标记将阻止页面后面资源的下载。多个页面引用公共静态资源,资源重用减少了额外的HTTP请求。不要加载大图像并缩小它,而是根据需要尝试使用指定大小的图像。

将preload属性设置为link标记的rel允许浏览器在主呈现机制介入之前预加载资源。此机制可以更早地获取资源,并且不会阻止页初始化。在这个例子中,CSS和JS文件是预加载的,一旦在后续的页面呈现中使用它们,就会调用它们。这样,还可以通过设置crossrigin属性跨域预加载资源。选择H1元素之后立即出现的段落,该元素与P元素具有相同的父元素。基于前一个选择器的优先级,尽量避免多级选择器嵌套,不超过3级。

浏览器将进行冗余的样式匹配,这将影响渲染时间。此外,样式文件过大也会影响加载速度。使用CSS的可继承属性,父元素设置样式,而不需要设置子元素。常见的可继承属性,如颜色、字体大小、字体系列等;不可继承的属性,如位置、显示、浮动等。当CSS属性值为0时,可以在不添加单位的情况下减少代码量。使用事件委托将事件绑定到同一类型的多个DOM元素。需要注意的是,虽然事件委托可以用来将事件委托给文档,但这是不合理的。一是容易造成事件误判,二是范围链搜索效率低。应选择近的父级作为委托。

除了更好的性能之外,动态创建的DOM元素不需要绑定到事件。您可以在加载DOM元素(domcontentloaded)之后开始处理DOM树,而不是等到下载完所有图片资源。利用浏览器的空闲时间预加载将来可能使用的资源,如图片、样式和脚本。一旦触发onload,立即获取未来所需的资源。判断用户行为的可能操作,并预加载将来可能使用的资源。除了页面初始化所需的内容或组件外,其他组件也可以延迟加载,如用于剪切图片的JS库、不在可见范围内的图片等。

在函数中多次使用的任何非局部变量都应存储为局部变量。文档全局变量在上述函数中多次使用,特别是在for循环中。因此,将文档全局变量存储为局部变量以供重用。值得注意的是,在JavaScript代码中,任何没有var声明的变量都会成为全局变量,使用不当会带来性能问题。

使用变量和数组比访问对象的属性更有效,因为对象必须在原型链中搜索具有该名称的属性。在上面的代码中,object属性用于计算。一次两个属性查找不会导致性能问题,但如果需要多个查找(例如在循环中),性能将受到影响。

假设有一个搜索框,将onkeyup事件绑定到搜索框,这样每次鼠标被举起时都会发送请求。使用throttling函数可以确保用户在指定的时间内只能为多个操作触发一个请求。节流功能的应用场景不局限于搜索框,如页面滚动滚动、窗口拉伸、大小调整等,应该使用节流功能来提高性能。语句的数量也会影响操作执行的速度。改进后的版本只使用一个var声明,用逗号分隔。当有许多变量时,只使用一个var声明比单独使用一个var声明快得多。

使用数组和对象文本,而不是逐个指定值。以前的浏览器没有使用加号优化字符串拼接。因为字符串是不可变的,这意味着中间字符串用于存储结果,所以频繁地创建和销毁字符串是其效率低下的原因。向数组中添加字符串,然后调用数组的join方法将其转换为字符串,这样就避免了使用加法运算符。现在的浏览器已经优化了string plus拼接,所以在大多数情况下,addition操作符仍然是。在浏览器渲染过程中,涉及到回流和重绘,这是一个性能损失的过程。应该注意的是,减少脚本操作期间触发回流和重画的操作。

向元素添加动画时,请将元素的CSS样式设置为position:fixed或position:absolute。当元素离开文档流时,它不会导致回流。调整窗口大小、键入输入框、滚动页面等时,请使用限制功能(如上所述)。合理设置浏览器缓存是优化网页的重要手段之一。Etag和last modified由服务器返回给responseheaders,Etag的优先级高于last modified,也就是说,服务器将首先判断Etag的值。

缓存类型为强缓存和协商缓存。两者的区别在于强缓存不会向服务器发送请求,而协商缓存将发送请求。如果匹配成功,则返回304notmodified,如果匹配不成功,则返回200。浏览器将首先验证强缓存,如果未命中强缓存,则执行协商缓存验证。在性能优化中,减少HTTP请求的措施占很大一部分,如:使用CSS sprite映射代替多个图像请求、避免空SRC图像、使用内联图像、使用外链CSS和JS、缓存等。


文章标签:厦门网页优化

Copyright © 2015-2020. 未经许可,不可拷贝或镜像 wabu.net