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@servemkdir test  // 创建文件夹
ls  // 查看里面的文件
cd xxx  // 到那个目录
pwd  // 查看当前路径
cd ..  // 返回升一级目录
rm -rf test  // 删除文件夹 testcp 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

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