2019前端常见面试题——html

最新推荐文章于 2023-11-01 09:30:03 发布

plusyyyy

最新推荐文章于 2023-11-01 09:30:03 发布

阅读量79

点赞数

分类专栏：面试题文章标签： html

本文链接：https://blog.csdn.net/plusyyyy/article/details/114971081

版权

面试题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端性能优化

减少请求数量减小资源大小优化网络连接优化资源加载减少重绘回流性能更好的API webpack优化

常见状态码

100：这个状态码是告诉客户端应该继续发送请求，这个临时响应是用来通知客户端的，部分的请求服务器已经接受，但是客户端应继续发送求请求的剩余部分，如果请求已经完成，就忽略这个响应，而且服务器会在请求完成后向客户发送一个最终的结果
200：这个是最常见的http状态码，表示服务器已经成功接受请求，并将返回客户端所请求的最终结果
202：表示服务器已经接受了请求，但是还没有处理，而且这个请求最终会不会处理还不确定
204：服务器成功处理了请求，但没有返回任何实体内容，可能会返回新的头部元信息
301：客户端请求的网页已经永久移动到新的位置，当链接发生变化时，返回301代码告诉客户端链接的变化，客户端保存新的链接，并向新的链接发出请求，已返回请求结果
404：请求失败，客户端请求的资源没有找到或者是不存在
500：服务器遇到未知的错误，导致无法完成客户端当前的请求。
503：服务器由于临时的服务器过载或者是维护，无法解决当前的请求

websocket

   1,WebSocket就很好的解决被动性问题,只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。不用再次发起网络请求,服务端有消息就会自己发过来.它允许服务端主动向客户端推送数据。比如在app上websocket获取并展示客户的时时消费情况.

    2,WebSocket同HTTP一样也是应用层的协议. 都是基于TCP的，可靠性的传输协议。但是它是一种双向通信协议，是建立在TCP之上的,并且Websocket是一个持久化的协议，而HTTP是非持久化的协议。WebSocket protocol 是HTML5一种新的协议,但Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手。一开始的握手需要借助HTTP请求完成。 

    3,WebSocket在建立握手时，通过 HTTP/1.1 协议的101状态码进行握手。但是建立之后，在真正传输时候是不需要HTTP协议的,而是使用TCP协议.

    4,Websocket使用ws或wss的统一资源标志符，类似于HTTPS，其中wss表示在TLS之上的Websocket

   5,Websocket使用和 HTTP 相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，Websocket协议使用80端口；运行在TLS之上时，默认使用443端口。
   6,优点:
实时性更强,很好的控制开销(协议的头部较小),保持连接.

h5的新特性

语义标签：header footer nav aside
表单
音频 audio 视频video
canvas绘画
geolocation 定位
localstorage：长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除
websockt 消息推送
Drag 与Drop 拖放

一次完整的HTTP事务是怎样的一个过程？
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户

浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

行内元素有哪些？块级元素有哪些？空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

说几条XHTML规范的内容(至少3条)
所有的标记都必须有一个相应的结束标记
所有标签的元素和属性的名字都必须使用小写
所有的xml标记都必须合理嵌套
所有的属性值都必须用引号“”括起来
所有的<和&特殊符号用编码表示
给所有属性赋一个值
cookie、localStorage、sessionStorage之间的区别
他们都是保存在浏览器端的存储方式，他们之间的区别：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器页面中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便，cookie的原生接口不友好，需要自己封装。

DOM 事件有哪些阶段？谈谈对事件代理的理解
分为三大阶段：捕获阶段–目标阶段–冒泡阶段
事件代理简单说就是：事件不直接绑定到某元素上，而是绑定到该元素的父元素上，进行触发事件操作时(例如’click’)，再通过条件判断，执行事件触发后的语句(例如’alert(e.target.innerHTML)’)
好处：(1)使代码更简洁；(2)节省内存开销

ES6 的 class 和构造函数的区别
class 的写法只是语法糖，和之前 prototype 差不多，但还是有细微差别的，下面看看：

严格模式
类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。
不存在提升
类不存在变量提升（hoist），这一点与 ES5 完全不同。
class 必须使用 new 调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用 new 也可以执行。
ES5 和 ES6 子类 this 生成顺序不同
ES5 的继承先生成了子类实例，再调用父类的构造函数修饰子类实例。ES6 的继承先生成父类实例，再调用子类的构造函数修饰父类实例。这个差别使得 ES6 可以继承内置对象。
ES6可以继承静态方法，而构造函数不能