教学游戏这里有两个小游戏，可用来练习 flex 布局。塔防游戏送小青蛙回家Flexbox 概述Flexbox 布局也叫 Flex 布局，弹性盒子布局。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来，更简便、完整、响应式地实现各种页面布局。它的主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webk...

前言本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读，当然大佬级别的请随意。希望读者读完本文，有一定的启发思考，也能对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，对 Vue 有更好的掌握。 文章最后一题，欢迎同学们积极回答，分享各自的经验 ~~~辛苦整理良久，还望手动点赞鼓励~感兴趣的小伙伴可以关注我的公粽号：码上掌握，一起学习前端！1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？SPA（ single-page ap...

0、 我的秋招经历题主准备面试和参加面试的过程中，总结了一些个人经验，梳理一下，希望对准备面试的人有些帮助，尤其是没有面试经历的学生。这里不谈及具体的面试题目，而是一些通用的方法论。此文纯个人想法，希望读者保持自己的判断。1、抛开面试，系统学习在一切之前，应该系统地去学习前端的基础知识。 对前端而言，这些基础包括 HTML，CSS，JavaScript，浏览器原理，网络协议，MVVM 框架和一些必要的计算机基础等。应该先抛开面试的目的去学习这些知识，建立自己的知识体系，然后再结合面试题，运用掌握的知识去理解并解决面试题。然而，很多人为了应付面试，基础技能掌握不扎实，就盲目地从网上查找各种面经，...

Halo Word！大家好，我是大家的掌握哥今天我们来伪科普一下下——关于我们为何使用 void 操作符这档事。敏感话题（省流版）为什么要用 void 0 替换 undefined？我们为什么需要 void 操作符？你可能大概也许不需要 void 操作符1. 为什么要用 void 0 替换 undefined？请想象眼前一位虚拟面试官，祂开始灵魂拷问，为什么要用 void 0 替换 undefined？我们的第一反应可能是从 undefined 的历史包袱展开如数家珍。因为 undefined 不是字面量，所以“魔术变量”undefined 并不恒等于 undefined 原始值，void 0...

你是否曾经为前端的性能问题而烦恼？你是否曾经想过如何优化前端渲染速度？今天我要和大家分享的就是我从“前端”到“前端ssr”的经历，希望能给大家带来一些启示和乐趣。序言随着业务场景不断变化，网站越来越复杂，需要更好的性能和用户体验。传统前端应用程序一般是基于AJAX技术实现的，常见的框架如AngularJS、React和Vue.js等。这些框架将数据和视图分离，视图由前端框架生成并静态呈现，然后使用AJAX从服务器获取数据并更改应用程序的状态和UI。然而，由于这种方式需要在前端执行大量的计算和DOM操作，因此它们容易遇到性能瓶颈。由于页面初始加载速度慢，对SEO不友好以及SSR技术的兴起，同构应...

什么是迭代器模式迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而又不暴露该对象的内部表示。 ——《设计模式：可复用面向对象软件的基础》可以说迭代器模式就是为了遍历存在的。提到遍历，大家都对那些手段耳熟能详了，下面我们先简单列一下各种数据类型的遍历：遍历数组for 循环forEachmapreducekeysvaluesfor of......其中keys values for of 需要Iterator支持，后面会介绍Iterator遍历 Map/SetkeysentriesforEach......遍历 Objectfor in先Object.keys(obj)得到对象每个属性的数...

经历过社招和校招，笔者林林总总得参加过四五十场面试在这些面试中，百分之九十都被问到了性能优化的问题，而且问题都出奇的一致：平时的工作中你有做过什么性能优化？对于这个问题其实我的内心os是（各位轻喷~）：你们怎么都这么爱问性能优化的问题？我的简历中也没有写到这个啊。你们的业务都这么复杂吗？怎么动不动就要性能优化？你们的代码写的这么拉吗？不优化都不能使用吗？性能优化是一个高级前端的必要技能吗？首先客观现实是笔者平时工作中的业务并不复杂，需要性能优化的地方确实不多，一些存在性能瓶颈的大多是使用了其他团队开发的东西，比如播放直播视频的SDK、3D地图引擎等，也找过他们进...

毕业两年了，最近在牛客发布内推帖子，也收到了很多同学的简历，看到很多同学在焦急地等待面试结果，逐字逐句地修改简历，我深感校招不易。这种不容易，没有经历过校招的终究显得浅薄，只有身临其中去感受，那种简历石沉大海的无力感，那种对未来无法掌控的迷茫感，才能真正体会现在求职市场中的学生有多难。一、我的背景本人二本科班出身，专业属于学校的末流学科，所以在学校基本上学的都是非常老的技术，对找工作基本没有任何帮助。目前在阿里做前端程序员。二、入门前端我在大三上学期考虑找工作，由于众所周知的程序员鄙视链算法>后端>前端>测试，本人找工作就是严格按照鄙视链顺序来的，在boss直...

面试了两个月，发现大大小小的公司无论面试多久，最后必须来两三道手撕题，考验候选人的代码能力平时简单题手到擒来，但到了面试官面前就大脑宕机简简单单一道【实现apply】都能卡住，我的总结是还得多练，同一道题多打几次，面试的时候才能思路清晰整理了最基础的常见手撕，啃下这些，基本可以应对70%的手撕题当然大厂手撕并不都是简单基础题，很多都是在这13道基础上拓展，先练好这13道基础题，面试的时候就算run不通，也可以先说个大概思路，从面试官那里获取一点提示稍复杂的手撕，后续更新～～curry（柯里化）function curry(fn: any) {  return function j...

1、React的Fiber的原理，知道怎么实现的吗，是否了解Hook的实现原理2、聊了一下Redux和React-Redux3、对函数式编程了解说一下 纯函数，偏应用，柯里化，compose 分别是什么4、Koa和Express的区别，以及Koa中间键的原理5、长列表渲染的方法6、虚拟滚动（列表）的实现原理7、什么是闭包，什么是立即执行函数，它的作用是什么，可不可以举一下闭包的使用场景8、说一下事件循环9、css 画一个平行四边形，transform：skew（30deg）10、如何统计用户的浏览时长，要考虑到用户会切换页面，缩放页面等。多个点进行上报时，如何区分这些数据来自于同一个会话？11...

上海一个月1.5w, 除去吃喝玩乐和扣税，每个月可以剩多少

方法一 父table  + 子table-cell + vertical-align:center思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中优点：父元素（parent）可以动态的改变高度（table元素的特性）缺点：IE8以下不支持.parent1{    display: table;    height:300px;    width:&nbsp...

在高分辨率设备下，1px就等于96分之一英寸，约等于0.2646mm在移动端中，宽度100%，1px的线看起来要比pc端中宽100%，1px的线粗，那是因为css中的1px并不等于移动设备（物理像素）的1px。物理像素显示是1个像素代表2个像素，所以出现为2px所以我们在移动端中为了让1px的线“看起来”苗条些，会采用一些手段。使用box-shadow模拟边框利用css 对阴影处理的方式实现1px的效果样式设置：.box-shadow-1px { box-shadow: inset 0px -1px 1px -1px #c8c7cc;}取值说明：<inset offsetx offse...

整理了一份百度前端面筋，答案记录在评论里～时长55min，问问题45min，手撕代码10min1、TCP和UDP的区别？2、如何在移动端实现1像素细线3、什么是伪类？什么是伪元素？你所知道的伪元素？4、盒模型 content-box和border-box5、未知宽高实现垂直居中6、cache-control有哪些值？7、知道referer头部吗，直接请求服务器时refer是多少，顺便聊了其在CSRF中的作用8、XSS和CSRF攻击是什么？什么原理？怎么防御？9、二叉搜索js实现10、手撕：给定一个字符串，输出该字符串所有排列的可能。如输入“abc”，输出“abc,acb,bca,bac,cab...