HTML5教程

前端注意问题

本文主要是介绍前端注意问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前端注意问题

第一部分

  • TCP/IP是为互联网服务的协议族,它将通信过程抽象为四层,分别为应用层、传输层、互联网层和网络接口层。SMTP、FTP、HTTP等常用的协议都位于应用层

  • 敏捷软件开发方法是一种创作与交流的协作观

  • 选择器原先就存在,CSS3只是完善了它,使其拥有更丰富的功能

  • 如果把++运算符单独放一行,那么它会和下面的语句合并,作为一个整体被解析

  • switch语句种case子语句中的表达式进行全等(===)匹配

  • CSS预处理器能为CSS增加编程特性,通过编译器将使用新语法的文件输出为一个普通的CSS文件,解决CSS难以复用,代码冗余,可维护性低的 问题。常用的预处理器有Less、Sass和stylus

  • 盒模型就是从盒子顶部俯视所得到的一张平面图,用于描述元素所占用的空间。有两种和模型W3C和IE盒模型,两者不同之处是对元素尺寸的计算方式。当用CSS给某个元素定义宽或高时,IE盒模型的宽或高将包含内边距和边框,而W3C盒模型并不包含

  • HTTP即超文本传输协议,是一种获取网络资源(图像、HTML文档)的应用层协议,它是互联网数据通信的基础,由请求和响应构成。首先客户端会发起HTTP请求(在请求报文中会指定资源的URL),然后用传输层的TCP建立连接,最后服务器相应请求,做出应答,回传数据报文。

  • typeof和instanceof的区别

  1. typeof运算符用于检测数据类型,而instanceof运算符用于检测对象之间的关联性
  2. typeof运算符执行完之后会返回一个小写字母的类型字符串,而instanceof运算符执行完会返回一个布尔值
  3. typeof运算符只需一个操作数,这个操作数可以是基本类型或函数,而instanceof运算符需要两个操作数,并且左操作数不能是基本类型,右操作数必须是函数,否则运算结果没有意义
  • let、const与var之间有哪些不同
  1. 不允许声明提升
  2. 不允许重复声明
  3. 不覆盖全局变量
  • Array.of()的作用
  1. ES6为Array对象新增的一个静态方法是of(),用于创建数组,能接收任意数量的参数,返回值是由这些参数组成的新数组
  • yield和return的区别
  1. yield是一个关键字,而return是一个运算符
  2. yield只能出现在生成器中,而return无此限制
  3. yield能暂停函数的执行,而return是直接终止
  4. 在一个函数中,可以执行多次yield,热return只能执行一次
  5. yield只能返回IteratorResult对象,而return能返回任意值
  • 虚拟DOM是构建在真实DOM上的一层抽象,它将DOM元素映射成内存中的js对象(通过React.createElement()得到的React元素),形成一颗javaScript对象树

  • React中三个声明周期被标记为过时

  1. componentWillMount()
  2. componentWillReceiveProps()
  3. componentWillUpdate()
  4. 官方为以上新增一个UNSAFE_作为前缀的别名
  • React中的状态提升是指什么
  1. 兄弟之间不能直接通信,需要借助状态提升的方法实现信息的传递,即把组件之间要共享的状态提升至最的父组件中,由父组件来统一管理
  • webpack的加载器用途
  1. 加载器(loader)能在webpack加载模块时对其进行预处理,即对模块的源码进行转换
  • 元素的作用
  1. 缓存组件的状态,虽然能包裹任意数量的元素,但是只能渲染其中一个子元素,并且自身不会渲染成一个DOM元素。由此可见,元素内可包含条件指令,但不能包含v-for指令

第二部分

  • BTC(block formatting context)即块格式上下文,能够决定元素的内容如何渲染以及其他元素的关系和交互

  • HTTP特征

  1. 持久连接
  2. 管道化
  3. 无状态
  • 极限编程的核心思想
  1. 强调人与人之间的合作因素和以敏捷性应对变化
  • TCP/IP的理解
  1. 是互联网服务的协议族,是网络通信协议的统称,是由IP、TCP、HTTP和FTP等协议组成。
  2. 将通信过程抽象为四层,被视为简化的OSI参考模型
  • (function(){})()
  1. 即时函数,也就是刚定义好就马上自动执行的函数
  2. 创建块级作用域
  3. 解决循环中的异步回调
  4. 类库封装

第三部分

  • 什么是外边距陷踏
  1. 外边距陷阱是指相邻的两个元素的外边距发生合并,导致外边距的表现不符合预期的情况。
  • 在DOM中,事件对象的两个属性target和currentTarget有什么区别
  1. event.target 是触发事件的原始元素,而 event.currentTarget 是绑定事件处理程序的元素。
  • 扩展运算符(…)的用途有哪些
  1. 替代函数的apply()方法
  2. 简化函数调用时传递实参的方式
  3. 处理数组和字符串
  • find和indexOf有哪些区别
  1. 是indexOf的一种补充
  2. indexOf只能通过全匹配(===)来搜索指定的值,而新方法可以自定义匹配条件
  • 类有哪些成员
  1. 类的成员包括属性(也称为字段或变量)和方法(也称为函数)。
  • shadowDom和Virtual DOM之间有哪些区别
  1. Shadow DOM是用于封装自定义组件样式和行为的DOM树,而Virtual DOM是一种用于优化DOM操作的虚拟表示。 Virtual DOM通过比较变化并批量更新DOM,而Shadow DOM用于隔离组件的样式和行为。
  • 有没有办法强制React组件重新渲染,而不用setState()方法
  1. 如果render()方法依赖于其他数据(如更新的数据不在state中),则可以调用组件的forceUpdate()方法,强制让其重新渲染。调用forceUpdate()会让组件跳过shouldComponmentUpdate()方法,直接调用render()方法
  • 在React中什么是高阶组件
  1. HOC不是一个真的组件,是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件
  2. 遵循了装饰者模式的设计思想,因此不会入侵传递进来的原组件,而是对其进行抽象、包装和拓展,改变原组件的行为
  3. 增强了组件的复用性和灵活性,还保持了组件的易用性
  • 请描述一下React中的Jest
  1. Jest是React中常用的测试框架,用于编写和运行单元测试、集成测试和快照测试。
  • Vue.js中的sync修饰符有什么作用
  1. sync修饰符用于在子组件中更新父组件的属性,简化了Vue.js中父子组件之间的数据传递。
  • 什么是泛型
  1. 是程序设计语言中的一种风格或规范,相当于类型模板,允许在声明类、接口或函数等成员时忽略类型,而在未来使用时再指定类型
  2. 主要目的是为它们提供有意义的约束,提升代码的可重用性

第四部分

  • 什么是IP地址
  1. 是指互联网协议地址,为网络中的每台主机分配已给数字标签
  2. 是属于网络层
  • 在HTTP中,总共有5类状态码,请简单介绍一下这5类状态码
  1. 信息性状态码(1xx)
  2. 成功状态码(2xx)
  3. 重定向状态码(3xx)
  4. 客户端错误状态码(4xx)
  5. 服务器错误状态码(5xx)
  • 在JS中,字面量是指什么
  1. 字面量就是常量,是一种在程序中可以直接使用的数据值,通常它的值是固定的。在JS中可以使用各种字面量,如数字字面量、字符串字面量、对象字面量
  • 什么叫点击劫持?对这种攻击有什么解决办法
  1. 是一种视觉上的欺骗,攻击者把一个透明的iframe覆盖在目标网页的某个位置,这个位置可以是一个按钮,一段文字或一张图片
  2. 如果防范该攻击,可以通过限制iframe来实现,只要在HTTP响应报文中增加X-Frame-Options首部,就能让浏览器按照要求加载iframe中的页面,可以是不加载,只加载相同域名或加载指定来源
  • ES6中的剩余参数有什么作用
  1. 在JS的函数中,声明时定义的形参个数可以和传入的实参个数不同。当实参个数大于形参个数时,ES6新增的剩余参数能把没有对应形参的实参收集到一个数组中
  • 什么是类型化数组
  1. Typed Array
  2. 类型化数组是JavaScript中的一种特殊数组,它允许以固定的数据类型存储数据,提高了对二进制数据的处理效率。
  3. 是一种处理二进制数据的特殊数组,可像C语言直接操纵字节,不过需要先用Array-Buffer对象创建数组缓冲区,再映射到指定格式的视图(view)之后,才能读写其中的数据
  • 在ES6中,当super作为方法使用时,有哪些注意点
  1. super()方法相当于父类的构造函数
  2. 只有在子类的构造函数中才能调用super()方法
  3. 如果子类显式地定义了构造函数,那么必须调用super()方法,否则会报错
  4. 如果子类没有定义构造函数,那么会自动调用super()方法
  5. 当子类的构造函数显式地返回一个对象时,就能避免调用super()方法
  6. 在使用this之前,必须先调用super()方法
  • 什么是React Fiber
  1. React Fiber 是 React 中一种用于进行协调和调度的新的 reconciler 架构,用于实现增量式的渲染和优先级调度。Fiber 是 React 内部的实现细节,由 React 框架自己管理。
  • Refs有什么用
  1. Refs是一种访问方式,通过它可以读取render()方法内生成的组件实例和DOM元素,常用来处理元素的焦点、触发动画、集成第三方DOM库等
  • 在React的高阶组件中,为何要定义displayName属性
  1. 在高阶组件中创建的新组件,不会再沿用原组件的名称。为了便于在React Devloper Tools中调试,需要为新组件设置一个显示的名称。
  • 什么是npm?由哪几部分组成
  1. npm是Node.js的包管理工具,用于安装、分享和管理JavaScript包。它由CLI工具、网站和包存储库三部分组成。
  • 请介绍一下webpack.config.js中的mode字段
  1. 在webpack.config.js中,mode字段用于指定当前构建的模式,可以设置为"development"、“production"或"none”。它会影响webpack的优化行为和默认的配置选项。
  • Vue.nestTick()有什么作用
  1. Vue.nextTick()用于在DOM更新之后立即执行一个回调函数,确保在下次DOM更新周期之后执行。
  • 在Vue中,如何能直接访问父组件、子组件和根实例
  1. $parent:父组件
  2. $root:根实例,如果没有父实例,那么读取的将是自身
  3. $children:直接子组件,无法获取隔代的子组件,并且不保证组件的顺序,也非响应式
  • 在TypeScript创建了两种兼容性:子类型和赋值,它们有什么区别
  1. 赋值兼容性扩展了子类型兼容性,增加了一些规则,允许和any相互赋值,以及enum和对应数字之间的相互赋值
  2. 类型兼容性遵从赋值兼容性,即使是implements和extends语句也不例外

第五部分

  • 请简单介绍一下WEB缓存机制,具体过程有哪些步骤
  1. WEB缓存机制是指浏览器在加载WEB页面时会将一部分资源存储在本地,以提高用户访问速度。具体过程包括检查缓存、读取缓存、验证缓存和更新缓存。
  • 在浏览器中,一个页面从输入URL到加载完成,都有哪些步骤
  1. 域名解析,根据域名找到服务器的IP地址
  2. 建立TCP连接,浏览器与服务器经过三次握手后建立连接
  3. 浏览器发起HTTP请求,获取想要的资源
  4. 服务器响应HTTP请求,返回指定的资源
  5. 浏览器渲染页面,解析接收到的HTML、CSS和JS等文件
  • 请描述对JS的理解
  1. 是一种通过解析执行的高级编程语言,同时也是一门动态、弱类型的直译脚本语言,适合面向对象(基于原型)和函数式的编程风格
  • XSS是什么?对这种攻击有哪些防范办法
  1. 跨站脚本攻击,将恶意脚本注入到目标网页中,用户访问页面时,造成信息泄露、行为被劫持等
  2. 为Cookie添加HttpOnly标记,使得客户端不能通过JS读取Cookie信息
  3. 对提交到服务器中的信息做输入检查,如白名单过滤、把字符串编码成HTML实体等
  4. 对输出到页面中的信息做输出检查
  • 什么是解构
  1. 是一种赋值语法,可以从数组中提取元素或从对象中提取属性,将其赋值给对应的变量或另一个对象的属性
  2. 目的是简化提取数据的过程,增强代码的可读性
  3. 分为数组解构和对象解构,区别在于解构赋值语句的左侧,前者是数组字面量,后者是对象字面量
  • 为什么React组件的名称首字母要大写
  1. 在JSX中,为区分HTML元素和组件,规定前者的标签首字母要小写,而后者的首字母要大写
  • 什么是Forward Refs?
  1. Forward Refs 是 React 中一种转发 refs 到组件的技术,允许父组件访问子组件的 DOM 节点或实例。
  • React的高阶组件有哪些限制(即注意事项)
  1. 不要在组件的render()方法中使用高阶组件。因为高阶组件每次都会创建一个新组件,而根据React的diff算法可知,原组件(即前一次所创建的组件)会先被卸载掉,然后重新挂载新组件。这么做不仅效率低下,而且原组件的状态和所有子组件都将丢失
  2. 高阶组件创建的新组件不会包含原来组件的静态方法,如果需要,只能手动复制
  • npm在什么情况下适合将包本地安装?而在什么情况适合全局安装
  1. 如果代码依赖于某个包(如JQ等),就应该本地安装。
  2. 如果将包作为一个命令行工具(如gulp、grunt等),就应该全局安装
  • 什么是Vue CLI
  1. CLI是一个全局安装的npm包,提供了终端里的Vue命令
  2. CLI服务是一个开发环境依赖
  3. CLI插件是一种包含特定功能的npm包,如Babel转译、ESLint集成等
  • display:none与visibility:hidden都可隐藏元素,有何区别
  1. 定义为none后,相当于元素没有了后代元素,在正常流中不占任何空间,元素的真实尺寸将会丢失,还会导致浏览器的重排和重绘
  2. 定义为hidden后,在正常流中还是会占用空间,但仍具有元素的真实尺寸,只会导致浏览器重绘

第六部分

  • 什么是微格式
  1. 是一种数据机构化技术,通过添加属性(class或rel)和元数据(Link元素)的方式来实现Web的语义化,让内容适合人类阅读,以及容易被机器处理
  • 什么是HTML实体
  1. 就是对当前文档的编码方式不能包含的字符,提供一种转义表示
  • 请谈一下你对BFC的理解
  1. 格式化上下文,即不是CSS属性也不是一段代码,而是CSS2.1规范的一个概念,决定元素的内容如何渲染以及其他元素的关系和交互,有五条规则
  2. 隔离作用,内部元素不会受外部元素的影响(反之亦然)
  3. 一个元素只能存在于一个BFC中,如果能同时存在两个BFC中,就违反了BFC的隔离规则
  4. BFC内的元素按正常流排列,元素之间的间隙由元素的外边距控制
  5. BFC中的内容不会与外面的浮动元素重叠
  6. 计算BFC的高度,需要包括BFC内的浮动子元素的高度
  • get和post的区别有哪些
  1. 语义不同,get是获取数据,post是提交数据
  2. get请求会把附加参数带在URL上,而POST请求会把提交数据放在报文内,URL长度会被限制,所以get请求能传递的数据有限
  3. HTTP规定GET是幂等的,而POST不是
  • 分号什么时候自动补全?自动补全有什么弊端
  1. 分号在 JavaScript 中会在一行的末尾自动补全,但这种自动补全可能导致混淆和错误。当 JavaScript 解释器对代码进行解析时,会尝试在行末尾自动添加分号,这可能导致出现意外的行为和错误。在某些情况下,自动补全会引发难以察觉的 bug,并且在一些情况下会影响到代码的性能。
  • 解析对CSRF的攻击原理和防御手段
  1. CSRF攻击原理是利用用户在登录认证后的状态下对应用程序的信任,利用认证信息的漏洞进行攻击。攻击者通过诱使受害者访问恶意网站或点击恶意链接,利用受害者在目标网站的已认证状态,对目标网站发起请求,暴露用户信息或执行恶意操作。
  2. 防御CSRF攻击的常见手段包括使用CSRF令牌,在请求中携带一个随机生成的令牌,服务端验证该令牌的有效性,从而防止CSRF攻击。另外,限制跨域请求、使用同源策略和安全的HTTP头部设置也可以帮助防御CSRF攻击。
  • 如何使用DataView
  1. DataView是JavaScript中用于读取和写入二进制数据的接口。
// 创建一个Buffer
let buffer = new ArrayBuffer(16);
// 创建一个DataView实例
let dataView = new DataView(buffer);
// 写入数据
dataView.setInt32(0, 42);
// 读取数据
let value = dataView.getInt32(0);
console.log(value); // 输出 42
  • ReactDom中的render()方法有什么功能
  1. ReactDom中的render()方法用于将React元素渲染到DOM中。
  • 为什么弃用字符串类型的Refs
  1. 弃用字符串类型的Refs是因为它们已被认为是一种过时的做法,并且有潜在的安全风险和性能问题。Refs应该是对象类型或回调函数,以便更好地支持React的特性和优化。
  • 什么是Redux
  1. 是一个可预测的状态容器,不但融合了函数式编程,还严格遵循了单向数据流的理念
  2. 约定了一系列的规范,并且标准化了状态(数据)的更新步骤
  3. 是一个独立的库,可与React等其他库搭配使用
  • packpage.json有什么作用
  1. 用于管理本地已安装的npm包,记录项目的作者、依赖包、版本等各类信息
  2. 能方便地复制一个项目,不比再手动地安装相关的包,利于多人协作
  • TypeScript中的.d.ts文件用来做什么的
  1. d.ts 文件用来为 JavaScript 文件中的库提供类型定义。这些文件充当了TypeScript中的声明文件,可以定义库的API结构以及类型信息,从而使得JavaScript库可以在TypeScript中进行类型安全的使用。

第七部分

  • HTML实体的应用场景有哪些
  1. HTML实体在以下场景中被广泛使用: 1. 用于显示特殊字符,如版权符号©、小于号<、大于号>等。 2. 用于转义HTML中的特殊字符,例如&、<、>等,以避免它们被浏览器解释为标签和其他特殊用途。
  • 什么是shadowDom
  1. 是浏览器的一种功能,能够自动添加子元素
  • CSS中类选择器和ID选择器有哪些区别
  1. 类选择器以点号(.)开头,用于选择具有相同类的元素;而ID选择器以井号(#)开头,用于选择具有特定ID的元素。区别在于类选择器可以被多个元素使用,而ID选择器只能对应于一个唯一的元素。
  • 请简单介绍下REST
  1. 表示状态性转移,既不是标准,也不是协议,而是一组架构约束条件和设计指导原则,一种基于HTTP\URL\XML等现有协议与标准的开发方式
  2. 常说的RESTful是一种遵守REST设计的架构风格
  • undefined和null的异同
  1. undefined表示一个变量未被初始化或不存在,而null是专门用来表示空值的特殊关键字。

相同

  1. 都有空缺的意思
  2. 不包含方法和属性
  3. 都是假值
  4. 都只有一个值

不同

  1. undefined是表示一个未定义的值,null表示一个空的对象
  2. 类型不同,typeof运算符应用与undefined得"undefined",而应用于null,得到的是"object"
  3. 数字转换不同,Number()转换数字后,得NAN和0
  4. 在非严格模式表现不同,undefined可以是一个标识符,能被当作变量来使用和赋值,而null不可以
  • 什么是模板字面量
  1. 在RS6一般人模板字面量后,能避免用若干个加号来实现字符串拼接
  • ES6为函数做了哪些改良
  1. 默认参数、元属性、块级函数、箭头函数
  • 什么是Promise
  1. 能更合理地控制和追踪异步操作
  • Redux三大原则
  1. 单一数据源
  2. 保持状态只读
  3. 状态的改变由纯函数完成

第八部分

  • 元素属性src和href有何区别
  1. 功能不同
  2. href能够建立一条通道,将当前文档和定义的资源连接起来
  3. src是将定义的资源嵌入到当前文档中
  • 伪元素::before和:before有什么区别
  1. 在CSS中,双冒号(::)用于表示伪元素,单冒号(:)用于表示伪类。因此,::before表示使用伪元素::before,而:before可能会被认为是语法错误。
  • calc()函数有什么作用
  1. 是css的一个函数,只有一个数字表达式参数,可处理加减乘除等数学运算,并且在表达式中可混用不同的单位
  • 什么是RESTful API?
  1. RESTful API是一种基于REST架构原则设计的API。它使用GET、POST、PUT、DELETE等HTTP方法,通过URL来唯一地定位资源,并使用JSON或XML格式作为数据传输。
  • 如何设计RESTful API?
  1. 使用合适的URL来唯一地标识资源。
  2. 使用合适的HTTP方法(GET、POST、PUT、DELETE)来执行对资源的操作。
  3. 使用合适的HTTP状态码来表示操作的结果或错误情况。
  4. 使用合适的数据格式(如JSON或XML)来传输数据。
  5. 为资源的不同表示(如不同的语言或格式)提供适当的支持。
    设计RESTful API时需考虑资源的层级关系、行为和属性,以及URL、HTTP方法、状态码和数据格式的选择。
这篇关于前端注意问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!