性能
东都花神
这个作者很懒,什么都没留下…
展开
-
深入理解为什么应该使用transform来替代top
在进行页面性能优化的时候,经常被告诫要使用transform替代top来实现动画,这样性能会更好,作为一名有追求的前端,不仅需要知其然还要知其所以然,今天就通过chrome的performance工具来直观展示其中的原因。 源码:<!DOCTYPE html><html lang="zh"&amp原创 2018-05-19 00:38:05 · 8008 阅读 · 1 评论 -
前端性能优化
前端性能优化资源的加载方式懒加载适用场景:页面很长,图片很多原理: 可视区内部的图片正常加载,可视区外的图片src设置为预览图,将图片的src放在img标签的data-src属性中,如<img data-src='img/pic.png' src="img/demo.png"/>实现方式: 1. 手动实现 2. lazyload.js预...原创 2018-05-24 17:47:14 · 290 阅读 · 0 评论 -
chrome,FireFox和Edge性能比较
今天没事,就比较了一下chrome和FireFox在渲染大量图片时的性能,本来想渲染一万张图片,结果chrome要7,8秒,FireFox和Edge直接卡死,最后改用1000张进行比较: 环境: 系统:window10 处理器:Intel i5 7300HQ 内存: 8G 浏览器: chrome67 Firefox61 Edge42.17134测试用例:<...原创 2018-07-16 16:32:58 · 24094 阅读 · 1 评论