2014-03-04_171121

流程

关于流程,是从项目启动到发布的过程。在前端通常我们都做些什么?

什么是 Qing?Qing 是一套基础开发模版,来源于我们在手机与 PC 端上的大量工程实践。Qing 所提供不是冷冰冰的文件,
而是一套 Web 前端解决方案,所以 Qing 不只是关注项目的初始状态,而是整体的工作流程,
这是 Qing 与现有开源的开发模版显著差异的一点。Qing 的体验必须是高效且愉悦的,拒绝繁琐与重复。
其足够的 Qing 量,只需 30 分钟内即可掌握最先进的 Web 开发技能。以下是 Qing 所基于的开发理念:

  1. 移动端优先,兼容 PC 端
  2. 向前看齐,基于 ES5 开发
  3. 模块化 Web 开发过程
  4. 自动构建与部署集成, 基于 Mod.js 工具

基于未来趋势的开发理念,Qing 旨在提供工程化方案。

平台与浏览器版本兼容:

  • iOS 4.0+
  • Android 2.2+
  • IE 6+
  • Chrome
  • Firefox
  • Safari

Application cache 是 HTML5 中在规范完整性上比较糟糕的特性之一,规范上的不到位导致浏览器厂商在实现上也存在些许差异,而产生本文档的目的即让开发者们知晓那些潜规则,摆脱问题的困惑与束缚,正确的使用离线缓存真正让 Web 加速。

使用事件代理

有时候我们会感觉到页面反应迟钝,这是因为 DOM 树元素中附加了过多的事件句柄并且些事件句病被频繁地触发。这就是为什么说使用事件代理是一种好方法了。如果你在一个 div 中有 10 个按钮,你只需要在 div 上附加一次事件句柄就可以了,而不用去为每一个按钮增加一个句柄。事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。

【高性能前端 2】高性能 CSS
In Web 前端优化 on 2012年10月10日 by view: 23,442
27

避免使用 @import

有两种方式加载样式文件,一种是 link 元素,另一种是 CSS 2.1 加入 @import。而在外部的 CSS 文件中使用 @import 会使得页面在加载时增加额外的延迟。虽然规则允许在样式中调用 @import 来导入其它的 CSS,但浏览器不能并行下载样式,就会导致页面增添了额外的往返耗时。比如,第一个 CSS 文件 first.css 包含了以下内容:@import url("second.css")。那么浏览器就必须先把 first.css 下载、解析和执行后,才发现及处理第二个文件 second.css。简单的解决方法是使用<link> 标记来替代 @import,比如下面的写法就能够并行下载 CSS 文件,从而加快页面加载速度:

【高性能前端 1】高性能 HTML
In Web 前端优化 on 2012年10月10日 by view: 21,869
34

避免使用 Iframe

Iframe 也叫内联 frame,可以把一个 HTML 文档嵌入到另一个文档中。使用 iframe 的好处是被嵌入的文档可以完全独立于其父文档,凭借此特点我们通常可以使浏览器模拟多线程,需要注意的是使用 iframe 并不会增加同域名下的并行下载数,浏览器对同域名的连接总是共享浏览器级别的连接池,即使是跨窗口或跨标签页,这在所有主流浏览器都是如此。也因为这样这让 iframe 带来的好处大打折扣。

每一字节代码都有其温度,而我们提供代码的温度计。

这个是 javascript 中一个简单 for 循环,声明 i 初始值为 0,判断 i 是否小于 100,若是则执行语句,然后 i 增加 1。所以 var i=0 只执行 1 次,条件条件表达式  i<100  会执行 101 次,增量 i++ 执行 100 次,console.log(i) 执行 100 次。