社招-字节跳动前端面试前言找了朋友帮忙内推了字节跳动-飞书。没想到响应非常迅速，本以为会过一段时间才会安排面试。没想到隔天就安排上了面试，本来还想在面字节之前先拿其他几家试水，然后再来面试，没想到字节效率太高了。 二面已结束，在字节面试就是享受，虽然个人非常紧张，但是一场面试下来真的收获非常多。全部问题都是基于个人简历来进行问答的，面试记录抽象了一下。 一面现在回顾一下面试题，发现大佬好像问了好多关于函数式编程的问题， 2021-03-10 面经 面经 字节跳动
在React中因浅拷贝引发的BUG今天在开发过程中遇到一个 BUG：useEffect 没有按照想象中的执行。所以有了本篇文章。 需求如下：有个列表，列表项中的content字段如果内容大于 3 行，则仅显示三行，并有个展开的按钮。 现象：通过接口拉回来的数据，如果本来就大于三行，会显示展开的按钮。当点击列表内的项时，呼出原生 APP 的修改页面，修改内容后，调用我准备好的方法，来进行数据更新。如果原来的内容小于三行，修改到三行以 2021-07-21 React 深拷贝/浅拷贝 数据结构 React.Memo
(随手记录)-GIT解决合并错分支今天在进行大版本升级完，将版本分支归档到 main 分支的时候，发现 commits 特别多，一共有 2000 多条。 感觉不太对劲，第一反应就是有人把 dev 分支合并进了某个功能分支，然后在从功能分支合并到版本分支的时候没有仔细看。（因为在上一家公司就遇到过一次。。。） 然后抓紧打开 Graph（VSCode 也有插件）看一下路径。 发现果然如我所料。 那其实是需要仅仅将这个 merge 的请 2021-07-14 随手记录 GIT
(随手记录)-一些关于BOM的零散知识用 setTimeout 实现一个 setInterval1234const run = setTimeout(() => { // DoSomethings run();}, 3000); 这种实现的方式与 setInterval 的区别：setInterval 不关心方法是否还在运行；setTimeout 实现的一定是在有了结果之后才继续执行第二次的。 封装个支 2021-07-12 随手记录
性能优化之资源优化资源的压缩与合并为什么要压缩&合并 减少http请求数量 减少请求资源的大小 HTML&CSS压缩 使用在线工具进行压缩 使用第三方NPM包的工具 使用webpack的plugin JS压缩与混淆 使用在线工具进行压缩 使用webpack对js在构建时压缩与混淆 CSS/JS文件合并优点：只进行一次TCP/IP链接，减少三次握手，TTFB等时间消耗缺点：文件过大 2021-03-02 性能优化 资源优化 资源的压缩与合并 图片优化 字体优化
性能优化之代码优化JS开销和如何缩短解析时间JS开销 解决方案 网络加载方面：JS文件压缩 编译和解析：代码拆分，按需加载 编译和解析：删除没必要的代码 执行：减少主线程工作量 减少主线程工作量 避免长任务（long task） 避免超过1kB的行间脚本 使用 rAF 和 rIC 进行时间调度 配合 V8 有效优化代码V8编译原理 生成抽象语法树（AST）和执行上下文：先进行词法分析将源代码拆解 2021-02-28 性能优化 JavaScript HTML CSS
性能优化之传输加载优化传输压缩方案-GZip对传输资源进行体积压缩，可以高达90% 以下为nginx配置 12345678gzip on;gzip_min_length 1k; # 文件最小启用压缩大小gzip_comp_level 6; # 压缩级别1-9 等级越高CPU消耗越高gzip_types text/plain application/javascript application/x-javascript 2021-03-02 性能优化 网络传输 nginx HTTP2
性能优化之性能优化的指标与工具TODO: 更新ChromeDevTools使用说明，以及各项参数说明 性能优化的意义高性能意味着用户参与度提高，用户留存数提高，进而促进高转化率，seo排名也会提高。 性能优化-加载指标 Speed Index：测量页面加载过程中内容的可视化显示速度 TTFB：浏览器开始收到服务器响应数据的时间（后台处理时间+重定向时间），是反映服务端响应速度的重要指标。 Load（页面加载时间）：所有资源 2021-02-25 性能优化 ChromeDevTools LightHouse 性能测量API
性能优化之构建优化Tree-shaking将上下文未用到的代码删掉，不会打包到最终文件中（基于ES6的模块化才可以），来达到减小JS文件大小的目的 有些代码可能会影响到全局作用域或没有用ES6的模块功能，可以通过设置package.json中的sideEffects来指定不希望被shaking掉的文件（在导入时会执行特殊行为的代码，而不是仅仅暴露一个 export 或多个 export。举例说明，例如 polyfi 2021-03-02 性能优化 webpack babel
性能优化之渲染优化浏览器渲染过程（对应面试题：从用户输入url到显示都发生了什么） 省略网络相关部分。 渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。 渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。 创建布局树，并计算元素的布局信息。 对布局树进行分层，并生成分层树。 为每个图层生成绘制列表，并将其提交到合成线程。 合成线程将图层分成 2021-02-26 性能优化 浏览器渲染原理 重排和重绘 预渲染 首屏渲染
