随笔分类 -  前端优化

转-前端性能优化23条原则
摘要：转载于： https://www.cnblogs.com/littlelittlecat/p/6798918.html 转载方式： 手打 转载者： lemon-Xu 前端性能优化 1. 减少HTTP请求次数 尽量合并图片、CSS、JS。比如加载一个页面，如果有5个CSS文件的话，那么会发出5次htt 阅读全文
posted @ 2020-09-23 18:13 lemon-Xu 阅读(354) 评论(0) 推荐(0)
前端优化 防抖与节流
摘要：事件优化 防抖与节流 防抖： 所谓防抖，就是把触发非常频繁的事件合并成一次去执行。即在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算。 指触发事件后在n秒内只执行一次，若在n秒内再次触发则重新计算 节流： 所谓节流，是指频繁触发事件时，只会 阅读全文
posted @ 2020-09-22 14:25 lemon-Xu 阅读(1274) 评论(0) 推荐(0)
JS 动画优化 代码篇
摘要：动画优化 匀速运动 将box匀速移动到屏幕右边界， box的右边框 边界处理问题 每次移动之前都判定，这次移动是否碰撞到边界， 如果碰撞到就将它的位置设置为边界.client - 盒子.offsetWidth； 否则移动一个步长 代码 <!DOCTYPE html> <html lang="en"> 阅读全文
posted @ 2020-09-16 12:52 lemon-Xu 阅读(364) 评论(0) 推荐(0)
JS 图片延迟加载/懒加载
摘要：图片延迟加载/懒加载 作用: 保证页面打开的速度(1s之内如果首页打不开就已经算是死亡页面了) 原理: 1.对于首屏内容中的图片: 首先给对应的区域一张默认图片占着位置(默认图需要非常的小, 一般可以维持在5kb以内, 1kb是最好的), 当首屏内容都加载完成后(或者也可以给一个延迟的时间), 我在 阅读全文
posted @ 2020-09-13 22:41 lemon-Xu 阅读(589) 评论(0) 推荐(0)
JS 滚动条卷去高度 回到顶部按钮实现
摘要：浏览器滚动条卷去的高度(scrollTop) JS盒子模型中: client系列/ offset系列/ scrollWidth/ crollHeight, 都是只读属性, 不能通过属性修改元素的样式 scrollTop/ scrollLeft: 滚动条卷去的高度/ 宽度, 是可读写属性. 直接回到顶 阅读全文
posted @ 2020-09-13 18:13 lemon-Xu 阅读(509) 评论(0) 推荐(0)