前端性能优化
mr.啄木鸟
捣鼓点什么
展开
-
前端处理较大数据量防止页面卡死的方法
假设后台一下返回1000条数据,如果我们一次性把它放到页面上,那肯定会造成页面卡顿的,优化思路就是,把列表分割成很多个小数组,然后一段一段的显示到页面。可利用 Api:window.requestAnimationFrame或者setInterval不断填充数据;window.requestAnimationFrame()告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行;// d..原创 2020-05-21 21:15:27 · 28799 阅读 · 2 评论 -
按需加载图片、html代码、js代码,前端页面性能优化
加载一个比较长的页面,或者图片比较多的页面,如果把资源一次性全部加载,在网络不是很好的情况下可能造成页面留白现象,用户体验极差!因此呢,我们可以把用户暂时不会看到或用到的资源先不加载,在某个条件下,如鼠标点击、滚动条高度到某一位置,窗口大小改变等等,按需加载资源!1.按需加载图片 用data-src设置个无效图片地址,滚动条快滚动到图片要显示时,把真正要显示的图片替换回来(...原创 2018-08-03 14:42:04 · 3151 阅读 · 0 评论