HTML面试相关问题整理

HTML面试相关问题整理

  • 前言
  • 前端性能优化
  • HTML5语义化
    • b 与 strong 的区别和 i 与 em 的区别?
  • 浏览器架构
  • 一个页面从输入URL到页面加载显示完成,这个过程都发生什么?
  • 为什么最好把 CSS 的``标签放在``之间?为什么最好把 JS 的`script`标签恰好放在``之前,有例外情况吗?
  • 什么是渐进式渲染(progressive rendering)?
  • viewport
    • Viewport属性值
  • 回流Reflow和重绘Repaint
    • 常见引起回流属性和方法:
    • 如何减少回流?(浏览器绘制过程)
    • 为什么操作 DOM 慢?(浏览器绘制过程)
  • HTML5 有哪些新特性、移除了那些元素?
  • iframe的作用? 缺点
  • 文档的不同注释方式?
  • 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
    • COOKIE是如何工作的?
    • COOKIE主要用在以下三个方面:
    • 三者的用途差异?
    • COOKIE的缺陷
    • sessionStroage有哪些应用场景?
    • 用storage怎么来判断用户是否需要再登陆?
    • localStorage是否可以在同源窗口共享?
  • 如何实现浏览器内多个标签页之间的通信?
  • webSocket 如何兼容低版本浏览器?
  • 前端性能优化?
  • Canvas 和 SVG 有什么区别?
  • 渐进增强和优雅降级的定义
  • 对 web 标准、可用性、可访问性的理解
  • IE 各版本和 Chrome 可以并行下载多少个资源?
  • DOCTYPE 的作用是什么?
  • SGML 、 HTML 、XML 和 XHTML 的区别?
  • 页面导入样式时,使用 link 和 @import 有什么区别?
  • href和src区别
  • css reset 和 normalize.css 有什么区别?
  • 常见的浏览器内核比较
    • 主流浏览器内核私有属性 css 前缀?
  • 浏览器的渲染过程?浏览器的渲染原理?
  • 渲染过程中遇到 JS 文件怎么处理?(浏览器解析过程)
    • async 和 defer 的作用是什么?有什么区别?(浏览器解析过程)
  • 前端需要注意哪些 SEO ?
  • 用于预格式化文本的标签是?
  • 参考

前言

写完CSS面试相关问题整理,继续整理。

前端性能优化

浏览器前端优化,推荐,从页面渲染来看优化。(这里有页面渲染过程)

  • 减少 HTTP 请求
  • 减少 DOM 操作
  • 避免不必要的重绘与重排
  • 优化 CSS 选择器(从右向左匹配)
  • CSS/JS minify,减少文件体积
  • 开启 Gzip 压缩
  • 将 CSS 放到顶部,JavaScript 放到尾部
  • 压缩图片以及使用 CSS Sprite
  • 使用 CDN 加速,适当进行文件缓存
  • 合理控制 cookie 大小(每次请求都会包含 cookie)

HTML5语义化

什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。
好处

  • 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
  • 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
  • 方便其他设备解析,如盲人阅读器根据语义渲染网页
  • 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

参考 http://www.daqianduan.com/6549.html

b 与 strong 的区别和 i 与 em 的区别?

从页面显示效果来看,被 包围的文字将会被加粗,而被包围的文字将以斜体的形式呈现。

但是 是自然样式标签,分别表示无意义的加粗,无意义的斜体,表现样式为 { font-weight:bolder},仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」,此两个标签在 HTML4.01 中并不被推荐使用。

是语义样式标签。表示一般的强调文本,而 表示比 <em>语义更强的强调文本。

使用阅读设备阅读网页时:会重读,而 是展示强调内容。

浏览器架构

  • 用户界面
    • 主进程
    • 内核
      • 渲染引擎
      • JS 引擎
        • 执行栈
      • 事件触发线程
        • 消息队列
          • 微任务
          • 宏任务
      • 网络异步线程
      • 定时器线程

一个页面从输入URL到页面加载显示完成,这个过程都发生什么?

从浏览器输入一个 url 到页面渲染,涉及的知识点及优化点

(1)浏览器url 解析,是否符合url格式,中文会encode等。
(2)在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。
(3)浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手
(4)握手成功后,浏览器向服务器发送http请求,请求数据包。
(5)服务器处理收到的请求,将数据返回至浏览器
(6)浏览器接收到响应后,开始对 html 文件进行解析开始页面的渲染过程。
(7)(生成Dom树、解析css样式、js交互)浏览器首先会根据 html 文件构建 DOM 树,根据解析到的 css 文件构建 CSSOM 树,如果遇到 script 标签,则判端是否含有 defer 或者 async 属性,要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建立好后,根据它们来构建渲染树。渲染树构建好后,会根据渲染树来进行布局。布局完成后,最后使用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示出来了。
(8)最后一步是 TCP 断开连接的四次挥手过程

其中,步骤2的具体过程是:

  • 浏览器缓存:浏览器会记录DNS一段时间,因此,只是第一个地方解析DNS请求;
  • 操作系统缓存:如果在浏览器缓存中不包含这个记录,则会使系统调用操作系统,获取操作系统的记录(保存最近的DNS查询缓存);
  • 路由器缓存:如果上述两个步骤均不能成功获取DNS记录,继续搜索路由器缓存;
  • ISP(运营商)缓存:若上述均失败,继续向ISP搜索。
  • 域名服务器:到此处的过程为:根域服务器(.) -> 顶级域名服务器(eg: .com,.org)->主域名服务器(eg: google.com)
浏览器如何渲染网页
使用 HTML 创建文档对象模型(DOM)
使用 CSS 创建 CSS 对象模型(CSSOM)
基于 DOM 和 CSSOM 执行脚本(Scripts)
合并 DOM 和 CSSOM 形成渲染树(Render Tree)
使用渲染树布局(Layout)所有元素
渲染(Paint)所有元素
1、HTML的加载

  HTML是一个网页的基础,下载完成后解析

2、其他静态资源加载

  解析HTML时,发现其中有其他外部资源链接比如CSS、JS、图片等,会立即启用别的线程下载。

  但当外部资源是JS时,HTML的解析会停下来,等JS下载完执行结束后才继续解析HTML,防止JS修改已经完成的解析结果

3、DOM树构建

  在HTML解析的同时,解析器会把解析完成的结果转换成DOM对象,再进一步构建DOM树

4、CSSOM树构建

  CSS下载完之后对CSS进行解析,解析成CSS对象,然后把CSS对象组装起来,构建CSSOM树

5、渲染树构建

  当DOM树和CSSOM树都构建完之后,浏览器根据这两个树构建一棵渲染树

6、布局计算

  渲染树构建完成以后,浏览器计算所有元素大小和绝对位置

7、渲染

  布局计算完成后,浏览器在页面渲染元素。经过渲染引擎处理后,整个页面就显示出来

https://blog.csdn.net/jean_0920/article/details/100084233

https://www.cnblogs.com/WaTa/p/5477374.html

为什么最好把 CSS 的标签放在之间?为什么最好把 JS 的script标签恰好放在之前,有例外情况吗?

放在中:

标签放在之间是规范要求的内容。此外,这种做法可以让页面逐步呈现,提高了用户体验。将样式表放在文档底部附近,会使许多浏览器(包括 Internet Explorer)不能逐步呈现页面。一些浏览器会阻止渲染,以避免在页面样式发生变化时,重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

你可能感兴趣的:(面试,前端,#,H5C3,面试)