首页 > 其他分享 >前端性能优化 之 加载性能优化

前端性能优化 之 加载性能优化

时间:2022-09-30 13:57:58浏览次数:64  
标签:缓存 浏览器 请求 性能 webp 优化 压缩 加载

前端性能优化,分为两个部分

  • 加载性能优化
  • 渲染性能优化

本篇随笔介绍加载性能优化


加载性能优化

本质:

  • 1、减少请求次数
  • 2、减少请求资源的大小
  • 3、网络优化

1、减少请求次数

为什么要减少请求次数?

答:浏览器能够并行发送请求,但是每次并行发送请求的个数是有限制的,以chrome浏览器为例子:

  • 同一个域名下,同一个GET请求的并发数是1,也就是说只有上一个请求结束,才会执行下一个请求,否则置入队列等待发送。
  • 同一个域名下,不同GET/POST请求的并发数是6。当发送的请求数量达到6个,并且都没有得到响应时,后面的请求会置入队列等待发送。

因此,资源请求的数量,肯定会直接影响网页的加载速度。


减少请求次数的方式

  • 1、图片资源的处理
    • CSS雪碧图技术
      • 将一些常用的、重复使用的小图合并成一张大图,使用的时候通过背景图片定位(background-position),定位到具体的某一张小图。
      • 但随着字体图片、svg图片的流行,该技术逐渐退出了历史舞台。
    • 图片懒加载
      • 视区之外的图片先不加载,当进入视区或者进入视区之前的某个位置再加载图片。
      • 实现:
        • css的loading属性
        • getBoundingClientRect方法,获取dom元素的top、left、bottom、right、height、width等信息,对比视区大小,进行图片的加载(需要结合节流)
        • IntersectionOberser方法,能够监听元素是否达到当前视口的事件
    • 字体图标
      • 一个字体图标加载了,图标就会马上渲染出来,不需要下载,可以减少HTTP请求。
    • base64编码
      • 图片的base64编码可以讲一张图片编码成一串字符串,可以使用该字符串代替图像地址url,减少HTTP请求数量。
      • 但是,由于base64编码用8位字符表示信息中的6位,所以编码后的大小会比原始值大33%,需要均衡css体积增大和http请求减少之间的收益。
  • 2、css/js 文件合并
    • 不合并的缺陷
      • 文件与文件之间插入的上行请求,增加了n-1个网络延迟。
      • 受丢包问题的影响会更加严重。
      • 经过代理服务器的时候,可能会被断开。
    • 文件合并存在的问题
      • 首屏渲染问题
        • 合并后的文件显然会比合并之前要大,请求速度必然会更慢一些。如果页面的渲染需要依赖JS的话,如果JS请求慢,就会有影响。
      • 缓存失效问题
        • 假如a,b,c三个js文件合成一个js,只要abc任意一个js有变动,都会导致合并后的文件有变动,使得js缓存失效。
      • 建议:
        • 公共库合并成一个文件,因为公共库的改动不大。然后业务代码合成一个。
        • 不同页面的合并,单页应用。当路由到某个页面的时候,才去加载这个页面。
  • 3、合理利用缓存
    • 避免一行代码的修改而导致整个bundle的缓存失效
    • 浏览器缓存(资源)
      • 强缓存
      • 协商缓存
    • DNS缓存(DNS查找时间)
    • 分包加载(Bundle Spliting)
  • 4、不使用CSS的@import
    • 因为@import会造成额外的请求

2、减少请求资源的大小

相同的网络环境下,更小的资源体积就意味着传输的速度更快。


资源压缩

  • HTML压缩
    • 能减少1~2KB。按照google的浏览,每次请求 1MB 减少一个字节,每年可以节省流量近 500TB,所以不要轻视。
    • node.js提供了html-minifier工具。
    • 后端模板引擎渲染压缩(可以在渲染方法中进行压缩)
  • CSS压缩
    • html-minifier可以压缩卸载html中的CSS
    • 工具:使用clean-css对css进行压缩
  • js的压缩与混乱
    • 作用:
      • 无效字符的删除。回车,空格
      • 剔除注释
      • 代码语义的缩减和优化(把变量名变短)
      • 代码保护(可以混乱你的代码,让别人看不懂)
    • 工具:
      • 写在html中的js可以使用html-minifier进行压缩
      • 使用uglifyjs2对JS进行压缩

webp

在安卓下可以使用webp格式的图片,它具有更优的图像数据压缩算法,能够带来更小的图片体积,同等画质下,体积比jpg、png少了25%以上,并且同时具备无损和有损的压缩模式、Alpha透明以及动画的特性。

如何鉴别浏览器是否支持webp?

  • 通过canvas来判断(常用)
    • 创建一个canvas元素,然后把它转成image/webp格式的data_url,如果这个data_url里面包含webp,则代表当前浏览器支持webp格式, 反之则不支持。
      document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp');
      
  • 在服务端根据请求header信息判断浏览器是否支持webp
    • 图片请求发出的时候,Request Headers 里有 Accept,服务端可以根据Accept 里面是否有 image/webp 进行判断。
  • 通过加载一张 webp 图片进行判断。

gzip压缩

nginx配置中可以开启,资源传输体积压缩变小,相应会增加服务器压缩和浏览器资源解压的压力;对于图片资源压缩效率不明显。


Tree Shaking技术(按需引入)

Tree Shaking 指的就是当引入一个模块的时候,不引入这个模块的所有代码,我只引入我需要的代码,这就需要借助 webpack 里面自带的 Tree Shaking 这个功能来帮我们实现。


3、网络优化

使用CDN(就近原则)

CDN全称是Content Delivery Network,即内容分发网络。

它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。


使用DNS预解析

当浏览器访问一个域名的时候,需要解析一次DNS,获得对应域名的ip地址。

在解析过程中,按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序,逐步读取缓存,直到拿到IP地址。

DNS预解析就是根据浏览器定义的规则,提前解析之后可能会用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,来提高网站的访问速度。

方法是在 head 标签里面写上几个 link 标签:

<link rel="dns-prefecth" href="https://www.google.com">
<link rel="dns-prefecth" href="https://www.google-analytics.com">

对以上几个网站提前解析 DNS,由于它是并行的,不会堵塞页面渲染,这样可以缩短资源加载的时间。


并行连接

由于在HTTP1.1协议下,chrome每个域名的最大并发数是6个。使用多个域名,可以增加并发数。


持久连接

使用keep-alive或presistent来建立持久连接,持久连接降低了时延和连接建立的开销,将连接保持在已调谐状态,而且减少了打开连接的潜在数量。


管道化连接

在HTTP2协议中,可以开启管道化连接,即单条连接的多路复用。

每条连接中并发传输多个资源,这里就不需要添加域名来增加并发数了。


学习参考:

标签:缓存,浏览器,请求,性能,webp,优化,压缩,加载
From: https://www.cnblogs.com/luckest/p/16744661.html

相关文章

  • 图片懒加载
    手动懒加载--利用指令的概念在src目录下,新建文件夹directives,再其中新建lazy.js:exportdefault{//这里的el就是使用了v-lazy指令的元素mounted(el){//保存图......
  • 不扒瞎,这个程序让我从300s优化到了10s
    前天晚上加班完成部门Q4KPI考核计划后,看到业务开发组的几个小伙伴在处理生产问题。我上前了解情况。 销管系统,客户交易明细页面,查询客户交易数据的逻辑是:调用远程数据中......
  • 资源画像,看得见的容器资源优化助手
    作者:张佐玮(佑祎)背景介绍K8s为集群资源提供了良好的抽象,用户可以直接根据应用的资源需求填写容器资源规格,这种方式有效提升了集群资源的管理效率。然而,一直以来,容器资源......
  • uber go code 规范(性能)
    前言从接触Golang到现在,感觉到的很深的一点是,go的代码无论是大佬还是菜鸟写出的代码,都有着大体统一的格式/流程,这也是Go被开发者喜爱的一个原因,但是还有......
  • MyBatis加载Mapper映射文件的方式
    MyBatis加载Mapper的映射文件的方式我们都知道MyBatis是一款半自动的ORM框架,它的特点就是具有灵活的sql操作MyBatis是利用mapper的映射文件,来将数据库的中字段与Java的属性......
  • Vue面试题27:为什么要使用路由懒加载?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
    这是一道应用题。当打包应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应组件,这样就会更加......
  • AM5728高性能SOC,满足工业协议支持、大数据计算、实时控制等需求,适用于图像处理、电力
    AM5728是TI Sitara系列高性能SOC,得益于异构多核处理架构,CPU内集成了多核DSP、多核PRU、IVA-HD、GPU等协处理单元,通过硬件加速的方式极大增强CPU的数据、多媒体处理能力,可满......
  • 如何在 Power BI 中进行优化
    如何在PowerBI中进行优化Optimization1)删除不必要的列和行:过滤仅报告所需的数据。它会减小尺寸。2)使用聚合表:每当我们通过直接查询连接时,它基本上有助于提高大......
  • 前端面试前端性能优化篇
    不论是什么样的前端面试,总会问到的一个问题:前端性能优化。相信如果这个问题没有答好,在面试中会很被动。于是,趁着这个天天宅的时期,好好的整理了一番。Start~一、HTML优......
  • 高性能计算,新能源汽车,云计算,google杂谈
    高性能计算,新能源汽车,云计算,google杂谈参考文献链接https://mp.weixin.qq.com/s/fTQccaZRbk-Ld30-fJqwOghttps://mp.weixin.qq.com/s/OkE-t5Zrx6CQ3fNIYlMkhAhttps://m......