集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

JS加载太慢怎么办?成都web培训机构老师给你支招!

发布者: 成都达内     浏览次数:     发布时间:2019-02-22 09:13:29

JavaScript运行在手机浏览器上会产生不小的系统开销,由于这个问题存在,Addy osmani 将会带着大家探讨移动端网站的脚本问题,让其在大多数手机浏览器上运行更快,更轻。运行加载Jav...

  JavaScript运行在手机浏览器上会产生不小的系统开销,由于这个问题存在,Addy osmani 将会带着大家探讨移动端网站的脚本问题,让其在大多数手机浏览器上运行更快,更轻。运行加载JavaScript会消耗不小的系统资源,因此延迟了用户的交互响应,今天我将会给大家介绍一些有效的方法策略,提升用户在手机端的使用体验。

成都web培训班

  1、太多的“交互”,让网站更臃肿!

  以下是目前大多数网站存在的问题:

  使用了用户界UI框架(例如bootstrap)

  客户端框架或交互依赖框架(React,vue)

  Polyfills(但是现代浏览器并不需要)

  未压缩的脚本工具库(例如moment.js)

  随着需求的增加,脚本的数量也在增加,体积也再不断变大,因此页面运行的时间也越来越长!

  2、不同类型的手机

  现实就是这样,并非每个人都用得起高端手机,还有大部分用户使用中低端手机。由于中低端手机CPU,GPU的限制,处理JavaScript等资源的时间也不同。因此我们应该在真实的手机环境和网络环境下测试至关重要。检查分析您的用户访问行为至关重要,如果您无法购买太多中低端手机进行测试,你可以使用这个在线网站工具WebPageTest(webpagetest.org/easy),进行在线测试。

  3、减少JavaScript脚本的发送

  Code splitting(代码分割)技术——将会帮你拆解大的JavaScript脚本文件,实现了脚本的按需加载(lazy-load)。这样有效的避免了将单个“main.js”整个站点的脚本文件发送给用户。将代码引入站点的最佳方法是动态import(),如果使用动态import(),我们可以按需加载引入math脚本文件,使用webpack构建的项目也能很方便的实现按需加载。

  4、优化,监控

  如果你不确定你的JavaScript性能是否有问题,你可以使用Chrome提供的Lighthouse——是一个Google开源的自动化工具,主要用于改进网络应用(移动端)的质量。目前测试项包括页面性能、PWA、可访问性(无障碍)、最佳实践、SEO。Lighthouse会对各个测试项的结果打分,并给出优化建议,这些打分标准和优化建议可以视为Google的网页最佳实践。

  还有一件值得你监控和关注的事情,就是检查有没有将未使用的代码发送给用户, code coverage(https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage)——谷歌浏览器开发者工具中的代码覆盖率面板,此面板内会告诉你哪些代码未使用,哪些又是使用了的。这样可以精简掉未使用的代码来减小页面的大小。

  版权声明:文章和图片均来自公开网络,版权归作者本人所有,推送文章除非无法确认,我们都会注明作者和来源。如果出处有误或侵犯到原作者权益,请与达内成都web开发培训机构网站联系删除或授权事宜。

(责任编辑:徐老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56