Web 前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对 Web 前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。
JAVASCRIPT 篇
0、基础语法
Javascript 基础语法包括：变量定义、数据类型、循环、选择、内置对象等。
数据类型有 string,number,boolean,null,undefined,object 等。其中，string,number 和 boolean 是基础类型,null 和 undefined 是 JS 中的两个特殊类型,object 是引用类型。
Javascript 可以通过 typeof 来判断基础数据类型，但不能够准确判断引用类型, 因此需要用到另外一个方法，那就是 Object 的 toString, 关于数据类型及其判断可以参考以下博客：数据类型详解 和 判断 JS 数据类型的四种方法
JS 常用的内置对象有 Date、Array、JSON,RegExp 等。 一般来讲，Date 和 Array 用的最频繁，JSON 可以对对象和数组进行序列化和反序列化，还有一个作用就是实现 对象的深拷贝 。
RegExp 即正则表达式，是处理字符串的利器。 关于数据类型和正则表达式的介绍可以参考博客：ES5 对数组增强的 9 个 API 和 JS 正则表达式精简
1、函数原型链
Javascript 虽然没有继承概念，但 Javascript 在函数 Function 对象中建立了原型对象 prototype，并以 Function 对象为主线，从上至下，在内部构建了一条原型链。
简单来说就是建立了变量查找机制，当访问一个对象的属性时，先查找对象本身是否存在，如果不存在就去该对象所在的原型连上去找，直到 Object 对象为止，如果都没有找到该属性才会返回 undefined。
因此我们经常会利用函数的原型机制来实现 JS 继承。关于函数原型链可参考博客：JS 原型对象和原型链
2、函数作用域
函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。 在 JS 中没有会块级作用域，只有函数作用域 ，因此 JS 中还存在着另外一种怪异现象，那就是 变量提升 。关于作用域的介绍请参考博客： 函数的作用域和作用域链
3、函数指针 this
this 存在于函数中，它指向的是该函数在运行时被调用的那个对象 。在实际项目中，遇到 this 的坑比较多，因此需要对 this 作深入的理解。
Function 对象还提供了 call、apply 和 bind 等方法来改变函数的 this 指向，其中 call 和 apply 主动执行函数，bind 一般在事件回调中使用，而 call 和 apply 的区别只是参数的传递方式不同。关于 call,apply 和 bind 的用户请参考博客：详解 JS 的 call,apply 和 bind
4、构造函数 new
JS 中的函数即可以是构造函数又可以当作普通函数来调用，当使用 new 来创建对象时，对应的函数就是构造函数，通过对象来调用时就是普通函数。
普通函数的创建有：显式声明、匿名定义、new Function() 等三种方式。
当通过 new 来创建一个新对象时，JS 底层将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之间建立了一条原型链，通过新对象可以访问到函数对象原型 prototype 中的方法和属性。new 的详细介绍请参考博客： 理解 JS 中的 new 运算符
5、闭包
闭包其实是一个主动执行的代码块，这个代码块的特殊之处是可以永久保存局部变量，但又不污染全局变量，可以形成一个独立的执行过程，因此我们经常用闭包来定义组件。关于闭包的介绍请参考： 干货分享：让你分分钟学会 JS 闭包
6、单线程和异步队列
setTimeout 和 setInterval 是 JS 内置的两个定时器，使用很简单，但这两个方法背后的原理却不简单。
我们知道，JS 是单线程语言，在浏览器中，当 JS 代码被加载时，浏览器会为其分配一个主线程来执行任务 (函数)，主线程会形成一个全局执行环境，执行环境采用栈的方式将待执行任务按顺序依次来执行。
但在浏览器中有一些任务是非常耗时的，比如 http 请求、定时器、事件回调等，为了保证其他任务的执行效率不被影响，JS 在执行环境中维护了一个异步队列 (也叫工作线程)，并将这些任务放入队列中进行等待，这些任务的执行时机并不确定，只有当主线程的任务执行完成以后，才会去检查异步队列中的任务是否需要开始执行。 这就是为什么 setTimeout(fn,0) 始终要等到最后执行的原因。关于单线程和异步队列问题请参考：setTimeout（0）
7、异步通讯 Ajax 技术
Ajax 是浏览器专门用来和服务器进行交互的异步通讯技术，其核心对象是 XMLHttpRequest, 通过该对象可以创建一个 Ajax 请求。为了防止 XSS 攻击，浏览器对 Ajax 做了限制，不允许 Ajax 跨域请求服务器, 就是只能访问当前域名下的 url。
当然，如果确信你的站点不存在跨域的风险，可以在服务端主动开启跨域请求。 也可以直接通过 CORS 或 JSONP 来实现。
JSONP 是利用脚本 (script) 跨域能力来模拟 Ajax 请求。
CORS 是一个 W3C 标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。 关于 CORS 的介绍请参考：跨域资源共享 CORS 详解
8、DOM 对象 document
document 对象里保存着整个 web 页面 dom 结构，在页面上所有的元素最终都会映射为一个 dom 对象。 document 也提供了很多 api 来查找特定的 dom 对象，比如 getElementById,querySelector 等等。
9、事件系统 Event
事件是用户与页面交互的基础，到目前为止，DOM 事件从 PC 端的 鼠标事件 (mouse) 发展到移动端的 触摸事件 (touch) 和 手势事件 (guesture)
由于 DOM 结构可能会多层嵌套，因此也衍生出了两种事件流：事件捕获和事件冒泡，后者最常用。利用事件冒泡机制可以实现很多功能，比如页面点击统计。关于两种事件流的介绍请参考： 事件冒泡和捕获
除此之外，在页面初始化、滚动、隐藏、返回等操作时分别内置了 onload/onDOMContentLoaded、onscroll、onvisibility 和 onhashchange 等事件，如果想要捕获这些事件，需要通过 addEventLisener/attachEvent 来进行绑定。
10、全局对象 window
在 JS 中，当一段 JS 代码在浏览器中被加载执行，JS 引擎会在内存中构建一个全局执行环境， 执行环境的作用是保证所有的函数能按照正确的顺序被执行 ，而 window 对象则是这个执行环境中的一个全局对象，window 对象中内置了很多操作 api 和对象，document 对象就是其中一个。关于 JS 执行环境的介绍请参考博客： 深入理解 JS 执行细节
CSS 篇
css 是用来对 html 进行修饰的一门语言。
1、选择器
css 的选择器有很多种，常用的有类选择器、标签选择器、ID 选择器、后代选择器、群组选择器、伪类选择器 (before/after)、兄弟选择器 (+~)、属性选择器等等。
2、定位
定位一般有相对定位 (relative)、绝对定位 (absolute)、固定定位 (fixed)，relative 和 absolute 在移动端用的最多，fixed 在移动端有兼容性问题，因此不推荐使用，在移动端替代 fixed 的方案是 absolute+内部滚动。
3、浮动
设置 float 为 left 或 right，就能使该元素脱离文档流，向左或向右浮动。一般在做宫格模式布局时会用到，如果子元素全部设置为浮动，则父元素是塌陷的，这时就需要清除浮动，清除浮动的方法也很多，常用的方法是在元素末尾加空元素设置 clear:both, 更高级一点的就给父容器设置 before/after 来模拟一个空元素，还可以直接设置 overflow:auto/hidden。除过浮动可以实现宫格模式，行内盒子 (inline-block) 和 table 也可以。
4、盒子模型
盒子模型是 css 最重要的一个概念，也是 css 布局的基石。 常见的盒子模型有块级盒子 (block) 和行内盒子 (inline-block)，盒子最关键的几个属性包括 margin、border、padding 和 content, 这几个元素可以设置盒子和盒子之间的关系以及盒子和内容之间的关系。还有一个问题是计算盒子的大小，需要注意的是，box-sizing 属性的设置会影响盒子的 width 和 height。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
5、Flex 布局
Flex 布局的容器是一个伸缩容器，首先容器本身会更具容器中的元素动态设置自身大小；然后当 Flex 容器被应用一个大小时（width 和 height），将会自动调整容器中的元素适应新大小。Flex 容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素的排列方向（横向和纵向）和是否支持元素的自动换行。有了这个神器，做页面布局的可以方便很多了。注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
6、transition(过渡) 和 transform(旋转)
应用 transform 可以对元素进行平移 (translate)、旋转 (rotate)、放大缩小 (scale)、倾斜 (skew) 等处理，而 transition 使 css 属性值 (包括 transform) 在一段时间内平滑的过渡。使用 transition 和 transform 就可以实现页面的滑动切换效果。
7、动画 Animation
Animation 首先需要设置一个动画函数，然后以这个动画的方式来改变元素的 css 属性之的变化，动画可以被设置为永久循环演示。 和 transition 相比，animation 设置动画效果更灵活更丰富，二者还有一个区别是：transition 只能通过主动改变元素的 css 值才能触发动画效果，而 animation 一旦被应用，就开始执行动画。
8、Sprite 图
对于大型站点，为了减少 http 请求的次数，一般会将常用的小图标排到一个大图中，页面加载时只需请求一次网络， 然后在 css 中通过设置 background-position 来控制显示所需要的小图标。
9、字体图标 iconfont
所谓字体图标就是将常用的图标转化为字体资源存在文件中，通过在 CSS 中引用该字体文件，然后可以直接通过控制字体的 css 属性来设置图标的样式。
HTML 篇
1、Web 语义化 和 SEO
html 常规标签有 html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i 等等，另外 html5 还新增了很多语义化的标签，比如 header,acticle,aside,section,footer,audio,radio 等等。
Web 语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。
SEO 是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。
搜索引擎通过爬虫技术获取的页面就是由一堆 html 标签组成的代码,，人可以通过可视化的方式来判断页面上哪些内容是重点，而机器做不到。 但搜索引擎会根据标签的含义来判断内容的权重，因此，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确识别页面中的重要内容，并予以较高的权值。比如 h1~h6 这几个标签在 SEO 中的权值非常高，用它们作页面的标题就是一个简单的 SEO 优化。
2、页面渲染机制
页面渲染就是浏览器的渲染引擎将 html 代码根据 CSS 定义的规则显示在浏览器窗口中的过程。大致工作原理如下：
- 用户输入网址，浏览器向服务器发出请求，服务器返回 html 文件；
- 渲染引擎开始载入 html 代码，并将 HTML 中的标签转化为 DOM 节点，生成 DOM 树；
- 如果中引用了外部 css 文件，则发出 css 文件请求，服务器返回该文件；
- 如果中引用了外部 js 文件，则发出 js 文件请求，服务器返回该文件后开始运行；
- 渲染引擎继续载入 html 中的部分的代码，并开始解析前面返回的 css 文件，然后根据 css 选择器计算出节点的样式，创建渲染树；
- 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标；
- 如果 body 中的
引用了图片资源，则立即向服务器发出请求，此时渲染引擎不会等待图片下载完毕，而是继续渲染后面的代码；
- 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排版，因此引擎需要回过头来重新渲染这部分代码；
- 如果此时 js 脚本中运行了 style.display=”none”, 布局被改变，引擎也需要重新渲染这部分代码；
- 直到为止，页面渲染完毕。
3、重绘和回流
当渲染树中的一部分 (或全部) 因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。比如上面的 img 文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如 background-color。则就叫称为重绘。
从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。
会引起重绘和回流的操作
- 添加、删除元素 (回流+重绘)
- 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
- 移动元素，比如改变 top,left,transform 的值，或者移动元素到另外一个父元素中。(重绘+回流)
- 对 style 的操作 (对不同的属性操作，影响不一样)
- 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等 (回流+重绘)
4、本地存储
本地存储最原始的方式就是 cookie,cookie 是存放在本地浏览器的一段文本，数据以键值对的形式保存，可以设置过期时间。 但是 cookie 不适合大量数据的存储，因为每请求一次页面，cookie 都会发送给服务器，这使得 cookie 速度很慢而且效率也不高。因此 cookie 的大小被限制为 4k 左右 (不同浏览器可能不同, 分 HOST)，如下所示：
- Firefox 和 Safari 允许 cookie 多达 4097 个字节，包括名（name）、值（value）和等号。
- Opera 允许 cookie 多达 4096 个字节，包括：名（name）、值（value）和等号。
- Internet Explorer 允许 cookie 多达 4095 个字节，包括：名（name）、值（value）和等号。
在所有浏览器中，任何 cookie 大小超过限制都被忽略，且永远不会被设置。
html5 提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage, 它们都是以 key/value 的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话 (session), 即当浏览器窗口关闭后，sessionStorage 中的数据被清除。
localStorage 的存储空间大约 5M 左右 (不同浏览器可能不同，分 HOST)，这个相当于一个 5M 大小的前端页面的数据库，相比于 cookie 可以节约带宽，但 localStorage 在浏览器隐私模式下是不可读取的，当存储数据超过了 localStorage 的存储空间后会抛出异常。
此外，H5 还提供了逆天的 websql 和 indexedDB, 允许前端以关系型数据库的方式来存储本地数据，相对来说，这个功能目前应用的场景比较少，此处不作介绍。
5、浏览器缓存机制
浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制。
Cache-Control 用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600 表示文件在本地应该缓存，且有效时长是 600 秒（从发出请求算起）。在接下来 600 秒内，如果有请求这个资源，浏览器不会发出 HTTP 请求，而是直接使用本地缓存的文件。
Last-Modified 是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过 If-Modified-Since 字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回 304 告诉浏览器继续使用缓存；如果有修改，则返回 200，同时返回最新的文件。
Cache-Control 通常与 Last-Modified 一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。
Cache-Control 还有一个同功能的字段：Expires。Expires 的值一个绝对的时间点，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在这个时间点之前，缓存都是有效的。
Expires 是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1 标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control 是高优化级的。
Etag 也是和 Last-Modified 一样，对文件进行标识的字段。不同的是，Etag 的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过 If-None-Match 字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包 304，有更新回包 200。Etag 和 Last-Modified 可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。
另外有两种特殊的情况：
- 手动刷新页面（F5)，浏览器会直接认为缓存已经过期（可能缓存还没有过期），在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
- 强制刷新页面（Ctrl+F5)，浏览器会直接忽略本地的缓存（有缓存也会认为本地没有缓存），在请求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache），发包向服务重新拉取文件。
6、History 路由机制
用户访问网页的历史记录通常会被保存在一个类似于栈对象中，即 history 对象，点击返回就出栈，跳下一页就入栈。 它提供了一些方法来操作页面的前进和后退：
- window.history.back() 返回到上一个页面
- window.history.forward() 进入到下一个页面
- window.history.go([delta]) 跳转到指定页面
HTML5 对 History Api 进行了增强，新增了两个 Api 和一个事件，分别是 pushState、replaceState 和 onpopstate
pushState 是往 history 对象里添加一个新的历史记录，即压栈。
replaceState 是替换 history 对象中的当前历史。
当点击浏览器后退按钮或 js 调用 history.back 都会触发 onpopstate 事件 , 与其类似的还有一个事件: onhashchange 。
onhashchange 是老 API, 浏览器支持度高, 本来是用来监听 hash 变化的, 但可以被利用来做客户端前进和后退事件的监听，onpopstate 是专门用来监听浏览器前进后退的, 不仅可以支持 hash, 非 hash 的同源 url 也支持。
7、HTML5 离线缓存
HTML5 离线缓存又叫 Application Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：
– CACHE MANIFEST – 在此标题下列出的文件将在首次下载后进行缓存
– NETWORK – 在此标题下列出的文件需要与服务器的连接，且不会被缓存
– FALLBACK – 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
离线缓存为应用带来三个优势：
- 离线浏览 – 用户可在应用离线时使用它们
- 速度 – 已缓存资源加载得更快
- 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。
8、Canvas 和 SVG
Canvas 通过 Javascript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。你可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 和 SVG 相比，canvas 更依赖于分辨率，不支持事件处理器，文本渲染能力弱，比较适合密集型游戏，其中的许多对象会被频繁绘制，而 svg 则比较适用于类似谷歌地图带有大型渲染区域的应用程序。
The post Web 前端知识体系精简 appeared first on Linuxeden开源社区.
http://ift.tt/2tBsW4s
没有评论:
发表评论