关注
分享
我在人间贩卖青春
一个颓废的、落魄的、无能的程序狗
展开
-
从输⼊url到⻚⾯加载完成发⽣了什么？Flex 布局和传统布局有什么区别？
前端面经从输⼊url到⻚⾯加载完成发⽣了什么？1、浏览器的地址栏输⼊URL并按下回⻋。2、浏览器查找当前URL的DNS缓存记录。3、DNS解析URL对应的IP。4、根据IP建⽴TCP连接（三次握⼿）。5、HTTP发起请求。6、服务器处理请求，浏览器接收HTTP响应。7、渲染页面，构建DOM树。8、关闭TCP连接（四次挥⼿）。Flex 布局和传统布局有什么区别？传统布局：是基于盒模型，依赖display属性 、position属性、float属性。Flex 布局：可以渐变、完成、原创 2021-03-10 20:39:44 · 248 阅读 · 0 评论 -
说一下虚拟 DOM 的优缺点？说一下TCP 传输的三次握手、四次挥手策略
前端面经说一下虚拟 DOM 的优缺点？优点：保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的原创 2021-03-10 20:25:46 · 169 阅读 · 0 评论 -
怎么做到性能优化？ 什么是回流，什么是重绘，有什么区别？
前端面经怎么做到性能优化？1、JavaScript外联文件引用放在html文档底部；CSS外联文件引用在html文档头部，位于head内；2、http静态资源尽量用多个子域名；3、服务器端提供html文档和http静态资源时，尽量开启gzip压缩；4、尽量减少HTTP Requests的数量；5、使用雪碧图来减少CSS背景图片的HTTP请求次数；6、首屏不需要展示的较大尺寸图片，请使用lazyload；7、图片无损压缩的优化；8、减少cookies的大小：尽量减少cookies的体积对减原创 2021-03-10 20:02:22 · 147 阅读 · 0 评论 -
浏览器是怎样解析CSS选择器的？介绍几个前端性能优化方案？
前端面经浏览器是怎样解析CSS选择器的？CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。 而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一原创 2021-03-10 17:47:09 · 89 阅读 · 0 评论 -
请介绍一下回流（Reflow）与重绘（Repaint）？什么是闭包，如何使用它，为什么要使用它？
前端面经请介绍一下回流（Reflow）与重绘（Repaint）？回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫原创 2021-03-10 17:32:14 · 159 阅读 · 0 评论 -
简单说一下webpack 的原理？简单说一下babel的原理？
前端面经简单说一下webpack 的原理初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run方法开始执行编译；确定入口：根据配置中的 entry 找出所有的入口文件；编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；完成模块编译：在经过第4步使用 Loader 翻译完所原创 2021-03-10 17:13:29 · 442 阅读 · 0 评论 -
浏览器是如何渲染页面的？Cookie如何防范XSS攻击？
前端面经浏览器是如何渲染页面的？渲染的流程如下：1.解析HTML文件，创建DOM树。自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；3.将CSS与DOM合并，构建渲染树（Render Tree）；4.布局和绘制，重绘（repaint）和重排（reflow）。Cookie如何防范XSS攻击？XSS（跨站原创 2021-03-10 17:06:58 · 451 阅读 · 0 评论 -
如何优化webpack构建的性能？computed和watch有什么区别?
前端面经如何优化webpack构建的性能⼀、减少代码体积1.使⽤CommonsChunksPlugin 提取多个chunk之间的通⽤模块，减少总体代码体积2.把部分依赖转移到CDN上，避免每次编译过程都由Webpack处理3.对⼀些组件库采⽤按需加载，避免⽆⽤的代码二、减少目录检索范围⽤loader的时候，通过制定exclude和include选项，减少loader遍历的⽬录范围，从⽽加快webpack编译速度三、减少检索路经：resolve.alias可以配置webpack模块解原创 2021-03-09 22:48:36 · 91 阅读 · 0 评论 -
vue 中的 for循环key 到底有什么⽤？vue中route 和 router 的区别是什么？
前端面经vue 中的 for循环key 到底有什么⽤？key 是给每⼀个 vnode 的唯⼀ id,依靠 key,我们的 diff 操作可以更准确、更快速 (对于简单列表⻚渲染来说 diff 节点也更快,但会产⽣⼀些隐藏的副作⽤,⽐如可能不会产⽣过渡效果,或者在某些节点有绑定数据（表单）状态，会出现状态错位。)diff 算法的过程中,先会进⾏新旧节点的⾸尾交叉对⽐,当⽆法匹配的时候会⽤新节点的 key 与旧节点进⾏⽐对,从⽽找到相应旧节点。更准确 : 因为带 key 就不是就地复⽤了,在 same原创 2021-03-09 22:38:49 · 307 阅读 · 1 评论 -
什么是纯函数、如何优化SPA应⽤的⾸屏加载速度慢的问题
前端面经解释一下什么是纯函数简单来说，⼀个函数的返回结果只依赖于它的参数，并且在执⾏过程⾥⾯没有副作⽤，我们就把这个函数叫做纯函数。两大特点函数的返回结果只依赖于它的参数。函数执⾏过程⾥⾯没有副作⽤。如何优化SPA应用的首屏加载速度慢的问题？将公⽤的JS库通过script标签外部引⼊，减⼩app.bundel的⼤小，让浏览器并⾏下载资源⽂件，提高下载速度；在配置路由时，⻚⾯和组件使⽤懒加载的⽅式引⼊，进⼀步缩小 app.bundel 的体积，在调⽤某个组件时再加载对应的js⽂件原创 2021-03-09 22:29:45 · 120 阅读 · 0 评论 -
div实现水平垂直居中CSS样式的8大方法
div水平垂直居中的8大方法最近在找工作，为面试做准备，整理一下div水平垂直居中的实现方法。居中元素已知宽高适用absolute + 负marginabsolute + margin autoabsolute + calc居中元素未知宽高absolute + transformline-heightcss-tableflexgrid<!DOCTYPE html><html lang="en"><head> <m原创 2021-03-09 22:15:56 · 133 阅读 · 0 评论