zoukankan      html  css  js  c++  java
  • 前端性能优化问题

    最近在做一个流量和数据都很大的移动端项目,遇到了很多前端性能方面的问题,记录一下,并找下应对方案。

    1 首页异步的请求数过多,导致请求阻塞和页面加载时间过长;返回的数据时间不同步,要根据返回多次不断渲染页面。

    1)第一个问题,请求阻塞是因为同域名下的最大并发数是有限的,一般在4-8个,所以请求太多就得排队,等到前面的请求发出去后才能继续发送。想要突破这个限制,那就是提供多个不同的域名进行请求,因为目前请求阻塞限制的是同域名下的。

    2)第二个问题,暂时还没有解决方案,目前仍然是根据返回重新渲染,返回几次就渲染几次。(目前是把数据都存到了props里,props变化导致重新render,还没想到优化方案)

    2 单个页面的渲染的数据过多,导致内存溢出产生闪退。

    这个问题是因为遍历次数过多导致内存溢出,使用分页,减少遍历。

    3 列表有固定列的时候,滚动列表固定列和其他列滚动不同步。

    4 echart的圆环在oppo、vivo比正常显示要大,行高也比正常的显示要小,到时文字上移1px

    5 页面上太多事件的时候,会同时触发。比如左右滑动和页面滚动同时触发了,右滑的时候也同时发生了页面的滚动。

    性能监控

    interface frontPerformance {
    // 页面加载时间
    loadPage: number; // t.loadEventEnd - t.navigationStart;
    // 白屏时间
    whitePage: number; // t.responseStart - t.navigationStart;

    //【重要】解析 DOM 树结构的时间
    //【原因】反省下你的 DOM 树嵌套是不是太多了!
    domReady: number; // t.domComplete - t.responseEnd;

    //【重要】重定向的时间
    //【原因】拒绝重定向!比如,http://example.com/ 就不该写成 http://example.com
    redirect: number; // t.redirectEnd - t.redirectStart;

    //【重要】DNS 查询时间
    //【原因】DNS 预加载做了么?页面内是不是使用了太多不同的域名导致域名查询的时间太长?
    // 可使用 HTML5 Prefetch 预查询 DNS ,见:[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)
    lookupDomain: number; // t.domainLookupEnd - t.domainLookupStart;

    //【重要】读取页面第一个字节的时间
    //【原因】这可以理解为用户拿到你的资源占用的时间,加异地机房了么,加CDN 处理了么?加带宽了么?加 CPU 运算速度了么?
    // TTFB 即 Time To First Byte 的意思
    // 维基百科:https://en.wikipedia.org/wiki/Time_To_First_Byte
    ttfb: number; // t.responseStart - t.navigationStart;

    //【重要】内容加载完成的时间
    //【原因】页面内容经过 gzip 压缩了么,静态资源 css/js 等压缩了么?
    request: number; // t.responseEnd - t.requestStart;

    //【重要】执行 onload 回调函数的时间
    //【原因】是否太多不必要的操作都放到 onload 回调函数里执行了,考虑过延迟加载、按需加载的策略么?
    loadEvent: number; // t.loadEventEnd - t.loadEventStart;

    // DNS 缓存时间
    appcache: number; // t.domainLookupStart - t.fetchStart;

    // 卸载页面的时间
    unloadEvent: number; // t.unloadEventEnd - t.unloadEventStart;

    // TCP 建立连接完成握手的时间
    tcpConnect: number; // t.connectEnd - t.connectStart;
    }

  • 相关阅读:
    MySQL------Navicat安装与激活
    MySQL------如何将SQLServer文件数据迁移到MySQL
    WinForm------如何跳转另一个窗口,同时关闭当前窗口
    C#------如何判断输入的是否为纯数字
    WinForm------GridControl显示每行的Indicator中的行号
    WinForm------给GridControl添加搜索功能
    WinForm------分页控件dll下载地址
    WinForm------ToolTipController与GridControl的连用
    利用IE/FF的不同识别CSS来使用浏览器兼容问题
    互换两条记录中的字段值方法(有待测试,,)
  • 原文地址:https://www.cnblogs.com/yupire/p/11855640.html
Copyright © 2011-2022 走看看