欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端部分知识点补充

程序员文章站 2022-03-03 07:51:24
...

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
相关标签: 前端面试