前端相关总结：页面加载 & 性能优化 & 安全性 & 上线

1. 页面加载

1.1 加载资源的形式

• 输入 url（或跳转页面）加载 html
• 加载 html 中的静态资源
• script 加载

1.2 加载一个资源的过程

• 浏览器根据 DNS 服务器得到域名的 IP 地址
• 向这个 IP 的及其发送 http 请求
• 服务器收到、处理并返回 http 请求
• 浏览器得到返回内容

1.3 浏览器渲染页面的过程

• 根据 HTML 结构生成 DOM Tree
• 根据 CSS 生成 CSSOM
• 将 DOM 和 CSSOM 整合形成 RenderTree
• 根据 RenderTree 开始渲染和展示
• 遇到<script>时，会执行并阻塞渲染（因为 js 会改变 dom，所以 js 要放在 body 最下面）

window.onload 和 DOMContentLoaded 的区别：

//页面的全部资源加载完才会执行，包括图片、视频
window.addEventListener('load', function(){})

//DOM 渲染完即可执行，此时图片、视频可能还没有加载完
document.addEventListener('DOMContentLoaded', function(){})

2. 性能优化

2.1 原则

• 多使用内存、缓存
• 减少 CPU 计算，减少网络请求

2.2 具体分析

• 加载页面和静态资源
• 页面渲染

2.2.1 加载资源优化

• 静态资源的压缩合并
• 静态资源缓存(script)
• 使用 CDN 让资源加载更快（CDN 会请求不同区域资源，进行优化）
• 使用 SSR 后端渲染（react vue），数据直接输出到 HTML 中

2.2.2 渲染优化

• CSS 放前面，JS 放后面
• 懒加载（图片懒加载、下拉加载更多，而非一次全部加载）

   <!--图片懒加载-->
    <img id="img" src="preview.png" data-realsrc="real.png">
    <script>
        let img = document.getElementById('img')
        img.src = img.getAttribute('data-realsrc')
    </script>

• 减少 DOM 查询，对 DOM 查询做缓存（变量存储）
• 减少 DOM 操作，多个操作尽量合并在一起执行（合并）

//createDocumentFragment 创建的文档片段存在于内存中，并不在DOM树中
let listNode = document.getElementById('list')

        //在 list 里面插入 10 个 li 标签
        let frag = document.createDocumentFragment()
        let i, li;
        for(i=0;i<10;i++){
            li = document.createElement('li')
            li.innerHTML = `this is li ${i}`
            frag.appendChild(li)
        }

        listNode.appendChild(frag)

• 事件节流（合并）

        let textArea = document.getElementById('text')
        let timeoutId
        textArea.addEventListener('keyup', function(){
            if(timeoutId){
                clearTimeout(timeoutId)
            }
            timeoutId = setTimeout(function () {
                //触发 change 事件
            }, 100)
        })

• 尽早执行操作（例如 DOMContentLoaded，DOM 加载完就执行）

3. 安全性——XSS

3.1 XSS 跨站请求攻击

3.1.1 描述

• 例如在博客中写文章时插入一段 <script>
• 脚本中有攻击代码，获取查看者的 cookie，发送到攻击者的服务器

3.1.2 对策

• 前端替换关键字，例如替换 < 为 &lt；> 为 &gt；
• 后端替换速度会更快。

3.2 XSRF 跨站请求伪造

3.2.1 描述

• 登录一个购物网站浏览商品，付费接口为 xxx，且这个接口没有验证
• 若你收到一个邮件，邮件中包含一个图片，图片的 src 就是付费接口
• 则你在查看邮件时，就已悄悄付费购买

3.2.2 对策

• 增加验证流程：指纹、密码、短信验证码

4. 上线

上线流程要点：

• 测试完成的代码提交到 git 版本库的 master 分支
• 将当前服务器的代码全部打包并记录版本号，备份
• 将 master 分支的代码提交覆盖到线上吴福气，生成新版本号

回滚流程要点：

• 将当前服务器的代码打包并记录版本号，备份
• 将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号

linux 基本命令：

• mkdir：创建新文件夹
• ls：查看目录（只看名字）
• la：查看目录（具体信息）
• cd xx：进入 xx 文件夹
• cd .. ：返回上级目录
• rm -rf xx：删除 xx 文件夹
• mv xx：移动
• rm xx：删除文件
• :q 退出编辑