【JS基础】模块化，页面加载，性能优化，前端安全

模块化

1.AMD

（1）中文解释：异步模块定义（async module define）
（2）require.js 就是根据AMD规范写的 https://requirejs.org/
（3）全局 define 函数
（4）全局 require 函数
（5）依赖JS会自动、异步加载（使用到的文件才会加载）

// util.js
define(function () {
    return {
        getFormatDate(date, type) {
            date = date || new Date();
            let typeMape = {
                '1': date.getTime(),
                '2': date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
            };
            return typeMape[type]
        }
    }
});

// a-util.js
define(['./util.js'], function(util) {
    return {
        aGetFormatDate(date) {
            return util.getFormatDate(date, 2);
        }
    }
});

// a.js
define(['./a-util.js'], function(aUtil) {
    return {
        printDate(date) {
            console.log(aUtil.aGetFormatDate(date));
        }
    }
});

// main.js
// 使用全局的 require 函数引入模块文件
require(['./a.js'], function(a) {
    let date = new Date();
    a.printDate(date); // 2020-4-19
});

// index.html 引入使用
<script src="https://cdn.bootcss.com/require.js/2.3.3/require.min.js" data-main="./main.js"></script>

2.CommonJS
它是 nodejs 的模块化规范，现在被大量用在前端，原因：
前端开发依赖的插件和库，都可以从 npm 中获取（node package manage）
构建工具的高度自动化，使得使用 npm 的成本非常低
CommonJS 不会异步加载JS，而是同步一次性加载出来

CommonJS 配合 webpack 等构建工具使用
（1）npm init
进入一个项目根目录，执行以上命令，初始化一个项目（已经安装了node）
（2）cnpm install webpack webpack-cli --save-dev
安装 webpack（已经安装了cnpm）
（3）在项目根目录新建文件 webpack.config.js，配置 webpack

// webpack.config.js
var path = require('path');

module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: {
        app: './app.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    }
};

（4）在根目录下新建 src 目录，在 src 下面新建以下两个文件

// src/util.js

// CommonJS 规范 module.exports
module.exports = {
    getFormatDate(date, type) {
        date = date || new Date();
        let typeMape = {
            '1': date.getTime(),
            '2': date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),
        };
        return typeMape[type]
    }
};

// src/app.js

// CommonJS 规范 require
let util = require('./util');
let date = util.getFormatDate(new Date(), 2);
console.log(date); // 2020-4-19

（5）生成打包文件
在 package.json 文件的 scripts 部分新增以下内容： "start": "webpack"，随后在命令窗口执行 npm start，webpack 就会根据刚刚配置好的配置文件，以及 util.js 和 app.js 的内容，在根目录的 dist 目录下生成 bundle.js
（6）测试打包文件是否符合预期
在根目录新建 index.html，引入刚生成的 bundle.js，<script src="dist/bundle.js"></script>，保存文件。
在命令窗口执行 http-server -p 8881（已经全局安装 http-server），在浏览器打开 http://localhost:8881/，可以看到当前日期被打印出来，说明我们可以正常使用 CommonJS 规范来编写模块化的JS代码，并可以使用 webpack 成功打包压缩代码。

AMD 和 CommonJS 的使用场景：
需要异步加载JS，使用 AMD
使用了 npm 之后建议使用 CommonJS

页面加载

加载资源的形式

1.输入url或跳转页面加载html
2.加载html中的静态资源

加载一个资源的过程

1.浏览器根据DNS服务器得到域名的IP地址
2.向这个IP的机器发送http请求
3.服务器收到、处理并返回http请求
4.浏览器得到返回内容

浏览器渲染页面的过程

1.根据HTML结构生成DOM TreeWalker
2.根据CSS生成CSSOM
3.将DOM和CSSOM整合成RenderTree
4.根据RenderTree开始渲染和展示
5.遇到<script>时，会执行并阻塞渲染

window.onload 和 DOMContentLoaded的区别？

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

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

性能优化

性能优化的原则

1.多使用内存、缓存或者其他方法
2.减少CPU计算，减少网络

从哪里入手

1.加载页面和静态资源
2.页面渲染

加载资源优化

1.静态资源的压缩合并，雪碧图
2.静态资源缓存
3.使用CDN让资源加载更快
4.使用SSR后端渲染，数据直接输出到HTML中

渲染优化

CSS放前面，JS放后面
懒加载（图片懒加载、下拉加载更多）
减少DOM查询，对DOM查询做缓存
减少DOM操作，多个操作尽量合并在一起执行
事件防抖和节流
尽早执行操作（如DOMContentLoaded）

前端安全

常见的两种网站攻击方式

1.XSRF 跨站请求伪造
2.XSS 跨站请求攻击

CSRF 跨站请求伪造示例：

你已登录一个购物网站，正在浏览商品
假如该网站付费接口是 xxx.com/pay?id=100 但是没有任何验证
然后你收到一封邮件，隐藏着<img src="xxx.com/pay?id=100">
你查看邮件的时候，就已经悄悄的付费购买了

解决办法：增加验证流程，如验证指纹、输入密码、短信验证码

XSS 跨站请求攻击示例：

在新浪博客写一篇文章，同时偷偷插入一段<script>
攻击代码中，获取cookie，发送到自己的服务器
发布博客，有人查看博客内容
会把查看者的cookie发送到攻击者的服务器

解决办法：前端替换关键字，例如替换 < 和 > ，替换成字符实体。建议后端替换（前端js执行效率低，影响性能）