搜 索

一些网站优化技术

  • 122阅读
  • 2022年08月16日
  • 0评论
首页 / 技术积累 / 正文

在网络如此发达的今天,用户最满意的网页响应时间应该是2-4秒,如果等待超过10秒,99%的用户会关闭这个网页,网站的加载速度严重影响了用户体验,也决定了这个网站的生死存亡,所以优化是必须的,那该如何优化呢?

一、减少HTTP请求

首先减少请求的典型例子就是雪碧图(Sprites/精灵图)了,把小图片合成大图片就是精灵图本质,然后通过CSS的background-position背景图片定位即可定位到对应的小图片,各大官网都有运用。

1.jpg

其次是字体图标,这个相对于雪碧图会更加灵活,每新增图标不需要重新换图片,而且颜色可以自定义,但也是有弊端的,就是只能做一些简单的图标,更复杂的还得用雪碧图。

最后,你还可以通过合并JS脚本和CSS样式表实现。

二、使用CDN

内容分发网络(Content Delivery Network,简称CDN)是建立并覆盖在承载网之上,由分布在不同区域的边缘节点服务器群组成的分布式网络。

简单的说就是通过离你最近的节点去访问网站资源,如果是第一次访问节点没有资源就会下载到对应节点,第二次你再访问的时候,对应节点就会直接把缓存的内容返回给你的网页显示。

而且在优化性能时,CDN可能选择网络阶跃数最小的服务器,或者具有最短响应时间的服务器,同时可以进行数据备份、扩展存储能力,进行缓存,同时有助于缓和Web流量峰值压力。

三、CSS和JS的位置会影响页面效率

CSS 是页面渲染的关键因素之一,(当页面存在外链 CSS 时,)浏览器会等待全部的 CSS 下载及解析完成后再渲染页面。关键路径上的任何延迟都会影响首屏时间,因而我们需要尽快地将 CSS 传输到用户的设备,否则,(在页面渲染之前,)用户只能看到一个空白的屏幕。

css在加载过程中不会影响到DOM树的生成,但是会影响到Render树(渲染树)的生成,进而影响到layout(布局)。

所以一般来说,style的link标签需要尽量放在head里面,因为在解析DOM树的时候是自上而下的,而css样式又是通过异步加载的,这样的话,解析DOM树下的body节点和加载css样式能尽可能的并行,加快Render树的生成的速度。

js脚本应该放在底部,原因在于js线程与GUI渲染线程是互斥的关系,如果js放在首部,当下载执行js的时候,会影响渲染行程绘制页面,js的作用主要是处理交互,而交互必须得先让页面呈现才能进行,所以为了保证用户体验,尽量让页面先绘制出来。

最后,建议都使用外部的JavaScript和CSS,内联脚本或者样式可以减少HTTP请求,按理来说可以提高页面加载的速度。然而在实际情况中,当脚本或者样式是从外部引入的文件,浏览器就可以缓存它们,从而在以后加载的时候能够直接使用缓存,而HTML文档的大小减小,从而提高加载速度。当然如果引入外链需要注意缓存问题,即修改后需要改变版本号参数形如<script src = "index.js?v=1.1.01"></script>

四、懒加载和压缩图片或内容

图片懒加载是现在最常用的性能优化手段之一,对于首屏用不到的图片,我们完全可以使用懒加载在用户下拉到对应位置的时候再进行加载,避免网页打开时一下子加载过多资源。

压缩就是减少体积,建议使用PS自己导出时选择适合的品质。

评论区
暂无评论
avatar