js行内脚本可以随便用吗？ 性能优化说：“别，注意点”

对于脚本的加载方式，很多人会选择外部加载的方式，但很时候却不得不使用行内脚本的方式，使用行内脚本有很多需要注意的地方，并不是用的越多越好，

你是否考虑到性能优化的问题，如果是，那请你在使用的时候注意以下这些问题，或许会帮助到你.

 

 

##行内脚本会阻塞并行下载影响加载性能，当行内脚本进行加载的使用，其他的资源下载就会阻塞停止，同时行内脚本也会影响到浏览器渲染。

解决方案：1.把行内脚本移动到底部进行加载

              2.使用异步回调启动js的执行

              3.使用script的defer属性（不常用，因为浏览器版本和兼容问题）

1.把行内脚本移动到底部进行加载

 直接把行内脚本放置在整个body后进行加载

2.使用异步回调启动js的执行

第一种方法：用settimeout（）方法实现js的异步启动。使用settimeout（）方法的好处在于js在延迟加载的时间中，浏览器可以对其他资源进行渲染提高效率。

 

第二种方法：通过触发window.onload()方法触发调用js函数，实现异步回调启动js

 

3.使用script的defer属性

defer属性只用部分浏览器支持，故不建议使用

 

最后，补充一个很重要的影响行内脚本加载速度的问题：

在网页加载的过程中，大部分的加载都不会阻塞行内脚本的加载，但有一个瘤子叫样式表，在样式表后加载的行内脚本会阻塞其他资源的下载。 这是因为浏览器要保持css和javascript的执行顺序的解析所导致的，故有一个很大的风险就是把行内脚本放置在样式表之后加载，避免问题发生的最好方案就是调整行内脚本的位置，让它不出现在样式表和其他资源之间，如果其他资源也是外部脚本的话，行内脚本和外部脚本可能会有代码依赖，出于这个问题，最好的建议就是把行内脚本放置在样式表之前，这样可以避免发生代码依赖。如果没有代码依赖，则把行内脚本移到其他资源自后，这样有利于其他资源的下载，和浏览器的渲染，使其整个网页加载获得更好的效果。