前端开发知识总结

in 笔记, web前端

总结分三大部分:html、css和javascript,每部分再分成两个子部分,分别是基础知识和记忆知识。

  • 基础知识指前端开发必须会的东西,比如页面渲染方式、js基础语法等。
  • 记忆知识指一些单纯背背就可以的知识,忘记的话可以查,但是免试官可能喜欢问(哭笑

Html相关

浏览器内核 [记忆知识]

浏览器内核又可以分为渲染引擎和js引擎两部分,后来js引擎越来越独立,内核也就更倾向于指渲染引擎本身的部分。目前常见的内核引擎有Trident、Gecko、Blink、Webkit四种。

  • Trident

    • 微软开发的内核,从IE4一直用到现在IE11。因为有过一段时间比较牛逼,拖更了很久,导致其与W3C标准脱节,加上大量BUG和安全问题都没有解决,导致现在很多用户用IE是为了下载其它浏览器。现在Win10最新的Edge浏览器已经不用这个内核,而是用自己开发的edge内核。
  • Gecko

    • 是一个开源内核,源自于古时候与ie对抗的Netscape。目前前端开发经常使用的Firefox浏览器就使用Gecko内核。另外这个内核还兼容很多平台,各种系统都能用。
  • Webkit

    • 苹果公司开发的内核,早起也被chrome使用。后来因为chrome火了,导致大家以为webkit是谷歌弄得,哈哈。其前身是KDE的KHTML。
  • Blink

    • 谷歌Chrome目前使用的内核,其前身是Chromium,而Chromium的前身就是webkit。因为商业竞争等各种关系,谷歌弄出了blink与苹果分道扬镳。

参考来源 :

[1] 主流浏览器内核介绍(前端开发值得了解的浏览器内核历史)

DOM操作 [基础知识]

DOM的全称是Document Object Module, 文档对象模型,他是独立于语言而存在的。

  • 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

    • 整个文档是一个文档节点
    • 每个 HTML 元素是元素节点
    • HTML 元素内的文本是文本节点
    • 每个 HTML 属性是属性节点
    • 注释是注释节点
  • window.documnet是浏览器为我们提供的可以操作dom的接口。

  • 随着Html5标准的推广,很多大家常用的JQuery的一些方法与浏览器原生提供的方法差别不大了,可以多了解一下原生的API。

参考来源 :

[1] 原生JavaScript的DOM操作汇总

[2] 理解DOM结构

DOM渲染方式 [基础知识]

浏览器在读取Html文档后,首先会构建DOM树,随后构建渲染树,最后渲染并显示。

webkit渲染html的方式

分词算法

算法的输出是HTML符号。算法可以用状态机来描述。 每一个状态从输入流中消费一个或多个字符,并根据它们更新下一状态。决策受当前符号状态和树的构建状态影响。这意味着同样的字符可能会产生不同的结果,取决于当前的状态。算法太复杂,我们用一个例子来看看它的原理。

基础示例,分析下面的标签:

<html>  
    <body>
        Hello world
    </body>
</html>  

初始状态是”Data state”,当遇到”<“时状态改为“Tag open state”。吃掉”a-z”字符组成的符号后产生了”Start tag token”,状态变更为“Tag name state”。我们一直保持此状态,直到遇到”>”。每个字符都被追加到新的符号名上。在我们的例子中,解出的符号就是”html”。

当碰到”>”时,当前符号完成,状态改回“Data state”。””标签将会以同样的方式处理。现在”html”与”body”标签都完成了,我们回到“Data state”状态。吃掉”H”(”Hello world”第一个字母)时会产生一个字符符号,直到碰到””的”<“符号,我们就完成了一个字符符号”Hello world”。

现在我们回到“Tag open state”状态。吃掉下一个输入”/”时会产生一个”end tag token”并变更为“Tag name state”状态。同样,此状态保持到我们碰到”>”时。这时新标签符号完成,我们又回到“Data state”。同样””也会被这样处理。

树的构建算法

当解析器被创建时,文档对象也被创建了。在树的构建过程中DOM树的根节点(Documen)将被修改,元素被添加到上面去。每个分词器完成的节点都会被树构建器处理。规范中定义了每一个符号与哪个DOM对象相关。除了把元素添加到DOM树外,它还会被添加到一个开放元素堆栈。这个堆栈用于纠正嵌套错误和标签未关闭错误。这个算法也用状态机描述,它的状态叫做”insertion modes”。

让我们看看下面输入的树构建过程:

<html>  
    <body>
        Hello world
    </body>
</html>  

树的构建过程中,输入就是分词过程中得到的符号序列。第一个模式叫“initial mode”。接收 html 符号后会变成“before html”模式并重新处理此模式中的符号。这会创建一个HTMLHtmlElement元素并追加到根文档节点。

然后状态改变为“before head”。我们收到”body”时,会隐式创建一个HTMLHeadElement,尽管我们没有这个标签,它也会被创建并添加到树中。

现在我们进入“in head”模式,然后是“after head”,Body会被重新处理,创建HTMLBodyElement元素并插入,然后进入“in body”模式。

字符符号”Hello world”收到后会创建一个”Text”节点,所有字符都被一一追加到上面。

收到body结束标签后进入 “after body” 模式,收到html结束标签后进入“after after body”模式。所有符号处理完后将终止解析。

参考来源 :

[1] 浏览器是怎样工作的:渲染引擎,HTML解析(连载二)

CSS

CSS hack [基础知识]

css hack用于处理不同浏览器css样式不兼容的问题,但这种方法并不利于代码的维护,不到万不得已不建议使用。

  • 条件注释法
    • 微软专属hack方式,也是官方推荐的方式。
  • 类内属性前缀法
    • 通过加一些只有部分浏览器能识别的类前缀,需要查表选择前缀。
  • 选择器前缀法
    • 在选择器前面加前缀,与上面类似。

参考来源 :

[1] 史上最全的CSS hack方式一览

盒模型 [基础知识]

直接看图就ok啦 盒模型

  • 特别注意的是:ie低于版本8的浏览器的盒子模型中的width包括内边距和边框

参考来源 :

[1] CSS 框模型概述

Javascript

数组的相关操作 [记忆知识]

  1. concat()
    • arr.concat(arr1, arr2, a1, a2)
    • 在arr后面添加新的元素
    • 返回新的数组,不修改调用的数组
  2. join()
    • arr.join(sparate)
    • 使用将数组拼接成字符串,用sparate连接
    • 返回拼接的字符串
  3. pop()
    • arr.pop()
    • 删除数组最后一个元素
    • 修改原数组,返回删除的元素
  4. push()
    • arr.push(a1,...,ax)
    • 在数组最后面添加元素
    • 修改原数组,返回新的长度
  5. shift()
    • arr.shift()
    • 删除数组中第一个元素
    • 修改原数组,返回删除的元素
  6. unshift()
    • arr.unshift(a1,...,ax)
    • 在数组最开始添加元素
    • 修改原数组,返回新的长度
  7. reverse()
    • arr.reverse()
    • 颠倒数组中所有的元素
    • 修改原数组,返回颠倒后的原数组
  8. slice()
    • arr.slice(start, end)
    • 提取数组中start至end的元素
    • 不修改原数组,返回新提取的数组
  9. splice()
    • arr.splice(index,count,a1,...,ax)
    • 替换数组中指定范围的元素,还可以用于删除或插入操作
    • 修改原数组,返回被删除的元素
  10. sort()
    • arr.sort(compareFunction)
    • 对指定数组进行排序,如果没有指定比较方法,则将按字母顺序对数组中的元素进行排序
    • 对原数组操作,返回排序后的原数组
  11. filter()
    • arr.filter(callback)
    • callback : function(element, index, array)
    • 返回一个新的符合callback测试为true的结果集,该方法可以用于遍历整个arr
    • 不修改原数组,返回新的数组
  12. map()
    • arr.map(processFunction)
    • callback : function(element, index, array)
    • 返回一个新的由callback结果构成的数组,用于处理数组中所有元素
    • 不修改原数组,返回新的数组

参考来源 :

字符串所支持的正则表达式 [基础知识]

  1. str.search()

  2. str.match()

  3. str.replace()

  4. str.split()

[1] JavaScript Array 对象

Comments

皖ICP备13007154号-1