前端面试知识点补充

HTML语义化

定义

语义化的HTML元素指的是那些使用最恰当的HTML进行标记的内容,在标记构成中并不关心内容显示。语义化的HTML是构建有效网站的基石。
用最恰当的标签来标记内容
例如在页面中需要加入一个标题h1,我们有很多种方式去实现,例如一个p标签用css来规定其样式,使这个p标签看起来像一个h1标签。但是对于浏览器而言,这个标题依旧是文本,而不是标题。
也就是说:语义化的html不会关心渲染样式,去掉css之后结构依然存在。

作用
  1. 即使在没有CSS样式的条件下,也能很好地呈现出内容结构、代码结构
  2. 使HTML结构变的清晰,有利于维护代码和添加样式
  3. 提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  4. 通常语义化HTML会使代码变的更少,使页面加载更快

搜索引擎优化SEO

定义

搜索引擎优化(search engine optimization)简称SEO,是一种透过了解搜索引擎的运作规则来调整网站,以提高目的网站在有关搜索引擎内排名的方式

  1. 简化代码结构,更利于搜索引擎分析抓取有用内容
  2. 每个页面只能出现一次H1标签,H2标签可以多次:H1权重很高,普遍认为仅次于title,一般资讯详情页的标题、商品详情页的标题,都放在H1里。
  3. 图片一定要添加alt属性,title属性可选,爬虫不认识图片上的内容,只能通过alt属性来判断
  4. 做好404页面,一般会加首页链接及错误提示,并测试其返回状态码为404:
    1. 用户体验友好,可以留住用户,不至于直接关闭页面;
    2. 有利于爬虫抓取,可以返回抓取其他页面。
  5. 网站结构呈扁平状树型,目录结构不宜过深,每个页面离首页最多点击不超过3次,过深不利于搜索引擎的抓取。
  6. 结构元素语义化
  7. 利用meta标签 keywords属性

减少页面加载时间的方法

  • 尽量减少页面中重复的HTTP请求数量
  • css样式的定义放置在文件头部
  • Javascript脚本放在文件末尾
  • 压缩合并Javascript、CSS代码
  • 使用浏览器缓存,设置e-tag和control-cache,last-modified-date
  • 使用事件委托,减少DOM操作

SVG和Canvas的优缺点

SVG

  • 优点
  1. 矢量图,不依赖于像素,无限放大后不会失真。

  2. 以dom的形式表示,事件绑定由浏览器直接分发到节点上。

  • 缺点
  1. dom形式,涉及到动画时候需要更新dom,性能较低。

Canvas

  • 优点
  1. 定制型更强,可以绘制绘制自己想要的东西。

  2. 非dom结构形式,用JavaScript进行绘制,涉及到动画性能较高。

  • 缺点
  1. 事件分发由canvas处理,绘制的内容的事件需要自己做处理。

  2. 依赖于像素,无法高效保真,画布较大时候性能较低。

src和href的区别

src是source的缩写,指向外部资源的位置,表示引用资源,替换当前元素,用在img,script,iframe上。在请求src资源的时候,会将其指向的资源下载并应用到当前文档。
href是指超文本引用,用在link和a标签上,href是引用,和页面相关联,在当前元素和引用资源之间建立联系。

DOM 事件有哪些阶段?

  1. 事件捕获阶段
    事件从文档的根节点触发,随着dom树的结构向事件目标节点流去。途中经过各个层次的dom节点,并在各节点上触发捕获事件,直到到达目标节点。捕获阶段的任务就是建立这个事件传递路线(以便后面冒泡阶段顺着这条路线返回 Window)
  2. 处于目标阶段
    当事件不断的传递到目标节点的时候,最终在目标节点上触发这个事件,就是目标阶段
  3. 事件冒泡阶段
    事件从发生事件所在节点,逐级传播到较为不具体的节点。
    总的来说就是事件一开始从文档的根节点流向目标对象,然后在目标对象上被触发,之后再回溯到文档的根节点。
    阻止冒泡:防止事件冒泡带来的不必要的错误和困扰,使用 stopPropagation()

优雅降级和渐进增强

优雅降级是指刚开始就构建完整的功能,然后再针对低版本浏览器进行兼容;

渐进增强是指针对低版本浏览器构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能,以达到更好的用户体验。

严格模式 use strict

use strict是一种ECMAscript 5 添加的(严格)运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为。
全局变量的显示声明,函数必须声明在顶层,不允许在非函数代码块内声明函数,arguments.callee也不允许使用;
消除代码运行的一些不安全之处,保证代码运行的安全,限制函数中的arguments修改,严格模式下的eval函数的行为和非严格模式的也不相同;
提高编译器效率,增加运行速度;
为未来新版本的Javascript标准化做铺垫。

JS数组方法

  • join()

将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符,该方法只接收一个参数:即分隔符。

  • push()和pop()

push():可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度
pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项

  • shift() 和 unshift()
    shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。
    unshift():将参数添加到原数组开头,并返回数组的长度 。
  • sort()
    按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。
  • reverse()
    反转数组项的顺序
  • concat()
    将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本
  • slice()
    返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
  • splice()
    可以实现删除、插入和替换
  • indexOf()和 lastIndexOf() (ES5新增)
    indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。
    lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。
  • forEach() (ES5新增)
    forEach():对数组进行遍历循环,对数组中的每一项运行给定函数。
  • map() (ES5新增)
    指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
  • filter() (ES5新增)
    filter():“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。
  • every() (ES5新增)

判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true

  • some() (ES5新增)
    判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
  • reduce()和 reduceRight() (ES5新增)
    两者都会迭代数组的所有项,然后构建一个最终返回的值
    reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。接收两个参数:函数和基础的初始值。函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。

js 字符串方法

  1. toLowerCase(): 把字符串转为小写,返回新的字符串。

  2. toUpperCase(): 把字符串转为大写,返回新的字符串。

  3. charAt(): 返回指定下标位置的字符。如果index不在0-str.length(不包含str.length)之间,返回空字符串。

  4. charCodeAt(): 返回指定下标位置的字符的unicode编码,这个返回值是 0 - 65535 之间的整数。如果index不在0-str.length(不包含str.length)之间,返回NaN。

  5. indexOf(): 返回某个指定的子字符串在字符串中第一次出现的位置

  6. lastIndexOf(): 返回某个指定的子字符串在字符串中最后出现的位置。

  7. slice(): 返回字符串中提取的子字符串。

  8. substring(): 提取字符串中介于两个指定下标之间的字符

  9. substr(): 返回从指定下标开始指定长度的的子字符串

  10. split(): 把字符串分割成字符串数组。

  11. replace(): 在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

  12. match(): 返回所有查找的关键字内容的数组。

js对象方法

  • Object.assign()
    将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象。
  • Object.create()

用指定的原型对象和属性创建一个新对象。

  • Object.defineProperty()

将给定描述符描述的命名属性添加到对象。

  • Object.defineProperties()

将给定描述符描述的命名属性添加到对象。

  • Object.values()

返回一个数组,该数组包含与给定对象自己的所有可枚举字符串属性相对应的值。

  • Object.setPrototypeOf()

设置对象的原型(其内部[[Prototype]]属性)

  • Object.keys()

返回一个数组,其中包含给定对象自己的所有可枚举字符串属性的名称。

  • Object.is()

判断两个值是否是相同的值

Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值