Javascript 我的网站在我的Chrome上不断崩溃

由于某种原因，我的网站不会在谷歌浏览器上运行。它在Firefox中完美无瑕，没有特殊错误，但在Chrome中却是一个禁忌。有什么好处

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

当我的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： 我现在已经为自己解决了这个问题。这是因为使用了

列间距

和

列宽

以及Chrome似乎不喜欢的单位

vw

。我用javascript重新创建了这个行为，而不是Simons answer中给出的行为

---

目前我唯一缺少的是我的

列宽中的“正确的
.width（）
。Firefox给了我实际的宽度，而Chrome只给了我
列宽的值。多亏了Simons edit，我得到了一半好的解决方案。然而，我使用了css
transition
，这使得
偏移（）左
不可靠。是否有其他方法获取该值？
看起来可能与您的hashchange事件有关。StackOverflow上有一篇帖子，其他人在使用时遇到问题，值得一读：

我建议评论一下

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

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

关于浏览器兼容性，我觉得这个网站很有用：
我知道这很奇怪，但有时候cookies会导致这个问题，它对我有用一次。删除所有cookies，然后再试一次。
你的图像非常大（2048x1152），你有4张

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

你也应该量化你的图像。
检测分辨率并发送较小的图像（如果不必显示较大的图像）。
（我的FireFox也崩溃了（24.0））
首先，我会尝试在服务器上注释你的五个javascript引用。这不是太多工作。看看你是否得到病态文件夹图标

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

然后，报告您的发现。
在iframe加载的Story.html文件中，您在body中有一些样式定义，将其移动到head部分：）（这不是问题，只是看起来很糟糕）

同样，在相同的样式定义中

body.visitor_mode div#content

换成

body.visitor\u模式div.content

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

这就解决了我的Chrome（Google Repo:p提供的版本30.0.1599.66@64位Linux）上的问题-页面已成功加载
好，下面是我目前的发现

所有测试都在Mac上进行

Chrome：显示与您类似的错误
FireFox：工作正常，但非常滞后（i7处理器、8gig ram和SSD），这不应该发生
狩猎：撞车

当我检查safari的crashlog时，我得到了导致它的部件的堆栈跟踪：

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

看看这是否有帮助，你还必须减少背景图像的大小，它们很大，如果它们不会因为内存问题而杀死大多数浏览器，它们会占用你大量的带宽。
我不知道这是否有帮助，但我能够在chrome开发者工具窗口中看到一个错误。

为了看到这一点：
1.打开一个新选项卡
2.按F12打开开发工具
3.导航到网站
4.单击黑色弹出窗口上的X，表示目标已崩溃
5.单击控制台选项卡。
问题似乎是iframe
/page/story
中css的一部分。
当您将
-webkit column gap
中的单位从
vw
更改为
px
（或将其完全删除）时，会完全扰乱iframe的布局，但不会再使浏览器选项卡崩溃

我认为这是Chrome渲染引擎中的一个缺陷，它确实与
列间距
css属性中的新
vw
单元相冲突

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

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

第二次编辑

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

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



然后使用
$（“#endmarker”）.position（）.left+columnWidth
获取左侧位置，这是所有列的总宽度。有一种特殊情况，当内容完全匹配（文本上方或下方没有像素空间）为两列时，无论出于何种原因，跨度似乎会移动到第一列

第三次编辑

我在第二次编辑中找到了问题的解决方案，如果在标记范围中添加空格（
）问题似乎消失了。
一种可能的调试方法是删除部分代码，直到页面正常工作……然后可以查看最后删除的部分这是我打算做的最后一种方法，但因为我多年来从未遇到过这种情况
<span id="endmarker"></span>