前端面试整理

AJAX

基本流程特点

1. 创建异步对象：var xmlHttp = new XMLHttpRequest();
2. 设置请求方式和地址：xmlHttp.open(method, URL, async);
3. 发送请求：xmlHttp.send();
4. 监听状态变化：xmlHttp.onreadystatechange = function(ev2){}
   0: 请求未初始化
   1: 服务器连接已建立
   2: 请求已接收
   3: 请求处理中
   4:请求已完成，且相应已就绪
5. 处理返回结果

不使用ajax更新数据，会重新加载整个页面；使用ajax更新数据， 不会重新加载整个页面，只更新某些部分

项目优化策略

• 生成打包报告
  • 通过命令行参数形式生成报告=>vue-cli-service build --report
  • 通过可视化ui面板直接查看报告(通过控制台和分析面板)
• 通过vue.config.js修改webpack的默认配置
  • 通过vue-cli 3.0工具生成的项目,默认隐藏了所有webpack的配置项,目的是为了屏蔽项目的配置过程,让开发人员把工作的 重心,放在具体功能和业务逻辑的实现上
• 为开发模式与发布模式指定不同的打包入口
  • 默认情况下,vue项目的开发与发布模式,共用同一个打包的入口文件(即src/main.js),为了将项目的开发过程与发布过程分离,可以为两种模式,各自指定打包的入口文件,即开发模式入口文件 src/main-dev.js ；发布模式入口文件 src/main-prod.j
  • 方案：configureWebpack(通过链式编程形式)和chainWebpack(通过操作对象形式) ：在vue.config.js导出的配置文件中,新增configureWebpack或chainWebpack节点,来自定义webpack的打包配置

// 代码示例
module.exports = {
    chainWebpack: config => {
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')
        })
        // 开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

• 第三方库启用CDN
  • 通过externals加载外部cdn资源 ：默认情况下,通过import语法导入的第三方依赖包,最终会打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题 => chunk-vendors 体积过大 ，可以通过webpack的externals节点,来配置加载外部的cdn资源,凡是声明在externals中的第三方依赖包,都不会被打包
  • 步骤1

module.exports = {
    chainWebpack: config => {
        config.when(process.env.NODE_ENV === 'production', config => {
            config.entry('app').clear().add('./src/main-prod.js')
            // 在vue.config.js如下配置
            config.set('externals', {
                vue: 'Vue',
                'vue-router': 'VueRouter',
                axios: 'axios',
                lodash: '_',
                echarts: 'echarts',
                nporgress: 'NProgress',
                'vue-quill-editor': 'VueQuillEditor'
            })
        })
        config.when(process.env.NODE_ENV === 'development', config => {
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

• 步骤二：在public/index.html文件头部,将main-prod中的已经进行配置的import(样式表)删除替换为cdn引入
• 步骤三：在public/index.html文件头部,将main-prod中的已经进行配置的import(js文件)删除替换为cdn引入

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"> <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"> <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"> <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"> <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"> <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js "> <script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.min.js"> <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor @3.0.4/dist/vue-quill-editor.js"> <script src="https://cdn.bootcss.com/viewerjs/1.3.7/viewer.min.js"> <script src=" https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"> 

• 首页内容定制 ：不同打包环境下,首页内容可能会有所不同,通过插件方式定制
• Element-UI组件按需加载
• 路由懒加载 ：在打包构建项目时,javascript包会变得特别大,影响页面加载,如果我们能把不同路由对应的组件分隔成不同的代码块,然后当路由被访问的时候才加载对应组件,这样更加高效
  • 安装@babel/plugin-syntax-dynamic-import包
  • 在babel.config.js配置文件声明该插件
  • 将路由改为按需加载形式

CDN

内容分发网络（Content delivery network或Content distribution network，缩写：CDN）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。
CDN是一种公共服务，他本身有很多台位于不同地域、接入不同运营商的服务器，而所谓的使用CDN实质上就是让CDN作为网站的门面，用户访问到的是CDN服务器，而不是直接访问到网站。由于CDN内部对TCP的优化、对静态资源的缓存、预取，加上用户访问CDN时，会被智能地分配到最近的节点，降低大量延迟，让访问速度可以得到很大提升。

CDN的原理

CDN做了两件事，一是让用户访问最近的节点，二是从缓存或者源站获取资源

1. 浏览器检查本地有没有这个东东的有效缓存，有则使用缓存，没有有效缓存则进行对assets-cdn.github.com的DNS查询，获得一个 CNAME记录, github.map.fastly.net,值得注意的是，多个加速域名可以解析到同一个CNAME，CDN回源和缓存的时候考虑到了hostname；
2. 进行对github.map.fastly.net的DNS查询，获得一个A/AAAA记录，给出地址103.245.222.133（视网站不同返回的不一样，可以有多个）, 这一步对CDN来说时十分重要的，它给出了离用户最近的边缘节点；
3. 浏览器选一个返回的地址，然后进行真正的http请求，开始向103.245.222.133握手，握手完了把http请求头也发给了该边缘服务器;
4. 边缘服务器检查自己的cache里面有没有https://assets-cdn.github.com/pinned-octocat.svg这个资源，有则返回给用户，如果没有，向CDN中心服务器发起请求;
5. CDN中心服务器检查自己的cache里面有没有这个资源，有则返回给边缘服务器，没有则回源;
6. 中心服务器发现客户配置了github.map.fastly.net的回源地址(这个只有cdn会知道，假设是xxx.xxx.xxx.xxx)，就把http请求发到源站地址上，源站返回后返回给请求方;