前端性能优化
关注
分享
扫一扫
文章平均质量分 61
『业精于勤』
努力，努力，再努力
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
原生实现图片懒加载
什么是懒加载，大白话就是只加载用户所看到区域的资源，那么懒加载怎么实现呢？ 实现原理就是监听滚动轮，判断当前图片是否在可视区内（包括滚动高度），如果不在就则进行加载 那么就存在一个问题就是，频繁操作DOM，对性能极其不友好，所以我们需要进行节流控制~具体代码如下所示： <!DOCTYPE html> <html> <head> <title>图片lazyload</title> <style>原创 2020-07-13 15:18:49 · 283 阅读 · 0 评论 -
图片使用base64位存储的利弊
优点 提升性能: 网页上的每一个图片，都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64可以随着 HTML 的下载同时下载到本地.减少https请求。 加密: 让用户一眼看不出图片内容 , 只能看到编码。 方便引用: 在多个文件同时使用某些图片时, 可以把图片转为base64格式的文件, 把样式放在全局中, 比如common.css, 以后在用的时候就可以直接加类名, 二不需要多层找文件路径, 会提升效率 缺点原创 2020-07-09 11:09:09 · 2587 阅读 · 0 评论 -
节流与防抖
简介 浏览器中某些计算和处理要比其他的昂贵的很多，例如，DOM操作比起非DOM操作交互需要更多的内存和CPU时间，连续尝试进行过多的DOM相关操作可能会导致浏览器挂起，有时候甚至会崩溃，为了解决这个问题，我们一般都采用节流或者防抖来解决。 节流(throttle) 大于等于指定的时间才执行一次，不管你操作有多迅速，应用场景利用resize多次操作DOM，比如懒加载图片等。 /* ...原创 2019-12-08 17:37:30 · 179 阅读 · 0 评论 -
前端性能优化大全
简介 为什么要进行前端优化呢，因为这决定了用户体验，有数据表明，用户的延迟感知阈值在34ms-137ms,平均值为65ms(中值=54ms)，也就是说如果你的网页打开速度超过这个时间，用户大几率会默默的点x号，所以对于前端而已，性能优化特别重要，那么，大部分优化都是利用缓存，空间换时间。 HTTP Cache 基于http缓存，有以下解决方案 expires cache-control last...原创 2019-06-20 18:44:29 · 700 阅读 · 0 评论