首页
学习
活动
专区
工具
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在执行之前进行预编译,会进行 `函数提升` 和 `变量提升`- 所以函数和变量都进行提升了,但是`函数声明的优先级最高`,会被提升至`当前作用域最顶端`- 当在执行到后面的时候会导致

    77640

    前端开发必会的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在执行之前进行预编译,会进行 `函数提升` 和 `变量提升`- 所以函数和变量都进行提升了,但是`函数声明的优先级最高`,会被提升至`当前作用域最顶端`- 当在执行到后面的时候会导致

    96130

    前端必会vue面试题

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

    1.3K50

    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

    60420

    腾讯前端必会面试题

    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

    43540

    前端必会面试题总结

    参考:前端进阶面试题详细解答代码输出结果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 语法的支持,是的利于团队协作和排错,开发大型项目前端储存的⽅式有哪些?

    54930

    前端必会面试题汇总

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

    43520

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

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

    86230

    两年经验前端带你重学前端框架必会的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这一节中,都是用原本的基础语法弄出来的 天气预报案例 数据回显部分 这部代码繁杂,没什么技术含量

    6410

    两年经验前端带你重学前端框架必会的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其他方法,只要能做到在回显前先校验数据存不存在就好 提示框 也很简单,视频做的很好,多看两遍视频吧

    9910

    前端必会手写面试题合集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运行字符串。

    66130

    腾讯前端必会面试题合集

    JS 原型和实例的关系:每个构造函数 (constructor)都有一个原型对象(prototype),这个原型对象包含一个指向此构造函数的指针属性,通过 new 进行构造函数调用生成的实例,此实例包含一个指向原型对象的指针...,也就是通过 [Prototype] 链接到了这个原型对象然后说一下 JS 中属性的查找:当我们试图引用实例对象的某个属性时,是按照这样的方式去查找的,首先查找实例对象上是否有这个属性,如果没有找到,就去构造这个实例对象的构造函数的...200; 很多网站的资源后面都加了版本号,这样做的目的是:每次升级了 JS 或 CSS 文件后,为了防止浏览器进行缓存,强制改变版本号,客户端浏览器就会重新下载新的 JS 或 CSS 文件 ,以保证用户能够及时获得网站的最新更新...web worker 是运行在后台的 js,独立于其他脚本,不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候,就不会阻塞主线程了。...如何创建 web worker:检测浏览器对于 web worker 的支持性创建 web worker 文件(js,回传函数等)创建 web worker 对象CDN的原理CDN和DNS有着密不可分的联系

    39720
    领券