第三篇《性能优化》
减少体积
- 利用webpack等压缩工具(js压缩,css压缩,img压缩)
- 提供公共方法,第三方库
- gzip压缩
- http2
合理分配CDN资源和域名
每个游览器的同一域名下的在相同时间段内有一个最大连接数
合理分配不同的域名,可以让游览器更快的进行请求,不至于堵塞
缓存
网络资源,缓存,更快的进入页面
对第一次进入页面美业影响,对第二次及为需要更新时,影响最为明显
如果需要更新:
进入页面时判断当前版本号是否与所需版本号一致,不一致进行更新
还可以部分数据缓存,例如:localStorage
对资源进行后加载或者换种方法加载
瀑布流图片,懒加载,先出现骨架屏
webp图片,判断UA头,加载不同后缀的图片
兼容js可以判断UA头,进行加载
单页面应用按需加载
减少DNS查询
避免重定向
js性能提升
- 减少dom操作
- 避免阻塞
- 适当使用节流和防抖,可以提升很大的用户体验
- 动画优先考虑css动画
- 代码优化
- 作用域
访问当前作用域之外的变量时间会增加,所以 访问全局变量总是比访问局部变量要慢,因为需要遍历作用域链。只要能减少花费在作用域链上的时间,就能增加脚本的整体性能。
// 通过创建一个指向document的局部变量,就可以通过限制一次全局查找来改进此函数的性能。function updateUI() {
var doc = document,
imgs = doc.getElementByTagName("img");
for(var i = 0, len = imgs.length; i < len; i ) {
imgs[i].title = doc.title " image " i;
}}
- 减少DOM操作
DOM操作应该是脚本中最耗性能的一类操作,例如增加、修改、删除 元素或者对 DOM集合进行操作。如果脚本中包含了大量的 DOM操作则需要注意
限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来。有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记。这
DOM操作还需要考虑浏览器的 Reflow和Repaint ,因为这些都是需要消耗资源的
对不同游览器区别对待
- babel-prollfill并不是所有游览器都需要的
- 还有目前有绝大多数的游览器已经支持语法
- 可以对不支持的使用不支持的语法
- 支持的使用支持的语法
- 一个是代码量减少,
- 一个是运行速度也会加快
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfjgkaf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01