前端JS知识要点总结（11）

关于开发环境

• IDE
• git
• JS模块化
• 打包工具
• 上线回滚流程

关于运行环境

• 页面加载过程
• 性能优化
• 安全性

注意事项：

1. 千万不要说用过Dreamweaver，notepad++
2. 代码托管平台，coding.net, github.com

常用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

模块化

common.js是node.js的规范，现在被大量使用，其中的库文件都可以从npm库中获取。构建工具的自动化程度非常高，其各种依赖库是一次性同步加载的。
另外有一个加载方式叫做AMD，是异步的模块加载。因此如果在系统中必须使用异步加载JS的方法，需要使用AMD。

上线回滚的基本流程

上线流程：

1. git到master分支
2. 将当前代码打包，记录版本号，备份
3. 将master分支覆盖，更新版本号

回滚流程：

1. 当前版本打包
2. 上一版本解压，覆盖到线上服务器，生成新的版本号

题目三十一：从输入url到得到html的详细过程

1. 浏览器根据DNS服务器得到域名的IP地址
2. 向这个IP的机器发送http请求
3. 服务器收到，处理，并返回http请求
4. 浏览器得到返回内容

浏览器渲染页面的过程：
1. 根据HTML生成DOM树
2. 根据CSS生成CSSOM
3. 将DOM和CSSOM整合成Render Tree
4. 遇到script时会执行并阻塞渲染

CSS样式要放在head中（因为这样可以在加载页面时一次渲染就完成。），script要放在body最后（1. 不会阻塞渲染，让页面展示更快；2. script可以修改DOM，因此必须当DOM存在时才能修改。）

题目三十二：window.onload和DOMContentLoaded的区别

window.onload：所有的资源全部加载完毕才会触发，包括图片视频这些耗时的资源加载（有可能很慢）
window.DOMContentLoaded：DOM渲染完毕即可，不需要资源也加载完成。因此这个更常用，例如jQuery就是用它，一般不会用第一种

性能优化

性能优化的原则是：减少CPU计算，减少网络请求，多使用内存，缓存或其他方法

从哪里入手：加载页面和静态资源，页面渲染

加载资源的优化：
静态资源的压缩合并，减少请求次数
静态资源缓存，如果有些文件版本相同，浏览器就不会请求了。例如jQuery，如果已经加载过某个版本的jQuery，那么就不需要重新加载了
用CDN来加速，CDN的策略就是就近选择服务器
使用SSR后端渲染，将数据直接输入到html（服务端渲染）

渲染优化：
CSS放前面，JS放后面
懒加载（图片等资源下拉加载）
减少DOM查询，对DOM查询做缓存
减少DOM操作，多个操作尽量合并
事件节流（把多个很频繁的操作合并在一起）
尽早执行操作（如使用DOMContentLoaded）

性能优化的几个示例

资源合并：多个JS文件的合并
使用缓存：通过连接名称控制缓存，只有内容改变时，链接名称才会改变。（大版本改动时才改JS文件名，这样可以利用已有的JS缓存文件来加速）
CDN：bootcss等等，会比使用自己的服务器更快
SSR：现在vue，react提出了这样的概念，其实JSP，oho，aso都属于后端渲染
懒加载：先加载小图，使用事件来加载大图
缓存DOM操作和查询：利用插入片段的方法，如document.createDocumentFragment()
事件节流：对于频繁改变的内容，例如键盘输入，可以设置一些延时来防止过快的内容刷新，并且不会影响体验
减少CPU计算：事件节流就是一个很好的例子。

安全性

这是一个综合性的问题，不必深究太多，面试中不会太深入的询问
XSS跨站请求攻击
XSRF跨站请求伪造

XSS：在博客中写入一篇文章，同时偷偷插入一段script代码。在这段攻击代码中可以获取cookie，将其发送到自己的服务器。因为cookie中有账户信息，因此如果没有做好信息保护，会发生泄漏。此外通过这种方式，可以将看过这篇博客的人的cookie都获取到。

预防方法：替换关键字，在前后端都可以进行替换，后端更好，例如将其中的script关键字给替换掉

XSRF：
你已经登陆了一个购物网站，正在浏览商品。对于某件商品的付费接口是：xxx.com/pay?id=100并且没有任何验证。当你收到一封邮件时，其中如果某张图片隐藏着这个链接，因此只要邮件一打开，就直接扣费付款了。

防止方法：增加验证流程，如指纹密码短信验证等等

面试技巧

简历：简洁明了，突出项目经历和解决方案，会评价复杂度
博客：把个人博客放在简历中，并且定期维护更新
开源项目：把开源项目放在简历中，并维护开源项目
千万不要造假：要保证能力和经历上不要造假

面试过程中可能遇到的比较麻烦的问题：

如何看待加班？

加班就像借钱，救急不救穷。如果项目紧急，加班理所当然，如果项目规划的不好，也就是本身项目很大，需要10天干完，但是非要规划为5天，那就不太好了。

千万不要挑战面试官，即使他说的不对

要学会给他惊喜，但是不要太多（一两个）

遇到不会的，说出知道的即可（有些问题面试官问出来，只是想听一听你怎么说，其实他也不一定会。

谈谈你的缺点：不要真的说缺点，不要说经验少，不要说不是科班出身。要说一下最近正在学什么就可以了。