从懒加载到回流

突然有个疑问,懒加载?比如作用于图片,就是监听滚动事件,当滚动条拉下到一定距离图片才加载出来,可以为用户省流量,减少服务器压力(此处可能说错。)

而问题来了,图片怎么感觉是网页一开始加载就随着加载的呢,那怎么叫他停?想到这我看了篇关于浏览器渲染原理的文章,翻译写的非常好!可以先看看再回来(最下面)。

这里提到了reflow,应该就是我们所说的回流了。回流会加大浏览器的负担,在上面那篇文章里有所提到,解决办法就是1、尽量把元素放在内存处理;2、用类名操作(一次性操作多个嘛,按我的理解,毕竟reflow一般会异步执行或者累积执行);3、对绝对定位的元素来进行操作;4、尽量操作低层次的节点(下是低);

说完回流,说说懒加载。懒加载图片先用个统一的普通图片代替,真正的图片用比如data-src=“xxx.jpg”写在img标签里,等滚到图片附近时再把真正的引用替换给src。这里我想到原生js单是要得到浏览器可视窗口大小,为了兼容就有3个api要写!天哪,写完发现jQuery真亲切,帮你封装好了(window.innerHeight || document.documentElement.ClientHeight || document.body.ClientHeight,而jq就一个$(window).height())。

滚动监听需要注意性能优化,这里来个节流函数,话不多说,抄了端代码过来:

// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time  在time时间内必须执行一次
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date();
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔,触发 handler
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
            // 没达到触发间隔,重新设定定时器
        } else {
            timeout = setTimeout(fun, delay);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));

这throttle函数有个值得说下的地方,就是为什么要返回一个函数呢?想弄明白你就要知道如果不这样做,直接把函数里的变量写到throttle会怎样?本来不想告诉你们,自己去试一试的。算了,我这人忍不住要说,嗯。。。算了,说一半吧,在于arguments的不同。当然,还有一个作用...不然每次滚动startTime都刷新还玩个X。补充一句window.addEventListener('scroll',throttle(lazyload,500,1000));throttle(lazyload,500,1000)已经变成他返回的函数啦。。。

完。

参考:

http://coolshell.cn/articles/9666.html 《浏览器的渲染原理简介》

http://www.cnblogs.com/flyromance/p/5042187.html《滚动加载图片(懒加载)实现原理》

https://zhuanlan.zhihu.com/p/24057749 《前端如何实现图片懒加载(lazyload) 提高用户体验》

h5智能表单

说起h5,特点之一就是表单的强化。

好了,给刚学习前端又不懂后端的新手普及下input怎么传递数据给后台的。懂的可以跳过。比如

<input value="1234" name="haha">

一按提交可以发现浏览器地址那出现xxx/xxxx.html?haha=1234 这样(默认用get方法嘛,所以你简单就看到数据),后台主要分析请求,就能拿到数据啦。嗯,体会下这里属性name的作用。下面进入正题。

一、先说说input标签的type

怎么操作的呢。我从W3C扒下来,结合实践结果来分享下

嗯,不用数了,13个,其中一个目前目前目前(现在是17年8月)我看是废的,还一个是残的。不卖关子了,这里先说下,分别是废的datetime和残的color

不同类型,不同效果(废话)。

url:判断是否为网址,前面还有加上http或者ftp这些开头

number:有个控件可以选择加减

color:选颜色用的,怎么说他残呢?因为我几个浏览器都试过了,点右边颜色没反应,要先点左边的颜色:)

email:移动端下会出现英语键盘!(超人性化!)要你填邮件地址啦,格式不对时,最新浏览器都会提示你,谷歌的在这方面做的最好,其他的也基本跟上了<此话的作用域不限于此:)>

tel:移动端下会出现数字键盘!(超人性化!)嗯,就填数字的。

range:有max,min,step这些,有个控件可以拖动。我想到个“我不常用的”标签:<meter>....................

search:输入框后面有个X可以清空输入。。。有的鸡肋(发现又一小残)

时间:嗯,接下来6个我把它归为时间一类。我只用了谷歌和火狐测试。。。时间一类在火狐都废了。。。嗯,我的火狐还是最新的。

datetime:废的,我还没看到哪个浏览器有效果,呵呵,先留着坑吧。

datetime-local:年月日时分(有日历)

date:年月日

month:年月(呵)

week:周 提交后数据长“2017-W51”大概这样

time:时分

二、其他

我数了数,7个。。

placeholder:很出名嘛  边框里的提示效果,以前的人要写js来实现

autocomplete:这个试了下,要注意,表单里要有name(其他没试过),提过后才会有记忆保存   值是on或者off(十分方便的属性啊)

autofocus:多个input标签都存在该属性时第一个生效

list:看到这个属性我就眼前一亮了!然后用火狐测一下,嗯,眼前暗了一半。还是那句话,谷歌支持得最好(这里又不禁想起h5在移动端的火热,因为手机的浏览器都用webkit作内核,而谷歌以webkit为原型的。如果这里说的不对记得提醒我啊)。list这里可以相当于label那个for。不多说,代码:

<input type="text" list="la">
<datalist id='la'>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</datalist>

这里没有一个属性是浪费的,datalist我看是select的增强版

required:强大!不填就没法提交表单数据,cool!

pattern:填正则用的,我试了pattern=“\d{1,3}”,没错意思是输入一至三为数字,其他会提示请输入正确的格式。这里有个bug,我不输入也可以提交。(谷歌火狐同情况,欢迎指正。)

formaction:一般用在提交按钮里,比如你的form里action写着个地址,正常来说你按提交,就提交到action写的地址里。如果你想别的功能,比如保存现在写的东西,你可以在弄个保存按钮,里面就用formaction属性,值就填目标url咯。

好了。完。

 

 

Hello 2017

今天,八月十号,时隔上次写文章(日志)还是高中时,在qq空间写感悟,惨不忍睹,不忍直视这些词也都诠释不了那时的我的青春。

今天是我的第一次写博客,也是因为我刚建好这个博客的第一天,所以总要写的什么,接下来我会把新学到的知识,心得写在这里当做复习和学习交流用,也欢迎大家留言:)