Javascript之UI线程与性能优化

 
以前写文档式网页,都是通过word写好了之后直接保存成html格式,最近知道了有一个叫markdown的存在,为了学习它,特地用这个大概翻译了一下github上一个js的样式指南,源地址在这里:

if (!defined(‘IN_ECS’))                 —
defined判断常量‘in_ecs’是否存在—define是定义常量
{
die(‘Hacking attempt’);                — die停止程序,返回参数’Hacking
attempt’
}

   
在浏览器中,Javascript执行与UI更新是发生在同一个进程(浏览器UI线程)中的。UI线程的工作基于一个简单的队列系统,任务会被保存到队列
中直到进程空闲时被提取出来执行。所以Javascript的执行会阻塞UI更新;反之,UI更新也会阻塞Javascript的执行。给用户的表现就是
浏览器在工作时短暂或长时间失去反应,用户的操作不能及时得到响应。而UI线程的阻塞很多时候是由于我们要在代码里进行长时间的脚本运算,超过了浏览器限
制,导致浏览器失去响应,冻结用户界面。

类型

  • 原始类型 :按值传递 String,Number,Boolean,null,undefined
  • 负载类型 :按引用传递 Object,Array,Function

error_reporting(E_ALL);             — 报告所有错误

    所以,编码时对于耗时较长的运算我们不得不考虑UI线程的问题,《High
Performance
JavaScript》建议javascript操作耗时不应该超过100毫秒,那么这个100毫秒是如何得出来的呢?

对象

  • 使用字面值方式创造对象
  • 不要使用保留字作为对象属性

if (__FILE__ == ”)                     —
当前运行文件的完整路径和文件名。如果用在被包含文件中,则返回被包含的文件名。这是一个魔法变量(预定义常量)测试代码: **echo
__FILE__;//输出 F:\www\test.php**

    我们来看下2个相关的研究:

数组

  • 使用字面值创造数组
  • 出于性能考虑,使用直接赋值而不是Array的push方法

*{*

1.1、Definitions of Response Time

字符串

  • 使用单引号修饰字符串
  • 超过80个字符的字符串要被写成多行相连的形式
  • 字符串连结时,使用array的join方法

die(‘Fatal error code: 0′);           — die停止程序,返回参数’Fatal
error code: 0
}

    引用:Robert B. Miller:《Response time in man-computer
conversational》

函数

  • 不要在if,while这样的块级作用域中声明函数,而是把函数赋给一个变量(匿名函数)
  • 不要使用arguments来命名你的参数,这会覆盖默认的arguments对象

/* 取得当前ecshop所在的根目录 */
define(‘ROOT_PATH’, str_replace(‘includes/init.php’, ”,
str_replace(‘\\’, ‘/’, __FILE__)));          –str_replace()
函数使用一个字符串替换字符串中的另一些字符。echo
str_replace("world","John","Hello world!");**
//输出 **Hello John!

   
不同类型的响应以及响应延时,适用于不同的行为水平。响应时间是基于对心理依据的估计而定义的。Robert
Miller在其研究中定义了17种不同类型的响应时间,有兴趣的同学可以细读。这里只列举2条比较重要的:

属性

  • 通过.运算符来直接获取对象属性,比方说 luke.jedi
  • []运算符用在使用变量访问对象属性的场合,比方说 luke[para]

if (!file_exists(ROOT_PATH . ‘data/install.lock’) &&
!file_exists(ROOT_PATH . ‘includes/install.lock’)            
–file_exists() 函数检查文件或目录是否存在。
&& !defined(‘NO_CHECK_INSTALL’))
{
header(“Location: ./install/index.php\n”);         –header()
函数向客户端发送原始的 HTTP 报头。

    Topic 1. Response to control activation (开关控制响应)

变量

  • 使用var来声明变量,不使用var我们得到的是全局变量,这会污染全局空间
  • 使用一次var来同时声明多个变量,但每个变量写在新的一行上
  • 声明变量的时候,把初始化的变量放在前面,未初始化的放在后面,以方便后面修改

exit;                                                          
 –die的别名,停止程序
}

    The click of the typewriter key, or the change in control force
after moving a switch past a detent position are examples. They indicate
responsiveness of the terminal as an object. This response should be
immediate and perceived as a part of the mechanical action induced by
the operator. Time delay: No more than 0.1 second.
   
开关类操作中,终端相应能力对于操作者应该是直接的并可感知的。这类型的延时不应大于0.1秒。

提升(Hoisting)

  • 变量声明总是被解释器隐式的提升到其作用域的头部,但是给变量赋值却不会有这个效果,匿名函数同样遵守这个规则
  • 命名函数声明只是把函数名作为变量名提升,而不是作为一个函数提升
  • 普通函数声明则同时提升他们的函数名和函数体(以前的疑惑解决了吧~)

/* 初始化设置 */                                          
 –ini_set用来设置php.ini的值,在函数执行的时候生效,脚本结束后,设置失效。无需打开php.ini文件,就能修改配置,对于虚拟空间来说,很方便。
@ini_set(‘memory_limit’, ’64M’);                  
 –‘menory_limit’:设定一个脚本所能够申请到的最大内存字节数,这有利于写的不好的脚本消耗服务器上的可用内存。@符号代表不输出错误。
@ini_set(‘session.cache_expire’, 180);          
–session.cache_expire’:指定会话页面在客户端cache中的有限期(分钟)缺省下为180分钟。如果设置了session.cache_limiter=nocache时,此处设置无
效。
@ini_set(‘session.use_trans_sid’, 0);  

    the delay between depressing the key and the visual feedback should
be no more than 0.1 to 0.2 seconds.
    按键与可视反馈延时不应大于0.1~0.2秒。

函数表达式

  • 使用 === 和 !== 替代 == 和 !=

———————————————-          

    Note that this delay in feedback may be far too slow for skilled
keyboard users.
   
研究中同时提到,以上数值对于那些键盘高手还是很慢的。他们的预期值比一般人要高,所以以上数值只是一个普遍适用的数值。

注释

  • 使用 /** …*/来进行多行注释,并说明所有的参数和返回值
  • 使用//进行单行注释,但应放在被注释对象的上一行,且在注释之前应当再空一行

–‘session.use_trans_sid’:是否使用明码在URL中显示SID(会话ID),默认是禁止的,因为它会给你用户带来安全危险:

    Topic 13. Graphic response from light pen (光标图形响应)

命名规范

  • 避免使用单个字符来命名,让你的命名具有一定的含义
  • 命名私有属性的时候用下划线开头

1.用户可能将包含有效的sid的URL通过email/irc/QQ/MSN等途径告诉其他人。

    Where the lines are drawn with deliberation by the user—relatively
slowly as compared with slashing sketch strokes—a delay of up to 0.1
second seems to be acceptable. There must not be variability perceived
by the user in this delay.
   
用户的光标输入延时,0.1秒是可被接受的。延时期间用户是动态可感知的。

构造器

  • 给对象原型添加函数而不是重写对象原型
  • 构造器最好返回this对象,这样有助于链式写法
  • 你可以给你的对象添加自定义的tosTring方法,但确保不会产生副作用

2.包含有效sid的URL可能会保存在公用电脑上。
3.用户可能保存带有固定不变的SID的URL在他们的收藏夹或者浏览历史记录里。
基于URL的会话管理总是比基于Cookie的会话管理有更多的风险,所以应当禁用。

    The response delay in the image following the light pen may be as
much as one second because the user is not tracing a line but
positioning an image that, for him, is completed when his stylus touches
the destination for the image.
    在构图中,类似的延时1秒是可以被接受的。

jQuery

  • 给jQuery类型的对象命名是加前缀 $
  • 缓存jQuery的查找

———————————————– 
@ini_set(‘session.use_cookies’, 1);              
–‘session.use_cookies’:是否使用cookie在客户端保存会话ID;
@ini_set(‘session.auto_start’, 0);              
 –‘session.auto_start’:是否自动开session处理,设置为1时,程序中不用session_start()来手动开启session也可使用session,
@ini_set(‘display_errors’, 1);                    
 –‘display_errors’:设置错误信息的类别。

1.2、Response Times: The 3 Important Limits

if (DIRECTORY_SEPARATOR == ‘\\’)          
–是一个显示系统分隔符的命令,DIRECTORY_SEPARATOR是PHP的内部常量,不需要任何定义与包含即可直接使用。
{
@ini_set(‘include_path’, ‘.;’ . ROOT_PATH);  
–include_path的作用就是设置用include()函数包函文件时的路径,当然也可以不设置include_path,只要在包函文件时写出具体的文件相对或绝对路即可
}
else
{
@ini_set(‘include_path’, ‘.:’ . ROOT_PATH);  
–include_path的作用就是设置用include()函数包函文件时的路径,当然也可以不设置include_path,只要在包函文件时写出具体的文件相对或绝对路即可
}

    引用:Jakob Nielsen:《Response Times: The 3 Important Limits》

require(ROOT_PATH . ‘data/config.php’);    
 —require() 和 include()除了怎样处理失败之外在各方面都完全一样。include() 产生一个警告而 require()则导致一个致命错误。如果你想在丢失文件时停止处理页面,那就别犹豫了,用 require() 吧。

0.1 second is about the limit for having the user feel that the system
is reacting instantaneously, meaning that no special feedback is
necessary except to display the result.
1.0 second is about the limit for the user’s flow of thought to stay
uninterrupted, even though the user will notice the delay. Normally, no
special feedback is necessary during delays of more than 0.1 but less
than 1.0 second, but the user does lose the feeling of operating
directly on the data.
10 seconds is about the limit for keeping the user’s attention focused
on the dialogue. For longer delays, users will want to perform other
tasks while waiting for the computer to finish, so they should be given
feedback indicating when the computer expects to be done. Feedback
during the delay is especially important if the response time is likely
to be highly variable, since users will then not know what to expect.

if (defined(‘DEBUG_MODE’) == false)
{
define(‘DEBUG_MODE’, 0);
}

    响应时间:3条重要的限制

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图