06前端面试必备之开发环境和性能优化

---

关于开发环境

面试官想通过开发环境了解候选人的实际工作情况
开发环境的工具，能体现出工作产出的效率
会以聊天形式为主，不会问具体的问题
开发环境
	git 
	调试工具
	抓包
	webpack babel
	linux常用命令

---

git

最常用的代码版本管理工具
大型项目需要多人协作开发，必须熟用git
如果你不知道或者之前不用git，不会通过面试
Mac OS自带git命令，windows可去官网下载安装
git服务端常见的有github coding.net等
大公司会搭建自己的内网git服务

---

git的使用

大致的步骤如下：
1.在github上新建一个仓库B
2.复制ssh或者http项目地址
https提交时会让你输入用户名和密码，麻烦
ssh就不会，但是需要把电脑ssh公钥添加到github设置中
window自动生成ssh key
3.电脑某文件A下执行git命令，git clone 项目地址，那么github上的项目就被克隆到本地 A/B 目录
4.本地修改文件。
5.配置提交人姓名和邮箱(一次操作即可)
git branch 分支名称创建分支
git checkout 分支名称切换分支
git add . 追踪所有文件
git commit -m "本次提交信息"
git push 远程仓库地址 分支名称 本地仓库推到github仓库指定分支上。
这样，本地文件就传到github上了。
6.拉取远程仓库中最新的版本：git pull 远程仓库地址 分支名称

---

git使用前配置

在使用git前，告诉git你是谁，在向git仓库中提交时需要用到
1.配置提交人姓名：git config --global user.name 提交人姓名
2.配置提交人邮箱：git config --global user.email 提交人邮箱
3.查看git配置信息：git config --list
注意
1.如果要对配置信息进行修改，重复上述命令即可
2.配置只需要执行一次

---

提交步骤

git init 初始化git仓库
git status查看文件状态
git add 文件列表追踪文件
git add . 提交所有文件（注意这个.要空格写）
git diff查看所有改的内容
git checkout readme.md撤销readme.md文件的修改(在commit之前操作 可以撤销）
git commit -m "本次记录提交的信息"向仓库提交代码（注意，还没有push到github上,只是到暂存区）
git log查看提交记录

 
查看某次提交的内容
git log
复制commitID
git show commitID

---

撤销

用暂存区文件覆盖工作目录中文件：git checkout 文件
将文件从暂存区中删除git rm --cached 文件
将git仓库中指定的更新记录恢复出来，并且覆盖暂存区和工作目录：git rest --hard commitID

---

分支命令

git branch查看分支
git branch 分支名称创建分支
git checkout 分支名称切换分支
git merge 来源分支合并来源分支到当前分支
git branch -d 分支名称 删除分支（分支被合并后才允许删除 -d强制删除）
git fetch 把服务端所有的分支都拉下来

---

Chrome调试工具

一般不会面试时考察，但这是前端工程师必备的技能。
Elements    Console 		debugger
Network		Application

---

抓包

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

过程：
手机和电脑连在同一个局域网
将手机代理到电脑上
手机浏览网页，即可抓包
查看网络请求
网址代理

---

Linux命令

公司的线上机器一般都是linux
测试机也需要保持一致，用linux
ls 查看文件夹
clear清屏
mkdir abc 创建文件夹abc
ll dist列表形式查看dist文件夹
rm -rf abc删除abc文件夹
rm index.js 删除index.js文件。（这样删之后就没有了，也没有回收站）
cd dist进入dsit文件
../上级目录
mv index.html index1.html修改index.html文件名
mv bundle.js ../bundule.jsbundle.js移动到上级目录下
cp a.js a1.js a.js拷贝a1.js
vi d.js新建d.js文件并打开，进入vim编辑器模式
cat package.json查看package.json文件内容

---

网页加载过程

运行环境即浏览器（server端有nodejs）
下载网页代码，渲染出页面，期间会执行若干JS
要保证代码在浏览器中：稳定且高效
问题：从输入url到渲染出页面的整个过程
	window.onload和DOMContentLoaded的区别

加载资源的形式
html代码、媒体文件，如图片、视频等；JavaScript css

---

加载资源的过程
DNS解析：域名——>IP地址
浏览器根据IP地址向服务器发起http请求
服务器处理http请求，并返回给浏览器

---

渲染页面的过程
根据HTML代码生成DOM Tree
根据CSS代码生成CSSOM
将DOM Tree和CSSOM整合形成Render Tree
根据Render Tree渲染页面
遇到<script>则暂停渲染，优先加载并执行JS代码
直至把Render Tree渲染完成

---

为什么link放到head中？
如果放到body，那么渲染一部分标签后到css时，会导致某些样式发生改变，某些浏览器会显示突变的样式。

---

为什么JS放到最后？
如果在body中，那么渲染到JS部分可能会卡住，导致渲染时间长
让先能出来的东西显示出来，后再执行script

---

window.onload和DOMContentLoaded

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

---

性能优化

是一个综合性问题，没有标准答案，但要求尽量全面
某些细节问题可能会单独提问：手写防抖、节流
只关注核心点，针对面试

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

从何入手？
	让加载更快
	让渲染更快

---

让加载更快

1.减少资源体积：压缩代码

比如webpack的mode设置为production

2.减少访问次数：合并代码，SSR服务器端渲染，缓存
3.使用更快的网络：CDN

---

让渲染更快

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

---

资源合并

加载更快

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

<script src="abc.js"></script>

---

缓存

加载更快

缓存

静态资源加hash后缀，根据文件内容计算hash
文件内容不变，则hash不变，则url不变
url和文件不变，则会自动触发http缓存机制，则返回304
文件变了，url变了，则再次访问再次更新。

---

CDN

CDN性能优化

---

SSR

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

---

懒加载

---

缓存DOM查询

---

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

---

防抖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 (e) {
    console.log(e.target)
    console.log(input1.value)
}, 600))

---

节流throttle

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

// 节流
function throttle(fn, delay = 100) {
    let timer = null

    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)
}))

div1.addEventListener('drag', function(event) {

})

---

安全

问题：常见的web前端攻击方式有哪些？
XSS跨站请求攻击
XSRF跨站请求伪造

XSS攻击

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

<body>
	<p>一段文字</p>
	<p>一段文字</p>
	<p>一段文字</p>
	<script>alert(document.cookie);</script>
</body>

---

XSS预防

替换特殊字符，如<变为&lt； > 变为&gt；
<script>变为变为&lt；script&gt；，直接显示，而不会作为脚本执行
前端要替换，后端也要替换
xss工具

---

XSRF攻击

A正在购物，看中某商品，商品id100
付费接口xxx.com/pay?id=100，但无任何验证
B是攻击者，看中id是200的商品
B向A发送了一封电子邮件，邮件正文隐藏<img src=xxx.com/pay?id=200/>。A一查看邮件，就帮B购买了id是200的商品。
原因：A已经在此网站登录过，img发送的信息是支持跨域的。cookie就被带过去了。

---

XSRF预防

-使用post接口。post做跨域需要serve端支持，麻烦
-增加验证，例如密码、短信验证码、指纹等