小编Rob*_*low的帖子
哪些CSS选择器或规则可以显着影响现实世界中的前端布局/渲染性能？
是否值得担心CSS渲染性能？或者我们是否应该完全不用担心CSS的效率而只关注编写优雅或可维护的CSS？
此问题旨在成为前端开发人员的有用资源,其中CSS的某些部分实际上可能会对设备性能产生重大影响,以及哪些设备/浏览器或引擎可能会受到影响.这不是关于如何编写优雅或可维护的CSS的问题,它纯粹是关于性能的(尽管希望这里写的内容可以提供关于最佳实践的更多一般文章).
现有证据
谷歌和Mozilla已经编写了关于编写高效CSS的指南,CSSLint的规则包括:
避免看起来像正则表达式的选择器.不要使用复杂的相等运算符来避免性能损失
但是他们都没有提供任何证据(我能找到)这些证据的影响.
一个高效的CSS css-tricks.com文章认为(概述效率的最佳做法的负载之后),我们应not .. sacrifice semantics or maintainability for efficient CSS这些天.
一个完美杀死博客文章建议,border-radius并box-shadow呈现数量级比简单的CSS规则慢几个数量级.这在Opera的引擎中非常重要,但在Webkit中却微不足道.此外,粉碎杂志CSS基准测试发现,CSS3显示规则的渲染时间不明显,并且比使用图像渲染等效效果要快得多.
知道你的移动测试各种移动浏览器,并发现他们都快速地(在12毫秒内)渲染CSS3,但看起来他们在PC上进行了测试,因此我们无法推断手持设备如何在CSS3中执行一般.
目前有 很多 的文章如何编写高效的CSS在互联网上.但是,我还没有找到任何全面的证据表明,严重认为CSS实际上会对网站的渲染时间或快速性产生重大影响.
背景
我为这个问题提供了赏金,试图利用SO的社区力量来创建一个有用的,经过深入研究的资源.
推荐指数
解决办法
查看次数
使用GD和libjpeg支持编译PHP
我编译自己的PHP,部分是为了更多地了解PHP如何组合在一起,部分是因为我总是发现我需要默认情况下不可用的模块,这样我就可以控制它.
我的问题是我无法在PHP中获得JPEG支持.使用CentOS 5.6.以下是编译PHP 5.3.8时的配置选项:
'./configure' '--enable-fpm' '--enable-mbstring' '--with-mysql' '--with-mysqli' '--with-gd' '--with-curl' '--with-mcrypt' '--with-zlib' '--with-pear' '--with-gmp' '--with-xsl' '--enable-zip' '--disable-fileinfo' '--with-jpeg-dir=/usr/lib/'
该./configure输出表示:
checking for GD support... yes
checking for the location of libjpeg... no
checking for the location of libpng... no
checking for the location of libXpm... no
然后我们可以看到GD已安装,但JPEG支持不存在:
# php -r 'print_r(gd_info());'
Array
(
[GD Version] => bundled (2.0.34 compatible)
[FreeType Support] =>
[T1Lib Support] =>
[GIF Read Support] => 1
[GIF Create Support] => 1
[JPEG …推荐指数
解决办法
查看次数
HTML模板JavaScript polyfill
我正在寻找最符合标准/面向未来的前端HTML模板方法.
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
有没有人知道是否已经存在任何好的JavaScript polyfill使 <template>元素可以跨浏览器方式使用？最好符合本标准.
难点
根据HTML5Rocks指南,这些模板具有以下属性:
- "它的内容在激活之前是有效的惰性"
- "脚本无法运行,图像无法加载,音频无法播放"
- "内容被认为不在文件中"
- "模板可放置在任何地方内的
<head>,<body>或<frameset>"
我认为用JavaScript polyfill纯粹实现所有这四个属性是不可能的,因此任何解决方案都只是部分解决方案.
推荐指数
解决办法
查看次数
让Git关注重命名和编辑的文件
推荐指数
解决办法
查看次数
Android-html输入在软键盘打开时失去焦点(ASP.net)
我在ASP.net上写了一个网页登录表单.
使用Nexus 4,安装Android 4.2.1,本机Chrome浏览器 - 当我点击<input>字段时,会出现软键盘,然后该字段立即失去焦点.我必须<input>在键盘已经打开的情况下再次单击该字段以实际输入文本.
这在桌面上的Chrome中不会发生.
我在ASP用户控件中有以下登录表单:
<asp:Login ID="login_form" runat="server" OnLoginError="OnFail" OnLoggedIn="OnLoggedIn" RenderOuterTable="false" RememberMeSet="True">
<LayoutTemplate>
<asp:Panel runat="server" DefaultButton="LoginButton" CssClass="members-login">
<fieldset>
<label for="UserName">Username</label>
<asp:TextBox ID="username" placeholder="e.g. joebloggs12" runat="server"></asp:TextBox>
<label for="Password">Password</label>
<asp:TextBox ID="password" runat="server" placeholder="e.g. 1234" TextMode="Password"></asp:TextBox>
<label id="RememberMe">Remember me</label>
<asp:CheckBox ID="RememberMe" runat="server" />
<asp:Button CssClass="button" ID="LoginButton" runat="server" CommandName="Login" Text="SUBMIT" />
</fieldset>
</asp:Panel>
</LayoutTemplate>
</asp:Login>
在浏览器中看起来像这样:
<div class="members-login" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton')">
<fieldset>
<label for="UserName">Username</label>
<input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$username" type="text" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_username" placeholder="e.g. joebloggs12" />
<label for="Password">Password</label>
<input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$password" type="password" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_password" …推荐指数
解决办法
查看次数
我应该使用绝对字体大小(小,中,大等)吗？
W3C维护了一系列关于如何在CSS中调整字体大小的建议 - 最后一次更新于2010年4月.根据这个页面,设置字体样式的最佳方法是使用"绝对"字体大小:
更好的是,如果为文档设置了基本字体大小,则使用绝对大小([xx-small | x-small | small | medium | large | x-large | xx-large])或相对大小([size |在定义文档中特定元素的字体大小时.
然后规范在表中定义这些字体大小.据我了解这个表,small应该是2/3(66%)的大小medium,large应该是4/3(133%).
如果我对此进行测试,我对W3C指定的比率的解释会得到相当不同的结果.结果在最新版本的Chrome,Firefox和IE中都是一致的,但不符合W3C的建议.small是81.25%不是66%,而且large是112.5%不是133%.
这是否意味着现代浏览器不支持W3C的这些标准？是否有一个新的标准取代了我不知道的这个标准？或者我误解了W3C中该表的含义？
在一天结束时,我的问题归结为:在CSS中使用绝对字体大小仍然是最佳做法吗？它会在浏览器中表现一致吗？理想情况下,我想知道现代浏览器遵循的标准.
推荐指数
解决办法
查看次数
在Docker容器中作为主机用户运行
在我的团队中,我们使用Docker容器来本地运行我们的网站应用程序,同时我们对它们进行开发.
假设我正在app.py使用依赖项的Flask应用程序requirements.txt,工作流程看起来大致如下:
# I am "robin" and I am in the docker group
$ whoami
robin
$ groups
robin docker
# Install dependencies into a docker volume
$ docker run -ti -v `pwd`:`pwd` -w `pwd` -v pydeps:/usr/local python:3-slim pip install -r requirements.txt
Collecting Flask==0.12.2 (from -r requirements.txt (line 1))
# ... etc.
# Run the app using the same docker volume
$ docker run -ti -v `pwd`:`pwd` -w `pwd` -v pydeps:/usr/local -e FLASK_APP=app.py -e FLASK_DEBUG=true -p …推荐指数
解决办法
查看次数
Jekyll - 与HTML文件一起生成JSON文件
我想让Jekyll为每个页面和帖子创建一个HTML文件和一个JSON文件.这是为了提供我的Jekyll博客的JSON API - 例如,可以在/posts/2012/01/01/my-post.html或访问帖子/posts/2012/01/01/my-post.json
有谁知道是否有一个Jekyll插件,或者我将如何开始编写这样一个插件,并排生成两组文件？
推荐指数
解决办法
查看次数
在C#中使用文档属性
在MSDN属性教程中,它们Author用作属性的示例:
[Author("Jane Programmer", Version = 2), IsTested()]
class Order
{
// add stuff here ...
}
在我看来,这是一个好主意,因为它允许您使用反射按作者分组类(例如) - 有效地将通常在文档中的元数据暴露给编译器,这可能很有用.我立即想到"啊哈!我应该使用所有内联块文档的属性" - 例如:
[Author("Me")]
[Description("Add 1 to value")]
[Param("value", "The original value to add 1 to")]
public int AddOne(value) {return value + 1;}
但是, 我找不到关于文档和属性的 答案似乎没有提出这种方法.他们都使用XML进行内联文档.
是否有任何内置属性可以帮助内联文档？如果没有,是否有任何库/包包含内联文档的预定义属性集？
推荐指数
解决办法
查看次数
<input>有神秘的底部填充
我试图在一些表单元素上做一些非常精确的样式,这个问题让我感到非常悲痛.
如果我尝试删除padding,margin,border和outline从<input>(带display: block),从而使场的大小纯粹由文本确定的,输入场结束有几个像素额外的填充比恰好风格相同的方式的任何其他块级元素.这是一个例子:http:
//jsfiddle.net/nottrobin/b9zfa/
<input class="normalised testSubject" value="hello" />
<div class="normalised testSubject">hello</div>
渲染:
在该示例中,<div>获得计算高度,16px同时<input>获得计算高度19px.
我在Chrome 16,Firefox 9和Opera 11中获得相同的行为,因此它显然使引擎独立.
我可以通过手动添加高度来解决问题,但我不想这样做,因为我希望设计保持响应.
任何人都可以帮助我理解这里发生了什么,以及我如何能够可靠地确保它与<input>跟随它的任何块级元素的高度相同？
推荐指数
解决办法
查看次数
标签 统计
css ×3
html ×3
html5 ×2
webkit ×2
.net ×1
android ×1
api ×1
asp.net ×1
attributes ×1
c# ×1
centos ×1
client-side ×1
compilation ×1
css3 ×1
docker ×1
file-rename ×1
flask ×1
forms ×1
gd ×1
git ×1
git-merge ×1
input ×1
javascript ×1
jekyll ×1
json ×1
libjpeg ×1
linux ×1
performance ×1
php ×1
polyfills ×1
ruby ×1
standards ×1
sudo ×1
w3c ×1
webforms ×1