��أ��ֻ��һ��-TGideas-��Ѷ��Ϸ�ٷ��Ŷ�

��أ��ֻ��һ��

In ��ҳ�ع�

on 2011-04-01 08:00:00

by ��ݸ��

HTML5�Դ��ע��Ҫ��ʼ��ƽ��һ��Ƽ��˾��׷׽��г��ԡ�ƻ��ȸ衢΢��½��Ƴ�HTML5չʾҳ�棬��Ƶ��վҲ��֧��HTML5��Ƶ��HTML5��λ��ڹ��罻��վ�õ�Ӧ�á�

��һ��棬��ƶ��豸ƽ̨��iPhone�ĳ��Ѿ��1�ڲ��iPad��Ҳ��1500��̨��iPad2Ҳ��˽�100��̨��۶��ﵽ95�ڣ�ռ��ƽ��г��ݶ��90%��֪��֧��Flash��ռ��̶��ǣ��߶�ƽ̨�ļ��ڱ��С�

ͬʱ��ڹ�ע��վ��Ż��ͬʱ��Ӧ��ע�⵽��û��ҳ��ʱ�ļ��Ҳ��һ��Ҫ�ķ��档��һ��1000w�ε��վ��ʡ10K��ж��õ�Ч��û��ķ��ٶȺͷ��ĸ��ض��м��ĺô��

> ��Ż��

Ϊ��LOL��ɾ��ԣ��û��ʱ��飬��ڽ��1�·ݿ�ʼ�˸İ档��Բ��ȫ�µ��ݲ��˼·��û��õ��θİ棬��Ҫ��ĸ��ĵ��ȥ��һ��Ӱ��Flash��ֻ��ҳ��ذ�ť��FlashЧ��ӿ��ҳ��ļ��ٶȣ��ҳ��û��з��ȡ��Ϸ��Ѷ��û��˽��Ϸ�淨��ԵĽ��ս��ѧԺ��ҳ��ǿ��Ϸ���µ�չʾ��˲�ͬ��Ĵ��ֲ��ռ��ҳ��֮һ�ռ��б��Ӣ��չʾ��Ϸ��ǽ�Ĳ��֡�

��״��ͨ��HTML5��ش洢��ݰ��أ��ӳټ��أ��ļ�ѹ��CSS Sprites�ȼ��ʹҳ��ܵõ��˴��HTML5��Ƶ��ʹ��ƻ��ƶ�ƽ̨��кܺõı��֡�

��Ľ��ؽ��HTML5��ش洢��ݰ��ص�˼·�ͷ��Լ�HTML5��Ƶ��Ч��LOL��õļ��ټ��ķ��ҳ��Ϊ�û��ʡ��600K��ͬʱ��˷��ĸ��ء�

��ҳGTmetrix�÷�

��彡��ȣ��ҳ1�뽡��70%��ϣ�2�뽡��80%��ϣ�3�뽡��90%��ϣ�

> ��ҳ��

��ҳ��Ҫ��Ŀ��Ǽ��Դ��ģ��ӿ�ҳ��ĳ��ٶȡ��Ȼ�ӳټ��ؿ��һ��̶��Ż�ҳ��ܣ��е��ݶ��Ҫ��һʱ��ظ��û��ظ��صġ��û��ҳ��һ��ݣ��ôҳ��ڴ��ʱ�ͼ��ص�һ��µ�һЩ��ݾͲ��Ǻ��б�Ҫ��ٻ��ߣ��ҳ��һЩ��ͬ�Ĳ��֣��絼��Ų��Ȳ��֣��Щ�޸��ʼ��͵��ÿ�ζ��ӷ��һ��̶��ҳ��صĸ��ɡ�

��ҳ��ķ��кܶ࣬��LOL��İ��Ҫ�õ��·��

��HTML5��ش洢��û��洢ҳ��һЩ��ݣ��絼��ý�壬�Ų��ȡ��û��ڼ��ҳ��ʱ��ֱ�Ӵӱ��ػ�ȡ��Щ��ݣ��һ��̶��ϼ��Դ��ġ�

ͼƬ��أ�ʹ�û��ҳ��ʱ��̬��ͼƬ��磬�û��һ��ʱ��һ��Ժ��ͼƬ��û�м��صģ��û��ҳ��ʱ��еĲ��ֻᶯ̬��ͼƬ��

�Ż��ֲ��ļ��ط�ʽ��ҳ��ʱֻ��ص�һ��ͼƬ��ֲ��ڶ��ͼƬʱ��صڶ��ͼƬ��Դ��ơ�

��ҳ��ݣ��ҳ��Ͻǵ��Ű��飬��ʱֻ��һ��ҳ��ݣ��û��ҳ��ʱ��ټ��ҳ��ݡ�

> HTML5��ش洢

�򵥵�˵��ش洢��Ϊ��ҳͨ��ͻ��ҳ��ڱ��ش洢��ֵ�Ե�һ��Cookie��뿪��վ��ر��ǩ��˳��ȵȣ��Ҳ��һֱ��ڡ��Cookie��ͬ��ǣ��ݾ��ңԶ��ͣ��ʹ��ֶ��䣩��ͬ��ṩ��ڱ��ش洢��г��ԣ��ҳ��ԭ��ķ�ʽִ�У��ڵ��ʧЧ��Ҳ��Чִ�С�

��Ƕ��֧��HTML5��(Firefox��Chrome��Safari��Opera��)��ʹ��HTML5��localStorage�ṩ�ķ��IE��ʹ��IE�ṩ��userData��ʹ�ó��淽��ݡ�

IE�ı��ش洢��

userData��IE�ṩ��һ��ش洢��Ҫ�洢��ݷ��ڱ��ص�һ��XML�ļ��У��ҳ��һ��Ԫ��һ��õ�ê�㡣��ʹ�÷��Ϊ��ʹ��getElementById��ȡҳ��ڵ�һ��Ԫ�أ�ʹ��addBehavior("#default#userData")��ӱ��ش洢��Ϊ��ʹ��setAttribute��Ҫ�洢��ݶ��и�ֵ��save("XXX")��ݴ洢��ΪXXX��XML�ļ��У�ʹ��load("XXX")��ر��ص�XXX.xml�ļ��getAttribute��ȡ�Ѿ��洢��ݡ�

Chrome�ı��ش洢��

��HTML5��ش洢localStorage��ϸ��μ�HTML5 Web�洢��ҵ�һ��ĵ��Ӧ�ó��򱾵ش洢��ǰ��Ҳ��Ժ��ڲ��ͷų��

��ھ��ʵ��ϣ��ҵ��ǣ��жϱ��Ƿ��Ѵ洢��ݣ��û��ݻ��߰汾�ѹ��ڣ��汾��ʵ��õ�һ��޸��ʱ��Ϊ�汾��ڣ��Ӧ��JS��ݣ�ͨ��һ��ݴ��Ϊ��Ҫ�ĸ�ʽ��Ȼ��洢�ڱ��أ��Ұ汾û��ڣ�ֱ�Ӵӱ��ػ�ȡ��ݡ��Ž��ͨ��н�һ��Ĵ��Ӧ�Ľṹ�С�

��У��ý�塢��Ϸ��桢�Ų��Ӣ�۾��ñ��ش洢��ݴ洢��û��ĵ��С�

��е��ǽ��ý�塢��Ϸ��桢�Ų��5��̬��ı��ش洢Ӧ��һ��ʡ��10��K��IE�ı��ش洢�ļ�ʵ��30K��ΪIE��е��ַ��ת�壬�Է��XML�Ĺ��򣩵��

��Ӣ�۰��ڶ�̬��飬��ͨ��Ϸ�ṩ��һ��json�ļ��ȡ�ģ��Ϸ��Ӣ�۵��ݣ�ÿ�ܵ��Ӣ�۶��᲻ͬ��䱾�ش洢�󣬽�ʡ��500K��ֻ��ÿ��һ��Ӣ��޸�ʱ��һ�Ρ�

> ͼƬ��ҳ��

��ʵ��Ǻܶ��վ��ʹ��˵ķ��Ա��ĵȵȡ��Ϸ��һ��ԣ�Ч��Ϊ��ҳ��ʡ�˼�ʮK��Ϊ��ͬ��ʾ��ֱ��ʲ�ͬ��Ե�һ��߶Ȳ�һ��

��ʱ��ǰ��ڼ��ص�ͼƬ

��ȣ��ͼƬ��·��洢��img��ǩ��һ��src��У�LOL��ҳ�Ǵ洢��rel��еģ��˾��Ǳ��ҳ��ֱ�Ӽ��ͼƬ��Ȼ��ʹ��JS�ļ��IE��attachEvent��addEventListener��ҳ��scroll�¼��һ��ҳ��ͻ�ִ��һ��д�ĺ��ж�ͼƬ�Ƿ��ĵ�ǰһ��ڣ��ǣ��rel��ڵĵ�ַ��ֵ��src��ԣ��ǣ��ڵ��ͼƬ��غ��ȡ��LOL��ҳ�Ļ��ý��ʹ��ּ��ҳ��ļ��

> �ֲ��水��

��ֲ��ļ��ģʽ��һ��ȫ��أ��Ȼ��ӳټ��أ��û��ܲ��е��ֲ��档��û��ҳֻͣ��5��ʱ��LOL��ҳ�ֲ��õ��5��л�һ�Σ��ڶ��Ź��ͼƬ�Ժ��ͼƬ��ؾ�û�б�Ҫ�ˡ�

LOL��ҳ��õķ�ʽ�ǣ��һ�μ��ص�һ�Ź��ͼƬ��5��жϵڶ��ͼƬ�Ƿ��ع��û�У��صڶ��ͼƬ��Դ��ơ��û��ҳͣ��ʱ��ֻ��14�룬��ô�ͽ�ʡ�˵�4��5�Ź��ͼƬ��Լ��100K��ҡ�

> ҳ��ݰ��

��ҳ��ķ�ʽ��ʹ��include��룬��ҳ��ص��û��û��л��ҳ��ôֱ�Ӽ��Щҳ��ݾ��ǲ��Ҫ�ġ�

��ҳ��

LOL��ҳҳ��õķ�ʽ�ǣ�ֻ��ص�һ��ɼ�ҳ��ݡ��û��л�ҳ��ʱ��ټ��ض�Ӧҳ��ݡ��ǽ��֣��Ȼ�Ǵӱ��ؼ��ݣ��Ҳ��û��Ų��뵽��Ӧ�ṹ�ġ��һ��Ҳ��һ��Ⱦ��

> ��ƽ̨��

ƽ̨��ʵ˵��ף��ļ��⡣��PCƽ̨��Ҫ��N��ƶ�ƽ̨ͬ��ˡ��ֲ��ǣ��ƶ�ƽ̨��͸��Ӷ�ԶԶ��PCƽ̨��
��LOL��Ķ�ƽ̨��Ҳֻ��ƶ�ƽ̨�е��ִ��

> ƻ��ƽ̨

iPad�µ��ҳ

��iPad��iPhone��Ҫ��䲻֧��Flash��LOL��һ��ҳ��Ƶ��ҳ��ذ�ť��ʵ��ܼ򵥣�ʹ��JS�ж��Ϣ��navigator.userAgent��iPad��iPhone��ʹ��HTML5��Ƶ��滻��ҳ��Flash��ҳ��Flash��ذ�ť�Ĳ��룬��Ϊһ��a��ǩ��ӡ��巽��μ��İ�ʱ��ĵ��iPad֮·��

> �ȸ�ƽ̨

��Androidϵͳ��ֻ��ƽ��ԣ��Ҫ��κζ��飬ֻҪ��ҳ��ϱ�׼��ΪAndroid�ֻ��֧��Flash��ҵĲ��ԣ�LOL��HTC Desire�µ��ȫ��

> һЩС��

> ��ݽ��ʽ

��ͨ��ʹ��json��XML�ķ�ʽ��洢��ݡ��Javascript��һ��н��һ��Զ��ʽ��Գ��Զ��ʽ�ǽ��ġ��䷽��ʹ�÷��ݣ��var test="1,2,3,4"��Ȼ��ʹ��split(",")��ȡ��ݡ�LOL��ַ�ʽ�ڱ��ش洢��ݡ�

> CSS Sprites

Ϊ�˼��LOL��ÿ��ҳ��СͼƬ��ϵ��Ե�һ�Ŵ�ͼƬ�У��ҳ��BT��ͼƬ��90K��

��ҳ��ͼƬ

> MP4�ļ��С��

��ƻ��ƶ�ƽ̨�豸��MP4�ļ��Ҫ��ƴ�С��ļ�̫��ʱ�ܿ��ĸо��Ͼ��ƶ�ƽ̨�豸��CPU��ǲ��ܺ�PC��ȵġ�LOL��ҳ��MP4�ļ��ʹ��ʼ��10Mѹ��6M��

> ��ִ��

LOL��ʹ��˴��JS��ҳ��һ��ִ�д��CPU��ʺܸߣ�ҳ��ܿ��ˣ�LOL��ʹ��һ��ִ��Щ��ҳ��ʱ��һ��ִ�б��ʹ�õļ��Ȼ��100��Ϊ��Ҫ�̶Ȱ��ִ��ʣ�µĺ��Լ��CPU�ĸ��ء��Աȣ��ַ�ʽ��LOL��ҳ��ȻJSʹ�ñ�DNF��ҳ��ܶ࣬��ʱ��CPUռ��ʱ�DNF��5%��ҡ�

> CSSѡ��

��ڱ�дCSSʱ��кܶ��ѡ��ͬ��д��ҳ��Ⱦʱ��Ч��ǲ�һ��ġ��ƥ��ƥ��Ӧ��Ԫ�ء��.header li a{}��Ⱦʱ��ȱ��ҳ��е�a��ǩ��ٱ��Щa��ǩ˭��li��ǩ�ڣ�Ȼ��ȥ��˭��.header�£��Ч��ʵ�ܵͣ��ҿ��ܴ��ʵ��ǿ��Զ��Щa��ǩֱ��д��.header_lnk{}��Ⱦʱһ��ӾͿ��ҵ��ȥ��䵹��.header .header_lnk{}Ҳ��û�б�Ҫ�ģ�ֱ��д.header_lnk{}Ч�ʸ��ߣ��Ϊʲô��Ҫ��һ��أ�

> ��

��Ȼ��HTTP��ʹ��ӳټ��صȵ��Щ��Ҳ�Ǳز��ٵģ��μ��DNF��ֲᡷ��Ż��ֹ��ʵ��θİ��ҳ�滹�кܶ��ط��Ż��ҳ��ĳ��Ⱦ��Ż�JS�Խ�һ��СCPUռ��ʣ��ݸ��ƶ�ƽ̨�ȵȡ�ϣ��ĵ��ڽ��Ʒ�Ĺ��İ��ϰ��λͬѧ��

�� > ��Ѷ΢��QQ�ռ��΢��
��԰�
��԰�ϵͳά��...�ݲ��ṩ��