标签: webpage-rendering

我已经设置了一个脚本来创建我们的应用程序的webshots.它运行完美,一切正常直到我遇到一个破坏网址的图像:

 "<img src='http://testserver.our.intranet/fetch/image/373e8fd2339696e2feeb680b765d626e' />"

我已经设法在使用下面的6秒后打破脚本,之前它只是永远循环.

但是,是否可以忽略网络请求(AKA取出图像DOM),然后继续创建没有图像的拇指,(或者注入的图像缺少图像!)

var page = require('webpage').create(),
    system = require('system'),
    address, output, size;

if (system.args.length < 3 || system.args.length > 5) {
    phantom.exit(1);
} else {
    address = system.args[1];
    output  = system.args[2];
    page.viewportSize = { width: 640, height: 640 };
    page.zoomFactor = 0.75;
    page.clipRect = { top: 10, left: 0, width: 640, height: 490 };
    try{
        page.open(address, function (status) {
            if (status !== 'success') {
                console.log('Unable to load the address!');
                phantom.exit();
            } else …

给定同一文档中的两个abitrary HTML元素A和B,如何找出哪个"更接近"用户(即如果它们重叠,哪一个模糊另一个)？

在W3C CSS规范描述堆叠内容,这符合渲染引擎应该实现.但是,我找不到在JavaScript程序,跨浏览器中访问此信息的方法.我所能读到的只是css z-index属性,本身并没有多说,因为大部分时间都设置为auto或者,即使表示为数值,也不是它实际显示方式的可靠指标(如果它们属于对于不同的statcking上下文,比较z-index是无关紧要的).

请注意,我对任意元素感兴趣:如果两个元素都在鼠标指针下方,则只有一个被认为是"悬停",所以在这种情况下我可以轻松找到最接近的元素.但是,我正在寻找一种更通用的解决方案,最好是不涉及重新实现渲染引擎已经执行的堆叠算法的解决方案.

更新:让我澄清一下这个问题背后的原因:我最近解决了一个暴露jQuery拖放机制限制的问题 - 它在删除时不会考虑z索引,所以如果一个元素模糊了另一个,它仍然可以在"后面"的元素中执行放置操作.虽然针对OP特定案例回答了相关问题,但一般问题依然存在,而且我所知道的解决方案并不容易.

alex下面的答案很有用,但对于手头的情况还不够:拖动时,拖动的元素本身(或者更确切地说是它的帮助器)是鼠标光标下面的最顶层元素,因此elementFromPoint将返回它而不是下一个最顶层的元素,我们确实需要(解决方法: 设置光标样式,使其位于助手之外).jQuery采用的其他交集策略也不仅仅考虑了一个点,这使得确定与助手交叉的最顶层元素的任务变得复杂化.能够通过实际z-index比较(或排序)元素将使得"z-index感知"交叉模式对于一般情况是可行的.

我在IE7中有显示问题,因为它以怪异模式渲染.我通过显示"document.compatMode"并返回"BackCompat"而不是"CSS1Compat"来确认这一点.使用IE8并恢复到IE7可以正常工作,因为这样可以避免怪癖.在简单的IE8中,我通过使用X-UA-Compatible标头强制渲染模式来修复它,但这对IE7不起作用.其他浏览器也会显示怪癖,但与IE不同,它不会将它们置于伪IE5.5模式,因此它们仍然可以正常渲染.

如何强制IE7在标准渲染模式下渲染而不是怪癖？我已经尝试将DOCTYPE设置为许多不同的选项,我没有添加xml序言.提前感谢您的回复.

我的问题是Chrome DevTools,特别是我对Timeline标签有疑问.因此,我已多次阅读,我的浏览器必须以60fps的速度渲染我的像素.有时虽然它有一些繁重的JS执行并阻止60fps发生.此外,如果我有一些CSS和JS导致重新计算和重新绘制DOM树(部分或完整树),一帧也可能需要超过16毫秒.这是我们的应用程序中这么长的帧的图片:

好的,在这里我可以清楚地看到,两个请求需要花费很多时间(192ms + 14ms),浏览器无法绘制60fps并且它甚至不能靠近那里.

虽然这是另一张图片:

所以现在好多了.现在它是~42fps.但现在我无法理解为什么..

我有几个"更新图层树"和"绘画"场合.一些鼠标事件,但它们都在这里<= 1ms.

在此框架中有12个这样的"事件".其中10个甚至不到0.30ms,所以如果我总结它们肯定会少于16ms(3.57,如果我算的正确),但Chrome说这个帧是23.9ms.

为什么Timeline说我这里有垃圾？我该怎么做才能摆脱它,以及如何知道瓶颈在哪里？

我在这里有点困惑,因为我在审查时间表时肯定会遗漏一些东西..所以,请给我一些详细的解释或一些关于如何摆脱这些"帆船"以及如何检测它们的详细教程.虽然我已经阅读了几篇文章并且几乎完成了Udemy关于性能的课程,但我仍然感到很困惑.

谢谢

为了这个问题,让"效率"意味着或多或少的页面渲染速度.尽管如此,我们还应该考虑平滑滚动等性能问题.

假设您在页面上放置条纹背景.从效率的角度来看,最好将图像平铺为100px(显示10个条纹),还是图像宽度为20px(显示两个条纹)？当然......大图像需要更多时间来加载,但我觉得在拼贴非常小的图像时我遇到了麻烦.有最佳点吗？

我开始认为这取决于浏览器(也许还有操作系统？),特别是在这个问题的第二部分:

为了实现半透明效果,平铺半透明的.png文件,或者使用CSS不透明度属性(再次出现大块与小块的问题)是否更有效？根据我的经验,旧版本的IE似乎表现得更好,平铺,半透明.png比使用CSS不透明属性更好(尽管我从未做过任何科学测试).

圆角是另一个很好的例子......在某些浏览器中,使用图像而不是CSS属性或JavaScript实现似乎使页面更快,滚动更平滑.

这真的是一个比CSS更广泛的问题,但这只是我最近一直在思考的问题.

-Peter

任何人都可以解释为什么那些空间(标有？)在那里？他们正在推迟页面加载.我认为这可能是页面/脚本解析时间,但对于一个简单的页面来说〜350ms看起来太多了; 好吧,有很多脚本,但它仍然看起来很多.

它能是什么？

ZF2文档描述了创建和注册备用渲染和响应策略.我已经读过了,但我真的不明白,如何使用策略.

我有一个应用程序,应该提供三种类型的输出(JSON,XML和HTML),具体取决于HTTP标头接受.我如何使用此案例的策略？

编辑:

不.忽略这个.这个空间被浏览器放在那里.

这是我的应用程序的HTML代码段:

    Correct answers: 
    0 / 6<br /><br />
    You have failed to pass the final test.

    <a href="/module/controller/course/id/5" class="accessible-link">
        Click here
    </a> 
    to return to the training.

如您所见,结束标记后面有一个空格.然而在浏览器中,空间被添加到锚内.所以它看起来像这样:

这是生成HTML的PHP​​代码:

<?php if (isset($this->correctAnswersCount) && isset($this->answersCount)): ?>
        <?php echo Zend_Registry::get('translate')->_('Po?et správnych odpovedí'); ?>: 
        <?php echo ToHtml($this->correctAnswersCount); ?> / <?php echo ToHtml($this->answersCount); ?><br /><br />
<?php endif; ?>
        <?php echo Zend_Registry::get('translate')->_('Závere?ný test sa vám nepodarilo úspešne absolvova?.'), "\n"; ?> 
        <a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
            <?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?>
        </a> …

出于某种原因,仅在Windows机器上,在本页的登录按钮上,我得到了这个难以解释的奇怪的模糊轮廓,所以请亲自看看:

http://zis.smartlyedu.com/login

它不会出现在Mac OS上,但会出现在Windows上.

有没有人遇到过这个？

这是按钮的CSS:

    div.input-submit input{
    outline:none;
    font-family:Helvetica, Arial, sans-serif;
    width:100px;
    height:35px;
    color:#fff;
    font-weight:normal;
    float:right;
    font-size:18px;
    text-shadow:#000 1px 1px 1px;
    border:1px solid #fff;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    -o-border-radius:20px;
    -ms-border-radius:20px;
    -khtml-border-radius:20px;
    border-radius:20px;
    background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.2)));
    background:-webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-moz-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:-ms-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
    background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2));
    background-color:#31639d;
    font-weight:bold;
    border:1px solid #fff
    }

我见过人们讨论相同的Javascript多次加载,因为代码每次运行时都会产生问题.

我在同一个DOM中多次包含相同的CSS文件(不能避免添加这个,因为我正在使用一些组件):

    <link href="style.css" rel="stylesheet" type="text/css">

1. DOM大小会增加吗？
2. 是否每次都在每个包含上呈现CSS文件？
3. 这会影响页面的性能吗？

注意:由于我使用相同的CSS文件,因此只下载一次.