为了账号安全,请及时绑定邮箱和手机立即绑定

性能优化--学习笔记

标签:
JavaScript

// 性能优化
/**

  • 多使用内存、缓存或其他方法
  • 减少 cpu 计算、网络

  • 加载页面 和 静态资源
  • 页面渲染
    **/

    // 加载资源优化
    // 1. 静态资源的压缩合并
    // 2. 静态资源缓存
    // 通过连接名称控制缓存
    // 3. 使用CDN让资源加载更快
    // 一些公共资源 使用 boot CDN
    // 4. 使用 SSR 后端渲染,数据直接输出到 HTML 中 (jsp,php,就是属于一种后端渲染;vue,react提出的新出概念)
    
    // 渲染优化
    // 1. css 放前面, js 放后面
    // 2. 懒加载(图片懒加载、下拉加载更多(什么时候用什么时候加载))
    
    // 3. 减少 DOM 查询,对 DOM 查询做缓存
    var i; // 为缓存实例
    for(i =0; i< document.getElementsByClassName('p').length;i++){
        //todo
    }
    
    var pList = document.getElementsByClassName('p');
    var i; // 已缓存 实例
    for(i = 0;i<pList.length;i++){
        // todo
    }
    
    // 4. 减少(合并) DOM 操作,多个操作尽量合并在一起执行
    var listNode = document.getElementById('list');
    
    // 要插入 10 个 li 标签
    var frag = document.createDocumentFragment();
    var x, li;
    for(x=0; x < 10; x++){
        li = document.createComment('li');
        li.innerHTML = 'List item ' + x;
        frag.appendChild(li); // 不会去触发dom 操作
    }
    
    listNode.appendChild(frag);
    
    // 5. 事件节流
    
    // 6. 尽早执行操作(如 DOMContentLoaded,window.onload)
    window.addEventListener('load',function(){
        // 页面的全部资源加载完才会执行,包括图片、视频等
    });
    
    document.addEventListener('DOMContentLoaded', function(){
        // DOM 渲染完即可执行,此时 图片、视频还可能没有加载完
    });
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消