码迷,mamicode.com
首页 > Web开发 > 详细

js行内脚本可以随便用吗? 性能优化说:“别,注意点”

时间:2014-12-31 17:52:45      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:

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

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

 

 

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

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

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

              3.使用script的defer属性(不常用,因为浏览器版本和兼容问题)

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

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

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

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

 

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

 

3.使用script的defer属性

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

 

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

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

 

js行内脚本可以随便用吗? 性能优化说:“别,注意点”

标签:

原文地址:http://www.cnblogs.com/chenjzblog/p/4196049.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!