zoukankan      html  css  js  c++  java
  • 整个前端性能提升大致分几类

    1、静态资源的优化

    主要是减少静态资源的加载时间,主要包括html、js、css和图片。

    a、减少http请求数:合并js、css、制作雪碧图以及使用http缓存;

    b、减小资源的大小:压缩文件、压缩图片,小图使用base64编码等;

    c、异步组件和图片懒加载;

    d、CDN加速和缓存(bootCND):客户端可通过最佳的网络链路加载静态资源,提高访问的速度和成功率。

    (CDN:通过在网络各处放置节点服务器构成的一层智能虚拟网络,可将用户的请求重新导向离用户最近的服务节点上)

     

    2、接口访问的优化

    1、http持久链接(Conection:keep-alive)

    2、后端优化合并请求(比如在进入一个商品详情页的时候后端会提供一个接口获取商品的基本信息,然后当用户点击假如购物车时)

    3、冷数据接口缓存到localstorage,减少请求

     

    3、页面渲染速度的优化

    1、由于浏览器的js引擎线程和GUI渲染线程是互斥的,所以在执行js的时候会阻塞它的渲染,所以一般

    会将css放在顶部,优先渲染,js放在底部;

    2、减少dom的操作:

    a、vue中使用了虚拟DOM渲染方案,做到最小化操作真实的dom;

    b、事件代理:利用事件冒泡原理,把函数注册到父级元素上。

    3、减少页面的重绘和回流。

     

    vue里:

    1、souceMap关闭,只打包压缩后的文件;

    2、compression-webpack-plugin,并设置productGzip:true,开启压缩;

    3、路由懒加载(加快首屏加载速度,缺点:把多个js分开打包,导致http请求数增多)

    4、v-if和v-show:

    v-if是懒加载,只有为true时才加载,false时不会占据布局空间

    v-show:不管是true还是false都会渲染,并会占据布局空间,优点:减少页面的重绘和回流。

    5、为item设置key值:在列表数据进行遍历渲染的时候,方便vue将新值和旧值做对比,只渲染变化了的部分。

    6、组件细分(比如轮播组件、列表组件、分页组件等):当数据变更时,渲染会加快;其次易于组件复用和维护。

    7、使用loading和骨架屏加载,防止白屏和闪屏的情况。

    8、服务端渲染:vue的页面渲染,通过模板编译,渲染出页面,而不是直出html,对于首屏有较大的损耗。

    服务端渲染:现在服务端进行整个html的渲染,再将整个html输出到浏览器端。

    9、DNS缓存,减少dns查询时间。

  • 相关阅读:
    php 计算代码执行时间
    高级php面试题
    MongoDB 或者 redis 可以替代 memcached 吗?
    mysql中myisam,innodb和memory三个存储引擎的区别
    C#发送邮件代码
    使用bootstrap table时不能显示筛选列和分页每页显示的行数
    vue2中,字符串里如何拼接绑定对象
    压缩图片方法
    jquery的ajax方法,在返回中,find方法不起作用
    vue2中,在google浏览器中正常,在ie11中不解析
  • 原文地址:https://www.cnblogs.com/annie211/p/12716435.html
Copyright © 2011-2022 走看看