小编peg*_*ect的帖子

我正在使用braintree dropin UI：

<div id="braintree-dropin"></div>

var braintree_client_token = "{{ braintree_client_token }}";

function braintreeSetup() {
    // Here you tell Braintree to add the drop-in to your division above
    braintree.setup(braintree_client_token, "dropin", {
        container: "braintree-dropin"
        , onError: function (obj) {
            // Errors will be added to the html code
            $('[type=submit]').prop('disabled', false);
            $('.braintree-notifications').html('<p class="alert alert-danger">' + obj.message + '</p>');
        }
    });
}

braintreeSetup();

并且生成的dropin有很多不必要的高度：

我该如何调试此程序以及可能导致这种情况的原因？我已经在生产环境和生活环境中进行了测试，但同样的问题仍然存在。

编辑：

您可以在此处找到并检查：http : //floarplans.com/order/

我使用输入类型='文件'与多个文件和一个单个文件.喜欢,

//single image
//IMAGE_TYPES is constant and defined with:define('IMAGE_TYPES',array('main','floor','bedroom1','bedroom2','bedroom3','kitchen','reception','garages','epc','other'));
@foreach(IMAGE_TYPES as $images)
    @if($images!='other')
    <div class="col-sm-10">
        <input type="file" class="form-control" id="{{$images}}_image" name="{{$images}}_image" accept="image/*" placeholder="<span> <i class='fa fa-plus-circle'></i>Click here or drop files to upload</span>"/>
    </div>
    @else
    //multiple
    <div class="col-sm-10">
        <input type="file" class="form-control" id="other_images" name="other_images[]" accept="image/*" placeholder="<span> <i class='fa fa-plus-circle'></i>Click here or drop files to upload</span>" multiple />
    </div>
    @endif
@endforeach

现在,我用jquery验证它,

var image_type ='<?=json_encode(IMAGE_TYPES);?>';
image_type = JSON.parse(image_type);
var max_image_size = 2;
$.each(image_type, function( index, value ) {
  if (value!='other') {
    $('#'+value+'_image').bind('change', function() { …

我使用了不同的JS分析器,如谷歌Chrome的时间轴,我们可以在其中捕获JS配置文件,内存等,它讲述了JS堆大小,文档,节点,监听器和消耗的时间以及关于页面的许多其他重要事项.如下图所示:

我使用的是Internet Explorer Profiler,它是新的,非常有效,它显示了内存使用情况和我的标识符功能和函数调用,我们可以在下面的图像中看到:

我在firefox中安装了一个插件(Tab内存使用),它告诉我在浏览器中使用Tab的内存.通过使用最佳实践改进代码,这对于减少页面大小非常有帮助.这是以前的页面大小(342 Mb),现在介于15 - 20 MB之间,请参见图片:

然后我研究了stackoverflow上的一些代码,这是谷歌Chrome控制台中所有JavaScript变量的查看列表我已经做了一些其他搜索以获取网页中的所有变量,但我还没有完成.

问题是:我想获得在该特定浏览器选项卡中具有内存分配的所有变量,以提高速度并减少内存使用.

我通过减少循环,未分配的变量和重用变量来改进了我的网页.我已经在javascript中实现了Save Command和Builder模式以获得最佳实践.我正在使用AngularJS和UnderscoreJs.因为我必须使用UnderscoreJS进行大量计算和阵列过滤.

如何列出在浏览器选项卡中分配了内存的所有变量？