论坛站务软件水平考试华为认证计算机等级PMP认证思科认证Photoshop3DMAX编程语言移动开发系统运维产品运营淘宝营销办公软件Ps修图云计算大数据摄影就业

<h3 style="border: 0px; margin: 0px 0px 20px; padding: 0px; font-size: 20px; font-stretch: normal; line-height: 30px; font-family: &quot;Microsoft YaHei&quot;, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(46, 46, 46); white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 加载图片</h3><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页面打开时需要对所有图片进行检查，是否在可视区域内，如果是就加载。</p><p><img src="/Public/forum/ueditor/image/20170922/1506043595220477.png" title="1506043595220477.png" alt="image.png"/></p><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这里应该是有一个优化的地方，设一个标识符标识已经加载图片的index，当滚动条滚动时就不需要遍历所有的图片，只需要遍历未加载的图片即可。</p><h3 style="border: 0px; margin: 0px 0px 20px; padding: 0px; font-size: 20px; font-stretch: normal; line-height: 30px; font-family: &quot;Microsoft YaHei&quot;, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(46, 46, 46); white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;函数节流</h3><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在类似于滚动条滚动等频繁的DOM操作时，总会提到“函数节流、函数去抖”。</p><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所谓的函数节流，也就是让一个函数不要执行的太频繁，减少一些过快的调用来节流。</p><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基本步骤：</p><ol style="border: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; list-style-position: outside; list-style-image: initial; color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><ol class=" list-paddingleft-2" style="list-style-type: lower-alpha;"><ol class=" list-paddingleft-2" style="list-style-type: lower-roman;"><ol class=" list-paddingleft-2" style="list-style-type: upper-alpha;"><li><p>获取第一次触发事件的时间戳</p></li><li><p>获取第二次触发事件的时间戳</p></li><li><p>时间差如果大于某个阈值就执行事件，然后重置第一个时间</p></li></ol></ol></ol></ol><p><img src="/Public/forum/ueditor/image/20170922/1506043623833010.png" title="1506043623833010.png" alt="image.png"/></p><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这里的<code style="border: 0px; margin: 0px; padding: 0px; font-family: Monaco, Consolas, &quot;Andale Mono&quot;, &quot;DejaVu Sans Mono&quot;, monospace;">mustRun</code>就是调用函数的时间间隔，无论多么频繁的调用<code style="border: 0px; margin: 0px; padding: 0px; font-family: Monaco, Consolas, &quot;Andale Mono&quot;, &quot;DejaVu Sans Mono&quot;, monospace;">fn</code>，只有<code style="border: 0px; margin: 0px; padding: 0px; font-family: Monaco, Consolas, &quot;Andale Mono&quot;, &quot;DejaVu Sans Mono&quot;, monospace;">remaining&gt;=mustRun</code>时<code style="border: 0px; margin: 0px; padding: 0px; font-family: Monaco, Consolas, &quot;Andale Mono&quot;, &quot;DejaVu Sans Mono&quot;, monospace;">fn</code>才能被执行。</p><h2 style="border: 0px; margin: 0px 0px 20px; padding: 0px; font-size: 24px; font-stretch: normal; line-height: 36px; font-family: &quot;Microsoft YaHei&quot;, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(46, 46, 46); white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实验</h2><h3 style="border: 0px; margin: 0px 0px 20px; padding: 0px; font-size: 20px; font-stretch: normal; line-height: 30px; font-family: &quot;Microsoft YaHei&quot;, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(46, 46, 46); white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;页面打开时</h3><p style="text-align: center"><img src="/Public/forum/ueditor/image/20170922/1506043665657665.png" alt="1506043665657665.png"/></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">可以看出此时仅仅是加载了img1和img2，其它的img都没发送请求，看看此时的浏览器</span></p><p><span style="color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"></span></p><p style="text-align: center"><img src="/Public/forum/ueditor/image/20170922/1506043695291938.png" alt="1506043695291938.png"/></p><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第一张图片是完整的呈现了，第二张图片刚进入可视区域，后面的就看不到了~</p><h3 style="border: 0px; margin: 0px 0px 20px; padding: 0px; font-size: 20px; font-stretch: normal; line-height: 30px; font-family: &quot;Microsoft YaHei&quot;, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(46, 46, 46); white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp; &nbsp; &nbsp;页面滚动时</h3><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当我向下滚动，此时浏览器是这样</p><p><span style="color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"></span><img src="/Public/forum/ueditor/image/20170922/1506043729300477.png" alt="1506043729300477.png"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">此时第二张图片完全显示了，而第三张图片显示了一点点，这时候我们看看请求情况</span></p><p><span style="color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"></span></p><p style="text-align: center"><img src="/Public/forum/ueditor/image/20170922/1506043753413692.png" alt="1506043753413692.png"/></p><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img3的请求发出来，而后面的请求还是没发出~</p><h3 style="border: 0px; margin: 0px 0px 20px; padding: 0px; font-size: 20px; font-stretch: normal; line-height: 30px; font-family: &quot;Microsoft YaHei&quot;, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: rgb(46, 46, 46); white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;全部载入时</h3><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当滚动条滚到最底下时，全部请求都应该是发出的，如图</p><p><span style="color: rgb(46, 46, 46); font-family: &quot;Microsoft YaHei&quot;, 宋体, &quot;Myriad Pro&quot;, Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"></span></p><p style="text-align: center"><img src="/Public/forum/ueditor/image/20170922/1506043783131000.png" alt="1506043783131000.png"/></p>

论坛站务软件水平考试华为认证计算机等级PMP认证思科认证Photoshop3DMAX编程语言移动开发系统运维产品运营淘宝营销办公软件Ps修图云计算大数据摄影就业