我的网站在我的 Chrome 上不断崩溃答案

【问题标题】：My site keeps crashing on my Chrome我的网站在我的 Chrome 上不断崩溃
【发布时间】：2013-10-02 09:42:25
【问题描述】：

由于某种原因，我的网站无法在 Google Chrome 中运行。它在 Firefox 中完美运行，没有特殊错误，但在 Chrome 中是禁忌。什么给了？

~~http://www.lemaineofficial.com/~~

（它说发生了错误，我可以尝试重新加载。但是它总是给出同样的错误）

当我的 javascript 想要执行时（它会短暂地加载网站），Chrome 只是中止了页面。我从来没有见过这样的错误，不知道如何排除故障，除了删除功能直到它工作，我会尝试这样做。

我只需要知道使用 javascript 在 Chrome 上导致这种行为的原因，或者知道如何轻松解决它。

注意：本网站可在 Firefox 中正常运行，不会崩溃。

编辑#1：

这个错误并不一定意味着它是由于进一步检查后的javascript引起的。我可以假设我并不是唯一一个遇到此错误的人，但是是否有人使用 Chrome 可以查看该网站？谢谢你的理论。如果我对此有所了解，我会更新。

编辑#2：

这里似乎有问题，但定义的每个值都是必需的

body.visitor_mode div#content {
    /* Outruled cause */
    -webkit-column-gap: 5vw;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
    -webkit-column-width: 45vw;
    -moz-column-width: 45vw;
    column-width: 45vw;
}

这里有什么东西会导致 Chrome 崩溃吗？

编辑#3：

我现在已经为我解决了这个问题。这是由于使用了column-gap 和column-width 以及单位vw 引起的，Chrome 似乎并不喜欢这些。我在 javascript 中重新制作了这种行为，而不是在 Simons 的回答中给出。

目前我唯一缺少的是“来自我的column-width 的正确.width()。Firefox 给了我实际宽度，而 Chrome 只是给了我column-width 值。感谢 Simons 编辑，我设法得到了一半的好解决方案。但是，我使用了 css transition，这使得 offset().left 不可靠。还有其他方法可以获得该值吗？

【问题讨论】：

一种可能的调试方法是删除部分代码，直到页面正常工作......然后可以查看最后删除的部分
这是我打算做的最后手段，但由于我多年来从未遇到过这种行为，我想知道是什么原因导致它在 Firefox 中运行，但在 Chrome 中却不行。
如果它帮助我在chrome上崩溃，那么它一定是那么糟糕的js代码。按照 arun 的建议清理您的 lemaineofficial.com/formize/js_files/cmp_.js 文件
即使禁用了 javascript 也会崩溃！
Chrome 最近一直在为我的许多网站执行此操作。还没有找到其中的模式。

标签： javascript jquery google-chrome

【解决方案1】：

问题似乎是 iframe /page/story 中 css 的一部分。当您将 -webkit-column-gap 中的单位从 vw 更改为 px（或将其完全删除）时，它会完全打乱 iframe 的布局，但不会再使浏览器选项卡崩溃。

我认为这是 Chrome 渲染引擎中的一个错误，它与 column-gap css 属性中的新 vw 单元冲突。

如果你想要一个简单的两列布局，我建议使用两个 div

<div style="width: 50%; float: left;"></div>

编辑

一种可能的方法是使用像素值通过 javascript 更改 css 值。

function onResize() {
    var width = 0.45 * $(window).width();
    var gap = 0.05 * $(window).width();
    $("#content")
        .css("-webkit-column-width", width + "px")
        .css("-webkit-column-gap", gap + "px");
}

$(function() {
    if (/webkit/.test(navigator.userAgent.toLowerCase())) {
        $(window).resize(onResize);
        onResize();
    }
});

第二次编辑

要获取包含列的 div 的宽度，可以插入

<span id="endmarker"></span>

然后用$("#endmarker").position().left + columnWidth得到左边的位置，也就是所有列的总宽度。有一种特殊情况，当内容完全匹配（文本上方或下方没有像素空间）成两列时，无论出于何种原因，跨度似乎都移到了第一列。

第三次编辑

我在第二次编辑中找到了问题的解决方案，如果您在标记范围 (<span id="endmarker">&nbsp;</span>) 中添加一个空格，问题似乎就消失了。

【讨论】：

这会破坏设计，因为它应该向右增长。如果您在 Firefox 中打开主页并缩小它，您就会明白我的意思。我将尝试对此进行更多搜索，看看是否可以找到更理想的解决方案。
确实可以在 javascript 中运行它，而且我也可以这样做，因为我已经使用了 resize 事件。会就此问题与您联系。
我已经添加了；只有最后一个问题。 chrome 中的 .width() 属于 one 列，而不是全部。如何像 Firefox 一样获得总宽度？
你是什么意思？ $(window).width() 返回窗口的总宽度（在您的情况下为 iframe）。
在 Firefox 中，div.text 的 .width() 如果拆分为 3 列或更多列，则会增加，但在 Chrome 中，.width() 只是宽度上的唯一列。我需要了解如何获取整个宽度或获取div 的列数。

【解决方案2】：

看起来这可能与您的 hashchange 事件有关。 StackOverflow 上有一个帖子，其他人在使用它时遇到了问题，可能值得一读：$(window).hashchange() doesn't work

我建议注释掉

$(function() {
    $(window).trigger('hashchange');
});

并查看页面是否正确加载，然后从那里开始工作。

关于浏览器兼容性，我觉得这个网站很有用：http://caniuse.com/#search=hash

【讨论】：

讽刺的是你让我参考我自己的答案：D
糟糕！我没注意到:)

【解决方案3】：

在 iframe 加载的 Story.html 文件中，您在 body 中有一些样式定义，将其移至 head 部分:)（这不是问题，只是看起来很糟糕）

你也有同样的风格定义

body.visitor_mode div#content

改成

body.visitor_mode div.content

（您在代码中使用的是 btw :P）

这解决了我的 Chrome 上的问题（版本 30.0.1599.66 @ 64bit Linux from Google Repo :P） - 页面已成功加载

【讨论】：

【解决方案4】：

好的，这是我目前的发现

在 Mac 上进行所有测试

Chrome：显示类似您的错误 FireFox：工作，但非常滞后（i7 处理器，8gig ram 和 SSD），这不应该发生 Safari：崩溃。

当我检查 safari 的崩溃日志时，我得到了导致它的部分的堆栈跟踪：

0   com.apple.WebCore               0x00007fff8bf08384 WebCore::RenderBlock::calcColumnWidth() + 260
1   com.apple.WebCore               0x00007fff8c89c9e7 WebCore::RenderBlock::recomputeLogicalWidth() + 119
2   com.apple.WebCore               0x00007fff8bf072eb WebCore::RenderBlock::layoutBlock(bool, int) + 139
3   com.apple.WebCore               0x00007fff8bf06f84 WebCore::RenderBlock::layout() + 52
4   com.apple.WebCore               0x00007fff8bf166d9 WebCore::RenderBlock::layoutPositionedObjects(bool) + 441
5   com.apple.WebCore               0x00007fff8bf07a98 WebCore::RenderBlock::layoutBlock(bool, int) + 2104
6   com.apple.WebCore               0x00007fff8bf06f84 WebCore::RenderBlock::layout() + 52
7   com.apple.WebCore               0x00007fff8bf06ed7 WebCore::RenderView::layout() + 759
8   com.apple.WebCore               0x00007fff8bf063b6 WebCore::FrameView::layout(bool) + 1702
9   com.apple.WebCore               0x00007fff8bf05c65 WebCore::Document::updateLayoutIgnorePendingStylesheets() + 133
10  com.apple.WebCore               0x00007fff8c0c2d72 WebCore::Element::offsetHeight() + 18
11  com.apple.WebCore               0x00007fff8c0c2d4d WebCore::jsElementOffsetHeight(JSC::ExecState*, JSC::JSValue, JSC::Identifier const&) + 13

所以这是一个与 WebKit 相关的崩溃，它与渲染视图有关，我建议你检查你的代码并开始删除部分直到它工作。

我的第一个建议是删除大量文字：

Brödtext som borde vara här！ Brödtext som borde vara här！

看看这是否有帮助，你还必须减小背景图像的大小，它们很大，如果由于内存问题它们不会杀死大多数浏览器，它们会占用你的大量带宽。

【讨论】：

@Johannes 那是不久前的事，几乎不记得我做了什么，但我要么查看了检查器 (Cmd + Option + I) 菜单并选择了调试器选项卡并设置了一个未捕获的异常断点，要么转储了 @ 的内容987654323@，这是在 Mac 上完成的
感谢@Mostafa 的回复。我很好奇，因为我从未见过这类日志，我一直在尝试调试渲染引擎问题，这对于常规开发人员工具来说是相当困难的。
@Johannes 很乐意提供帮助，如果这不起作用，请告诉我，我可以尝试更好地记住我到底做了什么！

【解决方案5】：

我知道这很奇怪，但有时 cookie 会导致这个问题，它曾经对我有用。删除所有 cookie，然后重试。

【讨论】：

这个错误发生的不止我一个人，所以很可能不是 cookie 问题。

【解决方案6】：

您的图片非常大 (2048x1152)，您有 4 张。

首先尝试使用较小的图像，看看 Chrome 是否可以处理。

您还应该量化您的图像。如果不必显示较大的图像，则检测分辨率并发送较小的图像。（我的 FireFox 也崩溃了（24.0））

【讨论】：

在 Chrome 开始拒绝该网站之前，这些图片在早期就可以完美运行。

【解决方案7】：

首先，我会尝试在服务器上注释掉您的五个 javascript 引用。这不是太多的工作。看看你是否得到了生病的文件夹图标。

如果没有出现生病的文件夹，请重新添加一个。再次在 Chrome 中将其拉起。继续这个过程，直到找到断点。

然后，报告你的发现。

【讨论】：

【解决方案8】：

我不知道这是否有帮助，但我能够在 chrome 开发人员工具窗口中看到一个错误。

为了看到这个： 1.打开一个新标签 2.按F12打开开发工具 3. 导航到网站 4. 单击目标已崩溃的黑色弹出窗口上的 X 5. 单击控制台选项卡。

【讨论】：