2020/7/27前端学习日记

HTML

iframe
内联框架元素。它能够将另一个HTML页面嵌入到当前页面中。（就是HTML中的HTML）
具体使用场景及用法暂未深入了解。

缺点：
会阻塞主页面的onload事件；
搜索引擎无法解读这种页面，不利于SEO；
iframe和主页面共享连接池，会影响性能。

通信问题

同域的情况下

调用函数
父级页面调用子页面的函数 name.window.func();
子页面调用父级页面的函数 parent.window.func();

访问页面元素
同样window

跨域问题（还没看呢哈哈）

HTML5新元素

HTTP和HTTPS

HTTP：超文本传输协议。基于TCP。（基本概念不赘述了）
HTTPS：HTTP的安全版。在HTTP下加入了SSL层。

-SSL和TLS的关系：TLS是SSL3.0标准化的产物。SSL/TLS是一种加密通道的规范。
SSL有1，2，3三个版本，仙子啊只是用第三个版本。
TLS有1.0，1.1，1.2三个版本，默认使用1.0
TLS1.0和SSL3基本没有区别。事实上我们现在用的都是TLS。

HTTP的缺点

• HTTP协议通信使用明文
• HTTP不会验证通信双方的身份

1.接收到请求的服务器可能是伪装的服务器
2.接收到响应的客户端可能是伪装的客户端
3.无法确定通信双方是否存在具备访问权限（因为某些内容，只想发送给特定的用户，普通用户可能没有权限访问）
4.即使是无意义的请求也会来者不拒，无法阻止海量请求下的DOS攻击
(摘自https://blog.csdn.net/lvyibin890/article/details/82460186）

• HTTP无法证明保温的完整性
  客户端接收到的响应无法保证与服务器发出的响应的内容是一样的，可能在传输过程中被篡改。

HTTPS的出现

解决未加密的问题

-SSL对称密钥加密：即使用同一个密钥加密解密信息。
优点：处理速度快。
缺点：容易被第三方盗取。
-SSL非对称密钥加密：使用一对密钥加密，一个是公钥，一个是私钥，私钥不能让别人知道，公钥可以随意发布。
原理是这样的：客户端发起请求，服务器创建一对非对称密钥，将公钥的信息发送给客户端，将私钥信息保留。客户端使用公钥加密信息发送给服务器，服务器使用私钥解密信息。
优点：更加安全，不易被盗取。
缺点：处理速度慢，效率低。

所以HTTPS采用混合加密的方式。先使用非对称密钥对之后要用到的对称密钥信息加密传输，之后确保了对称密钥的安全性后使用对称密钥进行加密传输。

验证身份

使用SSL中的证书进行身份验证，客户端在建立连接的时候会先验证一下服务器的证书，用来确认访问的是否是这个服务器，服务器持有第三方发给的证书，将次证书返回给客户端，于是身份验证就成功了。同时客户端也持有证书，这样服务器就知道我访问的到底是不是这个人了。

防止数据被篡改
SSL协议

HTTP2.0
优化内容

1. 二进制分帧（http2.0的基石）
在二进制分帧层上，http2.0会将所有传输信息分割为更小的消息和帧，并对它们采用二进制格式的编码将其封装，新增的二进制分帧层同时也能够保证http的各种动词，方法，首部都不受影响，兼容上一代http标准。
2. 多路复用
在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量的限制，超过限制数目的请求会被阻塞。
而http2.0中的多路复用优化了这一性能。多路复用允许同时通过单一的http/2 连接发起多重的请求-响应消息。有了新的分帧机制后，http/2 不再依赖多个TCP连接去实现多流并行了。
http2.0连接是持久化的，客户端和服务端之间只需要一个连接（每个域名一个连接）即可。多路复用意味着来自很多流的数据包能勾混合在一起通过同样的连接传输，当到达终点时，再根据不同帧首部的流标识符重新连接将不同的数据流进行组装。

3. 头部压缩
http1.x的头带有大量信息，而且每次都要重复发送。http/2使用encoder来减少需要传输的header大小，通讯双方各自缓存一份头部字段表，既避免了重复header的传输，又减小了需要传输的大小。
对于相同的数据，不再通过每次请求和响应发送，通信期间几乎不会改变通用键-值对(用户代理、可接受的媒体类型，等等)只需发送一次。
如果首部发生了变化，则只需将变化的部分加入到header帧中，改变的部分会加入到头部字段表中，首部表在 http 2.0 的连接存续期内始终存在，由客户端和服务器共同渐进地更新。

4. 请求优先级
服务器可以根据流的优先级，控制资源分配（CPU、内存、带宽），而在响应数据准备好之后，优先将最高优先级的帧发送给客户端。高优先级的流都应该优先发送，但又不会绝对的。绝对地准守，可能又会引入首队阻塞的问题：高优先级的请求慢导致阻塞其他资源交付。
●优先级最高：主要的html

●优先级高：CSS文件

●优先级中：js文件

●优先级低：图片

5. 服务端推送
服务器可以对一个客户端请求发送多个响应，服务器向客户端推送资源无需客户端明确地请求。并且，服务端推送能把客户端所需要的资源伴随着index.html一起发送到客户端，省去了客户端重复请求的步骤。

不过与之相比，服务器推送还有一个很大的优势：可以缓存！也让在遵循同源的情况下，不同页面之间可以共享缓存资源成为可能。

注意两点：

1、推送遵循同源策略；

2、这种服务端的推送是基于客户端的请求响应来确定的。

请求方法

• get
  会显示请求指定的资源，一般来说只用于数据的读取，被认为是不安全的方法。
• head
  与get方法一样，都是想服务器发出指定的资源的请求，但是服务器响应的请求不会回传资源的内容部分，head方法常被用于客户端查看服务器性能。
• post
  post请求会向指定资源提交数据，请求服务器进行处理。如表单数据提交，文件上传等。请求数据会被包含在请求体中。
• put
  put请求会向指定资源位置上传最新内容。通过该方法可以将指定资源的最新数据传送给服务器取代指定资源的内容。
• delete
  用于请求服务器删除所请求的URI。
• connect
  通常用于SSL加密服务器的链接与非加密HTTP代理服务器的通信
• options
  options和head类似，一般也是用于客户端查看服务器的性能。
• trace
  请求服务器回显其收到的请求信息，用于HTTP请求的测试和诊断。

常见状态码
1xx：表示临时响应并需要请求者继续执行操作的状态代码，一般作为中间状态不会出现在响应行中。
2xx：表示成功处理了请求的状态代码。

• 200：服务器已成功处理了请求。

3xx：重定向，表示要完成请求需要进一步操作。

• 301：永久移动：请求的网页已经永久移动到了新的位置。（下一次访问新的域名）
• 302：临时移动：服务器目前从不同位置的网页响应请求，但是后续的请求应使用原有位置（比如登录账号）
• 304：未修改：自从上次请求后网页未修改过。服务器不会返回网页内容。（协商缓存）

4xx：客户端错误

• 404：未找到：服务器没有找到请求的资源（URL输入错误）

5xx：服务器错误

• 500：服务器内部错误

浏览器

（重点重点重点！！！）在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么？

1.DNS域名解析
这个就不用多说了，先查找本地缓存：浏览器缓存-》操作系统缓存-》路由器缓存，如果没有则查询DNS服务器。

2.建立TCP连接
三次握手

3.传输数据

4.关闭TCP连接
四次挥手

5.渲染页面
解析HTML生成DOM树，解析CSS生成CSSOM树，布局，绘制。

6.加载JavaScript脚本

TCP和UDP

区别

1. TCP是面向连接的，UDP是无连接的；
2. TCP提供可靠服务（无差错，不丢失，不重复），UDP不可靠，可能会丢包；
3. TCP是面向字节流的，UDP是面向报文的（网络拥塞不会使发送速率降低，因为会产生丢包，例子：视频通话）
4. TCP1对1，UDP可以1对1，可以1对多；

TCP三次握手
第一次握手：客户端向服务端发送一段TCP报文，其中SYN表示“请求建立连接”，序号Seq为X（一般为1）；
第二次握手：服务端接收到来自客户端的TCP报文后返回一段TCP报文，其中SYN=1，ACK=X+1,序号Seq=Y，表示确认客户端的Seq序号有效，服务器能正常接收客户端发送的数据，并同意创建新连接“；
第三次握手：客户端确认，ACK=1，Seq=X+1，Ack=Y+1，表示客户端能正常接受服务端发送的数据。

三次握手是为了防止一些已经失效的连接请求报文段突然传到服务端导致错误或者资源的浪费。

四次挥手
1.客户端告诉服务端：我没有消息要发送了，要结束连接；
2.服务端告诉客户端：好的，我看看我又没有消息没有发的了；
3.服务端告诉客户端：我也没有消息要发送了；
4.客户端告诉服务端：好的，那我关闭连接了。

算法题

青蛙跳台阶问题
一只青蛙一次可以跳上1级台阶，也可以跳上2级台阶。求该青蛙跳上一个 n 级的台阶总共有多少种跳法。

答案需要取模 1e9+7（1000000007），如计算初始结果为：1000000008，请返回 1。

示例 1：

输入：n = 2
输出：2

示例 2：

输入：n = 7
输出：21

class Solution {
    public int numWays(int n) {
        if(n == 0) return 1;
        else if(n == 1) return 1;
        else if(n == 2) return 2;
        int[] dp = new int[n + 1];
        dp[1] = 1;
        dp[2] = 2;
        for(int i = 3;i < n + 1;i++){
            dp[i] = dp[i-1] + dp[i-2];
            dp[i] %= 1000000007;
        }
        return dp[n];
    }
}

和前一天的题一样的解法，动态规划。

旋转数组的最小数字
把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个递增排序的数组的一个旋转，输出旋转数组的最小元素。例如，数组 [3,4,5,1,2] 为 [1,2,3,4,5] 的一个旋转，该数组的最小值为1。

示例 1：

输入：[3,4,5,1,2]
输出：1

示例 2：

输入：[2,2,2,0,1]
输出：0

class Solution {
    public int minArray(int[] numbers) {
        if(numbers.length == 0 || numbers == null) return 0;
        int left = 0, right = numbers.length - 1;

        while(left < right){
            int mid = left + (right - left)/2;
            if(numbers[mid] < numbers[right]){
               right = mid;
            }else if(numbers[mid] > numbers[right]){
                left = mid + 1;
            }else{
                right--;
            }
        }
        return numbers[left];
    }
}

这题之前做过，使用二分查找是效率最高的。大概思路是每次查找的中间值与右端的值相比较，如果大于右端值，说明最小值是在右半段，将left设为mid + 1，如果小于右端值，说明最小值是在自己以及左半段，这里要注意的是如果最小值不止一个，那么就不能直接将right设为mid - 1，因为mid自身有可能是最小值，所以如果 是mid值与right值是相等的话不能保证他们是同一个数，所以此时的操作应该是将right–，即便之后right不是最小值了，但是能保证low或者mid还可能是最小值。

矩阵中的路径
请设计一个函数，用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径。路径可以从矩阵中的任意一格开始，每一步可以在矩阵中向左、右、上、下移动一格。如果一条路径经过了矩阵的某一格，那么该路径不能再次进入该格子。例如，在下面的3×4的矩阵中包含一条字符串“bfce”的路径（路径中的字母用加粗标出）。

[[“a”,“b”,“c”,“e”],
[“s”,“f”,“c”,“s”],
[“a”,“d”,“e”,“e”]]

但矩阵中不包含字符串“abfb”的路径，因为字符串的第一个字符b占据了矩阵中的第一行第二个格子之后，路径不能再次进入这个格子。

示例 1：

输入：board = [[“A”,“B”,“C”,“E”],[“S”,“F”,“C”,“S”],[“A”,“D”,“E”,“E”]], word = “ABCCED”
输出：true

示例 2：

输入：board = [[“a”,“b”],[“c”,“d”]], word = “abcd”
输出：false

解法是深度优先搜索（果然还是没掌握好。。）
算法原理：
深度优先搜索：可以理解为暴力遍历矩阵中所有字符串的可能性。
剪枝：在搜索中，碰到不可能与当前字符匹配成功的情况立即返回，如越界，字符已被访问，字符不匹配。

class Solution {
    public boolean exist(char[][] board, String word) {
        char[] words = word.toCharArray();
        for(int i = 0;i < board.length;i++){
            for(int j = 0;j < board[0].length;j++){
                if(dfs(board,words,i,j,0)) return true;
            }
        }
        return false;
    }

    boolean dfs(char[][] board,char[] words,int i,int j,int k)
    //递归参数矩阵board中的索引i,j，当前字符在word中的索引k.
    {
        if(i < 0||i >= board.length||j < 0||j >= board[0].length||board[i][j] != words[k]) return false;
        //行或列索引越界、字符不匹配（包括已访问的情况）直接返回false
        if(k == words.length - 1) return true;
        //字符串已匹配完成
        char tmp = board[i][j];
        board[i][j] = '/';
        //设置当前字符为已访问，这本次搜索中将不再访问他。
        boolean res = dfs(board,words,i+1,j,k+1) || dfs(board,words,i-1,j,k+1)
                    ||dfs(board,words,i,j+1,k+1) || dfs(board,words,i,j-1,k+1);
        board[i][j] = tmp;
        //还原矩阵中的字符，以防止影响到其他的搜索结果。
        return res;
    }
}

机器人的运动范围
地上有一个m行n列的方格，从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动，它每次可以向左、右、上、下移动一格（不能移动到方格外），也不能进入行坐标和列坐标的数位之和大于k的格子。例如，当k为18时，机器人能够进入方格 [35, 37] ，因为3+5+3+7=18。但它不能进入方格 [35, 38]，因为3+5+3+8=19。请问该机器人能够到达多少个格子？

示例 1：

输入：m = 2, n = 3, k = 1
输出：3

示例 2：

输入：m = 3, n = 1, k = 0
输出：1

我还是按照上题的思维使用深度搜索来做（虽然还是看了大神的题解，太菜了）。
这里我写了一个函数来判断m和n的各位数值加起来是否大于k（这函数写的很没有水平。。）每次访问一个单元格便将他设置成已访问，这里要注意的是不需要再像上一题一样对上下左右四个方位进行深搜，只需要每次向下向右进行搜索，所以在剪枝的时候可以不用写i<0和j<0两个条件。

class Solution {
    int m;
    int n;
    int k;
    boolean[][] visited;
    public int movingCount(int m, int n, int k) {
        this.m = m;
        this.n = n;
        this.k = k;
        this.visited = new boolean[m][n];
        return dfs(0,0);
    }

    int dfs(int i,int j){
        if(!mnk(i,j,k) || i >= m || j >= n || visited[i][j]) return 0;
        visited[i][j] = true;
        return dfs(i+1,j) + dfs(i,j+1) + 1;
    }

    boolean mnk(int num1, int num2, int sum){
        while(num1 > 0){
            sum -= num1%10;
            num1 /= 10;
        }
        while(num2 > 0){
            sum -= num2%10;
            num2 /= 10;
        }
        return sum>=0 ? true : false;
    }
}

ps：今天因为把之前看的内容复习了一下，也算之把之前没记录的知识补充上来了，所以内容有点多，并不是今天学了好多哦，不能膨胀了，加油加油！