前端常考面试题五：环境篇（拓展）

前言

面试官想通过开发环境了解候选人的实际工作情况
开发环境的工具，能体现工作产出的效率
会以聊天形式为主，不会问具体的问题

开发环境

git

是最常用的代码版本管理工具，大型项目需要多人协作开发，必须熟用git
具体命令可参考我另一篇总结
Git常见命令

Chrome调试工具

一般不会面试时考察，但这是前端工程师必备的技能（不算知识)

• Elements 看DOM结构
• Console 打印
• debugger 断点调试
• Network 看资源的加载
• Application 可以操作本地存储

抓包

应用场景

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

抓包过程

• 手机和电脑连同一个局域网
• 将手机代理到电脑上
• 手机浏览网页，即可抓包

作用

• 查看网络请求
• 网址代理
• https
  

webpack 和 babel

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

linux常用命令

用途

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

具体命令可参考 前端常用linux常用命令

运行环境

概述

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

网页加载过程

知识点

1.加载资源的形式

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

2.加载资源的过程

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

3.渲染页面的过程

• 根据HTML代码生成DOM(document object model) Tree
• 根据CSS代码生成CSSOM(css object model)
• 将DOM Tree和CSSOM整合形成Render Tree(渲染树)
• 根据Render Tree渲染页面
• 遇到<script>则暂停渲染，优先加载并执行JS代码，完成再继续(js执行和dom渲染共用一个进程)
• 直至把 Render Tree渲染完成

常考题

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

思考方向

• 下载资源:各个资源类型，下载过程
• 渲染页面:结合html css javascript图片等

2.window.onload和DOMContentLoaded的区别

• window.onload
  页面的资源全部加载完才能执行，包括图片、视频等
• DOMContentLoaded
  DOM渲染完成即可执行，此时图片、视频可能还没有加载完

性能优化

是一个综合性问题，没有标准答案，但要求尽量全面
某些细节问题可能会单独提问:手写防抖、节流

1.性能优化原则

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

2.具体方法

让资源加载更快

• 减少资源体积∶压缩代码
• 减少访问次数:合并代码，雪碧图，SSR服务器端渲染，缓存
• 使用更快的网络:CDN（内容分发网络）

让渲染更快

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

解释

①缓存

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

②CDN

• CDN(Content Delivery Network)，即内容分发网络。它是指在现有互联网络中增加一层新的网络架构，
• CDN网络可以实时根据网络流量 和各节点的链接、负载状况 以及用户距离和响应时间等信息将用户的请求重新导向到离用户最近的服务节点，降低网络的拥塞，提高内容传递的速度和效率，加快用户访问的响应速度。
• 什么是CDN网络
  

③SSR

• 服务器端渲染:将网页和数据一起加载，一起渲染
• 非SSR(前后端分离):先加载网页，再加载数据，再渲染数据
• 早先的JSP ASP PHP，现在的vue React SSR都属于SSR

④懒加载

⑤缓存DOM查询

⑥多个DOM 操作一起插入到DOM结构

利用DocumentFragment

⑦尽早开始JS执行

⑧防抖debounce

• 定义：对于短时间内连续触发的事件，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
• 使用场景：
  1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
  2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
  

// 情景：监听一个输入框，文字变化后触发change 事件，直接用keyup事件，则会频发触发change事件；使用防抖后，用户输入结束或暂停时，才会触发change 事件
let timer = null
input1.addEventListener('keyup', function () {
    if (timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        // 模拟触发 change 事件
        console.log(input1.value)

        // 清空定时器
        timer = null
    }, 500)
})

⑨节流throttle

• 定义：对于短时间内连续触发的事件，保证一定时间段内只调用一次事件处理函数。（把水龙头阀门关小点）
• 使用场景：
  1.鼠标不断点击触发，mousedown(单位时间内只触发一次)
  2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
  3.下拉浏览时请求下一页
  

// 情景：拖拽一个元素时，要随时拿到该元素被拖拽的位置，直接用drag事件，则会频发触发，很容易导致卡顿；使用节流后，无论拖拽速度多快，都会每隔100ms触发一次
let timer = null
div1.addEventListener('drag', function (e) {
    if (timer) {
        return
    }
    timer = setTimeout(() => {
        console.log(e.offsetX, e.offsetY)

        timer = null
    }, 100)
})

安全

常见的web 前端攻击方式有哪些?

①XSS 跨站脚本攻击

XSS就是在用户的浏览器中执行攻击者自己定制的脚本。

情景

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

预防

• 替换特殊字符，如 < 变为 &lt; > 变为 &gt;
• <script> 变为 &lt;script&gt;，直接显示，而不会作为脚本执行
• 前端要替换，后端也要替换，都做总不会有错（富文本输入、输出都做检查）

②CSRF/XSRF 跨站请求伪造

本质：重要操作的所有参数都是可以被攻击者猜测到的。攻击者预测出URL的所有参数与参数值，才能成功地构造一个伪造的请求。

情景

你正在购物，看中了某个商品，商品id是100
付费接口是xxx.com/pay?id=100，但没有任何验证
我是攻击者，我看中了一个商品，id是200
我向你发送一封电子邮件，邮件标题很吸引人
但邮件正文隐藏着<img src=xxx.com/pay?id=200 />
你一查看邮件，就帮我购买了id是200的商品

预防

• 使用post接口（因为在post接口做跨域，需要服务端支持，很麻烦）
• 增加验证，例如密码、短信验证码、指纹等
• Token