10 2024 档案
摘要：1. setter & getter // ES6 Class class PersonCl { constructor(fullName, birthYear) { this.fullName = fullName; this.birthYear = birthYear; } // 类里面的方法可
阅读全文
摘要：1. HTTP 和 HTTPS HTTP是明文传输，敏感信息容易被中间劫持。 HTTPS = HTTP + 加密，即使传输的数据被劫持了也无法解密。 2. 加密方式：对称加密，非对称加密 对称加密 用同一个key加密解密。 非对称加密 一对key（公钥私钥），公钥加密，私钥解密（or反过来）。 具体
阅读全文
摘要：获取过的资源没必要再去请求获取一次，就是缓存。 为什么需要缓存？ 网络请求相比于CPU的加载和页面渲染（毫秒级），是很慢的。我们需要通过缓存把网络请求数量和体积减少，而且网络请求不稳定（信号不好情况下），加剧了页面加载的不稳定性。我们需要优化网络请求让页面加载更快。 哪些资源可以被缓存？ 静态资源如
阅读全文
摘要：常见题目： 1. HTTP常见的状态码 1xx 服务器收到请求，但还没返回数据。（不常用） 2xx 请求成功，如200 3xx 重定向，如302 4xx 客户端错误，如404 5xx 服务端错误，如500 - 常见状态码： 200 成功 301 永久重定向（配合location，浏览器自动处理），l
阅读全文
摘要：🐾面试真题演练！ 前端为什么要进行打包和构建？ 代码相关：体积更小（Tree-Shaking、压缩、合并），加载更快。 开发相关：高级语言编译成更低级简单的语言或语法（TS、ES6+、模块化、scss） 兼容性和错误检查（Polyfill、postcss、eslint） 研发流程方面：保证统一高效
阅读全文
摘要：是前端开发环境必备工具。用于把ES6语法转换为ES5、ES4，兼容不同浏览器。 - 环境搭建 & 基本配置 安装一些插件、配置.babelrc。通过plugins里面的东西转换语法。preset-env是一堆plugin的集合。 npx babel src/index.js - babel-poly
阅读全文
摘要：1. webpack优化打包构建速度-开发体验和效率 优化babel-loader 缓存：cacheDirectory,只要加了这个，es6代码中没有改动的就不会重新编译，集中缓存，加快速度。 IgnorePlugin 避免引入无用模块 比如有个Moment.js库支持很多语言 避免引入过多的语言，
阅读全文
摘要：module：模块，各个源码文件。 比如说src下面的index.js就是模块，而在其中引用的一切都是模块。上面lodash啦，别的文件啦(math.js)，css文件啦，图片啦。可以引用的都是模块。 chunk： 多模块合并成的，比如entry里面可以定义；import()，splitChunk
阅读全文
摘要：面试真题： 前端代码为什么要进行构建和打包？（答全面） module chunk bundle分别是什么意思？有何区别？ loader和plugin的区别？ webpack如何实现懒加载？ babel-runtime和 babel-polyfill? webpack常见的性能优化 1. webpac
阅读全文
摘要：Webpack层级的优化（后面会讲） 前端通用的性能优化，如图片懒加载 使用SSR
阅读全文
摘要：以下代码的输出？（函数修改形参能否影响实参？） 函数是赋值传递。num和obj的值是不会被改变的。 所以输出的num还是100，obj仍然是{name: '双越'}。 手写convert函数，将数组转为树（TS写的） 基础问题！不会的话先去恶补JS版本的数据结构！ 树节点： 如何找到parentNo
阅读全文
摘要：有哪些前端攻击？如何预防？ XSS 跨站脚本攻击 预防：尖括号替换，Vue中用插值{}不会发生XSS攻击。 CSRF 跨站请求伪造 预防：服务端严格控制跨域，验证机制二次确认 SameSite禁止第三方cookie 点击劫持 演示一下： 预防： 1.判断两个iframe域名是否一致 2.让当前网页只
阅读全文
摘要：预处理器是什么？ less Sass 预处理器有啥功能？ 嵌套，反映了层级和约束 变量和计算，减少了重复代码 Extend和Mixin代码片段，就像具备同一个功能的函数。 循环，适用于复杂有规律的样式 import CSS文件模块化 1. less嵌套 Node写的，通过npm发布。 &:同一层级
阅读全文
摘要：作用：引起注意、愉悦感、反馈、掩饰（加载过程） transition动画 补间动画，中间过程可以计算出来。 transition: width 1s:意味动画属性是width，动画时间是1秒。 delay： 动画延迟几秒再开始 transition-timing-function 缓动函数: 可以自
阅读全文
摘要：box-shadow 阴影 👇 text-shadow 立体感，印刷品质感 border-radius 圆形：半径设为50% 像素、百分比... background 多背景叠加、纹理、图案、渐变、雪碧图动画、背景图尺寸适应 background-position: center(横向居中) to
阅读全文
摘要：常用布局方法： table表格布局 float浮动 + margin inline-block布局 flexbox布局 1. 表格布局 很久以前广泛使用，现在用的比较少。文字会自动垂直居中，左右两个布局，缩短左边的宽度右边宽度会自动增加。 还可以用长得像表格的 div实现： display：tabl
阅读全文
摘要：全称：Cascading Style Sheet 2. 选择器 选择器 { 属性：值； 属性：值； } 选择器用于匹配HTML元素，有不同的匹配规则，多个选择器可以叠加。 浏览器解析CSS选择器方式和我们写选择器的方式是相反的：从右往左 选择器分类 伪元素（双冒号）是真实存在的元素，可以被显示出来的
阅读全文
摘要：HTML常见元素 <meta name="viewport">视口,默认像素980px。适配移动端。 HTML版本对比 HTML元素分类 按默认样式分：块级block（div、p）、行内/内联inline（span）、inline-block（select） 按内容分： *4. 嵌套关系 块级元素可
阅读全文
摘要：页面如何进行首屏优化？ 路由懒加载 服务端渲染SSR 只获取HTML就可以，里面包含data。 APP预取（啥东西） APP结合H5、结合JS bridge 分页 图片懒加载 lazyload Hybrid 总结： 后端一次性返回10w条数据，你会如何渲染？ 本身后端设计方案的设计就不合理！非要的话
阅读全文
摘要：在DOMRect对象中，所有参数的解释如下： x 和 y: 元素相对于视口左上角的水平和垂直坐标。这与 left 和 top 是等价的。 left 和 top: 元素的左边缘和上边缘相对于视口左上角的距离。 right 和 bottom: 元素的右边缘和底边相对于视口左上角的距离。 width 和
阅读全文
摘要：
阅读全文
摘要：网页和iframe如何通讯？（听都没听过iframe） 属于HTML中Web Socket内容 iframe是HTML中的一个元素,它允许在一个HTML页面中嵌入另一个HTML页面。下面是对iframe的简要解释: 定义: iframe代表"内联框架"(Inline Frame)。 用途: 它用于在
阅读全文
摘要：如何检测JS内存泄漏？JS内存泄露场景有哪些？ 垃圾回收GC：引用计数算法、标记清除。 引用计数👇有个问题：循环引用。 标记清除👇现代JS引擎使用的方法： ❗闭包内的数据是常驻内存的，不会被销毁。 内存泄漏：是指程序中已经不再需要的对象无法被垃圾回收器释放，导致内存占用越来越多，进而可能导致性能
阅读全文
摘要：如何理解HTML语义化？ 默认情况下，哪些元素是块级元素，哪些是内联元素？ 盒模型宽度如何计算？ margin纵向重叠的问题 margin负值的问题 BFC理解和应用 float布局的问题 flex画色子 absolute和relative依据什么定位？ 居中对齐有哪些实现方式 line-heigh
阅读全文
摘要：1. Vue中computed和watch的区别 两者用途不同啊！computed用于计算产生新的数据，watch用于监听现有数据。 computed有缓存，methods没有缓存。 computed有点儿像工厂模式（产生新的东西），watch像发布订阅模式。（是我目前的知识盲区） 2. Vue组件
阅读全文
摘要：一、 Ajax Fetch Axios都用于网络请求，但是不同维度。比如之前提到的，栈队列数组，栈和队列是逻辑结构，数组是物理结构。 Ajax(Asynchronous JavaScript and XML)是一种技术统称；Fetch是一个具体的原生API；Axios是第三方库(lib)。 （回顾一
阅读全文
