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  // 查看分支 mastergit checkout -b dev  // 创建分支 dev,并切换到dev 分支git branch  // 查看分支 master devgit checkout master 切换到,astergit merge dev // 合并分支复制代码

---

AMD

• 不使用模块化的情况

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

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

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

• 使用模块化

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

伪代码// utils.jsexport {  // 暴露出去    getFormatDate: function (date, type) {        // type = 1, 返回 2019-01-12 格式        // type = 2, 返回 2019年1月12日 格式        // ...    }}// a-util.jsvar getFormatDate = require('util.js')  // 引用export {  // 暴露出去    aGetFormatDate: function (date) {        // 要求返回 2019年1月12日 格式        return getFormatDate(date, 2)    }}// a.jsvar aGetFormatDate = require('a-util.js')var dt = new Date()console.log(aGetFormatDate(dt))复制代码

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

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

CommonJS

• nodejs 模块化规范, 现在被大量用前端, 原因:

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

• 使用 CommonJs

// util.jsmodule.exports = {    getFormatDate: function (date, type) {        if (type === 1) {            return '2019-02-14'        } else if (type === 2) {            return '2019年2月14日'        }    }}// a-util.jsvar util = require('util.js')  // 获取module.exports = {  // 推出    aGetFormatDate: function (date) {        return util.getFormatDate(date, 2)    }}// a.jsvar 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)

• 缓存

通过链接名称控制缓存只有内容改变的时候,链接名称才会改变复制代码

• CDN

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

• 使用 SSR 后端渲染

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

• 缓存 DOM 查询

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

• 合并 DOM 插入

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

---

安全性

XSS 跨站请求攻击

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

预防 XSS

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

XSRF 跨站请求伪造

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

预防 XSRF

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

---