<script>
则暂停渲染,优先加载并执行js代码,完成后再继续渲染render tree,直至完成为何 放在head中,减少卡顿问题,样式出现变化问题,让css在dom tree生成前就生成
为何把js放在最后? 让html、css先渲染出来给用户看,再通过js修改相关内容。
window.onload和DOMContentLoaded
让加载更快
让渲染更快
<img id="img1" src="preview.png" data-realsrc="abc.png" />
<script type="text/javascript">
var img1 = document.getElementById(‘img1‘)
img1.src = img1.getAttribute(‘data-realsrc‘)
</script>
const input1 = document.getElementById(‘input1‘)
let timer = null
input1.addEventListener(‘keyup‘,function(){
if(timer){
在定时期间再次执行则清空定时器,不走onChange事件
clearTimeout(timer)
}
timer = setTimeout(()=>{
console.log(input1.value)
// 清空定时器
timer = null
},500)
})
// 封装一下
function debounce(fn, delay=500){
// timer 是在闭包(函数作为返回值、函数作为参数传入)中的
let timer = null;
return function (){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn.apply(this, arguments)
timer = null
}, delay)
}
}
input1.addEventListener(‘keyup‘,debounce(function(){console.log(input1.value)},600))
<div id="div1" draggable="true">拽一把</div>
<script>
const div1 = document.getElementById(‘div1‘);
let timer = null;
div1.addEventListener(‘drag‘,function(e){
if(timer){
return;
}
timer = setTimeout(()=>{
console.log(e.offsetX,e.offsetY)
timer = null;
},500)
})
</script>
// 封装一下
function throttle (fn,delay=100){
let timer = null;
return function(){
if(timer){
return;
}
timer=setTimeout(()=>{
fn.applay(this,arguments)
timer = null;
},delay)
}
}
div1.addEventListener(‘drag‘,throttle(function(e){
console.log(e.offsetX,e.offsetY)
},200))
<script>
脚本的博客,脚本内容是获取cookie,发送到我的服务器,同时我的服务器配合跨域<script>
就会变成<script> 而不会作为脚本执行。 自己替换太麻烦,可以使用npm包(xss)可以用来解决xss攻击预防:
原文:https://www.cnblogs.com/keepLeung/p/14484362.html