zlcjc

html面试考点全面总结下篇

拿到 字节跳动实习生offer 总结

回馈分享一波自己的知识点总结

希望读者依此构建自己的知识树(思维导图)

偷懒一下:可参考我自己总结思维导图 : 点这里

附带:高频面试题积累文档。 来自于(学长、牛客网等平台)

自己开发的博客地址:zxinc520.com

github地址: 点击

此篇 html 共总结 22 大知识点: 全部弄懂了,面试很容易。

11、label标签

作用:用于定义表单控件的关系,点击时自动将焦点移至相关联的控件。

两个有用属性

  • for
    • 关联相关控件
    • 通过控件id关联
  • accessKey :设置访问快捷键 例如:accesskey="h"

注意 :该标签不能为 a和 button标签的后代

link :建议使用

@import :慎用 【会造成 “无样式内容闪烁”】

  1. 从属和作用
    • link是HTML提供的标签
      • 可以加载css
      • 可以定义 rel等属性(rel 属性规定当前文档与被链接文档之间的关系。) 【技巧:这里引申到 预加载知识:可以关注 Resource Hint 标准 --- 页面加载性能利器
    • @import是css提供的语法
      • 只有导入样式表的作用
  2. 加载顺序
    • link在页面加载时 css同时被加载
    • @import 引入的css需要等页面加载后再加载
  3. 兼容性问题
    • link是HTML提供的语法,没有兼容性问题
    • @import 是css2.1 提供的语法,ie5以上才兼容
  4. DOM可控性
    • js可以通过插入 link标签来改变样式
    • js不可以通过 @import去引入新的css文件来改变样式

13、target

属性作用:指定所连接的页面在浏览器窗口中的打开方式

属性
  • _self(默认值):在当前窗口打开
  • _blank: 在新窗口中打开
  • _parent : 在父级窗口打开
  • _top : 在顶级窗口打开

14、部分标签/属性区别

标签区别

  • title和h1
    • title :只表示是个标题
    • h1-h7
      • 表示层次明确的标题
      • 对页面信息的抓取有帮助
  • b与strong
    • b:展示为粗体
    • strong
      • 标明重点内容,有语气加强的含义u
      • 使用阅读设备时,会重读
  • i与em
    • i:展示为斜体
    • em:表示强调的文本

属性区别

  • src与href
    • src:引入 ; 将指定资源应用到文档内.
    • href:引用 ; 建立与当前文档之间的链接.
  • 【img】title 和 alt
    • title
      • 全局属性
      • 提供关于元素的额外信息
      • 鼠标移至显示
    • alt
      • 用于图片无法加载时显示
      • web Quality(无障碍)易访问的

15、Shadow DOM(影子 DOM)

是什么?

浏览器的一种能力 :渲染时插入独立的DOM树

特点?

  • 与原始DOM完全隔离
  • 具有自己的元素和样式

作用?

  • 封装需要隔离外部的文档细节/组件
  • 防止开发人员随意修改样式

使用方式?

  • Node1.attachShadow(Node2)
  • Node2.innerHTML = ....

16、浏览器的数据存储方式有哪些

分为三类来讲:

cookie 、localStorage 和 sessionStorage 、userData。

h5之前,存储主要用cookies,缺点是在请求头上带着数据,导致流量增加。大小限制4k

创建目的
  • 为了保持HTTP的状态
  • 为了识别用户信息而储存在本地上的数据
特点
  1. 可储存大小为4k
  2. 储存个数有限制(各浏览器不同)
  3. 有效时间在设置的cookie过期时间之前一直有效

localStorage 和 sessionStorage

创建目的:便于客户端储存数据

相同点
  • 都由HTML5 Web Storage API 提供
  • 在本地保存
  • 可储存大小5M以上
不同点
  • 有效时间不同
    • localStorage(以键值对(Key-Value)的方式存储)
      • 储存持久数据
      • 浏览器关闭后数据不丢失除非主动清除数据
    • sessionStorage
      • 数据在当前浏览器关闭后自动删除
  • 作用域不同
    • localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
    • sessionStorage不在不同的浏览器页面中共享,即使是同一个页面

安全性:需要注意的是,不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的,因为它们保存在本地容易被篡改,使用它们的时候,需要时刻注意是否有代码存在 XSS 注入的风险。所以千万不要用它们存储你系统中的敏感数据。

userData

特点
  • IE专属 :早期IE浏览器用来本地储存数据用的
  • 以文件的形式保存在磁盘上 :持久化储存方式
  • 可以设置失效日期
  • 可储存大小1MB左右

注意:使用IE条件注释来避免其它浏览器载入上述代码 <!--[if IE]><[end If]-- >

17、如何实现标签页面的通信

  1. 方法一 :使用localStorage

    • 使用 localStorage.setItem(key,value) 添加内容

    • 使用 Storage 事件监听添加、修改、删除的动作

      window.onstorage = (e) => {console.log(e)}
      // 或者这样
      window.addEventListener('storage', (e) => console.log(e)
  1. 方法二:使用cookie+setInterval

    • 将要传递的信息储存在 cookie 中
    • 每隔一定时间读取 cookie信息,获取要传递的信息
    • 具体描述 :1、在页面A设置一个使用 setInterval 定时器不断刷新,检查 Cookies 的值是否发生变化,如果变化就进行刷新的操作。 2、由于 Cookies 是在同域可读的,所以在页面 B 审核的时候改变 Cookies 的值,页面 A 自然是可以拿到的。这样做确实可以实现我想要的功能,但是这样的方法相当浪费资源。虽然在这个性能过盛的时代,浪费不浪费也感觉不出来,但是这种实现方案,确实不够优雅。
  1. 方法三 :websocket通讯(HTML5)

    • 定义:WebSocket是HTML5新增的协议,它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道,比如说,服务器可以在任意时刻发送消息给浏览器。
    • WebSocket连接必须由浏览器发起,特点
      • 建立在 TCP 协议之上,服务器端的实现比较容易。
      • 与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
      • 数据格式比较轻量,性能开销小,通信高效。
      • 可以发送文本,也可以发送二进制数据。
      • 没有同源限制,客户端可以与任意服务器通信。
      • 协议标识符是ws(如果加密,则为wss),服务器网址就是
  1. SharedWorker(html5浏览器的新特性SharedWorker)

    • 本质还是单线程,只是利用了浏览器不同JS引擎
    • 必须在服务器上才跑得动
    • IE未兼容

18、谈谈cookie和session的区别

共同点:记录用户状态

区别:

  • 什么是 Cookie?

    HTTP Cookie(也叫 Web Cookie或浏览器 Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

  • 采用的是在客户端保持状态的方案 : 即运行在客户端

  • 有大小限制,存储个数有限

  • 有安全隐患 :通过某些手法可以篡改本地储存的信息来欺骗客户端

  • 支持跨域名访问

session
  • 什么是 Session?

    Session 代表着服务器和客户端一次会话的过程。Session 对象存储特定用户会话所需的属性及配置信息。这样,当用户在应用程序的 Web 页之间跳转时,存储在 Session 对象中的变量将不会丢失,而是在整个用户会话中一直存在下去。当客户端关闭会话,或者 Session 超时失效时会话结束。

  • 采用的是在服务端保持状态的方案: 即运行在服务端

  • 没有大小限制和服务器内存大小有关

  • 过多会增加服务器压力

  • 仅在他所在的域名内有效

cookie和session流程介绍

1、用户第一次请求服务器的时候,服务器根据用户提交的相关信息,创建创建对应的 Session ,请求返回时将此 Session 的唯一标识信息 SessionID 返回给浏览器,浏览器接收到服务器返回的 SessionID 信息后,会将此信息存入到 Cookie 中,同时 Cookie 记录此 SessionID 属于哪个域名。

2、当用户第二次访问服务器的时候,请求会自动判断此域名下是否存在 Cookie 信息,如果存在自动将 Cookie 信息也发送给服务端,服务端会从 Cookie 中获取 SessionID,再根据 SessionID 查找对应的 Session 信息,如果没有找到说明用户没有登录或者登录失效,如果找到 Session 证明用户已经登录可执行后面操作。

3、根据以上流程可知,SessionID 是连接 Cookie 和 Session 的一道桥梁,大部分系统也是根据此原理来验证用户登录状态。

  • 第一种方案,每次请求中都携带一个 SessionID 的参数,也可以 Post 的方式提交,也可以在请求的地址后面拼接 xxx?SessionID=123456...。

  • 第二种方案,Token 机制。Token 机制多用于 App 客户端和服务器交互的模式,也可以用于 Web 端做用户状态管理。

    Token 的意思是“令牌”,是服务端生成的一串字符串,作为客户端进行请求的一个标识。Token 机制和 Cookie 和 Session 的使用机制比较类似。

    当用户第一次登录后,服务器根据提交的用户信息生成一个 Token,响应时将 Token 返回给客户端,以后客户端只需带上这个 Token 前来请求数据即可,无需再次登录验证。

18.2、如何考虑分布式 Session 问题?

  • 在互联网公司为了可以支撑更大的流量,后端往往需要多台服务器共同来支撑前端用户请求,那如果用户在 A 服务器登录了,第二次请求跑到服务 B 就会出现登录失效问题。
  • 分布式 Session 一般会有以下几种解决方案
    • Nginx ip_hash 策略,服务端使用 Nginx 代理,每个请求按访问 IP 的 hash 分配,这样来自同一 IP 固定访问一个后台服务器,避免了在服务器 A 创建 Session,第二次分发到服务器 B 的现象。
    • Session 复制,任何一个服务器上的 Session 发生改变(增删改),该节点会把这个 Session 的所有内容序列化,然后广播给所有其它节点。
    • 共享 Session,服务端无状态话,将用户的 Session 等信息使用缓存中间件来统一管理,保障分发到每一个服务器的响应结果都一致。

18.3、cookie和session各自优势

  • 极高的扩展性和可用性
  • 不需要使用大量服务器资源
  • 简单性 Cookie是一种基于文本的轻量结构,包含简单的键值对,结构简单。
session
  • 易于读写
  • 易于站点的用户化

18.4:cookie和session常见攻击方式及解决方案

  • 具体
    • 直接访问Cookie文件查找想要的机密文件
    • 进行Cookie信息传递时被截取
    • 攻击者伪造Cookie信息,客户端获取后进行操作
  • 解决方案
    • 不要早Cookie中保存敏感信息
    • 不要早Cookie中保存没有经过加密的或者容易被解密的敏感信息
    • 对从客户端获取得的Cookie信息进行严格校验
session
  • 具体
    • 会话劫持(通过获取用户 Session ID 后,使用该 Session ID 登录目标账号)
    • 会话固定(诱骗受害者使用攻击者指定的会话标识 Session ID 的攻击手段)
  • 解决方案
    • 使用 User-Agent 检测请求的一致性,设置HttpOnly,可以防止客户端脚本访问这个Cookie,从而有效的防止XSS攻击;关闭透明化Session ID;更改Session名称
    • 用户登录时生成新的 Session ID

19、谈谈对WebSocket的认识

创建原因:HTTP协议只能由客户端发起 单向连接

19.1、是什么?

  • HTML5中的协议,支持持久连接
  • WebSocket是基于HTTP协议的 : 借用了Http协议来完成一部分握手
  • 是真正意义上的双向绑定

19.2、WebSocket区别 http 协议

  • http协议 不支持持久性连接
  • HTTP1.1 中出现 keep-alive,合并多个http请求
  • HTTP的生命周期通过Request来界定 : 一个Request对应一个Response
  • Response是被动的,不能主动发起

19.3、如何模拟双向通信

  • 短轮询
    • 客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。
    • 优点 : 后端编写容易
    • 缺点 : 请求中大半是无用,浪费宽带和服务器资源
    • 适用 : 小型应用
  • 长轮询
    • 客户端向服务器发送Ajax请求,服务器接到请求后 hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。
    • 优点 :在无消息的情况下不会频繁的请求,耗费资源小
    • 缺点
      • 服务器hold连接会消耗资源
      • 返回数据顺序无保证,难于管理维护
  • 长连接
    • 在页面嵌入一个隐藏iframe,将这个隐藏iframe的src属性设为对一个长连接的请求或是采用 xhr请求,服务器端就能源源不断的往客户端输入数据
    • 优点
      • 消息及时到达,不发无用请求
      • 管理起来也相对方便
    • 缺点:服务器维护一个长连接会增加开销

20、渲染 | 了解网页渲染流程与优化技巧

20.1、生成网页步骤

  • HTML代码转成DOM(Document Object Model): 解析HTML生成
  • CSS代码转化成CSSOM(CSS Object Model): 解析CSS生成
  • 结合DOM和CSSOM生成一颗渲染树: 包含每个节点的视觉信息
  • 生成布局(layout): 将所有渲染树的所有节点进行平面合成
  • 将布局绘制(paint)在屏幕上

20.2、重新渲染 (重排【回流】和重绘)

重排(回流)

重新生成布局

布局改了就一定会重排
  1. 添加或删除可见的DOM元素
  2. 元素位置改变
  3. 元素尺寸改变——边距、填充、边框、宽度和高度
  4. 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;
  5. 页面渲染器初始化
  6. 浏览器窗口尺寸改变——resize事件发生时;

重排一定需要重绘

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 重绘
s.backgroundColor = "#ccc"; // 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));// 添加node,再一次 回流+重绘

重绘

只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。

重新渲染出现情况

  • 修改DOM
  • 修改样式表
  • 用户事件
    • 鼠标悬停
    • 页面滚动
    • 输入框输入文字
    • 改变窗口等

21、性能优化技巧

回答性能优化问题时:分两层阐述:

1、底层:重排【回流】和重绘层级 --- 下面针对此层

2、应用层(雅虎军规35条)--- 在性能优化专题会仔细分析。

21.1、减少重新渲染频率

  1. DOM的多个读/写操作应该放在一起。

    • 不要两个读操作之间,加入一个写操作
  2. 如果某个样式是通过重排得到的,那么最好缓存结果。避免下一次用到的时候又要重排

  3. 不要一条条地改变样式

    • 通过改变class,csstext,一次改变样式
  4. 尽量使用离线DOM,而不是真实的网页DOM,来改变元素样式

    • 例如

      • 操作Document Fragment 对象

      • cloneNode 克隆节点操作后替换

  5. 使用虚拟DOM的脚本库,比如React,vue等

  6. 很新颖(嘻嘻)

    • 设为dispaly:none(需要一次重排和重绘)后进行n次操作,最后再恢复显示(需要一次重排和重绘)
    • 用两次重新渲染,取代了可能n(可能是个大树)次的重新渲染
    • 只有在必要的时候,才将元素的display属性为可见
    • visibility:hidden 的元素只对重绘有影响,不影响重排
    • 隐藏后不可见的元素读写不影响重排和重绘
  7. 使用调整重新渲染的方法 : 可以大幅度提高网页性能

    • 使用 window.requestAnimationFrame()方法
      • 作用:将某些代码放到下一次重新渲染时执行
      • 适用
        • 页面滚动事件的监听函数
        • 网页动画
    • 使用 window.requestdleCallback()方法
      • 暂时就 Chrome 支持

21.2、减少渲染成本

  • position属性为absolute或fixed的元素,重排的开销会比较小

    因为它们脱离文档,不用考虑他们对其他元素的影响,所以用absolute,而少用float

22、HTML5概括

HTML(超文本标记语言 HyperText Markup Language)的最新本版本

新增特性

  1. 语义化元素 推荐使用

  2. 新的通讯方式

    • WebSockets
    • 重新绘制界面 布局没改,样式改了,需要重绘,不一定重排
  3. 缓存

    • 应用程序缓存
      • 使用方式
        • <html manifest="demo.appcache" >
        • manifest 文件的建议的文件扩展名是:".appcache"
      • 优点
        • 离线浏览 - 用户可在应用离线时使用它们
        • 更快速度 - 已缓存资源加载得更快
        • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
    • 浏览器缓存
      • Web Storage
        • localStorage
        • sessionStorage
  4. 多媒体

    • audio
    • video
  5. 3D & 图像

    • canvas
    • WebGL:用canvas元素中的 API 实现 3D图像功能
    • svg :基于XML 直接嵌入到 HTML 中的矢量图形格式
  6. 性能 & 集成

    • Web workers

      Web Worker 是为了解决 JavaScript 在浏览器环境中没有多线程的问题。正常形况下,浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态,而HTML5的Web Worker就是为了解决这个问题,提升程序的执行效率。 所以Web Worker 的最佳使用场景是执行一些开销较大的数据处理或计算任务。

    • web worker的创建

      • worker是一个对象,通过构造函数Worker创建,参数就是一个js文件的路径;文件中的js代码将运行在主线程之外的worker线程;
      • 例如:var myWorker = new Worker('worker.js');
    • History API :允许对浏览器历史记录进行操作

    • XMLHttpRequest Level 2((XHR)对象可以与服务器交互。)

      新版本功能:

      • 可以设置HTTP请求的时限
      • 可以使用FormData对象管理表单数据。
      • 可以上传文件。
      • 可以请求不同域名下的数据(跨域请求)
      • 可以获取服务器端的二进制数据
      • 可以获得数据传输的进度信息

      老版本的缺点:

      • 只支持文本数据的传送,无法用来读取和上传二进制文件。
      • 传送和接收数据时,没有进度信息,只能提示有没有完成。
      • 受到"同域限制"(Same Origin Policy),只能向同一域名的服务器请求数据。
    • contentEditable

      • 让元素的区域可编辑
      • 已标准化
    • requestAnimationFrame : 允许控制动画渲染以获得更优性能

    • 拖放 API draggable属性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer对象

    • 全屏 API

    • 在线和离线事件

  7. 设备访问

    • carnera :能够操作计算机的摄像头
    • 地理位置定位 Geolocation
    • 触控事件
    • 检测设备方向 :横向还是竖向
精彩评论:
上一页 下一页