load和DOMContentLoad的区别
浏览器渲染页面DOM文档加载的步骤:
1.解析HTML结构。
2.加载外部脚本和css文件。
3.解析并执行脚本代码。
4.DOM树构建完成。(此时会触发DOMContentLoaded事件)
5.加载外部图片等文件。
6.页面加载完毕。(此时会触发load事件)
从以上DOM文档加载步骤上可以看出;当浏览器把DOM树构建完成后就开始触发了DOMContentLoaded事件,而load事件则要等包括图片这些加载完毕才会触发。
我们监听事件的时候把优先级高的可以先监听DOMContentLoaded再监听load。
实例:
window.addEventListener("load", function () { //添加load事件
console.log("load执行");
}, false);
window.addEventListener("DOMContentLoaded", function () { //添加DOMContentLoaded事件
console.log("domContentLoad执行");
}, false)
jQuery有三种方式针对文档的加载方法
$(document).ready(function() {
// 跟DOMContentLoaded事件相似
})
//document ready 简写
$(function() {
// .....
})
$(document).load(function() {
//跟load事件相似
})
总结:DOMContentLoaded比load更符合用户体验,因为load还要等其他外部资源(图片之类的)加载完才能执行,而这些资源并不会影响到dom结构,所以我们大部分情况下都可以在dom加载第四步就执行我们的JavaScrip代码,也就是使用DOMContentLoaded。
js去除字符串前后空格
自己的思路:
通过将字符串转换成数组,然后获得第一个不是空格的字符串的位置和最后一个不是字符串的位置,然后使用字符串的slice方法即可。
function clear(str) {
var strArr = [].slice.call(str);
var start,
end;
for (var i = 0; i < strArr.length; i++) {
if (strArr[i] != ' ') {
start = i;
break;
}
}
for (var j = strArr.length; j>=0; j--) {
if (strArr[j] != ' ') {
end = j;
break;
}
}
console.log(str.slice(start, end));
}
clear(' fsg asdfa ');
其实用正则表达式的话是非常简单的
function trimBr (str) {
return str.replace(/(^\s*)|(\s*$)/g, '');
}
如果是jQuery的话,直接使用trim方法即可
$.trim(str)
jquery原生实现
function trim(str){
return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');
}
http://www.jb51.net/article/87107.htm
同源策略
同源策略在web应用的安全模型中是一个重要概念。在这个策略下,web浏览器允许第一个页面的脚本访问第二个页面里的数据,但是也只有在两个页面有相同的源时。源是由URI,主机名,端口号组合而成的。这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。
https://www.jianshu.com/p/beb059c43a8b
实现动态执行JavaScript脚本
document.write
动态创建
指定src
先请求数据,再创建
document.body.insertBefore(script, document.body.firstChild);
https://www.cnblogs.com/love540376/p/5200314.html
http://www.jb51.net/article/78432.htm
原生ajax的具体实现
https://www.cnblogs.com/cythia/p/6978323.html
XXS和CORS
XSS:跨站点脚本攻击
CORS:跨站点请求伪造
完整的http请求
https://www.cnblogs.com/engeng/articles/5959335.html
移动端页面bug定位有效解决方案
-
ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
-
设置meta
-
使用rem单位
-
使用媒体查询进行页面适配
-
事件使用touch事件
网友评论