前言
为了证明其实我是写小说的，好歹也是某平台的签约作家，我决定挑战用小说手法来写一篇技术文！
1.
你认识我的的时候，我还是个不会写代码的姑娘。我爸没教我写html，我妈不肯介绍js对象给我认识，你没见过我系着围裙待在厨房五六分钟就端出一道色香味俱全的盒子小炒肉。楼下馆子，农家小炒肉25块，青椒土豆丝13块。
你看，左边的我和右边的我有什么不同？
<style>
ul {
list-style: none;
text-align: center;
font-size: 0;
}
ul li {
margin: 30px;
width: 480px;
height: 312px;
display: inline-block;
border: 10px white solid;
box-shadow: 0 0 5px rgba(216 ,70 ,206, 0.164);
position: relative;
background: white;
border-radius: 0 0 180px 180px / 0 0 60px 60px;
}
ul li::after,
ul li::before {
content: "";
position: absolute;
z-index: -2;
top: 80%;
bottom: 3%;
left: .5%;
right: .5%;
box-shadow: 0 20px 15px rgba(216 ,70 ,206, .3);
transform: skew(0, 5deg);
border-radius: 40%;
}
ul li::after {
transform: skew(0, -5deg);
}
ul li div {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 0 0 180px 180px / 0 0 50px 50px;
position: relative;
}
img {
width: 580px;
}
</style>
<body>
<ul>
<li>
<div><img src='./c.jpg' /></div>
<div>曾经的我</div>
</li>
<li>
<div><img src='./b.jpg' /></div>
<div>现在的我？</div>
</li>
</ul>
</body>
噢！ 曾经的我和现在的我使用的相框一样好看！
2.
你认识我的时候，我还是个脾气炸裂、不懂 webpack 的女孩。爸妈宠着我，学校白纸黑字也不敢教我如何进行项目管理，你没见过我温柔可爱、撒娇卖萌的样子。
那天，老板问我能不能要一个这样的效果。
噢，我做不到，老板却依然奖励了我。我冲到老板办公室，质问老板：这么明明不是我写的，为什么还给我奖励？本小姐从来不要这种莫须有的罪名。
你认识我的时候，我还是个没有学会 《Vue 从入门到放弃》 的巨婴姑娘。我没有只管 Vue 不管任务交付，所以每到月底只能靠他人救济度日。
“喂，你帮帮我。”
“？？？”
“我要跑路，咱们公司太难了。”
“？？？”
“好。那你出去面试吧，活我先替你完成。”
吧唧！我开心的忍不住在你的脸上亲了一口。全世界就你对我最好。
3.
某互娱公司
1. 手写一个节流函数
function throttle(fun, delay) {
let last, deferTimer
return function (args) {
let that = this
let _args = arguments
let now = +new Date()
if (last && now < last + delay) {
clearTimeout(deferTimer)
deferTimer = setTimeout(function () {
last = now
fun.apply(that, _args)
}, delay)
}else {
last = now
fun.apply(that,_args)
}
}
}
2. 给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。
输入：nums = [-2,1,-3,4,-1,2,1,-5,4]
输出：6
解释：连续子数组 [4,-1,2,1] 的和最大，为 6 。
// Kadane算法扫描一次整个数列的所有数值，
// 在每一个扫描点计算以该点数值为结束点的子数列的最大和（正数和）。
// 该子数列由两部分组成：以前一个位置为结束点的最大子数列、该位置的数值。
// 因为该算法用到了“最佳子结构”（以每个位置为终点的最大子数列都是基于其前一位置的最大子数列计算得出,
// 该算法可看成动态规划的一个例子。
// 状态转移方程：sum[i] = max{sum[i-1]+a[i],a[i]}
// 其中(sum[i]记录以a[i]为子序列末端的最大序子列连续和)
var maxSubArray = function(nums) {
let ans = nums[0];
let sum = 0;
for(let num of nums) {
if(sum > 0) {
sum = sum + num;
} else {
sum = num;
}
ans = Math.max(ans, sum);
};
return ans;
};
网易云音乐
1. babel编译流程。
babel是一个javascript编译器，用来将es6语法编译成es5。 babel的工作可以分为3个阶段。
- step 1 解析（Parse）
通过解析器babylon将代码解析成抽象语法树
- step 2 转换（TransForm）
通过babel-traverse plugin对抽象语法树进行深度优先遍历，遇到需要转换的，就直接在AST对象上对节点进行添加、更新及移除操作，比如遇到箭头函数，就转换成普通函数，最后得到新的AST树。
- step 3 生成（Generate）
通过babel-generator将AST树生成es5代码
2. react 异步请求中多次setState导致重复渲染怎么优化
- 优化请求，例如减少请求次数。
- 统一回调方法。 将需要setState的状态都穿入回调，统一执行。但这样有可能会造成延迟
- 生命周期里解决副作用。 例如 shouldComponentUpdate、componentDidUpdate
- memo、useMemo
3. react中commit阶段effect链表如何去渲染真实DOM
// Fiber 工作的第二阶段
function commitRoot() {
// 获取链表中第一个要执行的 DOM 操作
let currentFiber = workInProgressRoot.firstEffect
// 判断要执行 DOM 操作的 Fiber 对象是否存在
while (currentFiber) {
// 执行 DOM 操作
currentFiber.return.stateNode.appendChild(currentFiber.stateNode)
// 从链表中取出下一个要执行 DOM 操作的 Fiber 对象
currentFiber = currentFiber.nextEffect
}
}
4. 列举 webpack 编译流程中的hook节点
答： 那些高级/资深的前端是如何回答JavaScript面试题的 （二）
小红书
1. TS里面Record类型是怎么实现的
2. 当一个CSS文件很大的时候，如果文件没下载完成，js会不会执行
3. 算法：实现一个二叉树深度优先遍历
4. 说一个你比较擅长的领域，做了哪些事情
5. 介绍一下浏览器性能优化怎么做
得物
1. 类组件里多次调用setState 和 fuction 组件里多次调用setState，每次传值都一样，两者有什么区别？
2. 为性能优化做过自己原创的事情吗？
3. 提供一个成熟的预渲染方案。
4.
那天，风很大，我终于没能听清你说的是不是再见。
此后，我便再没有看见你的人。没有人替我偷偷把活干了，也再没有人无理取闹。 我忽然间就懂了，有些路终归是要一个人走的。
是呀。救护车的轮胎在地上擦出一条条飘逸的痕迹，我明明看见雨一吹，痕迹就不见了。
（学习吧。我给你个TODO LIST）
js异步编程httpReact/Vue你至少要写出一种来。webpack- 性能优化
- 商业化解决方案
我不闹了吧。遗憾的是，时间不会停滞，过往不会留下，过后我依然遇见不同的人，终于还是一个人无奈的长大了。
(祝，君一切安好)
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！