js相关学习

2019-12-09  本文已影响0人  BigTooth_3611

一、 原型和原型链

function Person() {
}
var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

闭包

闭包是能够读取其他函数内部变量的函数
1.优点：

// setTimeout保存循环中的值

for(var i=0; i< 10; i++) {
    setTimeout((function(i) {
        console.log(i);
    })(i));
}
i = null;

堆和栈

堆和栈在不同的场景下，有不同的含义：
（1）程序内存布局场景下，堆与栈表示两种内存管理方式；
（2）数据结构场景下，堆与栈表示两种常用的数据结构。

  1. 这里说的是内存中的堆和栈

数据查询速度比较，stack远远大于heap。
在实际开发过程中，偶尔遇到栈溢出的情况，stack overflow错误，因为stack创建时候，大小是确定的，超过额度大小就会发生栈溢出【当js出现死循环或者错误的递归时候】。heap大小是不确定的，需要可以一直累加。
js是单线程的，那么怎么利用多核的CPU呢？H5的Web Worker标准，允许js脚本创建多个线程，但是子线程受主线程的控制，且不能操作DOM。
stack是线程独占的，heap是线程共有的。

var str = 'hello'; //string 基本类型
var s2 = str.charAt(0); //在执行到这一句的时候 后台会自动完成以下动作 ：
（ 
 var _str = new String('hello'); // 1 找到对应的包装对象类型，然后通过包装对象创建出一个和基本类型值相同的对象
 var s2 = _str.chaAt(0); // 2 然后这个对象就可以调用包装对象下的方法，并且返回结给s2.
 _str = null;  //    3 之后这个临时创建的对象就被销毁了， str =null; 
 ） 
alert(s2);//h 
alert(str);//hello

注意这一瞬间，我们并没有改变原字符串str的值，只是新建了一个_str对象得出结果，赋值给s2
引用类型创建的对象在执行期间一直存在，包装类型创建的对象只存在了一瞬间

  1. 浅拷贝和深拷贝

浏览器渲染原理

1.浏览器渲染过程

2.渲染阻塞

构建DOM树和CSSOM树时，遇到JS，整个解析进程必须等待JS的执行完成才能够继续，这就是所谓的JS阻塞页面。
每次去执行JavaScript脚本都会严重地阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。所以，script标签的位置很重要。

由于CSSOM负责存储渲染信息，浏览器就必须保证在合成渲染树之前，CSSOM和DOM的解析完全结束，浏览器才会进入下一步的渲染，这就是CSS阻塞渲染。
CSS阻塞渲染意味着，在CSSOM完备前，页面将一直处理白屏状态，这就是为什么样式放在head中，仅仅是为了更快的解析CSS，保证更快的首次渲染。

需要注意的是，即便你没有给页面任何的样式声明，CSSOM依然会生成，默认生成的CSSOM自带浏览器默认样式。

3. 回流（重排）和重绘（reflow和repaint）

HTML默认是流式布局的，但CSS和JS会打破这种布局，改变DOM的外观样式以及大小和位置。因此我们就需要知道两个概念：replaint和reflow。

3.1 reflow（回流/重排）

当浏览器发现布局发生了变化，这个时候就需要倒回去重新渲染，大家称这个回退的过程叫reflow。
reflow会从html这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，以确认是渲染树的哪一部分发生变化还是整个渲染树。reflow几乎是无法避免的，因为只要用户进行交互操作，就势必会发生页面的一部分的重新渲染，且通常我们也无法预估浏览器到底会reflow哪一部分的代码，因为他们会相互影响。

3.2 repaint（重绘）

repaint则是当我们改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸和位置没有发生改变。

注意，display:none会触发reflow，visibility: hidden只会触发repaint
visibiliy是隐藏元素，但元素仍然占据着布局空间，它会被渲染成一个空框。所以visibility:hidden只会触发repaint，因为没有发生位置变化。

另外，修改了元素的样式，浏览器并不会立刻reflow或repaint一次，而是会把这样的操作积攒一批，然后做一次reflow，这又叫异步reflow或增量异步reflow。
但是在有些情况下，比如resize窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行reflow。

3.3 引起reflow

现代浏览器会对回流做优化，它会等到足够数量的变化发生，再做一次批处理回流。

3.4 引起repaint

reflow回流必定引起repaint重绘，重绘可以单独触发。
背景色、颜色、字体改变（注意：字体大小发生变化时，会触发回流）

3.5 减少reflow、repaint触发次数

4. 几条关于优化渲染效率的建议

http状态码

分类 分类描述
1** 信息，服务器收到请求，需要请求者继续执行操作
2** 成功，操作被成功接收并处理
3** 重定向，需要进一步的操作以完成请求
4** 客户端错误，请求包含语法错误或无法完成请求
5** 服务器错误，服务器在处理请求的过程中发生了错误
状态码 状态码英文名称 中文描述
200 OK 请求成功。
301 Moved Permanently 永久移动。资源（网页等）被永久转移到其它UR
302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303 See Other 查看其它地址。与301类似。使用GET和POST请求查看
404 Not Found 请求的资源（网页等）不存在
500 Internal Server Error 服务器内部错误，无法完成请求

使用301跳转的场景
1）域名到期不想续费（或者发现了更适合网站的域名），想换个域名。
2）在搜索引擎的搜索结果中出现了不带www的域名，而带www的域名却没有收录，这个时候可以用301重定向来告诉搜索引擎我们目标的域名是哪一个。
3）空间服务器不稳定，换空间的时候。

ajax

Ajax(Asynchronous JavaScript And XML)，异步 JavaScript 和 XML，用于异步请求数据，在不刷新网页的情况下更新页面数据，提升用户体验


image.png

3.优缺点
优点：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>ajax</title>
    </head>
    <body>
        <div id="myDiv"><h2>Let Ajax change this text</h2></div>
        <button onclick="loadXMLDoc()">通过Ajax改变内容</button>
    <script>
        function loadXMLDoc() {
            var xmlhttp;
            if(window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
            }
                      // 每当 readyState 属性改变时，就会调用该函数
            xmlhttp.onreadstatechange = function() {  
                if(xmlhttp.readystate == 4 && xmlhttp.status == 200) {
                    document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open('GET', '/ajax/test1.txt', true);
            xmlhttp.send();  // 将请求发送到服务器
        }
    </script>
    </body>
</html>

5.axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

浏览器数据存储

存储的方式有：
cookie，localstorage，sessionstorage


111.png

cookie的弊端：
1.每次请求都会携带cookie里面的信息，增加流量的消耗
2.明文存储不安全
3.用户登录之后，关闭页面，重新打开之后为什么还能获取之前的用户信息？
用户登录成功之后后台会随机生成一个用户登录信息（sessionId）,并将登录信息存放在cookie中，下次访问页面时，服务端会先去cookie中获取sessionId，并判断其真实有效性（可以用来处理单点登录）

跨域

1.跨域出现的原因：浏览器的同源策略（同源策略是浏览器的安全策略）

当前页面url 被请求页面url 是否跨域 原因
http://www.test.com/ http://www.test.com/index.html 否 同源（协议、域名、端口号相同）
http://www.test.com/ https://www.test.com/index.html 跨域 协议不同（http/https）
http://www.test.com/ http://www.baidu.com/ 跨域 主域名不同（test/baidu）
http://www.test.com/ http://blog.test.com/ 跨域 子域名不同（www/blog）
http://www.test.com:8080/ http://www.test.com:7001/ 跨域 端口号不同（8080/7001）

2.非同源限制

3.跨域解决方法

(1) 设置document.domain解决无法读取非同源网页的 Cookie问题
因为浏览器是通过document.domain属性来检查两个页面是否同源，因此只要通过设置相同的document.domain，两个页面就可以共享Cookie（此方案仅限主域相同，子域不同的跨域应用场景。）

// 两个页面都设置
document.domain = 'test.com';

(2) 跨文档通信 API：window.postMessage()
调用postMessage方法实现父窗口http://test1.com向子窗口http://test2.com发消息（子窗口同样可以通过该方法发送消息给父窗口）

它可用于解决以下方面的问题：


// 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title');
 
// 父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');

调用message事件，监听对方发送的消息

// 监听 message 消息
window.addEventListener('message', function (e) {
  console.log(e.source); // e.source 发送消息的窗口
  console.log(e.origin); // e.origin 消息发向的网址
  console.log(e.data);   // e.data   发送的消息
},false);

(3) JSONP
JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。
核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

(4) 配置webpack代理解决跨域

proxyTable: {
        '/api': {
            target: 'http://beta-pvg.goms.com.cn',
            changeOrigin: true, //是否跨域
            pathRewrite: {
                '^/api': ''
            }
        }
},

4.CORS
CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。
(1) 普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
(2) 带cookie跨域请求：前后端都需要进行设置
【前端设置】根据xhr.withCredentials字段判断是否带有cookie

web安全问题

1.SQL注入(SQL Injection)

定义
由于程序中对用户输入检查不严格，用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。
原因分析
其本质是对于输入检查不充分，导致SQL语句将用户提交的非法数据当作语句的一部分来执行。
风险
SQL盲注：如果系统屏蔽了详细的错误信息，那么对攻击者而言就是盲注入，可能会查看、修改或删除数据库条目和表
使用SQL注入的认证旁路：可能会绕开 Web 应用程序的认证机制
例子

image.png
预防措施

2.跨站脚本攻击(XSS)

定义
XSS攻击是Web攻击中最常见的攻击方法之一，它是通过对网页注入可执行代码且成功地被浏览器 执行，达到攻击的目的
形成了一次有效XSS攻击，一旦攻击成功，它可以获取用户的联系人列表，然后向联系人发送虚假诈骗信息，可以删除用户的日志等等，有时候还和其他攻击方式同时实 施比如SQL注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼，它带来的危害是巨 大的，是web安全的头号大敌。
分类
XSS反射型攻击，恶意代码并没有保存在目标网站，通过引诱用户点击一个链接到目标网站的恶意链接来实施攻击的。
XSS存储型攻击，恶意代码被保存到目标网站的服务器中，这种攻击具有较强的稳定性和持久性，比较常见场景是在博客，论坛等社交网站上，但OA系统，和CRM系统上也能看到它身影，比如：某CRM系统的客户投诉功能上存在XSS存储型漏洞，黑客提交了恶意攻击代码，当系统管理员查看投诉信息时恶意代码执行，窃取了客户的资料，然而管理员毫不知情，这就是典型的XSS存储型攻击。
例子：

image.png
对用户提交的所有内容进行过滤，对url中的参数进行过滤，过滤掉会导致脚本执行的相关内容；
对动态输出到页面的内容进行html编码，使脚本无法在浏览器中执行。

对输入的内容进行过滤，可以分为黑名单过滤和白名单过滤。黑名单过滤虽然可以拦截大部分的XSS攻击，但是还是存在被绕过的风险。白名单过滤虽然可以基本杜绝XSS攻击，但是真实环境中一般是不能进行如此严格的白名单过滤的。

对输出进行html编码，就是通过函数，将用户的输入的数据进行html编码，使其不能作为脚本运行。

如下，是使用php中的htmlspecialchars函数对用户输入的name参数进行html编码，将其转换为html实体

#使用htmlspecialchars函数对用户输入的name参数进行html编码，将其转换为html实体
$name = htmlspecialchars( $_GET[ 'name' ] );

如下，图一是没有进行html编码的，图2是进行了html编码的。经过html编码后script标签被当成了html实体。


image.png
image.png

我们还可以服务端设置会话Cookie的HTTP Only属性，这样，客户端的JS脚本就不能获取Cookie信息了

3.跨站请求伪造（CSRF/XSRF ）

在浏览器的同源策略的约束下，对于跨域资源交互进行处理时，【通常允许跨域资源嵌入（Cross-origin embedding）】
下面是常见跨域资源嵌入示例：

3.1 CSRF 攻击原理

image.png

3.2 如何防御 CSRF

POST /bank/transfer.aspx HTTP/1.1
Referer: http://evilsite.com/myevilblog
User-Agent: Mozilla/4....
Host: www.altoromutual.com
Content-Length: 42
Cookie: SessionId=x3q2v0qpjc0n1c55mf35fxid;

不少站点通过 referer 验证来防止盗链本站图片资源。
不过由于 http 头在某些版本的浏览器上存在可被篡改的可能性，所以这个解决方案并不完善

<form id="transferForm" action="https://www.altoromutual.com/bank/transfer.aspx" method="post">

Enter the credit account:
<input type="text" name="creditAccount" value="">
Enter the transfer amount:
<input type="text" name="transferAmount" value="">

<input type="hidden" name="xsrftoken" value="JKBS38633jjhg0987PPll">

<input type="submit" value="Submit">

</form>

或者将服务端动态生成的 Token 加入到 自定义 http 请求头参数中

POST /bank/transfer.aspx HTTP/1.1
Referer: https://www.altoromutual.com/bank
xsrftoken: JKBS38633jjhg0987PPll
User-Agent: Mozilla/4....
Host: www.altoromutual.com
Content-Length: 42
Cookie: SessionId=x3q2v0qpjc0n1c55mf35fxid;

creditAccount=1001160141&transferAmount=10

token 解决方案的问题在于前后端代码的巨大变更。并且每一步都动态生成 token 并且对 token 进行验证的话，也会造成额外的资源开销。可以尝试在关键性操作的地方再加上 token 验证逻辑。但是，token 验证所带来的前后端代码的变动所带来的消耗，则需要慎重考虑

上一篇 下一篇

猜你喜欢

热点阅读