noah的前端面试题（二）｜掘金技术征文

时间 2019-11-30

标签 noah 端面试题技术征文繁體版

原文原文链接

上一篇前端面试题（一）
javascript

1. 大家公司有什么来项目监控html

阿里中间件ARMS前端监控和sourcemap产生的报错报给sensry前端

2. 错误处理有哪些java

前端代码异常监控

前端相关数据监控

阿里巴巴（中国站）用户体验设计部博客（文中提到的 FdSafe 并无被 阿里巴巴 UED 开源）

hlg-front/前端性能监控/monitor.js-master at master · huanleguang/hlg-front · GitHub

sap1ens/javascript-error-logging · GitHub

try, catch方案。你能够针对某个代码块使用try,catch包装，这个代码块运行时出错时能在catch块里边捕捉到。
window.onerror方案。也能够经过window.addEventListener(“error”, function(evt){})，这个方法能捕捉到语法错误跟运行时错误，同时还能知道出错的信息，以及出错的文件，行号，列号。
Resource Timing API 和 Performance Timing API来进行性能检测和内存检测；
扩展XHR原型，检测返回的状态码，如404等，来检测ajax请求失败、错误
页面的死连接能够经过Nodejs的第三方模块，如request等，来检测

3.网络安全谈谈XSS与CSRF以及解决方案
webpack

XSS：跨站脚本（Cross-site scripting，一般简称为XSS）是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它容许恶意用户将代码注入到网页上，其余用户在观看网页时就会受到影响。这类攻击一般包含了HTML以及用户端脚本语言。解决方案以下：git

a：HttpOnly 浏览器禁止页面的JS访问带有HttpOnly属性的Cookie。

b：输入检查 XSS Filter 对输入内容作格式检查，相似“白名单”，可让一些基于特殊字符的攻击失效。在客户端JS和服务器端代码中实现相同的输入检查（服务器端必须有）。

c：输出检查在变量输出到html页面时，可使用编码或转义的方式来防护XSS攻击 HtmlEncode：将字符转成HTMLEntities，对应的标准是ISO-8859-1。

& --> & < --> < > -->> " --> " ' --> ' / --> /

JS中可使用JavascriptEncode。须要对“\”对特殊字符转义，输出的变量的必须在引号内部。

d：XSS的本质是“HTML注入”，用户的数据被当成了HTML代码一部分来执行，从而混淆了本来的语义，产生了新的语义。

CSRF:跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，一般缩写为 CSRF 或者 XSRF，是一种挟制用户在当前已登陆的Web应用程序上执行非本意的操做的攻击方法。
github

通用方法：Token 使用Anti-CSRF Token 在URL中保持原参数不变，新增一个参数Token。Token的值是随机的（必须使用足够安全的随机数生成算法，或者采用真随机数生成器），其为用户与服务器所共同持有，能够放在用户的Session中，或者浏览器的Cookie中。注意保密，尽可能把Token放在表单中（构造一个隐藏的input元素），以POST提交，避免Token泄露
web

4.重排和重绘面试

部分渲染树（或者整个渲染树）须要从新分析而且节点尺寸须要从新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
因为节点的几何属性发生改变或者因为样式发生改变，例如改变元素背景色时，屏幕上的部份内容须要更新。这样的更新被称为重绘。

5.什么状况会触发重排和重绘？ajax

添加、删除、更新 DOM 节点
经过 display: none 隐藏一个 DOM 节点-触发重排和重绘
经过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，由于没有几何变化
移动或者给页面中的 DOM 节点添加动画
添加一个样式表，调整样式属性
用户行为，例如调整窗口大小，改变字号，或者滚动。

6. POST 提交数据方式有几种

application/x-www-form-urlencoded
multipart/form-data
application/json
text/xml

7. webpack Babel的一个插件：transform-runtime babel-polyfill以及stage-2，你说一下他们的做用

目前浏览器对 ES2015 语法的支持都不太好，因此当咱们须要使用 Promise、Set、Map 等功能时就须要 babel-polyfill 来提供。

在转换 ES2015 语法为 ECMAScript 5 的语法时，babel 会须要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每个 js 文件里，这样文件多的时候，项目就会很大。

因此 babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样作能减少项目文件的大小。

8. 谈谈webpack代码分割

有三种经常使用的代码分离方法：

入口起点：使用 entry 配置手动地分离代码。
防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。
动态导入：经过模块的内联函数调用来分离代码。

9. ddllplugin commonschunkplugin 区别

（1）因为dll包和业务chunk包是分开进行打包的，每一次修改代码时只须要对业务chunk从新打包，webpack的编译速度获得极大的提高，所以相比于CommonChunkPlugin，DllPlugin进行代码分割能够显著的提高开发效率。

（2）使用DllPlugin进行代码分割，dll包和业务chunk相互独立，其chunkhash互不影响，dll包不多变更，所以能够更充分的利用浏览器的缓存系统。而使用CommonChunk打包出的代码，因为公有chunk中包含了webpack的runtime(运行时)，公有chunk和业务chunk的chunkhash会互相影响，必须将runtime单独提取出来，才能对公有chunk充分地使用浏览器的缓存。

10 如何优化Webpack 构建速度

webpack 构建性能优化策略小结

11 如今有一个数组存放字符串数据：

['item1', 'item2', 'item3', 'item4', 'item5']
复制代码

有另一个数组存放一组对象：

[
  { content: 'section1', index: 0 },
  { content: 'section2', index: 2 }
]
复制代码

它每一个对象表示的是会往原来的数组的 index 坐标插入 content 数据（index 不会重复）：

0      1      2      3      4
     item1  itme2  item3  item4  item5
    ^             ^ 
    |             |
 section1     section2  
 
最后结果是：['section1', 'item1', 'item2', 'section2', 'item3', 'item4', 'item5']
复制代码

请你完成 injectSections 函数，能够达到上述的功能：

injectSections(
  ['item1', 'item2', 'item3', 'item4', 'item5'],
  [
    { content: 'section1', index: 0 },
    { content: 'section2', index: 2 }
  ]
) // => ['section1', 'item1', 'item2', 'section2', 'item3', 'item4', 'item5']复制代码

const injectSections = (items, sections) => { sections.sort((a,b) => b.index - a.index) sections.forEach((m)=>{ items.splice(m.index, 0, m.content) }) return items }