从面试题看考察知识点(四)

IDE

• webstorm
• sublime
• vscode
• atom
• 插件 插件 插件 ! ! !

Git

• 正式项目都须要代码版本管理
• 大型项目须要多人协做开发
• Git 和 linux 是一个做者
• 服务器如 : github.com coding.net

git add .   // 添加 新增或者修改的文件
git commit -m "xxx"  // 把修改的东西先提交到本地区域, "xxx" 修改的提示
git checkout xxx  // 用于切换分支或恢复工做树文件。

git push  // 推送到服务器
git pull  // 从服务器拉下来代码


git branch  // 分支
git checkout -b xxx  // 新建一个分支 
git checkout xx  // 切换分支
git merge xxx  // 用于从指定的commit(s)合并到当前分支的操做。
复制代码

git branch  // 查看分支 master
git checkout -b dev  // 建立分支 dev,并切换到dev 分支
git branch  // 查看分支 master dev
git checkout master 切换到,aster
git merge dev // 合并分支
复制代码

---

AMD

• 不使用模块化的状况

  • utils.js getFormatDate函数 底层工具
  • a-util.js aGetFormatDate函数 使用getFormatDate
  • a.js aGetFormatDate 业务代码,层级引用关系

  // utils.js
  function getFormatDate(date, type) {
      // type = 1, 返回 2019-01-12 格式
      // type = 2, 返回 2019年1月12日 格式
      // ...
  }
  // a-util.js
  function aGetFormatDate(date) {
      // 要求返回 2019年1月12日 格式
      return getFormatDate(date, 2)
  }
  // a.js
  var dt = new Date()
  console.log(aGetFormatDate(dt))
  复制代码

  • 全局变量污染,可能会覆盖
  • 引用顺序不能乱

• 使用模块化

  • 直接使用<script src="a.js"></script> 其余根据依赖自动引用
  • 另外两个函数, 没作成全局变量, 不会带来污染和覆盖

伪代码
// utils.js
export {  // 暴露出去
    getFormatDate: function (date, type) {
        // type = 1, 返回 2019-01-12 格式
        // type = 2, 返回 2019年1月12日 格式
        // ...
    }
}

// a-util.js
var getFormatDate = require('util.js')  // 引用
export {  // 暴露出去
    aGetFormatDate: function (date) {
        // 要求返回 2019年1月12日 格式
        return getFormatDate(date, 2)
    }
}

// a.js
var aGetFormatDate = require('a-util.js')
var dt = new Date()
console.log(aGetFormatDate(dt))
复制代码

• AMD
  • require.js
  • 全局 define 函数
  • 全局 require 函数
  • 依赖 Js 会自动 异步加载
  • 使用 require.js

  // util.js
  define(function() {
      return {
          getFormatDate: function (date, type) {
              if (type === 1) {
                  return '2019-02-14'
              } else if (type === 2) {
                  return '2019年2月14日'
              }
          }
      }
  })
  
  // a-util.js
  define(['./util.js'], function (util) {
      return {
          aGetFormatDate: function (date) {
              return util.getFormatDate(date, 2)
          }
      }
  })
  
  // a.js
  define(['./a-util.js'], function (aUtil) {
      return {
          printDate: function (date) {
              console.log(aUtil.aGetFormatDate(date))
          }
      }
  })
  
  // main.js
  require(['./a.js'], function (a) {
      var dt = new Date()
      a.printDate(dt)
  })
  复制代码

CommonJS

• nodejs 模块化规范, 如今被大量用前端, 缘由:

  • 前端开发依赖的插件和库, 均可以从 npm 中获取
  • 构建工具的高度自动化, 使得使用 npm 成本很是低
  • CommonJS 不会异步加载JS, 而是同步一次性加载出来

• 使用 CommonJs

// util.js
module.exports = {
    getFormatDate: function (date, type) {
        if (type === 1) {
            return '2019-02-14'
        } else if (type === 2) {
            return '2019年2月14日'
        }
    }
}

// a-util.js
var util = require('util.js')  // 获取
module.exports = {  // 推出
    aGetFormatDate: function (date) {
        return util.getFormatDate(date, 2)
    }
}

// a.js
var aUtil = require('a-util.js')
module.exports = {
    printDate: function (date) {
        console.log(aUtil.aGetFormatDate(date))
    }
}
复制代码

AMD 和 CommonJS 的使用场景

• 须要异步加载 JS, 使用 AMD
• 使用了 npm 以后建议使用 CommonJS

上线回滚

• 上线和回滚的基本流程

  • 上线流程要点
    • 将测试完成的代码提交到git版本库的master分支
    • 将当前服务器的代码所有打包并记录版本号, 辈分
    • 将master分支的代码提交覆盖到线上服务器, 生成新版本号
  • 回滚流程要点
    • 将当前服务器的代码打包并记录版本号, 备份
    • 将备份的上一个版本号解压, 覆盖到线上服务器, 并生成新的版本号

• linux基本命令

  • 服务器使用 linux 居多, serve版, 只有命令行
  • 测试环境要匹配线上环境, 所以也是 linux
  • 常常须要登陆测试机来本身配置,获取数据

// 登陆
ssh name@serve

mkdir test  // 建立文件夹
ls  // 查看里面的文件
cd xxx  // 到那个目录
pwd  // 查看当前路径
cd ..  // 返回升一级目录
rm -rf test  // 删除文件夹 test

cp a.js a1.js  // 拷贝文件
mv a1.js src/a1.js  // 移动

rm a.js  // 删除文件

vim b.js  // 打开 vim, 并建立

cat a.js  // 查看文件内容
head a.js  // 查看文件前面的内容
tail a.js  // 查看尾部的一点内容

head -n 1 a.js  // 只看第一行的内容
tail -n 2 a.js  // 后两行的内容

grep '2' a.js  // 搜索
复制代码

---

页面加载过程

题目

• 从输入 url 到获得 html 的详细过程
• window.onload 和 DOMContentLoaded 的区别
  • 页面的所有资源加载完才会执行, 包括图片, 视频等
  • DOM 渲染完便可执行, 此时图片, 视频还没加载完

知识点 :

• 加载资源的形式

  • 输入 url (或跳转页面) 加载 html
  • http://baidu.com
  • 加载 html 中的静态资源
  • <scrript src="./a.js"></script>

• 加载一个资源的过程

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

• 浏览器渲染页面的过程

  • 根据 HTML 结构生成 DOM Tree
  • 根据 css 生成 CSSOM
  • 将DOM 和 CSSOM 整合造成 RenderTree
  • 根据 RenderTree 开始渲染和展现
  • 遇到 <script> 时, 会执行并阻塞渲染

---

性能优化

• 多实用内存 缓存或者其余方法
• 减小 CPU 计算 减小网络请求

1. 加载资源优化
   • 静态资源的压缩合并
   • 静态资源缓存
   • 使用 CDN 让资源加载更快
   • 使用 SSR 后端渲染, 数据直接输出到 HTML 中
2. 渲染优化
   • CSS 放前面, JS 放后面
   • 懒加载 (图片懒加载, 下拉加载更多)
   • 减小DOM 查询, 对 DOM 查询作缓存
   • 减小DOM 操做, 多个操做尽可能合并在一块儿执行
   • 事件节流
   • 尽早执行操做 (如 DOMContentLoaded)

• 缓存

经过连接名称控制缓存
<script src="abc_1.js"></script>

只有内容改变的时候,连接名称才会改变
<script src="abc_2.js"></script>
复制代码

• CDN

bootcdn    https://www.bootcdn.cn/
复制代码

• 使用 SSR 后端渲染

  • 如今 Vue React 提出了这样的概念
  • 其实 jsp php asp 都属于后端渲染

• 缓存 DOM 查询

// 未缓存
var i
for (i=0; i < document.getElementsByTagName('p').length; i++) {
    // todo
}

// 缓存了 DOM 查询
var pList = document.getElementsByTagName('p')
var i
for (i = 0; i < pList.length; i++) {
    // todo
}
复制代码

• 合并 DOM 插入

var a = document.getElementById('list')

// 要插入 10个li标签
var frag = document.createDocumentFragment()  // dom片断
var x, li
for () {
    // ...
}
a.appendChild(frag)
复制代码

---

安全性

XSS 跨站请求攻击

• 写一篇文章, 同事偷偷插入一段 <script>
• 攻击代码中, 获取 coolie, 发送本身的服务器
• 发布博客, 有人查看博客内容
• 会把查看着的cookie 发送到攻击者的服务器

预防 XSS

• 前端替换关键字, 例如替换 < 为 &lt; > 为 &gt;
• 后端替换

XSRF 跨站请求伪造

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

预防 XSRF

• 增长验证流程, 如输入指纹 密码 短信验证码