1.doctype 的作用是什么?
声明文档的解析类型 (document.compatMode), 目的是要告诉标准通用标记语言解析器, 它应该使用什么样的文档类型定义(DTD) 来解析文档避免浏览器的怪异模式. 没有 DOCTYPE 的声明, 那么 compatMode 默认就是 BackCompat(怪异模式),
2 标准模式, 接近标准模式, 怪异模式的区别?
在标准模式页面按照 html,CSS 的定义渲染, 而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计, 并未严格遵循 W3C 标准而产生的一种页面渲染模式.
(1 )盒模型:
(2)图片元素的垂直对齐方式:
对于 inline 元素和 table-cell 元素, 标准模式下 vertical-align 属性默认取值为 baseline, 在怪异模式下, table 单元格中的图片的 vertical-align 属性默认取值为 bottom, 因此在图片底部会有及像素的空间.
(3)<table > 元素中的字体:
CSS 中, 对于 font 的属性都是可以继承的, 怪异模式下, 对于 table 元素, 字体的某些元素将不会从 body 等其他封装元素中继承得到, 特别是 font-size 属性.
(4)内联元素的尺寸:
标准模式下, non-replaced inline 元素无法自定义大小, 怪异模式下, 定义这些元素的 width,height 属性可以影响这些元素显示的尺寸.
(5)元素的百分比高度:
a:CSS 中对于元素的百分比高度规定如下: 百分比为元素包含块的高度, 不可为负值, 如果包含块的高度没有显示给出, 该值等同于 auto, 所以百分比的高度必须在父元素有高度声明的情况下使用.
b: 当一个元素使用百分比高度时, 标准模式下, 高度取决于内容变化, 怪异模式下, 百分比高度被正确应用.
(6)元素溢出的处理:
标准模式下, overflow 取默认值 visible, 在怪异模式下, 该溢出会被当做扩展 box 来对待, 即元素的大小由其内容决定, 溢出不会裁减, 元素框自动调整, 包含溢出内容.
3.HTML 和 XHTML 的区别?
XHTML 是更严格更纯净的 HTML 代码, 指可扩展超文本标签语言, 是一个 W3C 标准
HTML 是用来描述网页的一种语言, 指的是超文本标记语言 , 是一套标记标签
XHTML 元素必须被正确地嵌套.
XHTML 元素必须被关闭
标签名必须用小写字母.
XHTML 文档必须拥有根元素
4. 服务器返回 application/xhtml+xml 格式的页面有什么问题?
是 XHTML 系列文档的类型, 要求比较严格, 必须有 head,body 标签且每个元素必须是关闭的. 一些老的浏览器不支持
5.cookie,sessionStorage 以及 localStorage 有什么不同?
答: sessionStorage,localStorage,cookie 都是在浏览器端存储的数据 有了本地数据, 就可以避免数据在浏览器和服务器间不必要地来回传递. sessionStorage 和 localStorage 是 HTML5 web Storage API 提供的, 可用于 web 请求之间保存数据. session 保存在服务器, 客户端不知道其中的信息, 数据可以保存在集群, 数据库, 文件中; cookie 保存在客户端, 服务器能够知道其中的信息; session 中保存的是对象, cookie 中保存的是字符串; session 不能区分路径, 同一个用户在访问一个网站期间, 所有的 session 在任何一个地方都可以访问到. 而 cookie 中如果设置了路径参数, 那么同一个网站中不同路径下的 cookie 互相是访问不到的; session 的运行依赖 session id, 而 session id 是存在 cookie 中的, 也就是说, 如果浏览器禁用了 cookie , 同时 session 也会失效; 单个 cookie 在客户端的限制是 3K;
cookie 在浏览器和服务器间来回传递, 而 sessionStorage 和 localStorage 不会自动把数据发给服务器, 仅在本地保存; cookie 不是很安全. cookie 储存的数据小; 4k-5M 数据有效期不同, localStorage 始终有效; 作用域不同, sessionStorage 不在不同的浏览器窗口中共享, 即使是同一个页面; localStorage 在所有同源窗口中都是共享的; cookie 也是在所有同源窗口中都是共享的; sessionStorage 和 localStorage 接口更多.
6.script,script async 以及 script defer 的不同?
浏览器会立即加载并执行相应的脚本. 也就是说在渲染 script 标签之后的文档之前, 不等待后续加载的文档元素, 读到就开始加载和执行, 此举会阻塞后续文档的加载;
有了 async(并行异步)属性, 表示后续文档的加载和渲染与 js 脚本的加载和执行是并行进行的, 即异步执行;------ 加载完就执行
有了 defer 属性, 加载后续文档的过程和 js 脚本的加载 (此时仅加载不执行) 是并行进行的(异步),js 脚本的执行需要等到文档所有元素解析完成之后, DOMContentLoaded 事件触发执行之前; 虽然异步但是按顺序, 按加载顺序执行脚本
7. 使用 data-* 属性的好处是什么?
用于存储页面或应用程序的私有自定义数据, 存储的 (自定义) 数据能够被页面的 JavaScript 中利用,
属性名不应该包含任何大写字母, 并且在前缀
data-`` 之后必须有至少一个字符 属性值可以是任意字符串
data-* ``` 属性是 HTML5 中的新属性.
<element data-*="somevalue">
dataset 属性存取 data-* 自定义属性的值 data 去掉, 后变大写. 只有在 Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6 + 浏览器中实现
使用 attribute 方法可以存取 data-* 自定义属性的值
8. 为什么说把 CSS <link > 标签放在 < head></head > 标签里, 把 < script > 正好放在</body > 的前面是个好的主意? 你知道哪些例外情况吗?
css 和 JavaScript 不一定写在 head 里比较好, 我习惯于单独设立 css 和 js 文件, 把代码写在里面, 这样方便查找和管理
而 css 和 js 的引用位置是放在头部还是尾部取决于一个加载顺序
当加载头部以后会同步加载头部中引用的文件, 而 css 样式表在这里加载会规定网页的总体样式
js 如果需要先加载后运行则写在头里, 需要其他内容加载完之后在运行则可以写在尾部.(其他内容加载完再运行)
9. 使用过哪些 HTML 模板语言?
vue 中文本{{}}, 使用 v-html 指令用于输出 html 代码, 绑定 v-bind 指令,
{{JavaScript 表达式}}
, 指令是带有 v- 前缀的特殊属性, v-model,| 过滤器,
html 模板是别人做出来的网页模板 html 是一种编程语音
10. 什么是渐进式渲染? 说一说你所了解的技术?
对渲染进行分割 从具体的使用的场景, 不同的 Level 实际上对应不同的页面内容, 论坛是一个比较清晰的例子, 想象一个论坛:
网页的静态部分, HTML 固定的内容, 比如导航栏和底部
页面首屏的内容, 比如一个论坛的话题 页面首屏看不到的内容, 比如话题下面多少回复 切换路由才会显示的页面, 比如导航的另一个页面 对于这样的情况, 显然有若干种可行的渲染分割的方案 全在客户端渲染
1, 2, 3 在服务端渲染, 4 等到用户点击从浏览器抓
1, 2 在服务器渲染, 评论由客户端加载
只有 1 在服务端渲染, 动态的数据全部由客户端抓取.
而这些方案对于服务端来说, 性能的开销各不相同, 形成一个梯度,
而最后一种情况, 服务端预编译页面就好了, 几乎没有渲染负担. 根据实际的场景, 可以有更多 Level 可以设计.. 只是没这么简单罢了
- from: https://www.jianshu.com/p/431c91c8140c
- more:https://xiaodian-li.github.io/
来源: https://juejin.im/post/5afbd17f518825670961636c