珍爱网笔试总结

2018-07-23  本文已影响230人  Gopal

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定位有效解决方案

上一篇 下一篇

猜你喜欢

热点阅读