问题标签 [webpage-rendering]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
200 浏览

html - Chrome 在页面完全加载之前取消点击链接请求。而FF没有

我的网络应用程序存在前端问题:例如,我有一个页面,该页面上执行了大量 JS 代码。上面有一个链接,例如

我想在页面完全加载之前单击此链接,实际上我可以在 FireFox 中完成。当前页面停止加载,浏览器将我重定向到单击的链接。但是在 Chrome 中没有任何反应,我必须等到页面完全加载。在其他情况下,我在 DevTools 中看到此请求得到“状态 = 取消”如何更改 Chrome 以以其他方式处理我的链接?如果 Chrome 用户想进一步点击链接,他们不想等到页面加载...

我读过关于预渲染和类似的东西,但仍然不知道如何解决它......

我会很感激任何提示。

0 投票
1 回答
71 浏览

html - 响应式网站上的 IE 渲染问题

这个响应式页面(和类似页面)在 Chrome 和 Firefox 中运行良好,但是当浏览器窗口变小时在 IE 中查看时它无法正常运行。

视口似乎没有按预期调整大小,文本流动太宽,图像没有缩小。

这在桌面 IE 中问题不大,但确实意味着 Windows Phone 用户无法正常查看网页。

我认为现代版本的 IE 已经解决了这些问题?

有谁知道是什么导致了这个问题?

0 投票
0 回答
34 浏览

css - 为什么我的网页上的文字出现在图片之后?

在我的个人页面jcubic.pl上,当页面加载一秒钟时,文本是黑色的。为什么会这样?

当我将颜色更改为反转时,我有相同的文本是不可见的。似乎在文本出现之前首先加载图像(它是 img 标签)。

Google PageSpeed Insights 说我应该优化我的 css 文件的 CSS 交付(我使用 webfonts),这就是我得到这个的原因吗?

0 投票
1 回答
813 浏览

dom - 如何在 chrome 中查找总 DOM 处理和页面渲染时间

如何在 chrome 中查找特定页面的总 DOM 处理和页面渲染时间(在本地运行).. 我想查看整个页面的总时间,而不是页面中的单个资源。

0 投票
1 回答
168 浏览

html - 使用 selenium webdriver 找出网页中 webelements 的加载时间

我有一个网页(HTML 5),其中有 4 个图表,一旦页面中的静态内容出现,每个图表需要不同的时间来加载。加载显示在网页中,使用所有 4 个图表的“渲染”圆形图像。我想知道每个图表显示“渲染”圆圈的时间。请帮助我使用 selenium webdriver 获得解决方案。

0 投票
2 回答
648 浏览

php - hook_menu 不适用于自定义模块

可能是我很明显,但是一个简单的自定义 Hello world 模块不起作用。我花了几天时间试图解决这个问题,但没有任何进展。

hello_world.info

hello_world.module

我正在尝试访问 localhost/mysite/hello_world/ 的页面

.module 和 .info 文件的路径是 htdocs/mysite/sites/all/modules/custom

由于 hook_menu 是开发的基础,我被困住了。请帮忙。

顺便说一句,hook_menu 是否有替代方案来呈现页面?

提前致谢。

0 投票
1 回答
712 浏览

html - CSS 性能与媒体查询放置

我正在第二次尝试为我的企业设计一个响应式网站。我想知道在考虑浏览器渲染性能的情况下组织我的 css 文件的最佳方法。

将只有一个 css 文件,包括所有媒体查询(有三个中断:全尺寸、平板垂直、电话)。目前我所有的媒体查询都在文件的末尾(更容易找到我目前正在微调的内容)。我曾考虑为每个中断创建一个完整的 css,然后根据媒体查询单独调用它们,但最近阅读测试表明浏览器仍然下载所有不同的 css 文件,但只使用适当的文件,这意味着更多的下载没有任何好处。

一旦一切准备就绪,最好将各种 MQ 移动到它们的“默认”css 对应项之后(即垂直平板正文字体大小,紧跟在“默认”正文字体大小之后)。或者浏览器在开始渲染页面之前是否通读了整个 CSS 文件。

将 MQ 作为片段分散在 css 文件周围,由于每个片段的复制 @media 代码,会导致更大的初始 css 文件下载。但是如果它使浏览器渲染得更快......

让我想知道的方面是基本字体大小,因为我将针对平板电脑、手机和台式机稍微修改它以适应观看距离。由于所有字体大小、填充和边距都基于 rem 单位,因此更改基本大小会影响很多项目。

那么从纯粹的性能角度(下载和浏览器渲染)来看,一种方法比其他方法更可取吗?

额外细节 ...

我想也许我应该问的是,浏览器如何使用 css 文件。它是否会读取整个 css 文件然后开始渲染?或者它是从第一行 css 开始渲染,然后是下一行和下一行?

0 投票
2 回答
1306 浏览

javascript - 服务器端或客户端渲染

在服务器端和客户端渲染之间构建 Web 应用程序时如何预先决定。是否有适用于所有网站的一般准则或最佳实践?应该推荐什么,服务器端渲染、客户端渲染还是两者的混合?

有人说是否选择客户端/服务器端渲染取决于用例。我仍然不确定哪种情况更适合客户端与服务器端渲染。

我们如何预先决定是使用客户端呈现的页面还是服务器呈现的页面。这有中间立场吗?

0 投票
2 回答
643 浏览

css - Chrome和Firefox中具有特定行高的文本背景不同

我试图获得一个“跟随”文本的半透明背景:即背景不应该是一个矩形框,而是一个在每个换行符处停止的“锯齿状框”。

像这样:

文字背景是锯齿状的bo

我用以下风格做到这一点:

可以在这里看到一个例子:http: //jsbin.com/texala/6

问题是 Firefox 和 Chrome 以不同的方式呈现这些。这两个浏览器使用完全相同的.woff字体(不是),并且尝试从cssreset.com 进行.woff2的所有不同重置仍然不起作用。

问题

您在这里可以看到,每行的背景在 Firefox 中是重叠的,但在 Chrome 中没有。

Chrome line-height + padding 渲染 Firefox 行高 + 填充渲染

我将 OS X 10.7.5 与 Firefox 35.0.1 和 Chrome 40.0.22.14.111 一起使用

我知道字体渲染因平台和浏览器而异,但以像素为单位明确设置了行高和字体大小(和填充)——这两种渲染中的一种不是错误的吗?

此外 - 有没有人解决这个问题,以便背景覆盖行之间的所有空间,在 Chrome 和 Firefox 中没有重叠?

0 投票
0 回答
32 浏览

html - 页面高度较低的浏览器/屏幕渲染问题

我有一个复杂的问题,我无法找出其来源。

渲染错误的示例屏幕截图

所以基本上问题是,我的主页只有 600 像素的高度,上面的内容非常少。而我的大多数其他页面都有更多内容。

现在,当我单击任何其他页面并返回主页时,它会在底部显示上一页部分。

现在,即使我刷新我的页面,它也不会被删除。

删除它的唯一方法是打开任何其他窗口/应用程序。

我的 CSS 代码

任何帮助是极大的赞赏。谢谢。