suqing
- 浏览: 186697 次
- 性别:
- 来自: 杭州
-
最新评论
-
w547377507：
注册账号来赞你！
Bootstrap 源码解析 -
xyixiaochuan：
// IIFE - Immediately Invok ...
IIFE -
jozo：
[color=orange][/color]
Quickling技术 -
raoyutao：
...
Bootstrap 源码解析 -
springmvc-freemarker：
bootstrap demo实例教程源代码下载:http:// ...
Bootstrap 源码解析
文章列表
JavaScript 测试覆盖率检测工具（z）
- 博客分类：
- 前端测试
转自玉伯的blog。
最近在用 Jasmine 给 KISSY 项目添加测试代码，遇到一个困惑：如何保证测试能完整覆盖到源码的所有分支？
用 Google 搜索了下 JavaScript Coverage 工具，琳琅满目。有商业版的 JavaScript Coverage Validator, 还有 FireBu ...
Mobile开发的前端框架和产品思考
- 博客分类：
- 前端开发
看了2个框架，jQuery Mobile和Sencha Touch。
jQuery
Mobile
jQuery Mobile 现在官方发布的是1.0.1，
每3个月定期发布一个版本，说明有一个稳定强大的团队开发和维护。
这个月内会升到1.1，主要对元素进行改进。
主旨
jQuery Mobile旨在“为jQuery社区创建一个优雅的能够兼容当前所有主流移动平台的HTML5 UI库”。
而且还发布了一个完整统一的jQuery移动UI框架。
适用平台
jQuery Mobile采用的渐进增强（Progressive enhancement）原则，
HTML5框架Modernizr
- 博客分类：
- 前端开发
Modernizr http://www.modernizr.com/
- 测试超过40种特性，都在几毫秒内完成
- 创建了一个js对象 Modernizr，包含测试的布尔结果
- 向html添加class表明是否支持某个特性
- 给出旧的浏览器兼容的解决办法
polyfill：
通过JS为老浏览器提供标准API
autocomplete设计
- 博客分类：
- 交互设计
autocomplete输入延迟、匹配、选择：1、输入：如果用户每输入一个字符进行一次搜索，返回数据太大，而且不准，所以添加了输入延时；添加0.5s的输入延时后发现，用户输入名字后很快会输入回车，也就是在0.5s延迟前就会按下回 ...
参考知识
先了解一些参考知识
不同浏览器对终止脚本执行有不同的判断标准：
IE监控脚本执行的语句和数量。当执行的语句的数量达到最大限定值，默认为500万，就会弹出终止脚本运行的对话框。
Firefox监测脚本运行的总时间。当超过预先设定的时间，默认为10秒，就会终止脚本运行的对话框。
Safari也是通过执行时间来检测脚本是否为长时间运行。默认超过设置为5秒，超时就会弹出终止脚本运行的对话框。
Chrome 1.0没有限制JavaScript允许执行的最长时间。当出现内存不足时进程就会崩溃。
Opera是唯一没有提供监测长时间运行脚本这种保护功能的浏览器， ...
Doc的分享。
Quickling技术。
通过Quickling，Facebook将所有的用户点击访问自动地转变成AJAX调用，避免了大量的服务器端重复计算和客户端的重复渲染。
url访问自动转成ajax调用
比如：facebook.com/Home.php#!profile.php用户其实想去个人信息页，实际会跑到首页。#后面是用户真正想去的页面!感叹号是为了搜索，因为不少网站用了quickling的技术，爬虫抓不到这些页面，所以谷歌和这些公司约定了一个标准，建议hash前有一个感叹号，区别这种带ajax请求的url
通过ajax提高用户体验性能。
网页在渲染的 ...
05年诞生。作为客户端扩展，非web访问应用。特点是：高度自定义、丰富的装扮。这一年博客开始流行，作为沉淀用户情感和经历的地方。全部团队成员二十多人，包括开发、前端、测试、运营、PM等。
小作坊埋下的历史包袱：1、部分代码网上下载； 2、不考虑性能； 3、不考虑兼容性； 4、代码无可扩展性； 5、无规范、无监控、无运营； 6、全民AJAX
06“闭关”。主要做推广包装。前端成员扩展到3个人。做的几件事有：1、“反编译”前端代码。（大概是做后期维护吧。）小问题付出很多时间。2、和用户较劲。（自定义脚本带来的危害，用户攻击，XSS安全漏洞，比如篡改用户数据、病毒植入、发虚假广告，为保护用户 ...
chrome开发者工具，F12快捷键打开。
Profiles面板
这个主要是做性能优化的，包括查看CPU执行时间与内存占用。
从这个面板可以看到网页的执行时间和内存使用状况。包括了2部分：查看CPU和内存。帮我们了解哪些资源被用掉了，并帮助我们优化代码：
CPU面板展示了js方法的执行时间。
内存面板展示了js对象和相关DOM节点的内存分配。
按照以下步骤了解面板概况：
打开chrome的开发者工具（F12）
选择Profile标签 ...
首先介绍下常用术语：
内存分析的常用术语，如果有java或者.Net变成经验也许你会更熟悉它们。
对象大小 Object Sizes
保留路径
Dominators（统治者，我觉得就是父节点的意思）
一个对象A的统治者是从跟节点到A对象的每个简单路径上的对象。也就是，如果统治者对象从堆中移除，对象A到GC根节点将不可达，被抛弃。
统治者对象构成了一个树型结构，因为每个节点有确定的一个统治者。每个对象的统治者缺少直接到达其他对象的路径，也就是，统治者树不是一个生成树。
像Collection集合对象在它们支配其他对象的时候会保留大量内存。这种树节点被称为积累点。
具体 ...
一、测试环境¶
分3种测试环境：
1、无缓存低带宽（服务器配置）。
为了开源，准备最差的网络环境，页面平均加载时间的差别会更明显。
比如DSL，不压缩的增幅为90%，拨号用户增幅140%。平均效果不能反映实际情况。
15%带宽小的用户，增加额外的时间足以让他们放弃。
2、有缓存低带宽。
尽可能启用缓存，存在页面缓存配置错误的情况。
启用缓存论据：用户可能只有开始的一次访问携带的是空缓存，之后的多次后续页面查看都具有完整缓存。
用户查看页面越多，缓存的论据越强势。
3、正常环境：网络光纤。
实际工作中的网络环境。
4、去掉登录重定向。 ...
YSlow——cookie free
- 博客分类：
- 前端性能测试
收集一些数据，更容易说服开发进行优化。
静态文件均携带一个公共的cookie，较长，共1278字节，大于1k。也就是每个文件都会携带1k的多余信息。
所有测试页面平均会请求27.3个资源，减去html1个请求和异步请求数，也就是每请求一个页面会多25K的文件大小。
图中绿色为平均值，红色为超出标准值（40）的页面请求数
YSlow—— 配置ETag
- 博客分类：
- 前端性能测试
ETag简介
实体标签（Entity Tag），是server和browser确认缓存组件的有效性的一种机制。
个人觉得，如果Expires是时间戳，ETag类似版本戳。
【见下图】：
ETag带来的问题
ETag的问题在于，通常用组件的某些属性（大小、时 ...
jQuery提升性能的代码规范
总是从#id继承
Class前加tag名
缓存jQuery对象
善于使用jQuery连缀的写法
使用子查询
尽量减少直接 操作(Manipulation)DOM
使用时间委托(别名.冒泡)
消除无用的查询
原文地址：Best Practices on JavaScript and AJAX Performance
同类阅读: dynaTrace之一 —— 网络请求和往返的最佳实践
dynaTrace AJAX Edition有独一无二跟踪页面JS执行的能力。它还能跟踪到浏览器的DOM，获取方法的参数和返回值。下图就是一个脚本异常的JS跟踪图，在PurePath视图中：
通过JS这个级别的执行细节，很容易识别运行缓慢的js处理程序、自定义js代码、低效的访问DOM，代价昂贵又低效的第三方框架比如jQuery==。
标记阻塞的脚本和长时间运行的脚本
当脚本开 ...
测试页面：分析后前端性能较差，需要优化的页面。
评分结果：YSlow & dynaTrace的评分结果
具体评分较差的项：YSlow & dynaTrace报警项。
问题类型：比如：Etag。
问题原因：比如：http请求服务器响应太慢。
优化建议：比如：优化xx请求的后端算法，减少服务器响应时间。
优化成果：原先页面加载时间xx(ms)，优化后yy(ms),速度提高了zz%。
跟踪者：进行优化的开发人员。
状态：new->open->fixed->close。