网络与前端性能优化

• ***当前阶段的笔记 ***

「面向实习生阶段」https://www.aliyundrive.com/s/VTME123M4T9 提取码: 8s6v
点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。

1、HTTP 和 HTTPS 区别

2、HTTP1，HTTP2，HTTP3

HTTP1.x 连接无法复用、队头阻塞、协议开销大和安全因素等多个缺陷；
HTTP/1.0传输数据时，每次都需要重新建立连接，增加延迟。
HTTP/1.1虽然加入keep-alive可以复用一部分连接，但域名分片等情况下仍然需要建立多个connection，耗费资源，给服务器带来性能压力。高延迟–带来页面加载速度的降低。无状态特性–带来的巨大HTTP头部。明文传输–带来的不安全性

HTTP2 通过多路复用、二进制流、Header 压缩等等技术，极大地提高了性能，同时提供server push，使服务端通过push的方式将客户端需要的内容推送过去，也叫"cache push"。但是。由于HTTP2采用多路复用，但当这个连接出现丢包现象那就会导致HTTP/2的表现情况反倒不如HTTP/1了。因为在出现丢包的情况下，整个TCP都要开始等待重传，也就导致了后面的所有数据都被阻塞了。但是对于HTTP/1.1来说，可以开启多个TCP连接，出现这种情况反到只会影响其中一个连接，剩余的 TCP 连接还可以正常传输数据。

HTTP3 QUIC 协议基于 UDP实现，是 HTTP/3 中的底层支撑协议，又取了TCP中的精华，实现了即快又可靠的协议

3、HTTP请求与响应的处理

https://zhuanlan.zhihu.com/p/111454804

4、TCI/IP 通信协议

https://blog.csdn.net/m0_49336519/article/details/108454769

5、会话跟踪技术 Cookie 与 Session

https://blog.csdn.net/qq_31510607/article/details/108167176

6、三种数据传输加密机制

https://blog.csdn.net/e3002/article/details/107196409?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_{aggregatepage}first_rank_ecpm_v1~rank_v31_ecpm-1-107196409.pc_agg_new_rank&utm_term=%E7%B3%BB%E7%BB%9F%E6%95%B0%E6%8D%AE%E4%BC%A0%E8%BE%93%E5%8A%A0%E5%AF%86%E7%9A%84%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F&spm=1000.2123.3001.4430

7、防抖/节流

防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

// 防抖：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：如果在200ms内没有再次触发滚动事件，那么就执行函数如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时
// 效果：如果短时间内大量触发同一事件，只会执行一次函数。
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}
// 写完会发现其实 time = setTimeout(fn,delay)是一定会执行的，所以可以稍微简化下：

/*****************************简化后的分割线 ******************************/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}
// 然后是旧代码
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置

// 节流
// 继续思考，使用上面的防抖方案来处理问题的结果是：如果在限定时间段内，不断触发滚动事件（比如某个用户闲着无聊，按住滚动不断的拖来拖去），只要不停止触发，理论上就永远不会输出当前距离顶部的距离。但是如果产品同学的期望处理方案是：即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈呢？
// 我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）。效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。
function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

// 节流throttle代码（定时器）：
var throttle = function(fn, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                fn.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
/* 请注意，节流函数并不止上面这种实现方案,
   例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
   也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
    */
// 时间戳形式
var throttle = function(fn, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　fn.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}       

8、优化渲染效率

你有用过哪些前端性能优化的方法？

• 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
• 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
• 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
• 当需要设置的样式很多时设置className而不是直接操作style
• 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作
• 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)
• 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
• 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

谈谈性能优化问题

• 代码层面：避免使用css表达式，避免使用高级选择器，通配选择器
• 缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
• 请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载
• 请求带宽：压缩文件，开启GZIP

前端性能优化最佳实践？

• 性能评级工具（PageSpeed 或 YSlow）
• 合理设置 HTTP 缓存：Expires 与 Cache-control
• 静态资源打包，开启 Gzip 压缩（节省响应流量）
• CSS3 模拟图像，图标base64（降低请求数）
• 模块延迟(defer)加载/异步(async)加载
• Cookie 隔离（节省请求流量）
• localStorage（本地存储）
• 使用 CDN 加速（访问最近服务器）
• 启用 HTTP/2（多路复用，并行加载）
• 前端自动化（gulp/webpack）

压缩合并资源减少 http 请求

非核心代码异步加载

利用浏览器缓存

静态资源 CDN，静态资源缓存

DNS 预解析

9、浏览器缓存机制（强缓存，协商缓存）

https://www.cnblogs.com/chengxs/p/10396066.html

10、SEO/SEM 优化

• 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

11、Google v8

https://blog.csdn.net/xiangzhihong8/article/details/74996757

12、垃圾回收机制

https://segmentfault.com/a/1190000018605776

13、防御CSRF攻击：

目前防御 CSRF 攻击主要有三种策略：

• 验证 HTTP Referer 字段；
• 在请求地址中添加 token 并验证；
• 在 HTTP 头中自定义属性并验证。

验证 HTTP Referer 字段
根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。在通常情况下，访问一个安全受限页面的请求来自于同一个网站，比如需要访问 http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory，用户必须先登陆 bank.example，然后通过点击页面上的按钮来触发转账事件。这时，该转帐请求的 Referer 值就会是转账按钮所在的页面的 URL，通常是以 bank.example 域名开头的地址。而如果黑客要对银行网站实施 CSRF 攻击，他只能在他自己的网站构造请求，当用户通过黑客的网站发送请求到银行时，该请求的 Referer 是指向黑客自己的网站。因此，要防御 CSRF 攻击，银行网站只需要对于每一个转账请求验证其 Referer 值，如果是以 bank.example 开头的域名，则说明该请求是来自银行网站自己的请求，是合法的。如果 Referer 是其他网站的话，则有可能是黑客的 CSRF 攻击，拒绝该请求。
这种方法的显而易见的好处就是简单易行，网站的普通开发人员不需要操心 CSRF 的漏洞，只需要在最后给所有安全敏感的请求统一增加一个拦截器来检查 Referer 的值就可以。特别是对于当前现有的系统，不需要改变当前系统的任何已有代码和逻辑，没有风险，非常便捷。
然而，这种方法并非万无一失。Referer 的值是由浏览器提供的，虽然 HTTP 协议上有明确的要求，但是每个浏览器对于 Referer 的具体实现可能有差别，并不能保证浏览器自身没有安全漏洞。使用验证 Referer 值的方法，就是把安全性都依赖于第三方（即浏览器）来保障，从理论上来讲，这样并不安全。事实上，对于某些浏览器，比如 IE6 或 FF2，目前已经有一些方法可以篡改 Referer 值。如果 bank.example 网站支持 IE6 浏览器，黑客完全可以把用户浏览器的 Referer 值设为以 bank.example 域名开头的地址，这样就可以通过验证，从而进行 CSRF 攻击。
即便是使用最新的浏览器，黑客无法篡改 Referer 值，这种方法仍然有问题。因为 Referer 值会记录下用户的访问来源，有些用户认为这样会侵犯到他们自己的隐私权，特别是有些组织担心 Referer 值会把组织内网中的某些信息泄露到外网中。因此，用户自己可以设置浏览器使其在发送请求时不再提供 Referer。当他们正常访问银行网站时，网站会因为请求没有 Referer 值而认为是 CSRF 攻击，拒绝合法用户的访问。
但在某些情况下，比如网站本身提供支付API服务，就不太适合这样防护，会全是误报。

在请求地址中添加 token 并验证
CSRF 攻击之所以能够成功，是因为黑客可以完全伪造用户的请求，该请求中所有的用户验证信息都是存在于 cookie 中，因此黑客可以在不知道这些验证信息的情况下直接利用用户自己的 cookie 来通过安全验证。要抵御 CSRF，关键在于在请求中放入黑客所不能伪造的信息，并且该信息不存在于 cookie 之中。可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。
这种方法要比检查 Referer 要安全一些，token 可以在用户登陆后产生并放于 session 之中，然后在每次请求时把 token 从 session 中拿出，与请求中的 token 进行比对，但这种方法的难点在于如何把 token 以参数的形式加入请求。对于 GET 请求，token 将附在请求地址之后，这样 URL 就变成 http://url?csrftoken=tokenvalue。 而对于 POST 请求来说，要在 form 的最后加上 ，这样就把 token 以参数的形式加入请求了。但是，在一个网站中，可以接受请求的地方非常多，要对于每一个请求都加上 token 是很麻烦的，并且很容易漏掉，通常使用的方法就是在每次页面加载时，使用 javascript 遍历整个 dom 树，对于 dom 中所有的 a 和 form 标签后加入 token。这样可以解决大部分的请求，但是对于在页面加载之后动态生成的 html 代码，这种方法就没有作用，还需要程序员在编码时手动添加 token。
该方法还有一个缺点是难以保证 token 本身的安全。特别是在一些论坛之类支持用户自己发表内容的网站，黑客可以在上面发布自己个人网站的地址。由于系统也会在这个地址后面加上 token，黑客可以在自己的网站上得到这个 token，并马上就可以发动 CSRF 攻击。为了避免这一点，系统可以在添加 token 的时候增加一个判断，如果这个链接是链到自己本站的，就在后面添加 token，如果是通向外网则不加。不过，即使这个 csrftoken 不以参数的形式附加在请求之中，黑客的网站也同样可以通过 Referer 来得到这个 token 值以发动 CSRF 攻击。这也是一些用户喜欢手动关闭浏览器 Referer 功能的原因。

在 HTTP 头中自定义属性并验证
这种方法也是使用 token 并进行验证，和上一种方法不同的是，这里并不是把 token 以参数的形式置于 HTTP 请求之中，而是把它放到 HTTP 头中自定义的属性里。通过 XMLHttpRequest 这个类，可以一次性给所有该类请求加上 csrftoken 这个 HTTP 头属性，并把 token 值放入其中。这样解决了上种方法在请求中加入 token 的不便，同时，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用担心 token 会透过 Referer 泄露到其他网站中去。
然而这种方法的局限性非常大。XMLHttpRequest 请求通常用于 Ajax 方法中对于页面局部的异步刷新，并非所有的请求都适合用这个类来发起，而且通过该类请求得到的页面不能被浏览器所记录下，从而进行前进，后退，刷新，收藏等操作，给用户带来不便。另外，对于没有进行 CSRF 防护的遗留系统来说，要采用这种方法来进行防护，要把所有请求都改为 XMLHttpRequest 请求，这样几乎是要重写整个网站，这代价无疑是不能接受的。

14、常见的宏任务和微任务

微任务优先级高于宏任务

宏任务：

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

微任务：

Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)

15、Content-Type四种形式

https://www.cnblogs.com/fighter007/p/10917026.html

16、浏览器事件循环机制

https://zhuanlan.zhihu.com/p/379099139

15、Content-Type四种形式

https://www.cnblogs.com/fighter007/p/10917026.html

16、浏览器事件循环机制

https://zhuanlan.zhihu.com/p/379099139

JavaScript代码的执行过程中除了正常从上到下执行（函数调用栈）外，还会用到另一个东西（任务队列）去执行另一些代码，这整个执行过程可以简单的称为事件循环过程。

上面讲述执行过程时，谈到了一个名为任务队列的东西。我们都知道JavaScript是单线程的，拥有唯一的一个事件循环，但是呢，任务队列可以有好多个;任务队列分为宏任务（macro-task）和微任务(micro-task);
宏任务包括：script(整体代码), setTimeout, setInterval, I/O, UI rendering;
微任务包括: Promise, Promise .then, Object.observe(已废弃), MutationObserver(html5新特性);
这里我们要注意一下setTimeOut和setInterval，进入任务队列的是他们里面的具体任务，而不是他们本身。他们被称为任务源因为script也属于宏任务，而script表示一个整体的代码，这说明事件循环是从宏任务开始的现在我们来说说这整个的执行流程：简单来讲就是先执行宏任务，再去执行宏任务里面的微任务，当执行完这个宏任务里面的所有代码后，再去执行另一个宏任务，依次反复。