必备-4.前端优化方案整理

文章目录

  • 必备-4.前端优化方案整理
    • 一、(http请求)关键渲染路径优化
    • 二、页面打开速度优化
    • 三、运行时代码优化
    • 四、webpack层面优化
    • 五、vue层面优化

必备-4.前端优化方案整理

将前端项目性能优化的方案做了大致的整理,以针对方面不同进行了分类,共分为5类:

1、针对于关键渲染路径的优化 【14种】

2、针对于提高页面第一次打开速度的优化{减少白屏等待时间}【6种】

3、针对于运行时代码优化【7种】

4、针对于webpack层面优化【4种】

5、针对于vue/react层面优化【7种】

一、(http请求)关键渲染路径优化

  • @1 尽可能使用HTTP2.0

  • @2 开启TCP通道的长连接 Connection:keep-alive

  • @3 开启服务器端的GZIP压缩:「让每一次返回的资源大小压缩40%+」

  • @4 对不经常更新的数据做数据缓存

  • @5 对于静态资源文件设置强缓存和协商缓存:目的是保证第二次及以后加载页面更快

  • @6 合理使用图片base64

    • 需要基于webpack自己编译BASE64「不要自己手动写BASE64,因为代码太恶了」

    • 零散的小图片一般可以base64

    • 如果这个图片很大,并且还很重要(不能延迟加载),如果想尽各种办法加载还是慢,不妨使用BASE64

  • @7 不同的资源分服务器部署:

    • 将原本放在一个服务器上的项目资源,分给多个服务器:web服务器、数据服务器、图片/音视频服务器、第三方服务器…
    • 优势:资源合理利用、减轻服务器压力、提高服务器处理能力、提高HTTP请求的并发数(每个服务器HTTP请求并发上限是5-7个)
    • 弊端:增加了DNS解析的次数,所以在这个基础上,我们使用DNS Prefetch预解析
      • DNS Prefetch的原理:利用link的异步性,让GUI渲染的同时,也去预先解析DNS(dns-prefetch),后面再获取资源的时候,直接把DNS缓存的信息拿出来用即可…
  • @8减少因操作DOM而产生的重排和重绘:

    • 放弃直接操作DOM:我们主攻操作数据,把操作DOM的事情交给vue/react框架来完成「框架内部做了很多操作DOM的优化」:虚拟DOM->DOM DIFF->渲染差异内容

    • 读写分离,利用浏览器的渲染队列机制:我们操作DOM的样式进行“「集中修改样式」”

    • 动态创建多个DOM节点时:我们基于文档碎片或者模板字符串,实现批量增加

    • 基于transform修改元素的样式:不会引发重排

    • 尽量操作脱离普通文档流的节点:这样节点位置或大小改变,只会把这一层中的节点重新Layout,虽然也引发了重排,但是总比所有节点都重新计算位置强…

  • 关于html/CSS的优化

    • @9 link导入样式放在HEAD中:让GUI渲染DOM TREE的同时,也去请求CSS资源,这样等到DOM TREE完成,可能CSS资源已经拿回来了
    • @10 script标签尽可能放到最后
      • 对于script标签来讲,尽可能放在页面末尾导入,如果非要放在前面导入,需要加async/defer,避免对GUI阻塞
    • @11 合理使用css样式引入方式
      • 如果样式资源比较少,直接内嵌式即可,减少一次HTTP请求;如果内容多,则合并到一个css中,使用外链式link导入;坚决不用@import导入式,因为他会阻塞GUI渲染!!
    • @12 减少HTML嵌套的层级、使用语义化标签
    • @13CSS选择器前缀不要过长「CSS选择器的渲染方向:右->左」
    • @14 避免使用CSS的表达式{expression}

二、页面打开速度优化

  • @1 图片懒加载
    • 第一次渲染页面不去加载真实图片(页面中基于默认图占位):减少了HTTP请求次数、不占用HTTP并发资源、第一次加载页面也无需渲染图片… 让页面第一次加载更快
  • @2 音视频资源一定要做延迟加载和播放!!!
  • @3 骨架屏
  • 服务器骨架屏(SSR渲染):页面首屏需要展示的结构、样式、数据等都由服务器处理好,第一次加载页面,只要获取到内容,直接渲染即可(真实数据也有了) -> 前提服务器抗压能力需要好

  • 前端骨架屏:渲染之前的Loading效果;在真实内容没有渲染出来之前,先把架子搭起来,用一些灰色的框框占位,给用户正在加载的友好效果…

  • @4 减少HTTP的请求次数和大小:「因为HTTP的并发性、TCP的三握四挥、网络通道可能会被阻塞等众多原因,决定了HTTP请求次数越少越好」
    • CSS和JS资源各合并为一个:「如果一个文件过大,第一次加载页面不需要这么多东西,我们也可以切割成多个,但是第一次只加载一个必须用到的,其余的都动态异步加载」

    • 使用CSS Sprite(精灵图)技术:,多张图片合并为一个

    • 文件要压缩:图片资源在保证清晰度的前提下,尽可能压缩

    • 使用字体图标/SVG(矢量图)代替位图(jpg/png/gif…)

  • @5 做数据的分页加载、异步加载、下拉加载…

三、运行时代码优化

  • @1 事件委托:

    • 「优势:减少堆栈内存的开辟、可以给动态创建的元素做事件绑定…提高了整体性能」
  • @2 合理使用闭包:「闭包会产生不释放的栈内存」

  • @3 避免内存泄漏: -> javascript高级程序设计第三版

  • @4 禁止出现死递归、死循环:(因为会导致栈溢出)、禁止出现死循环(因为会阻塞JS引擎线程的渲染)

  • @5 减少cookie的使用

    • 「因为每一次向服务器发送请求,都会在请求头中把cookie传递给服务器,不论服务器是否想要,如果本地cookie存储信息多,则每次传输都会携带一些没必要的内容…」
  • @6 对于一些操作使用函数的节流和防抖

  • @7 动画处理的原则:能用CSS搞定的不用JS,能用requestAnimationFrame搞定的不用定时器,如果最后定时器动画都搞不定的,换需求…

四、webpack层面优化

  • @1、对小图片进行base64压缩

  • @2、html、js、css文件压缩

  • @3、关闭SourceMap

  • @4、开启gzip压缩

五、vue层面优化

  • @1、v-if和v-show合理使用
  • @2、v-for遍历添加key,且避免同时使用v-if
  • @3、图片懒加载
  • @4、路由懒加载/分类打包
  • @5、第三方插件按需导入
  • @6、服务端渲染SSR 或 预渲染(骨架屏)
  • @7、用vuex做缓存

你可能感兴趣的:(必备,javascript,动画,css3)