相关知识点:《JavaScripta高级程序设计》 第16页–文档模式
IE5.5引入了文档模式的概念,而这个概念是通过使用文档类型(doctype)切换实现的。最初的两种文档模式是:混杂模式(也称兼容模式)和标准模式。
声明位于HTML文档中的第一行,处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。
DOCTYPE 不存在或者格式不正确会导致文档以兼容模式呈现。
回答:
声明一般位于文档的第一行,它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析,否则就以兼容模式进行解析。在标准模式下,浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下,浏览器会以向后兼容的方式来模拟老式浏览器的行为,以保证一些老的网站的正确访问。
PS: 向后兼容:又称向下兼容。在计算机中指在一个程序或者类库更新到较新的版本后,用旧的版本程序创建的文档或系统仍能被正常操作或使用,或在旧版本的类库的基础上开发的程序仍能正常编译运行的情况。
标准模式的渲染方式和JS引擎的解析方式都是以浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
SGML 是标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言,是所有电子文档标记语言的起源。
HTML 是超文本标记语言,主要是用于规定怎样显示网页。
XML是可扩展标记语言是未来网页语言的发展方向,XML和HTML的最大区别就在于XML的标签是可以自己创建的,数量无限多。而HTML的标签都是固定的而且数量有限。
XHTML也是现在基本上所有网页都在用的标记语言,它其实和HTML没什么本质的区别,标签都一样,就是比HTML更严格,比如标签必须都是小写,标签都必须有闭合标签等。
在HTML4.01中,元素被分为两大类:inline(内联元素)与block(块级元素)。一个行内元素只占据它对应标签的边框所包含的空间。
常见的行内元素:a b(粗体文本) span(定义文本) img strong(强调文本,程度比更强) sub(下标文本) sup(上标文本) button input label(为input元素定义标记/标注) select textarea(多行文本输入框)
块级元素占据其父元素(容器)的整个宽度,因此创建了一个“块”
常见的块级元素有 div ul(无序列表) ol(有序列表) li(列表项目) dl(定义列表) dt(定义列表中的项目) dd(描述列表中的项目) h1-h6 p
1.格式上,默认情况下,行内元素不会以新行开始,而块级元素会新起一行。
2.内容上,默认情况下,行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
3.行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效(可以设置line-height),设置margin和padding的上下不会对其他元素产生影响。
标签内没有内容的HTML标签被称为空元素。空元素是在开始标签中关闭的。
常见的空元素有: br hr img input link(链接) meta(页面的元信息)
link标签定义文档与外部资源的关系。
link是空元素,它仅包含属性。此元素只能存在与head部分,不过它可出现任何次数。
link标签中的rel属性定义了当前文档与被链接文档之间的关系。rel="stylesheet" 常见的stylesheet指的是定义一个外部加载的样式表。
1.从属关系区别: @import是css提供的语法规则,只有导入样式表的作用;link是html提供的标签,不仅可以加载css文件,还可以定义rel连接属性、引入网站图标等。
2.加载顺序区别:加载页面时,link标签引入css被同时加载;@import引入的css将在页面加载完毕后被加载
3.兼容性区别:@import是css2.1才有的语法,故只可在ie5+才能识别;link标签作为html元素,不存在兼容性问题。
4.DOM可控性区别:可以通过js操作dom,插入link标签来改变样式;由于dom方法是基于文档的,无法使用@import的方式插入样式。
浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI(统一资源标识符)来指定所请求资源的位置。
HTML和CSS规范中规定了浏览器解释html文档的方式,由w3c组织对这些规范进行维护,w3c是负责制定web标准的组织,但浏览器厂商纷纷开发出自己的扩展,对规范的遵循并不完善,这为web开发者带来了严重的兼容性问题。
简单来说,浏览器可以分为两部分:shell和内核
其中shell种类相对比较多,内核比较少。shell是指浏览器的外壳:例如菜单,工具栏等。主要是提供给用户界面操作,参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块,也有一些浏览器并不区分外壳和内核。
主要分为两部分:渲染引擎和JS引擎
渲染引擎的职责就是渲染,即在浏览器窗口中显示所请求的内容。默认情况下,渲染引擎可以显示html、xml、文档及图片,它也可以借助插件(浏览器扩展)显示其他类型数据。例如使用pdf阅读器插件,可以显示pdf格式。
JS引擎:解析和执行JavaScript来实现网页的动态效果。
刚开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎
1.首先解析收到的文档,根据文档定义构建一颗DOM树,DOM树是由DOM元素及属性节点组成的。
2.然后对css进行解析,生成CSSOM规则树
3.根据DOM树和CSSOM规则树构建渲染树。渲染树的节点被称为渲染对象,渲染对象是一个包含有颜色和大小属性的矩形,渲染对象和DOM元素相对应,但这种对应关系不是一对一的,不可见的DOM元素不会被插入渲染树。还有一些DOM元素对应几个可见对象,它们一般是一些具有复杂结构的元素,无法用一个矩形来描述
4.当渲染对象被创建并添加到树中,它们并没有位置和大小,所以当浏览器生成渲染树以后,就会根据渲染树来进行布局(也可以叫做回流)。这一阶段浏览器要做的事情就是要弄清楚各个节点在页面中的明确位置和大小。通常这一行为也被称为“自动重排”。
5.布局阶段结束后是绘制阶段,遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上,绘制使用UI基础组件。
值得注意的是,这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现在屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。
JavaScript 的加载、解析与执行会阻塞文档的解析,也就是说,在构建 DOM 时,HTML 解析器若遇到了 JavaScript,那么它会暂停文档的解析,将控制权移交给 JavaScript 引擎,等 JavaScript 引擎运行完毕,浏览器再从中断的地方恢复继续解析文档。
也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载 JS 文件,这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下,并不是说 script 标签必须放在底部,因为你可以给 script 标签添加 defer 或者 async 属性。
(1)脚本没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行。
(2)defer 属性表示延迟执行引入的 JavaScript,即这段 JavaScript 加载时 HTML 并未停止解析,这两个过程是并行的。当整个 document 解析完毕后再执行脚本文件。
(3)async 属性表示异步执行引入的 JavaScript,与 defer 的区别在于,如果已经加载好,就会开始执行,也就是说它的执行仍然会阻塞文档的解析,只是它的加载过程不会阻塞。
Webkit 和 Firefox 都做了这个优化,当执行 JavaScript 脚本时,另一个线程解析剩下的文档,并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是,预解析并不改变 DOM 树,只解析外部资源的引用,比如外部脚本、样式表及图片。
理论上,既然样式表不改变 DOM 树,也就没有必要停下文档的解析等待它们,然而,存在一个问题,JavaScript 脚本执行时可能在文档的解析过程中请求样式信息,如果样式还没有加载和解析,脚本将得到错误的值,显然这将会导致很多问题。
所以如果浏览器尚未完成 CSSOM 的下载和构建,而我们却想在此时运行脚本,那么浏览器将延迟 JavaScript 脚本执行和文档的解析,直至其完成 CSSOM 的下载和构建。也就是说,在这种情况下,浏览器会先下载和构建 CSSOM,然后再执行 JavaScript,最后再继续文档的解析。
FOUC:主要指的是样式闪烁的问题,由于浏览器渲染机制(比如firefox),在 CSS 加载之前,先呈现了 HTML,就会导致展示出无样式内容,然后样式突然呈现的现象。会出现这个问题的原因主要是 css 加载时间过长,或者 css 被放在了文档底部。
白屏:有些浏览器渲染机制(比如chrome)要先构建 DOM 树和 CSSOM 树,构建完成后再进行渲染,如果 CSS 部分放在 HTML 尾部,由于 CSS 未加载完成,浏览器迟迟未渲染,从而导致白屏;也可能是把 js 文件放在头部,脚本的加载会阻塞后面文档内容的解析,从而页面迟迟未渲染出来,出现白屏问题。
重绘: 当渲染树中的一些元素需要更新属性,而这些属性只是影响元素的外观、风格,而不会影响布局的操作,比如 background -color,我们将这样的操作称为重绘。
回流:当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作,会影响到布局的操作,这样的操作我们称为回流。
常见引起回流属性和方法:
任何会改变元素几何信息(元素的位置和尺寸大小)的操作,都会触发回流。
(1)添加或者删除可见的 DOM 元素;
(2)元素尺寸改变——边距、填充、边框、宽度和高度
(3)内容变化,比如用户在 input 框中输入文字
(4)浏览器窗口尺寸改变——resize事件发生时
(5)计算 offsetWidth(获取的是盒子最终的宽--只能获取不能改) 和 offsetHeight(获取的是盒子最终的高-只能获取不能改) 属性
(6)设置 style 属性的值
(7)当你修改网页的默认字体时。
回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列回流。
(1)使用 transform 替代 top
(2)不要把节点的属性值放在一个循环里当成循环里的变量
(3)不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
(4)不要一条一条地修改 DOM 的样式。与其这样,还不如预先定义好 css 的 class,然后修改 DOM 的 className。
一些 DOM 的操作或者属性访问可能会引起页面的回流和重绘,从而引起性能上的消耗。
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
新增的有:
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素,比如 article、footer、header、nav、section;
表单控件,calendar、date(显示日期{年月日})、time(显示时间,不含时区)、email(电子邮箱文本框--能验证通不通过)、url(网页的URL)、search(搜索引擎,chrome下输入文字后,会多出一个关闭的X);
新的技术 webworker, websocket;
新的文档属性 document.visibilityState (只读属性, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页,或者(正在)预渲染)
移除的元素有:
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签,可以利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式。
相关知识点:
(1) 用正确的标签做正确的事情。
(2) html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
(3) 即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;
(4) 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,利于 SEO ;
(5) 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
回答:
我认为 html 语义化主要指的是我们应该使用合适的标签来划分网页内容的结构。html 的本质作用其实就是定义网页文档的结构,一个语义化的文档,能够使页面的结构更加清晰,易于理解。这样不仅有利于开发者的维护和理解,同时也能够使机器对文档内容进行正确的解读。比如说我们常用的 b 标签和 strong 标签,它们在样式上都是文字的加粗,但是 strong 标签拥有强调的语义。对于一般显示来说,可能我们看上去没有差异,但是对于机器来说,就会有很大的不同。如果用户使用的是屏幕阅读器来访问网页的话,使用 strong 标签就会有明显的语调上的变化,而 b 标签则没有。如果是搜索引擎的爬虫对我们网页进行分析的话,那么它会依赖于 html 标签来确定上下文和各个关键字的权重,一个语义化的文档对爬虫来说是友好的,是有利于爬虫对文档内容解读的,从而有利于我们网站的 SEO 。从 html5 我们可以看出,标准是倾向于以语义化的方式来构建网页的,比如新增了 header 、footer 这些语义标签,删除了 big 、font 这些没有语义的标签。
从页面显示效果来看,被 和 包围的文字将会被加粗,而被 和 包围的文字将以斜体的形式呈现。
但是 是自然样式标签,分别表示无意义的加粗,无意义的斜体,表现样式为 { font-weight: bolder},仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」,此两个标签在 HTML4.01 中并不被推荐使用。 而 和 是语义样式标签。 表示一般的强调文本,而 表示比 语义更强的强调文本。
使用阅读设备阅读网页时: 会重读,而 是展示强调内容。
(1)合理的 title、description、keywords:搜索对着三项的权重逐个减小,title 值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面 title 要有所不同;description 把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面 description 有所不同;keywords 列举出重要关键词即可。
(2)语义化的 HTML 代码,符合 W3C 规范:语义化代码让搜索引擎容易理解网页。
(3)重要内容 HTML 代码放在最前:搜索引擎抓取 HTML 顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容肯定被抓取。
(4)重要内容不要用 js 输出:爬虫不会执行 js 获取内容
(5)少用 iframe:搜索引擎不会抓取 iframe 中的内容
(6)非装饰性图片必须加 alt
(7)提高网站速度:网站速度是搜索引擎排序的一个重要指标
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
原理:HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
浏览器常见的存储技术有 cookie、localStorage 和 sessionStorage。还有两种存储技术用于大规模数据存储,webSQL(已被废除)和 indexDB。
相关资料:
SessionStorage, LocalStorage, Cookie 这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage,创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密)。cookie 数据始终在同源(协议、主机、端口相同)的 http 请求中携带(即使不需要),会在浏览器和服务器间来回传递。
存储大小:
cookie 数据大小不能超过4 k 。
sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。
有效时间:
localStorage:存储持久数据,浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage:数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
cookie:设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭。
作用域:
sessionStorage:只在同源的同窗口(或标签页)中共享数据,也就是只在当前会话中共享。
localStorage:在所有同源窗口中都是共享的。
cookie:在所有同源窗口中都是共享的。
回答:
浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。
cookie 其实最开始是服务器端用于记录用户状态的一种方式,由服务器设置,在客户端存储,然后每次发起同源请求时,发送给服
务器端。cookie 最多能存储 4 k 数据,它的生存时间由 expires 属性指定,并且 cookie 只能被同源的页面访问共享。
sessionStorage 是 html5 提供的一种浏览器本地存储的方法,它借鉴了服务器端 session 的概念,代表的是一次会话中所保
存的数据。它一般能够存储 5M 或者更大的数据,它在当前窗口关闭后就失效了,并且 sessionStorage 只能被同一个窗口的同源
页面所访问共享。
localStorage 也是 html5 提供的一种浏览器本地存储的方法,它一般也能够存储 5M 或者更大的数据。它和 sessionStorage
不同的是,除非手动删除它,否则它不会失效,并且 localStorage 也只能被同源页面所访问共享。
上面几种方式都是存储少量数据的时候的存储方式,当我们需要在本地存储大量数据的时候,我们可以使用浏览器的 indexDB 这是浏
览器提供的一种本地的数据库存储机制。它不是关系型数据库,它内部采用对象仓库的形式存储数据,它更接近 NoSQL 数据库。
label 标签来定义表单控件间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
autocomplete 属性规定输入字段是否应该启用自动完成功能。默认为启用,设置为 autocomplete=off 可以关闭该功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
autocomplete 属性适用于
纯 css 实现,使用 border-radius ,当 border-radius 的长度等于宽高相等的元素值的一半时,即可实现一个圆形的点击区域。
title 属性没有明确意义只表示是个标题,h1 则表示层次明确的标题,对页面信息的抓取也有很大的影响。
的 title 和 alt 有什么区别?title 通常当鼠标滑动到元素上的时候显示
alt 是 的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。
Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的,因此当我们对 Canvas 进行缩放时,会出现锯齿或者失真的情况。
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法,因此当 SVG 图形缩放时并不会失真。
(1) 编写 CSS
(2) 让页面结构更合理化,提升用户体验
(3) 实现良好的页面效果和提升性能
* 用户界面
* 主进程
* 内核
* 渲染引擎
* JS 引擎
* 执行栈
* 事件触发线程
* 消息队列
* 微任务
* 宏任务
* 网络异步线程
* 定时器线程
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
H5标准声明,使用 HTML5 doctype,不区分大小写
标准的 lang 属性写法
声明文档使用的字符编码
优先使用 IE 最新版本和 Chrome
页面描述
页面关键词者
网页作
搜索引擎抓取
为移动设备添加 viewport
iOS 设备 begin
添加到主屏后的标题(iOS 6 新增)
是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏
添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
设置苹果工具栏颜色
启用360浏览器的极速模式(webkit)
避免IE使用兼容模式
不让百度转码
针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
微软的老式浏览器
uc强制竖屏
QQ强制竖屏
UC强制全屏
QQ强制全屏
UC应用模式
QQ应用模式
windows phone 点击无高光
设置页面不缓存
相关知识点:
为什么会有 CSS Reset 的存在呢?那是因为早期的浏览器支持和理解的 CSS 规范不同,导致渲染页面时效果不一致,会出现很多
兼容性问题。
reset 的目的,是将所有的浏览器的自带样式重置掉,这样更易于保持各浏览器渲染的一致性。
normalize 的理念则是尽量保留浏览器的默认样式,不进行太多的重置,而尽力让这些样式保持一致并尽可能与现代标准相符合。
1.Normalize.css 保护了有价值的默认值
Reset 通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。 相比之下,Normalize.css 保持了许多默认的浏
览器样式。 这就意味着你不用再为所有公共的排版元素重新设置样式。 当一个元素在不同的浏览器中有不同的默认值时,Normali
ze.css 会力求让这些样式保持一致并尽可能与现代标准相符合。
2.Normalize.css 修复了浏览器的 bug
它修复了常见的桌面端和移动端浏览器的 bug。这往往超出了 Reset 所能做到的范畴。关于这一点,Normalize.css 修复的问题
包含了 HTML5 元素的显示设置、预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中
的与表单相关的 bug。
3.Normalize.css 没有复杂的继承链
使用 Reset 最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在 Normalize.css 中就不会有这样的问题,因为在
我们的准则中对多选择器的使用时非常谨慎的,我们仅会有目的地对目标元素设置样式。
4.Normalize.css 是模块化的
这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己
选择性地移除掉某些永远不会用到部分(比如表单的一般化)。
5.Normalize.css 拥有详细的文档
Normalize.css 的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在 Github Wiki 中有进一步的
说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己
的测试。
回答:
css reset 是最早的一种解决浏览器间样式不兼容问题的方案,它的基本思想是将浏览器的所有样式都重置掉,从而达到所有浏览器
样式保持一致的效果。但是使用这种方法,可能会带来一些性能上的问题,并且对于一些元素的不必要的样式的重置,其实反而会造成
画蛇添足的效果。
后面出现一种更好的解决浏览器间样式不兼容的方法,就是 normalize.css ,它的思想是尽量的保留浏览器自带的样式,通过在原
有的样式的基础上进行调整,来保持各个浏览器间的样式表现一致。相对与 css reset,normalize.css 的方法保留了有价值的默
认值,并且修复了一些浏览器的 bug,而且使用 normalize.css 不会造成元素复杂的继承链。
预格式化就是保留文字在源码中的格式 最后显示出来样式与源码中的样式一致 所见即所得。
定义预格式文本,保持文本原有的格式
标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分: , , ,