开发及运行环境面试题笔记

• 常用的 git 命令

  • git add .
  • git checkout xxx
  • git commit -m “xxx”
  • git push origin master
  • git pull origin master
  • git branch
  • git checkout -b xxx
  • git merge xxx

• Element – DOM 结构
• Console – 打印内容
• debugger – 断点调试
• Network – 资源加载情况
• Application – localStorage SessionStorage cookie

• 移动端 h5 页，查看网络请求，需要用工具抓包
• windows 一般用 fiddler
• Mac OS 一般用 charles

抓包过程

• 手机电脑连接同一个局域网
• 将手机代理到电脑上
• 手机浏览网页，即可抓包
• 查看网络请求
• 网址代理
• https

• ES6 模块化，浏览器暂不支持
• ES6 语法，浏览器并不完全支持
• 压缩代码，整合代码，以让网页加载更快

• 公司的线上机器一般都是 linux (参考阿里云)
• 测试机也要保持一致，用 linux
• 测试机或线上机出了问题，本地又不能复现，需要去排查

常用命令

• ssh work@192.168.10.21 ：进入测试机
• ls ：查看文件夹及文件
• ls -a ：查看所有文件
• ll ：查看列表
• clear ：清屏
• mkdir 文件夹名 ：创建文件夹
• rm -rf 文件夹名 ：删除文件夹及其中所有文件
• touch 文件名 ：新建文件
• vi 文件名 ：新建文件并进入 vim 编辑器
• rm 文件名 ：删除文件
• cd 目录 ：定位到目录
• mv 旧文件名 新文件名 ：修改文件名
• mv 文件名 目标目录 ：移动文件
• cp 原文件 新文件 ：拷贝
• vim 文件名 ：查看文件内容
• cat 文件名 ：打印文件内容
• head 文件名 ：打印文件头部分内容
• tail 文件名 ：打印文件尾部分内容
• grep “关键字” 文件名 ：在文件中查看关键字是否存在并打印

vim 编辑器

• i 键 ：进入 INSERT 模式 – 可以编辑
• esc 键 ：关闭 INSERT 模式
• :w ：保存
• :q ：退出
• :q! ：强制退出
• vimtutor ：教程

• 运行环境即浏览器 (server 端有 node.js)
• 下载网页代码，渲染出页面，期间会执行若干 JS
• 要保证代码在浏览器中稳定且高效

• 加载资源的形式

  • html 代码
  • 媒体文件，如图片、视频等
  • Javascript css

• 加载资源的过程

  • DNS 解析：域名 -> IP 地址
  • 浏览器根据 IP 地址向服务器发起 http 请求
  • 服务器处理 http 请求，并返回给浏览器

• 渲染页面的过程

  • 根据 HTML 代码生成 DOM Tree
  • 根据 CSS 代码生成 CSSOM
  • 将 DOM Tree 个 CSSOM 整合形成 Render Tree
  • 根据 Render Tree 渲染页面
  • 遇到 script 标签则暂停渲染，优先加载并执行 js 代码，完成后再继续

• 从输入 url 到渲染出页面的整个过程

• window.onload 和 DOMContentLoaded 的区别

  window.addEventListener('load', function () {
    // 页面的全部资源加载完才会执行，包括图片、视频等
  })
  document.addEventListener('DOMContentLoaded', function () {
    // DOM 渲染完即可执行，此时图片、视频可能没有加载完
  })
  

• 性能优化原则

  • 多使用内存、缓存或其他方法
  • 减少 CPU 计算量，减少网络加载耗时
  • 适用于所有编程的性能优化 – 空间换时间

• 从何入手

  让加载更快

  • 减少资源体积：压缩代码

  • 减少访问次数：合并代码，SSR 服务器端渲染，缓存

    缓存：

    • 静态资源加 hash 后缀，根据文件内容计算 hash

    • 文件内容不变，则 hash 不变，则 url 不变

    • url 和文件不变，则会自动触发 http 缓存机制，返回 304
      SSR：

    • 服务器端渲染：将网页和数据一起加载，一起渲染

    • 非 SSR (前后端分离)：先加载网页，再加载数据，在渲染数据

    • 早先的 JSP ASP PHP ，现在的 Vue React Angular

  • 使用更快地网络：CDN

  让渲染更快

  • CSS 放在 head ，JS 放在 body 最下面
  • 今早开始执行 JS ，用 DOMContentLoaded 触发
  • 懒加载 (图片懒加载，上滑加载更多)

  • 对 DOM 查询进行缓存
  • 频繁 DOM 操作，合并到一起插入 DOM 结构
  • 节流 throttle 防抖 debounce (体验优化)

• 手写防抖

  • 监听一个输入框的，文字变化后触发 change 事件
  • 直接用 keyup 事件，则会频繁触发 change 事件
  • 防抖：用户输入结束或暂停时，才会触发 change 事件

  // 定义防抖函数
  function debounce(fn, delay = 500) {
    // timer 是闭包中的
    let timer = null
    return function () {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments)
        timer = null
      }, delay)
    }
  }
  // 使用
  input1.addEventListener(
    'keyup',
    debounce(function () {
      console.log(input1.value)
    }),
    300
  )
  

• 手写节流

  • 拖拽一个元素时，要随时拿到该元素被拖拽的位置
  • 直接用 drag 事件，则会频繁触发，很容易导致卡顿
  • 节流：无论拖拽速度多快，都会每隔 100ms 触发一次

  // 定义节流函数
  function throttle(fn, delay = 100) {
    let timer
    return function () {
      if (timer) {
        return
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments)
        timer = null
      }, delay)
    }
  }
  // 使用
  div1.addEventListener(
    'drag',
    throttle(function (e) {
      console.log(e.offsetX, e.offsetY)
    }, 200)
  )
  

   fn.apply(this, arguments)作用：使得内部的回调函数能监听到事件对象 e

常见的 web 前端攻击方式

• XSS 跨站请求攻击

  • 一个博客网站，发表一篇博客，其中嵌入 script 脚本
  • 脚本内容：获取 cookie ，发送到我的服务器(服务器配合跨域)
  • 发布这篇博客，有人查看它，我轻松收割访问者的 cookie

  XSS 预防

  • 替换特殊字符，如 < 变为 < > 变为 >