对于脚本的加载方式,很多人会选择外部加载的方式,但很时候却不得不使用行内脚本的方式,使用行内脚本有很多需要注意的地方,并不是用的越多越好,
你是否考虑到性能优化的问题,如果是,那请你在使用的时候注意以下这些问题,或许会帮助到你.
##行内脚本会阻塞并行下载影响加载性能,当行内脚本进行加载的使用,其他的资源下载就会阻塞停止,同时行内脚本也会影响到浏览器渲染。
解决方案:1.把行内脚本移动到底部进行加载
2.使用异步回调启动js的执行
3.使用script的defer属性(不常用,因为浏览器版本和兼容问题)
1.把行内脚本移动到底部进行加载
直接把行内脚本放置在整个body后进行加载
2.使用异步回调启动js的执行
第一种方法:用settimeout()方法实现js的异步启动。使用settimeout()方法的好处在于js在延迟加载的时间中,浏览器可以对其他资源进行渲染提高效率。
第二种方法:通过触发window.onload()方法触发调用js函数,实现异步回调启动js
3.使用script的defer属性
defer属性只用部分浏览器支持,故不建议使用
最后,补充一个很重要的影响行内脚本加载速度的问题:
在网页加载的过程中,大部分的加载都不会阻塞行内脚本的加载,但有一个瘤子叫样式表,在样式表后加载的行内脚本会阻塞其他资源的下载。 这是因为浏览器要保持css和javascript的执行顺序的解析所导致的,故有一个很大的风险就是把行内脚本放置在样式表之后加载,避免问题发生的最好方案就是调整行内脚本的位置,让它不出现在样式表和其他资源之间,如果其他资源也是外部脚本的话,行内脚本和外部脚本可能会有代码依赖,出于这个问题,最好的建议就是把行内脚本放置在样式表之前,这样可以避免发生代码依赖。如果没有代码依赖,则把行内脚本移到其他资源自后,这样有利于其他资源的下载,和浏览器的渲染,使其整个网页加载获得更好的效果。