小编Dim*_*off的帖子

我正在查看一个greasemonkey用户脚本的来源,并在他们的css中注意到以下内容:

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

我可以理解,一个greasemonkey脚本想要在源代码中捆绑任何东西而不是在服务器上托管它,这是显而易见的.但由于我以前没有看过这种技术,我考虑过它的使用,看起来很有吸引力有很多原因:

1. 它将减少页面加载时的HTTP请求量,从而提高性能
2. 如果没有CDN,那么它将减少通过cookie与图像一起发送产生的流量
3. CSS文件可以缓存
4. CSS文件可以是GZIPPED

考虑到IE6(例如)有背景图像缓存问题,这似乎不是最糟糕的想法......

那么,这是一个好的或坏的做法,为什么你不使用它,你会使用什么工具base64编码图像？

更新 - 测试结果

• 用图像测试:http://fragged.org/dev/map-shot.jpg - 133.6Kb

• 测试网址:http://fragged.org/dev/base64.html

• 专用的CSS文件: http://fragged.org/dev/base64.css - 178.1Kb

• GZIP编码服务器端

• 结果发送给客户端的大小(YSLOW组件测试):59.3Kb

• 保存发送到客户端浏览器的数据:74.3Kb

不错,但我认为它对于较小的图像会稍微有用.

更新:谷歌的软件工程师Bryan McQuade正在研究PageSpeed,他在ChromeDevSummit 2013上表达了数据:CSS中的uris被认为是一种渲染阻止反模式,用于在他的演讲中提供关键/最小的CSS #perfmatters: Instant mobile web apps.请参阅http://developer.chrome.com/devsum​​mit/sessions并记住这一点 - 实际幻灯片

我注意到某些代码评估了某个电子商务网站的鞋码并将其输出到屏幕上,这使得Chrome中的订单变得混乱.

给出的JSON可以是:

{
  "7": ["9149", "9139", "10455", "17208"],
  "7.5": ["9140", "9150", "10456", "17209"],
  "8": ["2684", "9141", "10457", "17210"],
  "8.5": ["9142", "10444", "10458", "17211"],
  "9": ["2685", "9143", "10459", "17212"],
  "9.5": ["10443", "9144", "10460", "17213"]
}

...将尺寸增加一半.

转换为对象并迭代键后,自然顺序得到尊重,它们出现为:

7,7.5,8,8.5等

但仅在Chrome中,"看起来像圆形数字"的键总是首先从对象中出来,因此for ... in循环的输出是:

7,8,9,7.5,8.5,9.5 ......

Object.keys(sizes); // ["7", "8", "9", "7.5", "8.5", "9.5"]

以下是测试用例:https://jsfiddle.net/wcapc46L/1/

它只影响整数,似乎Webkit/Blink有一个优化,它更喜欢数字的对象属性,也许它与分支预测或其他什么有关.

如果在对象键前面加上任何字符,则顺序不受影响并按预期工作 - FIFO

我想我会记得读到对象的属性顺序没有任何保证,但与此同时,这是极端烦人的,并且会导致为Chrome用户单独修复它的相当大的努力.

有任何想法吗？这可能是一个会被修复的错误吗？

另外编辑,我现在发现这是v8 bug跟踪器上的一个问题:

http://code.google.com/p/v8/issues/detail?id=164

看起来Blink不想解决这个问题,并且仍然是唯一能够做到这一点的浏览器.

更新任何哈希表优化webkit/blink,现在已经进入壁虎(FF 27.0.1) - http://jsfiddle.net/9Htmq/结果7,8,9,7.5,8.5,9.5._在密钥返回正确/预期订单之前应用. …

在Web和框架中看到类似的代码是很常见的:

var args = Array.prototype.slice.call(arguments);

在这样做时,您将参数Object转换为实数Array(尽管JS具有真正的数组),它允许您在Array原型中应用的任何数组方法等应用于它等.

我记得在某处读取arguments直接访问Object的速度明显慢于Array克隆,或者明显选择命名参数.是否有任何事实,在什么情况下/浏览器会导致性能损失？你知道的关于这个主题的任何文章？

从http://bonsaiden.github.com/JavaScript-Garden/#function.arguments 更新有趣的发现,这使我之前阅读的内容无效...希望这个问题可以从写这篇文章的@Ivo Wetzel那里获得更多答案.

在该部分的底部,它说:

表现神话和真相

始终创建arguments对象,只有两个例外,即在函数内部或其形式参数之一声明它的名称.无论是否使用都无关紧要.

这与http://www.jspatterns.com/arguments-considered-harmful/冲突,其中指出:

但是,出于以下原因使用参数不是一个好主意:

• 性能
• 安全

每次调用函数时都不会自动创建arguments对象,JavaScript引擎只会按需创建它(如果使用的话).而且这种创造在性能方面并不是免费的.使用参数与不使用参数之间的差异可能会慢1.5到4倍,具体取决于浏览器

显然,不能两者都是正确的,那么它是哪一个呢？

ECMA顽固的Dmitrty Soshnikov说:

究竟"JavaScript引擎"是什么意思？你在哪里得到这个确切的信息？虽然,在某些实现中可能是正确的(是的,这是一个很好的优化,因为在解析代码时可以获得有关上下文的所有必需信息,因此如果在解析时找不到,则不需要创建参数对象),但是当你知道ECMA-262-3语句,每次进入执行上下文时都会创建参数对象.

这可能听起来不可能,但继续阅读.

我需要学习jQuery以保持最新状态并能够说服雇主我能在不到2天的时间内处理它.

现在,我应该提一下,我其实知道javascript.这是一个有点暧昧样的说法,但-而我不是道格·克罗克福德-我当然我的意思不是使用内嵌代码我只是切换元素的可见性.我甚至可以说我非常熟悉MooTools,在过去的3年中已经阅读了它的源代码以及无数的MooTools插件.

现在,通过帮助了解MooTools标签,我无意中也收集了很多jQuery代码.还有API文档页面,这很公平 - 只要我想使用DOM,AJAX,事件等,我就能找到自己的方式.这不是帖子的内容.

我正在寻找非常具体的资源和指南/ jQuery组织良好和编写良好的代码示例.例如,我感兴趣的事情(但不限于):

• 与API有关的特殊情况,例如..bind!= ECMA绑定
• 限制,如元素属性(.attr？)+属性和其他陷阱的变通方法
• 选择器性能(如果Sizzle与Slick不同)和......
• ...缓存选择器 - 它是否有效,jQuery如何返回自身.
• 关于可读性和写作的最佳实践易于遵循和理解意大利面条代码
• 编写插件的最佳实践 - 如何构造,是否有任何通用/接受/首选命名法等,即jQuery相当于这个mootools指南
• 在经典的OOP意义上有没有更好的方法来处理继承？我知道moo4q,但让我们假设我想在mootools的帮助下暂时这样做.是的,我知道我仍然可以使用纯javascript作为基本的东西.
• API中是否有任何特定的差异(除了++ changelog)我需要注意不同的jQuery版本？
• GC.你做了什么,你删除事件,节点等？
• 要避免的比特.例如,我看到ppl在twitter上抱怨元素存储很慢.
• 关于构建适当的'企业级或近乎足够'的基于jQuery的_application__的建议(我知道,我知道 - Dojo,ExtJS,甚至是MooTools,但jQuery可以实现,对吧？很多人发誓并声称做到了...)
• 无论你怎么想我都需要阅读才能开始

考虑到这一点,我想只是链接到SO上的教程或文章甚至帖子,可以涵盖所提到的领域和高级jQuery开发.

一些由尊敬/知名作者撰写的精选插件也将受到赞赏,特别是那些在组织方式和易于扩展方面不同的插件.由于有这么多人可供选择,大多数人可能都没有超过hello spaghetti world阶段,因此我不想将它们作为基于我自己工作的例子.我不是在设计师投资的插件之后,因为它们有很好的效果,我想要漂亮的代码示例.

就是这样.任何帮助表示赞赏 - 将在周日开始阅读,并且需要能够编写一个可扩展的插件,比如几天前我在2-3小时内编写的mootools模式/灯箱类.我想将它转换为jQuery作为一种练习,不会使它变得不那么模块化/可扩展:http://jsfiddle.net/dimitar/6creP/

在此先感谢,将尝试回答每个回复的人

我正在将mootools从1.3.2更新到1.4.1.我看到了一个奇怪的变化.由此

for (var i = 0, l = this.length; i < l; i++){....

对此

for (var i = 0, l = this.length >>> 0; i < l; i++){

以这种方式使用的">>>"运算符如何提高性能？你怎么看待这件事？

似乎随着手持设备的增加,人们不得不开始考虑更多,而是放弃IE6.

考虑到这一点,我注意到某些事情不能像我的iphone那样或者完全没有效果.

看似破坏的内容包括(但不限于):

• mouseover/mouseout事件(几乎可以打破任何东西)
• CSS pseudos:​​自然也是悬停(例如,打破导航CSS专用菜单)
• DOUBLE CLICKS - 它缩放而不是事件处理程序
• 与CSS相关的问题(分钟,它似乎就像在Chrome中没有渐变+一些字体大小的问题)

真正的问题是:你有任何指导方针,文章或任何可以涵盖以下内容或任何你可以提供的建议.

您从哪里开始,以便将桌面用户的体验音译到移动用户？您是否尝试为移动设备制作单独的皮肤,或者您是否更改/修复您的网站以尽可能地工作 - 这两种方法都涉及多少维护和工作

是否有任何框架(CSS或JS)可以抽象并在需要时进行优雅降级？boilerplate浮现在脑海中,jquery-mobile mootools-mobile (power tools)？

你用什么替换上面的东西,点击事件？

如何将滑动融入网络应用程序？你能处理和回应手指放大吗？你应该？

其他事件,如摇晃,倾斜 - 它们是否会冒泡到浏览器窗口？

你做了什么来容纳尴尬的操作系统元素,如select,checkbox和radio？

资源管理 - 您是否使用仅发送特定于设备的文件的检测层,而不是可以处理两者的通用js库？

至于设备支持,我只对droid和ios感兴趣,所以javascript支持会相当不错 - 你会放弃你的主框架并转而使用micro js lib吗？

最后 - 你对手持设备如何用于电子商务和货币化(目前和不久的将来)有任何印象.我想从商业的角度确定开发工作是值得花费的,而且我们不会像'#socialmedia'那样追求流行语噱头.有关转换价值的任何数据与桌面数据相比较？这可以帮助我衡量这些是用作快速浏览工具还是可以实际完成monty.

任何在同一时间或通过不同设计在移动和桌面方面做得很好的网站的例子,我希望看到它们并找到甚至可能的东西.

提前致谢.

这有点烦人.似乎webkit(通过chrome 13 canary)正确地设计了各种输入类型,并且它以一种主要方式与设计发生冲突.

特别是,这些让我头疼:

• 选定的元素发光(通过轮廓)
• 占位符=文本样式
• 围绕着焦点的textarea和输入字段的丑陋发光

我正在使用样板和现代化器.

input[type=search]带占位符的简单覆盖文本样式.

我知道你可以通过它来定位它

input::-webkit-input-placeholder

然而,这似乎不能像这样的东西text-shadow- 这有点废话.有谁知道这可能是一个将被修复的错误,还是我需要回到javascript占位符解决方案？

搜索输入带有白色bg并删除基本CSS类中定义的圆角.我找到了重置代码:

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=search] {
  /* the webkit overrides need to stay at the top */
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  /* your styles here */
}

它有点帮助.

我通过设置修复表单元素周围的光晕outline: none.

我想我真正想要的是一个CSS重置,它取出user agent stylesheet了影响它的(根据网络检查员)任何预定义的样式.是否有任何重置可以做到这一点,所以尽管doctype是HTML5,元素的呈现方式与HTML5之前一样简单,并在基本CSS中遵循隐式规则设置？

我不想这么说,但尽管它的所有内存占用问题和插件的缓慢,FireFox 4实际上完美呈现了一切.Webkit不应该试图为您设计样式,只需提供一个API,如果您想要...

使用以下内容:

background:url(data:image/gif;base64,R0lGODlhIwAhALMAAAAAADQ0NENDQ25ubouLi6ioqLa2ttPT0/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAACwAAAAAIwAhAAAIpQABCBxIsCCAAAYTKlw4cECCAQwjMnSY4KHEiwQpVrSIUaLGjRw7Kvy4EYEAkSNBljyJ0iDJiiZbulQJk6XMhjQTxLyJk+ZOngBe6rTJU+jPojmTKqXZc6nTpAKFPp0qsMDUqyoHWsWKleBWrk8LfgV5AKjYnGXNakWrdi3NtG3HbjTQtmrOAnUByK2It+7eBH3j5iSQVy5cv3PzegWsuCDExmYDAgA7) no-repeat center center;}

很好但我希望能够在base64不可用时提供优雅降级(css断言是通过javascript).

显然,在v8之前的IE缺乏这个功能,所以我可以通过浏览器 - 但我更愿意检测它的功能,如果可能的话.

关于如何去做的任何想法？

在Mootools文档中,关于Element,我无法捕捉到document元素的语义区域,我在Mootools Api中找不到任何引用.它只是DOM Api吗？

例如,$接受三个参数,第一个是element.如何定义元素？

此外,该文件提供了一些建议:document.getElementById(‘foo’),document.id(‘foo’),$(‘foo’).所以我理解documentMootools是一个非常重要的部分,但我不明白它与经典DOM API重叠的地方,扩展到底有多远等等.

我正在使用react,redux和react-redux-router.当我运行一个应用程序时,我收到一个错误.我不明白它与我的App.js中的react函数有什么关系.在我看来,问题在于代码中的其他地方.

错误如下:

 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.
 in App
 in Router (created by ConnectedRouter)
 in ConnectedRouter
 in Provider       
 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.

我的javascript App文件代码如下所示.

 import React from 'react';
 import Header from './common/Header';
 import HomePage from …