Coder Social home page Coder Social logo

baishusama.github.io's People

Contributors

baishusama avatar

Stargazers

 avatar

Watchers

 avatar  avatar

baishusama.github.io's Issues

【Angular】路由 - 懒加载

auth.service 虽然是全局的服务,但其实是可以放到 AuthenticationModule 的,这样更清晰(高内聚)。同理的大概有 auth-guard.service, TokenInterceptor, CsrfTokenInterceptor

理论上也是可以实现的,因为直接由 AppModule imports 的模块下的服务是全局的【?】。

但是,后来引入了懒加载机制,AuthenticationModuleProductModule 都是懒加载进来的,所以其下的服务并不可见直到模块被懒加载【?】。

所以,懒加载还有什么优缺点呢?

【JavaScript】Nowadays JS Library

问题

在 electron 打包过程中遇到了报错 Electron: jQuery is not defined

TODO

  • 读懂 SO 上的那个解决方案及其优缺点
  • jQuery-3.3.1.skeleton.js:
  • 为了浏览器端和服务器端(node)均能运行,现代库做了哪些操作?
/*!
 * jQuery JavaScript Library v3.3.1
 * https://jquery.com/
 *
 * Includes Sizzle.js
 * https://sizzlejs.com/
 *
 * Copyright JS Foundation and other contributors
 * Released under the MIT license
 * https://jquery.org/license
 *
 * Date: 2018-01-20T17:24Z
 */
(function(global, factory) {
    'use strict';

    if (typeof module === 'object' && typeof module.exports === 'object') {
        // For CommonJS and CommonJS-like environments where a proper `window`
        // is present, execute the factory and get jQuery.
        // For environments that do not have a `window` with a `document`
        // (such as Node.js), expose a factory as module.exports.
        // This accentuates the need for the creation of a real `window`.
        // e.g. var jQuery = require("jquery")(window);
        // See ticket #14549 for more info.
        module.exports = global.document
            ? factory(global, true)
            : function(w) {
                  if (!w.document) {
                      throw new Error(
                          'jQuery requires a window with a document'
                      );
                  }
                  return factory(w);
              };
    } else {
        factory(global);
    }

    // Pass this if window is not defined yet
})(typeof window !== 'undefined' ? window : this, function(window, noGlobal) {
    // Edge <= 12 - 13+, Firefox <=18 - 45+, IE 10 - 11, Safari 5.1 - 9+, iOS 6 - 9.1
    // throw exceptions when non-strict code (e.g., ASP.NET 4.5) accesses strict mode
    // arguments.callee.caller (trac-13335). But as of jQuery 3.0 (2016), strict mode should be common
    // enough that all such attempts are guarded in a try block.
    'use strict';

    var arr = [];

    var document = window.document;

    // ...
    // ...此处省略一些函数定义...
    // ...

    var version = '3.3.1',
        // Define a local copy of jQuery
        jQuery = function(selector, context) {
            // The jQuery object is actually just the init constructor 'enhanced'
            // Need init if jQuery is called (just allow error to be thrown if not included)
            return new jQuery.fn.init(selector, context);
        },
        // Support: Android <=4.0 only
        // Make sure we trim BOM and NBSP
        rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

    // ...
    // ...此处一万行 jQuery 功能代码...
    // ...

    // Register as a named AMD module, since jQuery can be concatenated with other
    // files that may use define, but not via a proper concatenation script that
    // understands anonymous AMD modules. A named AMD is safest and most robust
    // way to register. Lowercase jquery is used because AMD module names are
    // derived from file names, and jQuery is normally delivered in a lowercase
    // file name. Do this after creating the global so that if an AMD module wants
    // to call noConflict to hide this version of jQuery, it will work.

    // Note that for maximum portability, libraries that are not jQuery should
    // declare themselves as anonymous modules, and avoid setting a global if an
    // AMD loader is present. jQuery is a special case. For more information, see
    // https://github.com/jrburke/requirejs/wiki/Updating-existing-libraries#wiki-anon

    if (typeof define === 'function' && define.amd) {
        define('jquery', [], function() {
            return jQuery;
        });
    }

    var // Map over jQuery in case of overwrite
        _jQuery = window.jQuery,
        // Map over the $ in case of overwrite
        _$ = window.$;

    jQuery.noConflict = function(deep) {
        if (window.$ === jQuery) {
            window.$ = _$;
        }

        if (deep && window.jQuery === jQuery) {
            window.jQuery = _jQuery;
        }

        return jQuery;
    };

    // Expose jQuery and $ identifiers, even in AMD
    // (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
    // and CommonJS for browser emulators (#13566)
    if (!noGlobal) {
        window.jQuery = window.$ = jQuery;
    }

    return jQuery;
});

【性能优化】GF admin2 项目

使用 Chrome Dev Tools 来观察页面性能

操作1. 刷新页面,待页面加载完毕后,(鼠标下滚)页面下拉四次

RT 操作过后,Performance 有:

image

WT1. 下滚页面时,帧数异常低

现象

可以观察到最上面 FPS 行,每次滚动都会出现红色的长条,这说明这些帧存在严重问题

"帧存在严重问题"意味着非常差的用户体验,而我自己直观的感受是每次下滚页面都十分卡顿 :(

原因

被测试页面是一个有 20 个 items 的 list 页面,每个 items 都有 pos, entity 等数据结构为三维数组的两个复杂属性,而这些属性处于修改的需要,被属性绑定在了页面 DOM 上。

三维数组 x 2 个属性 x 20 行

猜测可能的影响因素为:

  • 复杂属性的个数
  • 行数
变量实验

当行数只有五行时:

image

可以看到 FPS 的红条变得不再连续,这说明掉帧现象得到改善!

当行数只有一行时:

image

可以看到 FPS 行压根儿都没出现红色,帧数状况良好!

当复杂属性只有一个时:

image

当没有复杂属性时:

image

由上可以看出, 更大程度上决定帧数状况的是行数 而非复杂属性。

想法

虽然我们知道了,行数才是决定性因素,但是一页显示多少行是由用户决定的并不是可控的。所以,我们只能考虑在用户选择显示几十行时,怎么做到尽可能优化性能使得页面保持不掉帧。

我们很容易想到一个在行数过多时的一个解决方案----常见于无限加载列表的 virtual scroll (虚拟滚动)。

虚拟滚动的基本**是,由于屏幕高度总是有限的,对于一个无限加载的列表,我们不用真的去加载全部 items(因为这种做法毫无疑问在列表长度达到一定量级时影响用户体验),我们只需要总是显示视野内的有限的几个 items 即可。

尝试

第一步,scroll @OneTab

class SomeClass {
  windowScrollSubject = new BehaviorSubject<object>(null);
  get windowScroll$() {
    return this.windowScrollSubject.asObservable();
  }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    this.windowScrollSubject.next(null);
  }
}

第二步,scroll 的时候更新???

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.