欧陆新闻 分类
web前端性能优化(全汇总) 发布日期:2024-06-04 16:15:50 浏览次数:

「这是我参与11月更文挑战的第3天,活动详情查看:2021最后一次更文挑战

web前端性能优化,老生常谈的话题,也是每个企业每个项目最为关心的问题。为了使用户体验达到极致,我们不得不为每一个细节深思琢磨,尽可能达到我们想要的方案。

面试中我们也常常被问到性能优化的问题,如果胡乱穿插一些优化方案,面试官会感觉没有条理性,我们也回答的没有拿捏感,所有我们更应该有思路、有条理的叙述出一个前端性能优化相对完整的流程

这便文章我将以几个大方向总结性能优化
思路也是从来讲解


  • 如Chrome浏览器最多同时允许对同一个域名Host建立6个TCP连接,不同的浏览器有所区别,减少http请求也就是减少我们html里css/js等资源的数量


  • 需要配置一个支持h2的web服务器,并下载安装一张TLS证书,让浏览器与服务器通过h2链接
    http2.0优势:

    1. 采用二进制格式传输数据, 1.1是文本格式
    2. 对消息头采用Hpack进行压缩传输,能够节省消息头占用的网络流量,1.1每次请求,都会携带大量冗余的头信息,浪费了很多宽带资源
    3. 异步连接多路复用
    4. Server Push,服务器端能够更快的把资源推送到客户端
    5. 保持与HTTP 1.1语义的向后兼容性也是该版本的一个关键

  • 主要为设置缓存策略:强缓存和协商缓存(编写中)


  • 增强用户体验


  • 静态css/js/img等资源可以做cdn缓存,这样把资源同步到全国全球各地,用户就能更快访问到

    1. 浏览器请求并发限制(同一域名(包括二级域名)在同一时间支持的并发请求数量的限制)
    2. cookie传输,单独域名,不会携带cookie
    3. 方便分流和缓存(动静分离,有利于静态资源做cdn缓存)

  • 使资源体积更小
    服务端配置,如nginx可配置支持gzip压缩资源传输的方式
    如果浏览器支持gzip解析,服务器就会推送gzip的资源,在http的相应头里可以看到显示Content-Encoding:gzip


  • 现在主流框的react、vue导致的一个痛点,就是页面构建交给了客户端来渲染,构建的过程无疑是排在了请求到html/js资源后,也就是至少两次http请求后才开始构建,这无疑是导致白屏的关键点之一,所以做ssr页面的话,能够直接返回页面,减少了不少首屏渲染时间


  • 单线程js可能会阻滞文档加载


  • 一些通用的小图标,如箭头,叉,可以使用字体图标,减少请求,渲染更快


  • 一些带有企业特色的小图标,如淘宝购物车,笑脸娃娃,可以使用精灵图,让一张图上带有多个小图,然后使用css背景定位来显示出合适的位子,能大大减少请求


  • 为了首屏渲染更快,图片可设置一张加载图代替,当页面在可视区域内时在替换为正真的图片
    如果有首屏很大的高清图,可先渲染清晰度低的缩略图,在首页基本构建完成下一次事件循环再去替换为高清图


  • 可以在window.onload之后请求一些其他地方需要的图片资源
    比如我们有一个活动页使用了高清图,我们可以在它的入口前的首页就加载它,当我们进去页面时,浏览器就会从缓存里读取这张图片


  • PNG 格式是WEB 图像中最通用的格式,它是一种无损压缩格式


  • 可以使用webpack url-loader处理

    1. 全局变量定义在全局执行上下文,是所有作用域链的顶端。局部找不到就会一直往上找,影响性能
    2. 全局执行上下文一直存在于上下文执行栈,直到程序退出,不利于GC回收
    3. 命名污染

  • 将使用中无法避免的全局变量缓存到局部


  • 回流:当元素的规模尺寸,布局,隐藏等改变的时候,render dom需要重新构建,这就称为回流
    重绘:元素只更新外观,风格,而不会影响布局的,叫重绘


  • 如for循环优化,减少length读取次数

    
    

  • dom:document.createDocumentFragment()


  • 减少if else,提前return if不满足的逻辑


  • 数组、对象、字符串等,直接声明比new 更快


  • web worker是运行在后台的js,独立于其他脚本,不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候,就不会阻塞主线程了。

  • 阻止了onload,使用户感觉加载很慢的感觉
    与父页面共享浏览器连接池,与父页面并行占用http最大连接数,所以资源加载更慢
    不利于seo
    兼容性不太好,如小程序里面嵌入h5,h5又使用了ifarme

总体大概分为以上这几类的优化方案, 共20多个小点
如果您有更好更多的前端性能优化方式,欢迎补充!!
后续有其他的优化方案,我会继续补充此文!!欢迎收藏!


平台注册入口