认识达内从这里开始

认真做教育专心促就业

Web 前端知识体系精简 — HTML篇

发布：互联网
来源：互联网
时间：2017-06-17 14:05

Web前端技术由html、css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.在本文中,青岛IT培训小编将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉.

青岛IT培训

    三、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定义的规则显示在浏览器窗口中的过程.大致工作原理如下:

    (1)用户输入网址,浏览器向服务器发出请求,服务器返回html文件;

    (2)渲染引擎开始载入html代码,并将HTML中的标签转化为DOM节点,生成DOM树;

    (3)如果中引用了外部css文件,则发出css文件请求,服务器返回该文件;

    (4)如果中引用了外部js文件,则发出js文件请求,服务器返回该文件后开始运行;

    (5)渲染引擎继续载入html中的部分的代码,并开始解析前面返回的css文件,然后根据css选择器计算出节点的样式,创建渲染树;

    (6)从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标;

    (7)如果body中的引用了图片资源,则立即向服务器发出请求,此时渲染引擎不会等待图片下载完毕,而是继续渲染后面的代码;

    (8)服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排版,因此引擎需要回过头来重新渲染这部分代码;

    (9)如果此时js脚本中运行了style.display="none", 布局被改变,引擎也需要重新渲染这部分代码;

    (10)直到为止,页面渲染完毕.

    3、重绘和回流

    当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就称为回流.比如上面的img文件加载完成后就会引起回流,每个页面至少需要一次回流,就是在页面第一次加载的时候.

    当渲染树中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color.则就叫称为重绘.青岛IT培训班是实名制指定讲师授课,所有讲师均有8-10年的项目实战经验,是业内的专家级讲师.

    从上面可以看出,回流必将引起重绘,而重绘不一定会引起回流.

    会引起重绘和回流的操作

    添加、删除元素(回流+重绘)

    隐藏元素,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,表示在这个时间点之前,缓存都是有效的.青岛IT培训采用O2O互联网+教学,双师授课确保教学质量全国统一.线上交互学习平台TMOOC,可全程回看教学视频.

    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则比较适用于类似谷歌地图带有大型渲染区域的应用程序.

更多青岛IT培训相关资讯,请扫描下方二维码

青岛IT培训