HTML基础知识

用户2491023697000
57 阅读4分钟

1.DOCTYPE的作用是什么？

DOCTYPE指定浏览器以什么方式加载文档，是标准模式还是怪异模式，
如果没有指定DOCTYPE或者不符合规范，浏览器将以怪异模式加载。
标准模式是浏览器以最新的标准来加载文档，怪异模式则是以向后兼容的方式，
模拟老式浏览器的行为以防止站点无法工作。Html5之后不再写DTD，因为Html5不再基于SGML（标准通用置标语言）

2.行内元素和块级元素的区别

  • 格式上：块级元素会另起一行
  • 内容上：行内元素只能包裹行内元素，块级元素可以包裹块级和行内元素
  • 行内元素设置width、height无效，margin和padding对上下元素无效

3.link和@import的关系

  • 从属上，link属于html标签，而@import是css的语法
  • 加载顺序上，link是按照浏览器加载顺序加载，@import则是文档加载完成后加载
  • js可以操作link，因为link属于dom的一部分，但是操作不了@import

4.浏览器内核

分为渲染引擎和js引擎 渲染引擎的职责就是渲染，默认情况下可以显示html、xml和图片 
js引擎职责是解析和加载Javascript来实现网页的动态效果

5.浏览器的渲染原理

  1. 根据文档生成DOM树
  2. 解析css生成CSSOM树
  3. 将DOM树和CSSOM树合成Render对象，Render对象和DOM树是对应关系，但不是一一对应，比如display：none的DOM不会进入Render树
  4. js处理
  5. 计算DOM位置和大小
  6. 绘制

Render-Process-Skipping-1024x282.jpg

css文件不会阻塞DOM的加载，但会阻塞DOM的渲染，会阻塞js的加载
js会阻塞DOM文档的加载，可以用async和defer来异步加载

6.async和defer的区别

都可以是js异步加载，不影响DOM的解析，
defer可以使js在DOM解析完在加载，在 DOMContentLoaded 事件触发之前完成，多个js按顺序执行
asnyc如果js已经加载好了会立即执行，会阻塞DOM加载，多个js不确定执行顺序

7.css如何阻塞文档解析

当文档解析遇到js时，如果没有完成CSSOM的下载和构建，将会等待，因为js可能获取dom的样式，
如果没有构建完成，可能获取到错误的信息。
所以，应该是js阻塞了文档的加载而不是css。

8.如何使浏览器更快的渲染出界面

要想使浏览器更快的渲染出来，就要从浏览器渲染的步骤上来优化。
阻塞网页首次渲染的资源称为关键资源。
1.减少关键资源的大小
· 减少html的无用代码
· 压缩css和js，开启gzip
2.避免使用@import，因为它是串行的，增加资源加载时间
3.对js和css开启缓存
4.将css放到头部，js放到尾部，或者defer和async，或者开启预加载preload或者prefetch
5.减少js操作DOM，减少重排

9.重绘和重排

当渲染树更新元素属性的时候，就会触发重绘或者重排
当更改元素位置大小的时候会触发重排
当修改颜色、边框等的时候会触发重绘
重排必定引起重绘  重绘不一定引起重排

10.如何减少重排

  • 先脱离文档流，再操作，比如display:none;position:fixed
  • 使用document.creatDocumentFragment，在内存中操作对象，只会触发一次重排

11.cookie、localStorage、sessionStorage的区别

1.存储大小：cookie只能存4k大小，其他可存储5M
2.存储时间
· localStorage会一直存在，除非主动删除
· sessionStorage会在页面会话结束是被清除，新开一个标签，不会共享
· cookie会在设置有效期之前一直有效

12.浏览器标签页之间怎么通信？

  1. 通过websocket
const ws = new WebSocket() ;
ws.onmessage = ()=>{}
ws.send()

2.监听storage变化 winodw.addEventListener('storage',()=>{})

13.SEO

  1. 语义化标签
  2. 不嵌套iframe，或者动态设置iframe的src
  3. 优化页面加载速度
  4. 设置图片alt
  5. 重要内容不要用js渲染，不爬取js内容
avatar
文章
阅读
粉丝