分类存档: html5

从React diff算法原理中得到的React编写优化方案

    讲起React,当然不能缺少它最重要的特性虚拟Dom,但是很多人都讲不清楚虚拟Dom的内在原理,其实关键点还是这Diff算法。

    

    Diff算法说简单的说就是遍历二叉树,render前和render后的每一个节点做匹配。这里说的节点就是DOM节点但是不是真的DOM节点,而是一个对象类似于

    {

        tagname:div

        className:"a",

        style:"width:100px",

        onClick:function(){}

        children:[

            {

                    tagname:span,

                    className:"b",

                    text:"hello",

                    key:1

            },{

                    tagname:span,

                    className:"c",

                    text:"world",

                    key:2

            }

        ]

    }

    对应的DOM如下:

    <div class="a" style="width:100px" onclick="">

        <span class="b"></span>

        <span class="c"></span>

    </div>

    根据二叉树的遍历,从上到下,从左到右遍历,一边遍历,一遍跟旧节点对比。

    1.如果一些基本属性如class,style,text变化了(注意不包括id,key,children),则只修改对应DOM的 class,style,innerText

    2.如果tagname变化了,那就整个元素删掉,重新creatElement('xx')新的标签。这时候原来的childrem都不会再遍历。

    3.如果对象中有key,而且相对于同级元素唯一,那么对于children数组操作的时候,会按key找到元素,修改对应的值。这样的优势是,如果在children中插入一个新的兄弟元素,比如插入头部,它就会判断children[0]的key,跟新插入的是否一致,如果不一致,则创建新元素,然后匹配下一个兄弟元素,并检索是否在旧的childrem是否存在同样id的节点,如果存在,而且被修改过值,则像上面的 1 一样操作。加key优势是不必全量销毁和创建同级DOM。盗一张图类似这样 

WechatIMG101.jpeg

  1. 加key,只对同级别元素有效

  2. 不要变标签,最好能加css隐藏掉

    {if isOk == true?<div>1</div>:<span>1</span>}像这样的写法需要经过销毁和创建DOM的过程,如果换成

    <div style={{display:isOK?block:none}}>1</div>:<span style={{display:isOK?inline:none}}>1</span>,这样就不会频繁销毁和创建

  3. boolean shouldComponentUpdate(object nextProps, object nextState)

    如果很有把握这次render可以不进行,就可以用这个方法对比props和state,return false;阻止render进行.

http头缓存相关详细总结

http 请求会返还头部信息和主题内容,头部信息分为General,Pesponse, Request:举个例子

blob.png

包含请求地址,方法,状态码,地址:端口

blob.png

包含跨域白名单,连接方式,压缩方式,返回格式,日期,Keep-Alive,还有些服务器相关的东西

blob.png

包含请求格式,接受哪种压缩方式,哪种语言,Cache控制,链接方式,host,Pragme,User-Agent等

这里先着重研究一下keep-alive到底是什么鬼,它对页面打开速度有影响吗?对服务器会增加压力吗?看来需要新开一片文章来说了,暂时放着。

那么,Pargma,与Cache-Control,还有Expires,Last-Modified这些到底是什么关系,相互有什么区别,优先级怎么处理。

blob.png

Pragma 

网上搜了一圈貌似Pragma只有一个值no-cache,用来禁止缓存的

Expires

告诉浏览器过期时间,缺点是需要跟客户端时间匹配,客户端时间不可靠。

[demo0]

Cache-Control 这个功能优点强大,但我们常见的只是用max-age

Cache-Control 提供了5种属性;那么如果同时设置:

Cache-Control :no-cahce,max-age:600; 那到底是缓存还是不缓存?

做个实验试试:

header("Cache-Control:max-age=600,no-cache"); 

[demo1]

缓存成功

header("Cache-Control:no-cache,max-age=600"); //位置换一下

[demo2]

缓存成功

结论:no-cache优先级比max-age 高,与顺序无关;

Last-Modified : 服务器告诉浏览器这个文件的修改时间。

If-Modified-Since:浏览器告诉服务器这个文件的修改时间

Last-Modified 和 If-Modified-Since必须要一起使用。

[demo3]

Etag:服务器给文件生成的唯一标识。

If-None-Match: 浏览器告诉服务器这个文件的标识。

[demo4]

那么既然有5种方法控制缓存,他们都加上的话,优先级又是怎样呢?

Pragma,Expires,Cache-Control ,Last-Modified ,Etag

实验1:

blob.png

[demo5]

结论:每次都请求服务器,证明Pragma生效,所以优先级比其他都高。

那么剩下的Expires,Cache-Control ,Last-Modified ,Etag 优先级又如何?

先比较 Expires,Cache-Control

blob.png

[demo6]

结论:每次都请求服务器,证明Cache-Control生效,所以优先级比Expires高。

再比较 Last-Modified ,Etag 

blob.png

[demo7]

结论:按f5的时候,都请求服务器,同时带上If-None-Match,If-Modified-Since,究竟会不会返回304,这是服务器说了算。所以Last-Modified 和Etag比较是没有意义的。 

然后将两组优先级高的提取出来,Last-Modified和Etag就把他们当中一个东西吧。 

Cache-Control  VS Last-Modified/Etag 

blob.png

结论:每次按地址栏回车都会请求服务器,证明Cache-Control优先级更高。

剩下 Expires VS ast-Modified/Etag 

blob.png

结论:在Expries过期的情况下,每次按地址栏回车,都会请求,证明Expires优先级更高。

最后来个总的排名: Pragma>Cache-Control>Expires>Last-Modified||Etag

操作行为对资源缓存的影响:

blob.png

按Ctrl+F5就没啥好说的啦,强制刷新,其实就是If-None-Match,If-Modified-Since都不会带上,导致服务返回200;

按F5的话其实都会请求服务器,但是如果有Last-Modified/Etag,那么就会带上If-None-Match/If-Modified-Since。服务器判断是否返回304

其他操作行为都不会请求服务器

最终结论,如果Expires,Cache-Control ,Last-Modified ,Etag存在,那么以Cache-Control 为准。

关于DOMContentLoaded的触发时机探究

相信很多人都知道DOMContentLoaded,也就是$.ready(),是在页面DOM构建完之后触发的。

今天突然想到一个问题,这个DOM构建完是指HMTL解析器解析成DOM之后算是构建完,还是渲染的最后一步绘图结束后算是构建完。

直接看图吧:

blob.png

也就是DOMContentLoaded是在 (1) 还是(2)阶段触发呢?

[demo],在demo中可用看的黄色的DIV已经显示在屏幕上了;

证明我们常说的DOMContentLoaded,正确的理解是页面首次渲染完毕时触发

页面缓存总结篇

一.cookies

二.Express

三.locationStronge

四.application cache

五.WebView 终端辅助

todo….

使用grunt构建seajs项目

1.安装nodejs

2.安装grunt-cli

npm install -g grunt-cli

3.进入到项目目录,同时准备好package.json和Gruntfile.js文件 继续阅读 »

双人打飞机项目经验分享

前段时间前期后后断断续续大概花了4个月的时间去完成我的双人打飞机游戏,我做这个游戏的初衷是为了给自己一个机会去探索html5的canvas和nodejs的使用,最后坚持把游戏写出来了。

Screenshot_2013-12-30-21-09-15

刚开始我只是想做一款在电脑上用html5实现的一款打飞机的单人游戏: 继续阅读 »

关于html5打飞机遇到的一些问题

最近在模仿微信打飞机游戏,遇到的一些问题。简单描述一下:

1.画布读取问题,

继续阅读 »

html5 audio 游戏开发的那些让人抓狂的问题

最近在研发的一款html5打飞机游戏,当我正在给他配音的问题时,发现很多巨坑。

没仔细接触过audio可能以为这是一个播放音乐的标签,没什么好研究的,我以前也是这么想,仔细运用到游戏的复杂环境里面,简直让人抓狂。 继续阅读 »

记录html5——canvas的那些坑

1.putImageData 第3个以后的参数在chrome不支持,在我测试的时候2013.9.28 以后应该会改善
<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
var image = new Image();
image.src = “face.jpg”; 继续阅读 »

html5 智能表单

Type=”email” 限制用户输入必须为Email类型
Type=”url” 限制用户输入必须为URL类型
Type=”date” 限制用户输入必须为日期类型
Type=”time” 继续阅读 »