首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端开发必会HTMLCSS硬知识

文/小魔女 1 本文简介 面试大厂,HTML/CSS,JS,网络基础这三块硬知识是必不可少 我整理了一些备考笔记,分享给大家 初中级前端到高级前端蜕变,从基础知识开始~ 分享小魔女音乐 2 块元素和行元素...2.1 请说出3个H5新增块元素,并介绍他们应用场景 aside:表示article元素内容之外,与article元素内容相关辅助信息 figure:代表一个块级图像,包含说明。...他们宽高分别如何计算?...选择器 7.1 CSS选择器有哪些?...保护有用浏览器默认样式而不是完全去掉 一般化样式:为大部分html元素提供 修复浏览器自身bug 优化css可用性 解释代码 7.5 如何做到一个list中奇数和偶数行背景色不一样?

1.5K31
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    2022必会前端手写面试题

    前端面试题视频讲解1. 防抖节流这也是一个经典题目了,首先要知道什么是防抖,什么是节流。防抖: 在一段时间内,事件只会最后触发一次。节流: 事件,按照一段时间间隔来进行触发。...res : newObj;}复制代码9. js执行机制 说出结果并说出why这道题考察是,js任务执行流程,对宏任务和微任务理解console.log("start");setTimeout(()...手写实现sleep这个我只通过了一种方法实现,就是刚刚我们在上面js执行流程中我有提过。 ...: 合并两个数组,然后查找数组第一个出现索引和最后一个出现索引是否一致就可以判断是否是独立数据了。...这得归功于`js预编译`- js在执行之前进行预编译,会进行 `函数提升` 和 `变量提升`- 所以函数和变量都进行提升了,但是`函数声明优先级最高`,会被提升至`当前作用域最顶端`- 当在执行到后面的时候会导致

    95930

    前端开发必会HTMLCSS硬知识 (二)

    文/小魔女 本文简介 前端开发系列第二篇文章 基础知识就像是一把宝剑,能让你驰骋在前端领域战场 知识亦有温度,让我们对新知识永远保持热度吧 分享小魔女音乐 html渲染、css解析...因为从右向左匹配在第一步就筛选掉了大量不符合条件最右节点(叶子节点); 而从左向右匹配规则性能都浪费在了失败查找上面。 reflow(回流)和repaint(重绘)区别?...css加载不会堵塞html解析 css加载会堵塞dom树渲染 css加载会堵塞js语句执行 js加载会堵塞html解析 css文件放前面,js文件放在html和css后面 如何做页面加载优化(减少白屏时间...*100 = 58.59375 px 动态计算 js代码 (function (){ const desWid = 640 const winWid = document.documentElement.clientWidth...khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } js

    2.2K31

    2022必会前端手写面试题

    前端面试题讲解二、题目1. 防抖节流这也是一个经典题目了,首先要知道什么是防抖,什么是节流。防抖: 在一段时间内,事件只会最后触发一次。节流: 事件,按照一段时间间隔来进行触发。...res : newObj;}复制代码9. js执行机制 说出结果并说出why这道题考察是,js任务执行流程,对宏任务和微任务理解console.log("start");setTimeout(()...手写实现sleep这个我只通过了一种方法实现,就是刚刚我们在上面js执行流程中我有提过。...: 合并两个数组,然后查找数组第一个出现索引和最后一个出现索引是否一致就可以判断是否是独立数据了。...这得归功于`js预编译`- js在执行之前进行预编译,会进行 `函数提升` 和 `变量提升`- 所以函数和变量都进行提升了,但是`函数声明优先级最高`,会被提升至`当前作用域最顶端`- 当在执行到后面的时候会导致

    77040

    前端必会vue面试题

    另外nuxt.js/next.js中给我们提供了SSG(Static Site Generate)静态网站生成方案也是很好静态站点解决方案,结合一些CI手段,可以起到很好优化效果,且能节约服务器资源内容生成上区别...里面依赖包,都会被打包进 vendor.js 这个文件中。...形式存在打包后 js 文件中。...比如后端返回一个 年月日日期字符串,前端需要展示为 多少天前 数据格式,此时就可以用fliters过滤器来处理数据。过滤器是一个函数,它会把表达式中值始终当作函数第一个参数。...,得到结果再转发给前端,但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域在vue.config.js文件,新增以下代码amodule.exports = { devServer: {

    1.3K50

    腾讯前端必会面试题

    CDN使用场景使用第三方CDN服务:如果想要开源一些项目,可以使用第三方CDN服务使用CDN进行静态资源缓存:将自己网站静态资源放在CDN上,比如js、css、图片等。...= 0.3,请详述理由因为 JS 采用 IEEE 754 双精度版本(64位),并且只要采用 IEEE 754 语言都有该问题。...-->代码输出结果 var a=3; function c(){ alert(a); } (function(){ var a=4; c(); })();js中变量作用域链与定义时环境有关...,有一种就是我们常用直接引入,还有两种就是使用 async 属性和 defer 属性来异步引入,两者都是去异步加载外部JS文件,不会阻塞DOM解析(尽量使用异步加载)。...三者区别如下:script 立即停止页面渲染去加载资源文件,当资源加载完毕后立即执行js代码,js代码执行完毕后继续渲染页面;async 是在下载完成之后,立即异步加载,加载好后立即执行,多个带async

    43240

    2022前端必会面试题(附答案)

    2)更利于首屏渲染首屏渲染是node发送过来html字符串,并不依赖于js文件了,这就会使用户更快看到页面的内容。...前端react面试题详细解答时间耗时比较:1)数据请求由服务端请求首屏数据,而不是客户端请求首屏数据,这是"快"一个主要原因。服务端在内网进行请求,数据响应速度快。...就是服务端渲染不需要等待js代码下载完成并请求数据,就可以返回一个已有完整数据首屏页面。非ssr html渲染图片ssr html渲染图片React严格模式如何使用,有什么用处?...同时引用这三个库react.js、react-dom.js和babel.js它们都有什么作用?...在前端开发中,性能消耗最大就是 DOM 操作,而且这部分代码会让整体项目的代码变得难 以维护。

    2.2K40

    前端进阶必会22个JavaScript技巧总结

    前言 关于技术,只有不停重复学习,方能如扎如稳前行。 1.函数柯里化 函数柯里化是一个为多参函数实现递归降解方式。...其实现核心是: 要思考如何缓存每一次传入参数 传入参数和目标函数入参做比较 这里通过闭包方式缓存参数,实现如下: ? 使用方式如下: ? 函数柯里化仅仅只是上面求和这种运用吗?? ?...惰性函数另一种方向是在重写函数,每一次调用函数时候无需在做一些条件判断,判断条件在初始化时候执行一次就好了,即下次在同样条件语句不需要再次判断了,比如在事件监听上兼容。...因此有了一篇这样文章,希望读者能静下来去手写并理解 code 思路和运行过程,我想也会对 js 有更深入理解。(ps: 可以一起探讨) 如上总结,如有新内容也会持续更新......参考资料 一个合格中级前端工程师需要掌握 28 个 JavaScript 技巧 MDN

    56920

    前端必知必会-BFC案例剖析

    前端必知必会-BFC案例剖析 简介 在说 BFC 之前,我们先来了解一下标准文档流,标准文档流是指在页面中所有的元素按照从左到右,从上到下这样一个顺序来进行排列。...标准文档流中盒子其实就是格式化上下文,只不过它包括块级格式化上下文以及行级格式化上下文,不同格式化上下文渲染规则不同,它决定了它子元素按照什么样规则来排列,以及和其他元素关系和相互作用。...这里需要注意就是不同格式化上下文所针对元素种类也不同。 常见格式化上下文有以下四种。...内部 Box 会在垂直方向上一个接一个放置 块级格式化上下文中相邻盒子之间垂直边距折叠 每个元素左外边距与包含块左边界相接触(从左向右),即使浮动元素也是如此。...(这说明 BFC 中子元素不会超出他包含块,而position为 absolute 元素可以超出他包含块边界) BFC区域不会与 float 元素区域重叠 计算 BFC 高度时,浮动子元素也参与计算

    84930

    前端必会面试题汇总

    该技术可以让 GC 扫描和标记对象时,同时允许 JS 运行。清除对象后会造成堆内存出现碎片情况,当碎片超过一定限制后会启动压缩算法。...参考 前端进阶面试题详细解答实现一个宽高自适应正方形利用vw来实现:.square { width: 10%; height: 10vw; background: tomato;}利用元素margin...但是⼀旦超过这个范围,js就会出现计算不准确情况,这在⼤数计算时候不得不依靠⼀些第三⽅库进⾏解决,因此官⽅提出了BigInt来解决此问题。...可以看到XSS危害如此之大, 那么在开发网站时就要做好防御措施,具体措施如下:可以从浏览器执行来进行预防,一种是使用纯前端方式,不用服务器端拼接后返回(不使用服务端渲染)。...另一种是对需要插入到 HTML 中代码做好充分转义。对于 DOM 型攻击,主要是前端脚本不可靠而造成,对于数据获取渲染和字符串拼接时候应该对可能出现恶意代码情况进行判断。

    43420

    前端必会面试题总结

    参考:前端进阶面试题详细解答代码输出结果f = function() {return true;}; g = function() {return false;}; (function() {...= 0.3,请详述理由因为 JS 采用 IEEE 754 双精度版本(64位),并且只要采用 IEEE 754 语言都有该问题。...在增量标记期间,GC 将标记工作分解为更小模块,可以让 JS 应用逻辑在模块间隙执行一会,从而不至于让应用出现停顿情况。但在 2018 年,GC 技术又有了一个重大突破,这项技术名为并发标记。...该技术可以让 GC 扫描和标记对象时,同时允许 JS 运行。清除对象后会造成堆内存出现碎片情况,当碎片超过一定限制后会启动压缩算法。...它作用是什么?为 JS 添加类型支持,以及提供最新版 ES 语法支持,是的利于团队协作和排错,开发大型项目前端储存⽅式有哪些?

    53430

    两年经验前端带你重学前端框架必会ajax+node.js+webpack+git等技术 Day2

    官方视频做很详细,所以没啥值得补充 Bootstap弹窗 使用属性方式来控制 这里讲了很基础使用属性来控制Bootsrap弹窗来进行显示隐藏,这个Bootstrap就是一个框架,很简单,多看两遍视频就懂了...使用JS来进行控制 图书案例 这里有一个需要注意点,那就是 get使用params来传递数据,而post才使用data来传递数据 找到列表数据,进行一一填值便可 这里index是由map传递过来...我说说别的一些东西 axios中不同类型请求附带数据使用关键字 请求类型 关键字 示例 GET params axios({ method: 'get', url: 'example.com',...乍一看好像没啥问题,但细心小伙伴能发现一个是’’ 一个是`` 使用单引号和双引号中东西叫做字符串 似乎用反引号叫做模板字符串 区别 特性 单引号 (') 或 双引号 (") 反引号 (```) 多行字符串...这里使用迭代器进行对key挨个回显,可以用s其他方法,只要能做到在回显前先校验数据存不存在就好 提示框 也很简单,视频做很好,多看两遍视频吧

    9110

    前端必会手写面试题合集5

    实现Event(event bus)event bus既是node中各个模块基石,又是前端组件通信依赖手段之一,同时涉及了订阅-发布设计模式,是非常重要基础。...值加入这个对象,键为对应文件名,最终这个对象就长这样:{ "a.js": "hello world", "b.js": function add(){}, "c.js": 2, "d.js...// 在javascrpt中我们可以通过eval或者new Function方式来将一个字符串转换成js代码来运行。...,用来运行额外js文件,他可以保证javascript执行独立性,不会被外部所影响// vm 内置模块// 虽然我们在外部定义了hello,但是str是一个独立模块,并不在村hello变量,所以会直接报错...// 8.Module.wrap: 把读取到js包裹一个函数。// 9.将拿到字符串使用runInThisContext运行字符串。

    66030

    两年经验前端带你重学前端框架必会ajax+node.js+webpack+git等技术 Day3

    XMLHttpRequest生命周期部分 XMLHttpRequest 静态网页,只有一两个地方需要使用请求来进行前后端交互时候,使用XML可以实现开发包少情况 生命周期 事件顺序 readystatechange...在表面的查询参数 需求 其他步骤没有什么区别,只是在参数拼接时候,需要使用浏览器内置对象 带参数请求 Promise 基础使用 这个promise,用来管理请求成功或失败后要做什么 如果你不知道什么是异常...在本例中,这里就是抛出一个错误 Promise三种状态 因为无法改变,所以会是resolve以兑现状态 小案例 Promise和XML都没有自己来判断请求是成功还是失败能力,因此,只需要将Promise...当作报错工具,XML当作请求工作,原本代码if、else当作判断工具,就能写出这个案例 使用XML和Promise做一个简单axios 如此,就能实现。...这里config可以在使用时候传递多个对象 实现支持查询参数传递 增加封装请求体功能 封装axios这一节中,都是用原本基础语法弄出来 天气预报案例 数据回显部分 这部代码繁杂,没什么技术含量

    5910

    前端必会react面试题合集2

    引入项目:npm install --save typescript @types/node @types/react @types/react-dom @types/jest将项目中任何 后缀名为 ‘.js...’ JavaScript 文件重命名为 TypeScript 文件即后缀名为 ‘.tsx’(例如 src/index.js 重命名为 src/index.tsx )react 实现一个全局 dialogimport...DOM,响应 prop 或 state 改变componentWillUnmount -- 在这你可以取消网络请求,或者移除所有与组件相关事件监听器参考 前端进阶面试题详细解答何为 reducer... 有课前端前端技术学习平台;//不建议使用如下方式,在这个案例中会抛出错误。...(必考)虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要 dom 操作,从而提高性能。

    2.2K70
    领券