慕课网前端JavaScript面试（4）

7.开发环境

讲解在面试过程中，面试官可能会问及的前端开发环境的问题，例如 IDE，Git，模块化，打包工具，上线流程，这些类别的题目。

IDE（写代码的效率）
git（代码版本管理，多人协作开发）
JS模块化
打包工具
上线回滚的流程

7.1IDE

webstorm，
sublime，
vscode，
atom 。

7.2git

在这里插入图片描述

7.3模块化

不使用模块化：
在这里插入图片描述

不使用模块化：
1.全局变量污染
2.依赖复杂

使用模块化：

在这里插入图片描述
使用模块化：
1.直接<script src="a.js"></script>，其他的根据依赖关系自动引用
2.那两个函数，没必要做成全局变量，不会带来污染和覆盖

AMD

1.require.js
2.全局define函数
3.全局require函数
4.依赖JS会自动、异步加载

在这里插入图片描述

CommonJS

nodejs模块化规范，现在被大量用于前端
前端开发依赖的插件和库，都可以从npm中获取
构建工具的高度自动化，使得使用npm的成本非常低
CommonJS不会异步加载JS，而是同步一次性加载出来

使用CommonJS：
在这里插入图片描述

AMD和CommondJS的使用场景

1.需要异步加载JS，使用AMD
2.使用了npm之后建议使用CommonJS

重点总结

1.AMD
2.CommonJS
3.两者的区别

7.4构建工具

grunt/gulp/fis3/webpack

7.5上线回滚

在这里插入图片描述

8.运行环境

讲解 JS 代码在浏览器中运行的相关问题，例如页面加载和渲染，性能优化，安全性，这些类别的题目。

知识点：
1.页面加载过程
2.性能优化
3.安全性

8.1页面加载

题目：
1.从输入url到得到html的详细过程
2.window.onload和DOMContentLoaded的区别

知识点：
1.加载资源的形式
2.加载一个资源的过程
3.浏览器渲染页面的过程

加载资源的形式：
1.输入url（或跳转页面）加载html
2.加载html中的静态资源（图片/视频/js文件/css文件等等）例如：<script src="static/js/jquery.js"></script>

加载一个资源的过程：
1.浏览器工具DNS服务器得到域名的IP地址
2.向这个IP的机器发送HTTP请求
3.服务器收到、处理并返回HTTP请求
4.浏览器得到返回内容

浏览器渲染页面的过程：
1.根据HTML结构生成DOM Tree
2.根据CSS生成CSSOM
3.将DOM和CSSOM整合形成RenderTree
4.根据RenderTree开始渲染和展示
5.遇到<script>时，会执行并阻塞渲染

为什么要把css放在head中？

如果放在HTML之后，要渲染两次。

js要放在body最下面

还有，<script>为什么要放在最后，因为加载<script>时会执行并阻塞渲染。

window.onload和DOMContentLoaded

window.addEventListener('load',function(){
	//页面的全部资源加载完才会执行，包括图片、视频等
})

window.addEventListener('DOMContentLoaded',function(){
	//DOM渲染完即可执行，此时图片、视频还可能没有加载完
})

8.2性能优化

原则：
1.多使用内存、缓存或者其他方法
2.减少CPU计算、减少网络请求、减少IO

从哪入手：
1.加载页面和静态资源
2.页面渲染

加载资源优化：
1.静态资源的压缩合并
2.静态资源缓存
3.使用CDN让资源加载更快
4.使用SSR后端渲染，数据直接输出到HTML中

渲染优化：
1.CSS放前面，JS放后面
2.懒加载（图片懒加载、下拉加载更多）
3.减少DOM查询，对DOM查询做缓存
4.减少DOM操作，多个操作尽量合并在一起执行
5.事件节流（timer）
6.尽早执行操作（如DOMContentLoaded）

资源合并：
我们可以通过构建工具进行合并。
在这里插入图片描述
缓存：
1.通过连接名称控制缓存（内容改变时候，链接名称才会改变，然后资源才会变更）

CDN：

使用SSR后端渲染：
1.现在Vue React提出了这样的概念
2.其实JSP PHP ASP都属于后端渲染

懒加载：
在这里插入图片描述
缓存DOM查询：

因为上面一种，每循环一次都要查询一次document.getElementsByTagName('p')，影响性能，第二种则是把document.getElementsByTagName('p')查询结果缓存到pList中。

合并DOM插入：
使用createDocumentFragment()创建DOM片段，我们在片段中插入li不会引发网页中DOM操作，通过合并DOM，这样DOM操作就一次。
在这里插入图片描述

事件节流：
在这里插入图片描述

尽早操作：
在这里插入图片描述
8.3安全性

前端安全问题有哪些？

知识点：
1.XSS跨站请求攻击
2.XSRF跨站请求伪造

XSS

1.在新浪博客写一篇文章，同时偷偷插入一段<script>
2.攻击代码执行，获取cookie，发送自己的服务器
3.发布文章，有人查看博客内容
4.会把查看者的cookie发送到攻击者的服务器。

预防：
前端替换关键字，例如替换<为&lt；>为&gt；
后端替换

XSRF

1.你已登陆一个购物网站，正在浏览商品
2.该网站付费接口是xxx.com/pay?id=100但是没有任何验证
3.然后你收到一封邮件，隐藏着<img src=xxx.com/pay?id=100>
4.你查看邮件的时候，就已经悄悄的付费购买了

预防：
增加验证流程，如输入指纹、密码、短信验证码

8.4面试技巧

简历：
简洁明了，重点突出项目经历和解决方案
把个人博客放在简历中，并且定期维护更新博客
把个人的开源项目放在简历中，并维护开源项目
简历千万不要造假，要保持能力和经历上的真实性

慕课网前端JavaScript面试（4）

猜你喜欢