标签: rendering

外部样式表是否在HTML之前加载?

如果我的<head></head>HTML页面部分中包含外部样式表,它们是否会在HTML之前加载并立即应用于渲染?让我介绍一下我的具体用例.

外部styles.css文件:

form label {
    display: none;
}
Run Code Online (Sandbox Code Playgroud)

包含表格的页面:

<head>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<form action="process.php" method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
</form>
Run Code Online (Sandbox Code Playgroud)

我可以确信标签在页面加载时是不可见的(由于CSS下载没有闪烁)吗?

否则,我可以内联添加样式属性,但这可能是维护的噩梦.

html css rendering order-of-execution

17
推荐指数
2
解决办法
7179
查看次数

如何在android webview中优化renderspeed

是否有可能提高webview中的渲染速度?使用简单的innerHTML,显示内容需要接近1秒,尽管js渲染需要几毫秒.使用IOS,即使使用性能较低的硬件,完全相同的代码也可以快速而完美地运行.

在Android下测试:2.3,3.2,4.0(Desire HD,Galaxy Nexus,Galaxy Tab)IOS:4,5(iPhone 3gs,4)

感谢任何有用的回应!

javascript optimization android rendering webview

17
推荐指数
1
解决办法
2万
查看次数

VueJS组件无法渲染

我有一个非常基本的vueJS应用程序,我正在关注该网站.

这是代码,为什么组件不呈现?

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

<div>
<ol>
  <todo-item></todo-item>
</ol>
</div>
Run Code Online (Sandbox Code Playgroud)

JS

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Vue.component('todo-item', {
    template: '<li>This is a list item</li>'
})
Run Code Online (Sandbox Code Playgroud)

javascript rendering vue.js vue-component

17
推荐指数
2
解决办法
3万
查看次数

CSS的速度

这只是一个帮助我更好地理解CSS渲染的问题.

可以说我们有一百万行.

<div class="first">
    <div class="second">
        <span class="third">Hello World</span>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

哪个是将Hello World字体更改为红色的最快方法?

.third { color: red; }
div.third { color: red; }
div.second div.third { color: red; }
div.first div.second div.third { color: red; }
Run Code Online (Sandbox Code Playgroud)

此外,如果中间的标签有唯一ID"foo",该怎么办?以上哪种CSS方法最快.

我知道为什么这些方法被使用等,我只是想更好地掌握浏览器的渲染技术,我不知道如何进行测试时间.

更新:很好的回答Gumbo.从它的外观来看,在常规站点中更快地完成标签的完整定义.因为它找到了父母并缩小了对找到的每个父母的搜索范围.

从某种意义上说,你可能会有一个非常大的CSS文件.

css performance rendering micro-optimization

16
推荐指数
3
解决办法
3165
查看次数

是否可以修改图像,以便有近视的人可以在没有眼镜的情况下清楚地看到它?

甚至更好,是否有软件可以做到这一点?

- 新细节

对于那些说这是不可能的人,我记得在大学时,盯着投影仪,类比焦点可以改变,所以我可以在没有眼镜的情况下获得清晰的图像.

rendering image

16
推荐指数
1
解决办法
4087
查看次数

OpenGL上的多线程渲染

我有一个多线程应用程序,我正在尝试使用不同的线程进行渲染.首先,我尝试在所有线程之间使用相同的渲染上下文,但我得到了其他线程的NULL当前上下文.我在互联网上看到,一个上下文一次只能在一个线程上.

所以我决定做一些与众不同的事情.我创建了一个窗口,我从中获取了HDC并创建了第一个RC.在那之后,我在线程之间共享这个HDC,并且在我创建的每个新线程中,我从同一个HDC获得一个新的RC,并使其成为该线程的最新版本.每次我这样做,返回的RC总是不同的(通常是前一个值+ 1).我做了一个断言来检查是否wglGetCurrentContext()返回一个RC,它看起来像是返回刚刚创建的那个.但是在进行渲染之后,我得不到渲染,如果我调用GetLastError()我得到错误6(无效句柄??)

那么,这是否意味着,尽管每次新调用wglCreateContext()都会给我一个新值,但这意味着所有这些不同的值都与OpenGL调用的"连接通道"相同?

这是否意味着我将永远不得不在线程上使先前的渲染上下文无效,并在新线程上激活它?我真的必须一直进行同步,还是有其他方法来解决这个问题?

c++ opengl multithreading rendering

16
推荐指数
3
解决办法
4万
查看次数

three.js:如何控制渲染顺序

我使用three.js

如何控制渲染顺序?假设我有三个平面几何,并且想要以特定顺序渲染它们,而不管它们的空间位置如何.

谢谢

3d optimization rendering three.js

16
推荐指数
1
解决办法
2万
查看次数

如何使波形渲染更有趣?

我写了一个波形渲染器,它接受一个音频文件并创建如下内容:

在此输入图像描述

逻辑非常简单.我计算每个像素所需的音频样本数,读取这些样本,平均它们并根据结果值绘制一列像素.

通常情况下,我会在大约600-800像素上渲染一首完整的歌曲,因此波浪非常紧凑.不幸的是,这通常会导致视觉效果不佳,因为几乎整首歌都是以几乎相同的高度呈现的.没有变化.

有趣的是,如果你看一下SoundCloud上的波形,几乎没有一个像我的结果一样无聊.他们都有一些变化.这可能是什么诀窍?我不认为他们只是添加随机噪音.

algorithm audio graphics rendering waveform

16
推荐指数
1
解决办法
2853
查看次数

wkhtmltopdf缺少SVG路径(渲染)

我正在使用HMTL代码中的图像,如下所示:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <svg height="291pt" version="1.1" viewBox="0 0 291 291" width="291pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs>  <style type="text/css">*{stroke-linecap:butt;stroke-linejoin:round;}  </style> </defs> <g id="figure_1">  <g id="patch_1">   <path d="M 0 291.4 L 291.4 291.4 L 291.4 0 L 0 0 z" style="fill:none;"></path>  </g>  <g id="axes_1">   <g id="line2d_1">    <path clip-path="url(#p6e64365aaf)" d="M 268.427273 145.7 L 207.063636 251.984936 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path>   </g>   <g id="line2d_2">    <path clip-path="url(#p6e64365aaf)" d="M 248.397453 148.307103 L 199.306544 233.335052 " style="fill:none;stroke:#000000;stroke-linecap:square;stroke-width:1.2;"></path>   </g>   <g id="line2d_3">    <path clip-path="url(#p6e64365aaf)" d="M 207.063636 251.984936 …
Run Code Online (Sandbox Code Playgroud)

html svg rendering wkhtmltopdf

16
推荐指数
1
解决办法
862
查看次数

OpenGL:渲染到纹理和帧缓冲对象的麻烦

我想将场景渲染到最初为空的纹理.为此,我使用一个Framebuffer对象,我附加一个空的2d纹理和一个深度缓冲区.设置完成后,为了测试,我在场景中绘制了一个简单的四边形.每个顶点都有不同的颜色,所以我最终期望纹理中有一个颜色插值的四边形.然后我使用包含四边形的纹理并将其映射到另一个四边形.所以,我在默认的Framebuffer中有一个四边形,它有一个包含彩色四边形的纹理.我希望这不会太混乱......

无论如何,我必须在这里遗漏一些东西,因为我得到的只不过是灰色的纹理.我基本上遵循了这些非常简单的指示.但是,我无法弄清楚我在这里缺少什么.如果有人能给我一些线索,我将不胜感激.

谢谢沃尔特


这是我到目前为止的代码://创建帧缓冲对象glGenFramebuffers(1,&frameBufferObject);

// create depth buffer
glGenRenderbuffers(1, &depthAttachment);

// create empty texture
int width = 512;
int height = 512;
int numberOfChannels = 3;
GLuint internalFormat = GL_RGB;
GLuint format = GL_RGB;

unsigned char* texels = new unsigned char[width * height * numberOfChannels];

glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

glTexImage2D(GL_TEXTURE_2D, 0, internalFormat, width, height, 0, format, GL_UNSIGNED_BYTE, texels);

glGenerateMipmap(GL_TEXTURE_2D);

delete[] texels;
texels = NULL;

// activate …
Run Code Online (Sandbox Code Playgroud)

opengl rendering render framebuffer texture-mapping

15
推荐指数
2
解决办法
3万
查看次数