开发环境、运行环境面试题常见知识点

1. git 常用命令

   • git add . 把所有修改后的文件添加到本地
   • git checkout xxx 把xxx文件还原到未修改的状态
   • git commit -m "xxx" 提交一行记录
   • git push orign master 把提交的分支推送到远程服务端
   • git pull origin master 从远程服务端拉取分支
   • git branch 查看项目分支
   • git merge xxx 把 xxx 分支合并到主分支

2. webpack 和 babel

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

3. 网页是如何加载并渲染出来的
   加载过程
   1. DNS解析：把域名变为IP地址
   2. 浏览器根据IP地址向服务器发起 http 请求
   3. 服务器处理 http 请求，并返回给浏览器
   渲染过程
   1. 根据 HTML 代码生成 DOM Tree
   2. 根据 CSS 代码生成 CSSOM
   3. 将 DOM Tree 和 CSSOM 整合形成 Render Tree（渲染树）—— 框架和样式整合在一起
   4. 根据 Render Tree 渲染页面
   5. 遇到 <script> 则暂停渲染，优先加载并执行 JS 代码，完成再继续（因为 JS 和 DOM 共用一个线程，JS 可能会修改 DOM 结构）
   6. 直至把 Render Tree 渲染完成

4. window.onload 和 DOMContentLoaded

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

5. 性能优化原则

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

6. 让加载更快

   • 减少资源体积：压缩代码
   • 减少访问次数：合并代码，SSR 服务端渲染，缓存
   • 使用更快的网络：CDN

7. 让渲染更快

   • CSS 放在 head，JS 放在 body 最下面
   • 尽早开始执行 JS，用 DOMContentLoaded 触发
   • 懒加载：图片懒加载，上滑加载更多
   • 对 DOM 查询进行缓存频繁 DOM 操作，合并到一起插入 DOM 结构
   • 节流 throttle 防抖 debounce

8. 缓存

   • 静态资源加 hash 后缀，根据文件内容计算 hash
   • 文件内容不变，则 hash 不变，则 url 不变
   • url 和文件不变，则会自动触发 http 缓存机制，返回 304

9. SSR

   • 服务器端渲染：将网页和数据一起加载，一起渲染
   • 非 SSR （前后端分离）：先加载网页，再加载数据，再渲染数据
   • 早先的 JSP ASP PHP，现在的 Vue React SSR

10. 函数防抖

    function debounce(fn, delay = 500) {
        let timer = null;
        return function () {
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                fn.apply(this, arguments);
                timer = null;
            }, delay)
        }
    }
    
    const Input = document.querySelector('input');
    Input.addEventListener('keyup', debounce(function() {
        console.log(Input.value);
    }, 600))
    

11. 函数节流

    function throttle(fn, delay = 100) {
        let timer = null;
        return function () {
            if (timer) return;
            timer = setTimeout(() => {
                fn.apply(this, arguments);
                timer = null;
            }, delay);
        }
    }
    
    div.addEventLister('drag', throttle(function (e) {
        console.log(e)
    }, 200))
    

12. XSS 攻击

    • 一个博客网站，我发表一篇博客，其中嵌入 <script> 脚本。
    • 脚本内容：获取 cookie，发送到我的服务器（服务器配合跨域）。
    • 发布这篇博客，有人查看它，我轻松收割访问者的cookie。
    • 替换特殊字符，如 < 变为 &It； > 变为 &gt；
    • <script> 变为 <script>，直接显示，而不是作为脚本执行。
    • 前端要替换，后端也要替换，都做总不会有错。

13. XSRF 预防

    • 使用 post 接口
    • 增加验证，例如密码、短信验证码、指纹等