单页面应用程序性能问题

时间:2016-08-01 09:53:52

标签: javascript angularjs

我们正在开发具有角度j的单页Web应用程序。我们的问题是当我们浏览不同的URL时,越来越多的java脚本被添加到浏览器内存中,因此使应用程序逐渐变慢。有没有办法提高这样的单一性能应用程序的大小会增加页面应用程序吗?

3 个答案:

答案 0 :(得分:1)

最好的方法是仅在需要时加载js文件。延迟加载是方法。最初只加载主要的js文件和,然后转移到另一个lazy loadoc.lazyLoad所需的js文件

oc.lazyLoad是解决问题的好方法。

下载var myApp = angular.module("MyApp", ["oc.lazyLoad"]);并将该依赖项注入您的应用,例如

testModule.js

你有一个名为myApp.controller("MyCtrl", function($ocLazyLoad) { $ocLazyLoad.load('testModule.js'); }); 的js文件,你知道该文件的用途在哪里。因此,在转到该URL之前,请加载您的js文件,如

// Parent
export default React.createClass({
  getInitialState() {
    return {
      usersLoaded: false
    }
  },

  componentDidMount() {
    fetch("/users/").then(response => {
      this._users = response.users;
      this.setState({
        usersLoaded: true
      });
    })
  },

  render() {
    if ( this.state.usersLoaded ) {
      return (
        <ChildComponent users={this._users} />
      )
    } else {
      return null;
    }
  }
});

// Child
export default React.createClass({
  render() {
    return <div>{this.props.users.map(some_function)}</div>
  }
});

了解更多信息Read here

答案 1 :(得分:0)

检查内存泄漏:

  • 删除$ rootScope侦听器,$ timeout,$ interval,$ watch on directive或controller destroy。
  • 删除指令destroy上的事件监听器。

如果它真的很慢,请尝试使用较少的手表,使用一次性绑定,使用ng-repeat轨道。但是,如果你有记忆问题,你仍然必须追踪它的增加量。

如果您希望轻松提升效果,请不要忘记在投入生产时将其添加到您的应用配置中:

$compileProvider.debugInfoEnabled(false);

答案 2 :(得分:0)

您应该将所有JavaScript文件都包含在一个文件中,以减少网络I / O.有一些工具可以做到这一点,只需google&#34; JavaScript concat&#34;。

您可以更进一步,缩小/ uglify您的JavaScript。

将您的JavaScript文件添加到主index.html文件中。您不应该在视图中重新加载它。

如果您仍然遇到性能问题,那么手头有一个更大的问题。