aredleave

2017年9月23日

摘要： web前端是应用服务器处理之前的部分，前端主要包括：HTML,CSS,javascript,image等各种资源，针对不同的资源有不同的优化方式。内容优化 (1)减少HTTP请求数:这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这阅读全文

posted @ 2017-09-23 21:44 aredleave 阅读(219) 评论(0) 推荐(0) 编辑

css如何引入第三方字体

摘要： UI妹子的设计图有很多好看的图标，总不能让人家全部抠出来，然后当成图片一个一个的放上去吧！有一些三方字体库中是可以找到的，比较相似的，那就和UI协商叫她换下啦。。。那么，css如何引入第三方字体？我用的阿里巴巴矢量图库，比较方便，想要哪个图标就下载哪个，不用把整个库全部拉下来。 1、百度搜索：阅读全文

posted @ 2017-09-23 21:44 aredleave 阅读(1085) 评论(0) 推荐(0) 编辑

图片懒加载原理-实例一

摘要：这是借助通过网上的一个例子，自己做了一些优化什么是图片懒加载？当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。避免网页打开时加载过多资源，让用户等待太久。下面介绍实现步骤： 1、设置d 阅读全文

posted @ 2017-09-23 21:43 aredleave 阅读(254) 评论(0) 推荐(0) 编辑

2017年9月22日

图片懒加载原理-实例二

摘要：接着上面做一下补充： 1、dataset的用法，与attribute的区别 2、获取图片到页面顶部高度的正确方法 3、怎样处理已经显示的图片重复遍历的问题 4、 scroll事件的触发频率很快，怎么减小其处理函数的调用频率与dataset和getAttribute 1、它是html5自定义属性，阅读全文

posted @ 2017-09-22 09:20 aredleave 阅读(215) 评论(0) 推荐(0) 编辑

节流函数(throttle)的原理

摘要： throttle节流函数，就是一个函数调用的频率控制器；如下代码，safe每隔500ms才会为true，所以srollFn最快500ms执行一次。阅读全文

posted @ 2017-09-22 09:19 aredleave 阅读(422) 评论(0) 推荐(0) 编辑

防抖动函数(debounce)的原理

摘要： debounce就是防抖动，在间隔不超过500ms的情况下，不管debounce执行多少次， lazyLoad都只执行一次； clearTimeout使得lazyLoad不会立即执行，每次debounce调用都会重置定时器，并再次等待，只有等debounce不再调用，并等待500ms之后lazyL 阅读全文

posted @ 2017-09-22 09:19 aredleave 阅读(1140) 评论(0) 推荐(0) 编辑

立即执行函数(immediate)的原理

摘要： immediate与debounce相似，immediat连续执行，且间隔不超过500ms，lazyLoad只执行一次，不同于immediate的是现在lazyLoad会先执行， demo-immediate：阅读全文

posted @ 2017-09-22 09:18 aredleave 阅读(476) 评论(0) 推荐(0) 编辑

图片懒加载原理-实例三

摘要：整合前面的一些问题，还发现一些不足： 1、当滚动太快突然停止时，后面的图片不加载这更加类似immediate了，需要改进 2、用到了setTimeout，应该保证this的原有指向不变 3、节流函数用处较多，应该将它独立出来阅读全文

posted @ 2017-09-22 09:17 aredleave 阅读(154) 评论(0) 推荐(0) 编辑

图片懒加载原理-实例四：首屏加载

摘要：用于实际项目中，后期再次发现一个不足之处： 1、有的用户会在页面打开时，突然拉到中间某个位置，应该使用首屏加载方式。 2、需要使用前面说的添加节点的方式：<div class="imgWrap" data-src="../images/1.jpg"></div> 已经加载的图片，其从arrImgBo 阅读全文

posted @ 2017-09-22 09:17 aredleave 阅读(141) 评论(0) 推荐(0) 编辑

js运算符优先级

摘要：优先级由高到低：小括号(xxx) > 属性访问. > new foo() > foo() 除了 …扩展运算符以外，就是 . 运算符和 [ ] 运算符最优先，就先匹配它的左右，以 . 的位置隔开，用括号括起来，匹配成完整的“对象.属性名” 的格式，或者“对象[属性名]” 然后在匹配，其它的格式，阅读全文

posted @ 2017-09-22 09:16 aredleave 阅读(207) 评论(0) 推荐(0) 编辑

公告