前端面试
关注
分享
扫一扫
文章平均质量分 51
前端面试必备之手写代码
iiiiiill
努力学习前端技术
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
前端模块化的理解
文章目录进化方向模块化的作用几种规范总结进化方向CommonJS->AMD->CMD->ESM（ES6Module）模块化的作用解决命名污染，全局污染，变量冲突模块引入/依赖，模块暴露的方式决定依赖顺序几种规范总结CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案。AMD规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代原创 2021-04-21 16:08:01 · 390 阅读 · 0 评论 -
力扣in前端——无重复字符的最长子串：LeetCode3
给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度。输入: s = “abcabcbb”输出: 3解释: 因为无重复字符的最长子串是 “abc”，所以其长度为 3。其实看到这道题第一时间就是想到KMP算法，然鹅并没关系题解：设想出一个“滑动窗口”的数组：sliderArray滑动窗口数组可以做到从头滑动数组并依次扩充数组直到遇到新的数组元素和原数组中的数重复然后将原数组中重复元素前的全部元素删除，再扩充数组每次滑动时都记录最大值var lengthOfLongest原创 2021-04-16 17:27:07 · 268 阅读 · 0 评论 -
JavaScript两个对象合并
方法1：object.assign.方法2：使用 for in两种方法都是浅拷贝For in const obj1 = { a: { c: 5, b: [2, 3, 4] }, d1() { console.log(5) } }; const obj2 = {.原创 2021-04-14 16:33:47 · 340 阅读 · 0 评论 -
前端性能优化方案——综合篇
CSS 性能优化内联首屏关键CSS（Critical CSS）异步加载CSS：使用 preload进行预加载文件压缩有选择地使用选择器，避免过多嵌套的选择，但要保证可读性减少计算属性：如box-shadow/border-radius/filter/透明度/:nth-child等。减少重排，避免重绘不使用@importreference：https://zhuanlan.zhihu.com/p/41136812Vue 性能优化v-if 和 v-show 区分使用场景v-if是原创 2021-04-13 17:01:42 · 172 阅读 · 0 评论 -
事件循环机制Event Loop（JavaScript）
背景JavaScript 是单线程运行的，但是一定会有异步请求（如Ajax，定时器等），因此异步就要基于回调来实现Event Loop 就是异步回调的实现原理单线程的JavaScript那么 JavaScript 是如何执行的呢？从前到后，一行一行执行如果执行到某一行报错，则停止下面代码的执行会先把同步代码执行完，再执行异步因此，基于上述给出一个基本的异步回调的实现原理执行过程给出执行代码console.log('hi');setTimeout(function cb1() {原创 2021-03-02 20:03:09 · 179 阅读 · 0 评论 -
手写用 promise 加载一张图片
只有一张图片时function loadImg(src) { // 1.创建一个p存储一个Promise类的实例 const p = new Promise( // 2.传入一个函数，内部有两个形参分别为resolve和reject，这两个形参同样也是函数 (resolve, reject) => { //3. 先定义一张图片,创建一个element const img = document.create原创 2021-03-01 21:02:15 · 394 阅读 · 0 评论 -
前端面试之父子div居中
HTML中布局：<body> <div class="father"> <div class="son"></div> </div></body>方法一：使用弹性布局： /* 方法一 弹性布局*/.father { display: flex; width: 200px; height: 200px; background-color: pink;.原创 2020-06-06 20:49:14 · 434 阅读 · 0 评论 -
置换元素和非置换元素/:after/::after
置换元素和非置换元素置换元素置换元素是指：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：浏览器根据<img>标签的src属性显示图片。根据标签的type属性决定显示输入框还是按钮。置换元素在其显示中生成了框，这也就是有的行内元素能够设置宽高的原因。html中的<img><input><textarea><select&g...原创 2020-03-28 21:21:10 · 186 阅读 · 0 评论 -
link和@import的区别
link和@import的区别：1）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。2）link可以加载CSS，Javascript；@import只能加载CSS。3）link加载的内容是与页面同时加载；@import需要页面网页完全载入以后加载。用法：1）link的写法：<link rel="stylesheet" href="...原创 2020-03-08 20:54:02 · 156 阅读 · 0 评论 -
手写一个简易的jQuery，考虑插件和扩展性
文章目录jQuery手写jQuery考虑插件和可扩展性插件可扩展性jQuerywrite Less，Do More手写jQueryclass jQuery { constructor(selector) { const result = document.querySelectorAll(selector); const length = result.length; for (let i = 0; i < length; i++) {原创 2020-09-10 16:38:24 · 325 阅读 · 0 评论 -
手写防抖throttle和节流debounce
文章目录手写防抖throttlethrottle背景手写代码throttle防抖究竟想做到什么？手写防抖throttlethrottle背景若页面中有一个输入框<input type= "text" />，我想根据输入框的内容变化实时做出变化。那我该怎么做呢？监听该输入框，文字变化后触发 change 事件若直接用 keyup 事件，则会频繁触发 change 事件那么从性能优化的角度要怎么做呢？当用户输入结束或者暂停时，才会触发 change 事件这就是防抖了手写代原创 2020-09-09 14:01:09 · 549 阅读 · 0 评论 -
手写一个简易的Ajax
文章目录XMLHttpRquest能用Ajax做什么呢？一个简单的Ajax（get）请求追踪Ajax请求的当前状态注册成功回调手写一个简易的 ajax(GET请求版)XMLHttpRquestAjax是一种技术方案，而不是一种新技术，依赖的依旧是前端三件套，最核心的依赖就是浏览器提供的XMLHttpRequest对象，可以让浏览器发出HTTP请求和接收HTTP响应。也就是说：我们使用XMLHttpRequest对象发送一个Ajax请求。能用Ajax做什么呢？发送HTTP请求得到服务端数据是一原创 2020-09-08 14:41:52 · 2015 阅读 · 0 评论 -
前端基础之ES6
ES6ES6简介ES6实际上是一个泛指，泛指ES2015及后续版本为什么使用ES6？每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性语法过于松散，当实现相同的功能时，不同的人可能会写出不同的代码变量letletES6中新增的用于声明变量的关键字，ES6之前只有全局作用域和局部作用域，在之后呢才有了块级作用域let声明的变量只在所处于的块级有效，块级作用域就是一对大括号里的作用域，块级作用域原创 2020-08-05 14:48:40 · 8843 阅读 · 0 评论