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的执行顺序的解析所导致的,故有一个很大的风险就是把行内脚本放置在样式表之后加载,避免问题发生的最好方案就是调整行内脚本的位置,让它不出现在样式表和其他资源之间,如果其他资源也是外部脚本的话,行内脚本和外部脚本可能会有代码依赖,出于这个问题,最好的建议就是把行内脚本放置在样式表之前,这样可以避免发生代码依赖。如果没有代码依赖,则把行内脚本移到其他资源自后,这样有利于其他资源的下载,和浏览器的渲染,使其整个网页加载获得更好的效果。

时间: 2024-11-03 21:18:02

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

行内脚本的位置放置----css阻塞行内脚本

行内脚本:避免放置在css和其他资源之间. 若在head中,最好放在css样式表之前,如果放置在样式表之后,会引起css阻塞. css阻塞:由于浏览器要保证css和JavaScript的执行顺序,css之后如果有js,浏览器会先等待css下载执行完毕,再去执行这部分行内的js脚本(这是因为行内脚本可能含有依赖样式表中的样式),而脚本的执行也会阻塞后续资源的加载,从而出现css阻塞.所以,一般要将行内脚本放在css之前.这样css就可以和其他资源并行下载了,不会出现阻塞现象.

js 行内下拉菜单

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Document</title> </head> <body>   <div>     <div  style="background-color: gray;width:500px;height:100px;"><

mysql经纬度查询并且计算2KM范围内附近用户的sql查询性能优化实例教程

之前很傻很天真地以为无非就是逐个计算距离,然后比较出来就行了,然后当碰到访问用户很多,而且数据库中经纬度信息很多的时候,计算量的迅速增长,能让服务器完全傻逼掉,还是老前辈的经验比我们丰富,给了我很大的启示. MySQL性能调优 – 使用更为快速的算法进行距离计算 最近遇到了一个问题,通过不断的尝试最终将某句原本占据近1秒的查询优化到了0.01秒,效率提高了100倍. 问题是这样的,有一张存放用户居住地点经纬度信息的MySQL数据表,表结构可以简化 为:id(int),longitude(long

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器:bootstrap table. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5821192.html 一.x-editable组件介绍 x

js 正则过滤 行内 style 样式

js 正则过滤 style 行内样式 及 style 属性 例子:<span style="background:red;color:#fff;border:1px solid red;">你妹</span> js:var reg = /style\s*?=\s*?(['"])[\s\S]*?\1/;var result = '<span style="background:red;color:#fff;border:1px solid

Js获取/设置行内样式和非行内样式

1.获取行内(内嵌.行间)样式: obj.style.attr;进行获取非行间样式. 2.设置行内样式: obj.style.attr = value; 3.获取非行内样式: function getStyle(obj,attr){ //获取非行间样式,obj是对象,attr是值 if(obj.currentStyle){ //针对ie获取非行间样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[

行内js函数调用

<ul> <li onclick=abc(this);><a href="javascript:void(0);">12234588</a></li> <li onclick=abc(this);><a href="javascript:void(0);">12234588</a></li> <li onclick=abc(this);><a

JS:操作样式表1:行内样式

//访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.color); // alert(box.style.fontSize);  对复合属性的写法是去掉中间的“—”,并将第二个单词大写. //alert(box.style.float); //float是关键字,因此最好不要这样写 //对float属性ie和非ie有差异: // alert(box.style.cs

[转]Laravel与bootstrap-editable实现table的行内编辑

[转]Laravel与bootstrap-editable实现table的行内编辑 准备需要的库 bootstrap3.0下载 bootstrap-table下载 x-editable-develop下载 前端处理 引入库 要使用插件,首先要在blade模板(或者说html)里引入对应的js文件和css文件 bootstrap引入 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>