您的位置:首页 > 运维架构 > 网站架构

性能优越的网站必备:JavaScript之动态加载脚本

2018-03-09 15:15 387 查看
JavaScript在浏览器中的性能,可以认为是开发者所面临的最严重的问题的可用性问题。JavaScript的堵塞特性很复杂,意味着浏览器执行JavaScript脚本的时候不能同时做其他的事情,包括的界面渲染。简单来说,这就意味着script标签每次出现的时候都很霸道的让浏览器等待自己解析完成并且执行,无论是外链还是内嵌,页面的下载和渲染都必须等待当前脚本执行完成

对前端感兴趣或者正在学习web前端的小伙伴可以来前端群:189394454,每天会有干货分享,以及如何学习的方法,每日名额有限,别错过哦!

优化的方法有多种,比如脚本的放置位置,组织脚本大小,延迟脚本加载等,今天就先看看动态加载脚本的方法:

由于文档对象模型(DOM)的存在,我们可以用JavaScript创建几乎所有的HTML元素,当然也包括script了。



动态创建script元素
文件在该元素下被添加到页面时开始下载。这种技术的重点在于:无论何时启动下载,文件的下载和执行过程中都不会堵塞页面的其他进程。但为了保证脚本能够完全正常加载执行,我们必须跟踪并且确保脚本完成。



火狐、谷歌、欧朋等下的动态脚本加载
IE小王子则有着自己独一的方式

下面是封装的一个动态加载脚本的函数(解决的浏览器兼容的问题):



兼容的做法
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息