1. 你们公司有什么来项目监控
阿里中间件ARMS前端监控和sourcemap产生的报错报给sensry
2. 错误处理有哪些
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以及解决方案
XSS:跨站脚本(Cross-site scripting,通常简称为XSS)是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。 解决方案如下:
CSRF:跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF, 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
通用方法:Token 使用Anti-CSRF Token 在URL中保持原参数不变,新增一个参数Token。Token的值是随机的(必须使用足够安全的随机数生成算法,或者采用真随机数生成器),其为用户与服务器所共同持有,可以放在用户的Session中,或者浏览器的Cookie中。 注意保密,尽量把Token放在表单中(构造一个隐藏的input元素),以POST提交,避免Token泄露
4.重排和重绘
- 部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
- 由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色时,屏幕上的部分内容需要更新。这样的更新被称为重绘。
5.什么情况会触发重排和重绘?
- 添加、删除、更新
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 构建速度
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 }