【前端笔试】知识点总结

前言

一些笔试题的知识点总结

• 动态规划算法通常以自底向上的方式求解各子问题；贪心算法则通常以自顶向下的方式进行，每一次贪心选择就将所求问题简化为规模更小的子问题
• 循环赛日程表利用的算法是分治策略
• 浏览器中监听DOM数更改的Observer是Mutation Observer
• 即将跳转的下一个页面时，以下哪种能力可以提升资源加载的速度 prefetch
  preload 是一个声明式 fetch，可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源。
  prefetch 告诉浏览器这个资源将来可能需要，但是什么时间加载这个资源是由浏览器来决定的。
  preload 加载资源一般是当前页面需要的，prefetch 一般是其它页面有可能用到的资源。
  preload 是告诉浏览器预先请求当前页面需要的资源（关键的脚本，字体，主要图片等）。
  prefetch 应用场景稍微又些不同 —— 用户将来可能跳转到其它页面需要使用到的资源。如果 A 页面发起一个 B 页面的 prefetch 请求，这个资源获取过程和导航请求可能是同步进行的，而如果我们用 preload 的话，页面 A 离开时它会立即停止。
• 关于iframe以下哪个表述不正确? A
  A iframe 加载的页面一般不会影响父页面样式
  B iframe 的尺寸可以随意调整
  C iframe只能加载同域下的页面
  D iframe 可以加载跨域页面
  注：
  iframe的优点：
  1.iframe能够原封不动地把嵌入的网页展现出来。
  2.如果有多个网页调用iframe，只需要修改iframe的内容，就可以实现对调用iframe的每一个页面内容的更改，方便快捷。
  3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用性。
  4如果遇到加载缓慢的第三方内容，如图标和广告等，可以用iframe来解决。
  iframe的缺点：
  1.会产生很多页面，不容易管理。
  2.在几个框架中都出现上下、左右滚动条时，这些滚动条除了会挤占已经非常有限的页面空间外，还会分散访问者的注意力。
  3.使用框架结构时，必须保证正确设置所有的导航链接，否则会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下会导致链接死循环。
  4.很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差。
  5.frame框架页面会增加服务器的http请求，对于大型网站是不可取的。

游卡：

• a:link、a:visited、a:hover、a:active的正确使用顺序？
  定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。正确的顺序：a:link、a:visited、a:hover、a:active
  解释：
  link:连接平常的状态
  visited:连接被访问过之后
  hover:鼠标放到连接上的时候
  active:连接被按下的时候
  1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
  2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
  所以说，a:hover定义一定要放在a:link、a:visited的后面！

• 如何让一段文本中的所有英文单词的首字母大写？需要将text-transform设置成：capitalize
  text-transform:capitalize; 首字母大写
  text-transform:uppercase;所有单词大写
  text-transform:lowercase;所有单词小写

• 关于CSRF攻击的防范？
  csrf(Cross Site Request Forgery)全名叫跨站请求伪造，也称为Sea Surf或者XSRF。
  几种攻击的防护：

  • 只使用JSON API
  • 验证HTTP Referer字段
  • 在请求地址中添加takon验证

• 关于XSS攻击防范？

  • XSS 攻击是指浏览器中执行恶意脚本, 然后拿到用户的信息进行操作。主要分为存储型、反射型和文档型。防范的措施包括:一个信念: 不要相信用户的输入，对输入内容转码或者过滤，让其不可执行。两个利用: 利用 CSP，利用 Cookie 的 HttpOnly 属性。

• Vue本质是MVVM框架，由MVC发展而来；

• 媒体元素规定外部文件轨道的标签：HTML < track > 标签用于为媒体文件定义基于时间的文本轨道。< track> 标签必须用作 < audio> 和 < video> 元素的子元素。

• 哪种css布局方式相对使用较少：table布局在如今已经很少使用，原因是：table布局比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效。css 布局的几种方式

• index.js文件中如何调用sum函数？答案选C

// sum.js
export default function sum(x) {
  return x + x;
}
// index.js
import * as sum from './sum';

A: sum(4)
B: sum.sum(4)
C: sum.default(4)
D: Default aren’t imported with *, only named exports

使用符号 *，我们引入文件中的所有值，包括默认和具名。如果我们有以下文件：

// info.js
export const name = "Lydia";
export const age = 21;
export default "I love JavaScript";
// index.js
import * as info from "./info";
console.log(info);

将会输出以下内容：

{
  default: "I love JavaScript",
  name: "Lydia",
  age: 21
}

以 sum 为例，相当于以下形式引入值 sum：

{ default: function sum(x) { return x + x } }

我们可以通过调用 sum.default 来调用该函数

• 可以被继承的属性：
  首先我们来看一下css优先级：
  !important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性。
  常用的css不可继承的属性
  1、display：规定元素应该生成的框的类型
  2、文本属性：
  vertical-align：垂直文本对齐
  text-decoration：规定添加到文本的装饰
  text-shadow：文本阴影效果
  white-space：空白符的处理
  unicode-bidi：设置文本的方向
  3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
  4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
  5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
  6、生成内容属性：content、counter-reset、counter-increment
  7、轮廓样式属性：outline-style、outline-width、outline-color、outline
  8、页面样式属性：size、page-break-before、page-break-after
  9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
  常用的css可继承的属性：
  1、字体系列属性
  font：组合字体
  font-family：规定元素的字体系列
  font-weight：设置字体的粗细
  font-size：设置字体的尺寸
  font-style：定义字体的风格
  font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
  font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
  font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
  2、文本系列属性
  text-indent：文本缩进
  text-align：文本水平对齐
  line-height：行高
  word-spacing：增加或减少单词间的空白（即字间隔）
  letter-spacing：增加或减少字符间的空白（字符间距）
  text-transform：控制文本大小写
  direction：规定文本的书写方向
  color：文本颜色
  3、元素可见性：visibility
  4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
  5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style
  6、生成内容属性：quotes
  7、光标属性：cursor
  8、页面样式属性：page、page-break-inside、windows、orphans
  9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
  所有元素可以继承的属性
  1、元素可见性：visibility
  2、光标属性：cursor
  内联元素可以继承的属性
  1、字体系列属性
  2、除text-indent、text-align之外的文本系列属性
  块级元素可以继承的属性
  1、text-indent、text-align

• css中的link和@import的区别？

  • link 是 HTML 提供的标签；@import 是 CSS 提供的语法规则。
  • 加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。
  • 浏览器对 link 的兼容性更高，@import 只可以在 IE5+ 才能识别。
  • 注意：网上常说的「link 引入的样式权重大于 @import 引入的样式权重」是不太合理的。

• @import 引入 CSS 的弊端
  使用 @import 引入 CSS 会影响浏览器的并行下载；多个 @import 会导致下载顺序紊乱*

  • 使用 @import 引用的 CSS 文件只有在引用它的那个 css 文件被下载、解析之后，浏览器才会知道还有另外一个 css 需要下载，这时才去下载，然后下载后开始解析、构建 render tree 等一系列操作。这就导致了浏览器无法并行下载所需的样式文件。
  • 在 IE 中，@import 会引发资源文件的下载顺序被打乱，即排列在 @import 后面的 js 文件先于 @import下 载，并且打乱甚至破坏 @import 自身的并行下载。
    css link与import的区别是什么

• 前端数据安全有哪些预防方案：
  描述：反爬虫。如猫眼电影、天眼查等等，以数据内容为核心资产的企业
  预防方案：
  font-face拼接方式：猫眼电影、天眼查
  background 拼接：美团
  伪元素隐藏：汽车之家
  元素定位覆盖式：去哪儿
  iframe 异步加载：网易云音乐
  你知道的提高前端安全的手段有哪些

• 前端的常规安全策略有？

  • 定期请第三方机构做安全性测试，漏洞扫描
  • 使用第三方开源库做上线前的安全测试，可以考虑融合到CI中
  • code review 保证代码质量
  • 默认项目中设置对应的 Header 请求头，如 X-XSS-Protection、 X-Content-Type-Options 、X-Frame-Options Header、Content-Security-Policy 等等
  • 对第三方包和库做检测：NSP(Node Security Platform)，Snyk

• 关于RAIL性能模型正确的是？

• RAIL是一个以用户为中心的性能模型，它把用户的体验拆分成几个关键点（例如，tap，scroll，load），并且帮你定义好了每一个的性能指标。有以下四个方面：Response Animation Idle Load
  具体的前端性能优化 - 用RAIL模型分析性能

• 前端CSS3实现动画有哪些方式？
  css3中实现动画的两种方式分别是：1、分别利用transition属性和transform属性来设置过渡和形状；2、利用动画属性animation设置动画效果。

• cookie和localStorage是否可以覆盖？
  Cookie是可以覆盖的，如果重复写入同名的Cookie，那么将会覆盖之前的Cookie；localStorage也是可以覆盖：修改localStorage的方法与新增的方法一样，为已经存在的key值继续添加value值，新添加的会覆盖之前的，从而达到修改的效果；
  localStorage的优势
  1、localStorage拓展了cookie的4K限制
  2、 localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
  localStorage的局限
  1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
  2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
  3、localStorage在浏览器的隐私模式下面是不可读取的
  4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
  5、localStorage不能被爬虫抓取到

• 有关自定义指令？
  注册一个自定义指令有全局注册与局部注册，全局注册主要是通过Vue.directive方法进行注册；局部注册通过在组件options选项中设置directive属性；
  应用场景：表单防止重复提交；图片懒加载；一键 Copy的功能；表单防止重复提

• 关于Object和Map的异同：
  对于 Object 而言，它键（key）的类型只能是字符串，数字或者 Symbol；而对于 Map 而言，它可以是任何类型。
  Map 元素的顺序遵循插入的顺序，而 Object 的则没有这一特性。
  Map 继承自 Object 对象。
  JSON 直接支持 Object，但不支持 Map
  Map 是纯粹的 hash， 而 Object 还存在一些其他内在逻辑，所以在执行 delete 的时候会有性能问题。所以写入删除密集的情况应该使用 Map。
  Map 会按照插入顺序保持元素的顺序，而Object做不到。
  Map 在存储大量元素的时候性能表现更好，特别是在代码执行时不能确定 key 的类型的情况。
  使用 Map：
  储存的键不是字符串/数字/或者 Symbol 时，选择 Map，因为 Object 并不支持
  储存大量的数据时，选择 Map，因为它占用的内存更小
  需要进行许多新增/删除元素的操作时，选择 Map，因为速度更快
  需要保持插入时的顺序的话，选择 Map，因为 Object 会改变排序
  需要迭代/遍历的话，选择 Map，因为它默认是可迭代对象，迭代更为便捷
  使用 Object：
  只是简单的数据结构时，选择 Object，因为它在数据少的时候占用内存更少，且新建时更为高效
  需要用到 JSON 进行文件传输时，选择 Object，因为 JSON 不默认支持 Map
  需要对多个键值进行运算时，选择 Object，因为句法更为简洁
  需要覆盖原型上的键时，选择 Object
  虽然 Map 在很多情况下会比 Object 更为高效，不过 Object 永远是 JS 中最基本的引用类型，它的作用也不仅仅是为了储存键值对。

• 什么是事件委托？优点？
  事件委托指的是将子元素的事件委托给父元素，依赖的原理是事件冒泡，事件冒泡是指子元素的事件被触发,它会传递给父元素，父元素的事件也会被触发，一直传递到根节点(给父元素设置事件委托,依赖事件冒泡来对子元素进行设置)
  2.事件委托的作用(好处)
  (1)减少内存消耗和dom操作，提高性能
  (2)动态绑定事件，因为事件绑定在父级元素，所以新增的元素也触发同样的事件

• ajax、axios、jsonp的理解？
  1、jsonp是一种可以解决跨域问题的方式，就是通过动态创建script标签用src引入外部文件实现跨域，script加载实际上就是一个get请求，并不能实现post请求。(其他实现跨域的方法有: iframe ，window.name，postMessage，COR…)
  2、ajax是一种技术，ajax技术包含了get和post请求的，但是它仅仅是一种获取数据的技术，不能直接实现跨域，只有后台服务器配置好Access-Control-Allow-Origin，才可以实现请求的跨域。
  3、我们平时用的都是经过juery封装好的ajax,而不是原生的。这个封装好的 $ .ajax也有封装了jsonp的方式,只需自身配置好
  dataType:'jsonp’就能够利用jsonp实现get请求的跨域，如果需要实现post请求的跨域，就必须后台服务器配置好Access-Control-Allow-Origin，以及自身配置好dataType:‘json’。
  4、axiosQ 是通过promise实现对ajax技术的一种封装，axios是ajax, ajax不止axios。
  总结:
  juery的$. ajax实现get请求能跨域是因为jsonp或者因为原生ajax和服务器的配合，post请求能跨域就只能是因为原生ajax和服务器的配合。

• quic的新特性？QUIC 虽然基于 UDP，但是在原本的基础上新增了很多功能，比如多路复用、0-RTT、使用 TLS1.3 加密、流量控制、有序交付、重传等等功能。

• Web3的新特性？WebAssembly

• 将一个整数序列整理为升序，两趟处理后序列变为10,12,21,9,7,3,4,25. 则采用的排序算法可能是?选择排序
  分析：
  第一层循环：依次遍历序列当中的每一个元素。
  第二层循环：将遍历得到的当前元素依次与余下的元素进行比较。
  符合最小元素的条件，则交换。
  选择排序的基本思想：比较+交换。
  插入排序：第n趟前n+1个有序
  选择排序：第n趟前n个位置正确
  快速排序：第n趟有n个元素位置正确
  堆排序：第n趟前或后n个位置正确

• 以下哪种请求因受同源策略限制而加载提交失败? B
  A 在A站点通过Iframe内嵌B站点的某一个页面
  B 在A站 点某个页面的canvas中加载B站点的某一张图片
  C 在A站点的页面中通过表单提交到B站点
  D 在A站 点加载B站点的css文件

原因是canvas引入绘画资源会有跨域问题

• iframe什么情况下会被限制访问？ABC
  A https 页面中嵌入了http 页面
  B 页面 headers 里面包含了Content-security-Policy 项
  C 页面headers里面包含了X-Frame-options 项
  D http页面中嵌入了https页面

以下就是禁止网站被iframe嵌套的几种方式：
添加X-Frame-Options响应头`
设置Content-Security-Policy
通过窗口判断

• TS支持哪些访问修饰符？TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public 、 private 和 protected 。

• CSS3 的出现除了带来了新属性，对层叠上下文这一块有很大的影响。新增的一些 css3 属性会导致元素产生层叠上下文，我们整理如下：

  • z-index 值不为 auto 的 flex 项(父元素 display:flex、inline-flex).
  • 元素的 opacity 值不是 1.
  • 元素的 transform 值不是 none.
  • 元素 mix-blend-mode 值不是 normal.
  • 元素的 filter 值不是 none.
  • 元素的 isolation 值是 isolate.
  • ill-change 指定的属性值为上面任意一个。
  • 元素的-webkit-overflow-scrolling 设为 touch.

• flex的justify-content的有效值：justify-content: flex-start | flex-end | center | space-between | space-around;

• 通过navigator.geolocation对象的( ) 方法可以获取用户实时地理位置。
  移动设备持续获取地理位置方法：navigator.geolocation.watchPosition

• 关于meta viewport属性说法错误的是A
  A initial-scale为一个正整数，用于设置页面的初始缩放值
  B max- scale表示允许用户的最大缩放值，为一个数字，可以带小数
  C height用于设置layout viewport的高度
  D scalable的值为no时，代表不允许用户缩放

meta viewport 的6个属性：
width设置layout viewport的宽度，为一个正整数，或字符串"width-device"
initial-scale设置页面的最大缩放值，为一个数字，可以带小数
minimum-scale允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
height设置layout viewport的高度，这个属性并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes"

• 在谷歌浏览器下，<div style= margin:5px;padding: 5px;border:1px;width:20px > ,实际的总宽度是？52+52+1*2+20=42px
  

• 以下关于盒子模型说法不正确的是?A
  A padding属性值为四个值时，依次表示上下左右四个方向
  B border可以按照三要素属性拆分成宽度、线型、颜色，也可以根据方向拆分
  C 可以通过box- sizing样式来区分标准盒子模型和IE盒子模型
  D ul标签默认带有padding属性

以margin为例，padding同理
margin为4个时，margin:上 右 下 左;（为顺时针方向）
margin为3个时，margin:上 左=右 下;
margin为2个时，margin:上=下 左=右;
margin为1个时，margin:上=右=下=左;

• HTML是用来描述网页的一种语言，可以被解析的后缀名包括**.html和.htm**
• 媒体控制播放属性有：

video是控制视频的元素
1、controls属性：显示控制组件
2、loop属性：循环播放
3、muted属性：静音播放
4、preload属性：页面加载在播放
5、width/heigth属性：视频的宽高
6、autoplay属性：自动播放

• props 正常不能作为HTML元素的标签属性

jQuery中attr( )和prop( )都可以用来设置或者读取某元素的属性值，但是他们之间也有很大区别，prop( )是针对Dom元素属性，attr( )针对HTML元素属性

• 因特网电子邮件的第一个离线协议标准是POP3

POP它是因特网电子邮件的第一个离线协议标准,POP3允许用户从服务器上把邮件存储到本地主机（即自己的计算机）上,同时删除保存在邮件服务器上的邮件，而POP3服务器则是遵循POP3协议的接收邮件服务器，用来接收电子邮件的。

• 在应用层协议中，DNS可使用传输层的TCP协议，又可用UDP协议

• 已知二叉树的先序遍历序列为甲乙丙丁戊，中序遍历序列为乙丁丙戊甲，则后序遍历序列为丁戊丙乙甲

• 使用希尔排序算法对序列(16,9,49,7,1,45,23,13)排序，增量d为4，则一趟排序后前4个元素为( 1，9，23，7)

• 具有n个顶点的有向图最多可包含有**n(n-1)**条有向边

• 如图所示，利用Dijkstra算法求从源点到其他顶点间最短路径时，加入的顶点顺序为{0,4,2,3,1}
  
  计算方法如下（并不是同一题，只是回顾方法）