Code Monkey home page Code Monkey logo

seajs-flush's Introduction

A Module Loader for the Web

Sea.js is a module loader for the web. It is designed to change the way that you organize JavaScript. With Sea.js, it is pleasure to build scalable web applications.

The official site: https://seajs.github.io/seajs/

Build Status

Questions?

If you have any questions, please feel free to ask through New Issue.

Reporting an Issue

Make sure the problem you're addressing is reproducible. Use http://jsbin.com/ or http://jsfiddle.net/ to provide a test page. Indicate what browsers the issue can be reproduced in. What version of Sea.js is the issue reproducible in. Is it reproducible after updating to the latest version?

License

Sea.js is available under the terms of the MIT License.

seajs-flush's People

Contributors

afc163 avatar army8735 avatar lianqin7 avatar lifesinger avatar lizzie avatar popomore avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

seajs-flush's Issues

flush的透明化

这个只是一个建议

启用 flush 插件后,每次 seajs.use 之后都要跟着 seajs.flush 不方便也不透明。

在我们团队这边是这么做的:

  1. 在 domReady 的时候默认调用一次 seajs.flush
  2. domReady 之后的 seajs.use 功能和原来一致,就不做缓存了

domReady的判断,用了一段内联代码解决,代码量也不大

这样做之后:

  1. 对于普通开发人员,根本不需要关心 seajs.flush 接口
  2. 对于性能优化人员,在需要的地方调用 seajs.flush 就好

ajax加载的模板中调用seajs.use

我在ajax加载的模板中调用seajs.use 模块不会被加载。后来我发现需要再次调用seajs.flush() 我本来以为全站只需要底部调用一次seajs.flush() 后来发现这是不太可能的 不过我觉得这样的情况有必要在文档中说明一下

和preload配合使用有问题

<script src="path/to/sea.js"></script>
<script>
seajs.config({
    preaload: ['f']
});
<script>
<script src="path/to/seajs-combo.js"></script>
<script src="path/to/seajs-flush.js"></script>
<script>
seajs.use(['a', 'b'], function(a, b) {
  // ...
})

seajs.use(['c', 'd'], function(c, d) {
  // ...
})

// The combined request is http://test.com/path/to/??a.js,b.js,c.js,d.js
seajs.flush()
</script>

结果只加载了 f.js

多次调用 flush 的 bug

seajs.use('a');
seajs.use('b');
seajs.flush();


// 稍微有点距离,但是又在 a.js,b.js 返回之前运行
seajs.use('c');

结果 发出的url 是: http://xx.com/a.js,b.js,c.js

因为在 requestexec 事件里都会再调用 seajs.flush , c.js进入缓存后马上又被执行了。。

中文文档

flush 插件

通过 combo 插件,我们可以对同一数组中的加载项进行合并加载。通过 flush 插件,我们可以更进一步减少 HTTP 请求数。

使用场景

看代码:

seajs.use('a');
seajs.use('b');
seajs.use('c');
seajs.use('d');

Sea.js 默认会发送 4 个独立请求。

如果能在 use 调用时不发送请求,等到多次 use 后,在合适的时机统一触发就好了。 这就是 flush 插件的用武之地。

使用方式

使用方式和 combo 插件一样,推荐以下方式:

<script src="http://test.com/??path/to/sea.js,path/to/seajs-combo.js,path/to/seajs-flush.js"></script>

注意:flush 插件一般和 combo 插件一起使用。

加载 flush 插件后,就具有了 seajs.flush 方法。我们可以在合适的时机触发 use 的下载:

seajs.use('a');
seajs.use('b');
seajs.use('c');
seajs.flush(); // 在此处触发前面的 use 下载:http://path/to/??a.js,b,js,c,js
seajs.use('d'); 
seajs.use('e');
seajs.flush(); // 此处触发的下载是:http://path/to/??d.js,e.js

通过上面的示例,我相信你已经明白了 flush 插件的奥妙。这可以让我们在下载时机的控制上更灵活自由。

测试页面

http://seajs.github.com/seajs/tests/specs/extensible/seajs-flush/test.html

参考


性能优化无极限。我相信通过 Sea.js 还可以进行很多其他优化,如果你有好的经验,欢迎以插件的方式分享出来。世界因分享而美丽。

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.