问题标签 [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.
javascript - 有没有办法覆盖浏览器呈现页面的方式？
我大致知道浏览器是如何解析网站的，以及它是如何完成从我输入stackoverflow.com到浏览器中的页面的所有工作的。
这里的问题是我怎样才能覆盖或操纵它的行为，以便按照我想要的顺序强制执行一组特定的任务。
我的意思是这样的：
- 仅下载网站首屏部分的 HTML 代码。
- 下载并解析网站首屏部分的样式表。
- 首屏渲染
- 下载首屏图片
- 下载首屏的JS
- 在解析 JS 的同时，下载网站的另一部分
- 重复...
在我的示例中，我只想尽快渲染首屏，然后渲染页面的其余部分。
显然，这是一个非常简化的例子，我询问是否可以做，而且我想知道是否有一些库可以实现这个功能（或类似的东西）。
javascript - 如何正确理解 devtools 时间线？
我的问题是关于 Chrome DevTools，特别是我对 Timeline 选项卡有疑问。因此，正如我多次阅读的那样，我的浏览器必须以 60fps 的速度渲染我的像素。有时虽然它执行了一些繁重的 JS 并阻止了 60fps 的发生。此外，如果我有一些 CSS 和 JS 导致重新计算和重新绘制 DOM 树（部分或完整树），一帧也可能需要超过 ~16 毫秒。这是我们应用程序中这么长帧的图片：
好的，在这里我可以清楚地看到，两个请求花费了很多时间（192 毫秒 + 14 毫秒），浏览器无法绘制 60 fps，甚至没有接近那里。
虽然这是另一张照片：
所以现在好多了。现在它是~42fps。但现在我不明白为什么..
我有几个“更新图层树”和“绘画”场合。一些鼠标事件，但这里所有的都是 <=1ms。
在这一帧中有 12 个这样的“事件”。其中 10 个甚至小于 0.30 毫秒，所以如果我将它们全部相加，肯定会小于 16 毫秒（如果我计算正确，则为 3.57），但 Chrome 说这个帧是 23.9 毫秒。
为什么时间轴说我这里有垃圾？我应该怎么做才能摆脱它以及如何知道瓶颈在哪里？
我在这里有点困惑，因为我在检查时间线时肯定会错过一些东西。所以请给我一些详细的解释或一些关于如何摆脱这些“垃圾”以及如何检测它们的详细教程。尽管我已经阅读了几篇文章并且几乎完成了 Udemy 关于性能的课程，但我仍然感到困惑..
谢谢
automated-tests - 如果网页呈现的结果与预期的差异超过 n%，如何获得警告？
如果我可以使用例如 Chrome 构建一个网页，然后获得一个自动化测试工具来在其他 10 个浏览器中呈现该页面，我会很高兴。如果它呈现的页面差异超过 n%，那么我想要一个屏幕截图和一个警告。
这样的工具存在吗？
reactjs - 同构 React 应用程序中的 SEO 隐藏
我们目前有一个使用 PHP 构建的媒体内容网站，它完全在服务器上呈现。我们想基于 React+Redux+react-router-redux 和一个 API 来重建它。SEO 对我们来说至关重要，我们特别想涵盖 Google、Bing、百度、Yahoo 和 Yandex，其中最后 4 个在爬取 AFAIK 时不运行 JS。我想知道这方面的最佳做法是什么。
我们目前正在考虑检查客户端的用户代理，如果是爬虫则在服务器上渲染 React，如果不是则在客户端上渲染。这算不算伪装？在实践中，内容应该相同。
我也对谷歌说它在它抓取的网站上处理 JS 的方式感到担忧和困惑，说的是“它在大多数情况下都有效”。
javascript - javascript中的内存泄漏以获取更大的字符串
我正在向 javascript 函数发送 base64 字符串，但是当我一次又一次地调用它时它会导致内存泄漏。我的直觉是存储在 javascript 变量中的值没有被正确释放。
我从匿名函数调用函数，如下所示匿名函数是从 iOS 本机端调用的，它将 base64 发送到网页
AFAIK JS 是垃圾收集语言，因此这种内存泄漏问题不应该发生，但它确实发生了。
当内存泄漏发生时，它会被 iOS 杀死。看一下屏幕截图。
这个问题与此有关
javascript - asp.net mvc 将任何数据从使用 $.get() 呈现的局部视图传递到 ContentPage
我正在尝试使我的 Web 应用程序像桌面应用程序一样。
我也没有使用任何_LayoutPageand @RenderBody()。
我有一个ContentPageas MasterPage 和一个名为main
我正在使用ajax get方法来呈现我的视图或部分视图，如下所示：
我设法用javascript函数注入我的script和文件。css
现在我想在不使用 javascript 函数的情况下传递一些特定的数据。
我猜它可以通过使用 ViewBag 来实现。
我想从我的传递该数据partialView：
像我MainPage这样：
<body class="@ViewBag.BodyClass">
我怎样才能做到这一点？
小记：请忽略我是新手，名声低
javascript - 如何使用 phantomjs 下载包含所有相关内容的网页
我想下载整个网页以及使用 PhantomJS 在任何浏览器中呈现网页可能需要的内容（包括 css、javascript、图像、外部资源）。我不想执行脚本，而只是解析 css 和 javascripts 以获得更多内容链接并下载它们。
我尝试使用 wget （完全符合我的需要，但速度很慢，因为它使用与网络服务器的单个 tcp 连接）和 httrack （下载整个网站，在我的情况下我只想下载渲染页面所需的内容）之类的工具通过递归解析文件中的链接）。我目前正在尝试为此目的使用 phantomjs，但找不到正确的使用方法。
任何帮助/指针都非常感谢。
angularjs - angularjs 1.x 中的页面如何加载（流程）？
我有一个 angularjs 应用程序，其中包含所有内容，即控制器、指令、服务、工厂、配置和运行功能等。
但我总是对功能流程感到困惑。
假设我有一个 loginController、loginService、loginView、一些指令以及我们在应用程序的配置和运行阶段正在做的一些事情。
现在可以有不同的场景。
(a) 首次登录页面加载。
(b) 点击提交按钮，将我们带到一些不同的视图。
(c) 刷新登录页面或从其他视图重定向到登录页面。
在上述所有情况下
我问这个问题是因为每次我需要修复一些错误或实现新功能时，我都需要在浏览器中放置调试器以查看首先调用哪个文件函数。
如果有人可以帮助我制作一些流程图/图表（通用流程），那将是一个很大的帮助。
任何帮助都是可观的
谢谢
android - 混合应用程序中的网页呈现不正确
到目前为止，我们有一个在 Android 和 IOS 上运行的混合应用程序，有数百名用户。在这个数字中，我们遇到了 2 部无法正确呈现我们网站网页的手机，分别是 Vodafone Prime 6 和三星 Galaxy Ace 3。这是 Prime 的屏幕截图。
网页使用 IFrames 和 SmartMenus，否则我认为没有什么不寻常的。请问有人对如何解决这个问题有任何建议吗？
javascript - chrome devtools时间线中的长帧调试
我无法在 chrome devtools 中调试我的 javascript 性能。我正在制作一些繁重的动画，并且在我的时间线中遇到了一些我不理解的东西（在运行一些动画时）。
我用红色圆圈标记了点击事件。上面写着绿色“动画”的蓝色方块是动画（真是令人惊讶）。红色方块是我遇到问题的地方。
它需要 300-400 毫秒，并且在动画结束后发生。调用堆栈几乎是空的，我不是开发工具专家。有什么明显的事情发生了，我没有看到吗？
此外，如果我再等一会，动画就会运行得更流畅，那些红色的长帧就会消失。
在这个项目中，我使用 Backbone、下划线、jQuery 和 TweenMax 来制作动画。