深圳网站设计设计,wordpress 在线联系,提供微网站制作网络公司,宝安建网站公司前端面试-HTML篇 什么是http?http和https有什么区别https的加密过程?http2.0有什么改进?src和href的区别对html语义化标签的理解?script标签中defer和asyc的区别?举出几个常见的行内、块级元素什么是webworker#xff1f;iframe的优缺点#xff1f;介绍一下tcp三次握手f… 前端面试-HTML篇 什么是http?http和https有什么区别https的加密过程?http2.0有什么改进?src和href的区别对html语义化标签的理解?script标签中defer和asyc的区别?举出几个常见的行内、块级元素什么是webworkeriframe的优缺点介绍一下tcp三次握手fetch等某些请求会发送两次请求的原因?浏览器缓存机制在浏览器输入url到渲染页面的过程get和post的区别对于跨域的理解.以及如何解决form表单可以跨域吗? 为什么 4.22记录 什么是http?
http 是超文本传输协议,它是一个浏览器和服务器之间必须遵守的一个标准. 它是一个无状态的应用层协议 所谓的无状态就是协议对于事物处理没有缓存, 在一次请求和返回数据的过程中不会缓存任何信息. 也就是说对于第二次请求获取同样的数据也需要重新发起请求,重新获取数据.
http和https有什么区别
Https是基于http的基础上加上了ssl/tls安全协议的一个安全版本的超文本传输安全协议. Https的默认端口是443 http的默认端口是80 Https需要ca证书 费用较高 Https建立连接的开销更大 Https网站更有利于SEO,在浏览器中排名更高
https的加密过程?
首先由浏览器发起请求 客户端收到请求返回公钥 浏览器验证公钥的有效性 验证通过之后会生成一个对称密钥 浏览器使用公钥加密对称加密密钥发送给服务器 服务器使用私钥解密密钥得到对称密钥 然后双方使用对称密钥来加密解密和传输信息
http2.0有什么改进?
最大的改进是二进制分帧, 它可以把一次请求拆分成很小的数据包,多个请求可以拆分成多个数据包进行传输.然后由服务端根据数据包的index进行拼接,得到每一个完整的请求,这也是http2.0实现多路复用的基础.也就是基于一次连接同时发送多个请求.
还有一个头部压缩算法, 在http1.0中可以将请求体通过GZIP压缩来达到减少体积的目的,其实在日常开发中可以看到每个请求的请求头是很多很大的,而且一般来说请求头都不会变.http2.0会基于每个请求头字段建立一个hash表,如果头部字段不变,则只会传递请求头的hash序号.
还有一个服务器端推送 但是区别于websocket http2.0的服务器端推送又有一定的局限性,比如请求一个html结构,然后就是请求html对应的css资源,js字段等,然后又会重新发送请求,而http2.0就会预判这类请求并主动推送.
src和href的区别
Src是加载对应的资源到文档对应的位置,是一个引入的关系,这个过程中会阻塞其他资源的加载.直到当前资源加载完成. Href是在当前文档和目标资源中间建立一个链接,是一种引用的关系.不会阻塞其他资源的加载过程. 这就是为什么在html结构中我们可以把js资源放在页面尾部,css资源放在页面顶部来实现性能优化.
对html语义化标签的理解?
通俗的来说就是根据内容来选择合适的标签,而不是一味的选择 div 去开发. 主要的好处 第一, 是代码结构更加清晰明了, 第二 语义化标签更容易做SEO 主要的语义化标签 header、nav、aside、main、footer等等
3、html中docType的作用 它的主要作用是告诉浏览器以一种什么标准去解析html结构.主要有两种方式. 第一种是标准模式 css1combat,它是规定以浏览器支持的最高标准去解析html. 第二种是兼容模式 backupcombat,它是以一种向后兼容的模式去解析html.
script标签中defer和asyc的区别?
因为script资源的加载会阻塞浏览器构建dom,两者都是为了异步加载js资源的标签属性,两者的不同点在于async会加载之后马上执行,script的执行顺序和编码顺序无关,defer会在加载完成之后,页面渲染完成之后再执行,是有序的 defer(推迟)异步加载 推迟执行 async(异步) 异步加载
举出几个常见的行内、块级元素
行内 span、img、a(link标签)、b(强调标签)、input 块级标签 div、ul、li、h系列标签、p标签
什么是webworker
由于js是单线程的特性在执行一些高开销或者搞延迟的任务时容易造成页面渲染阻塞webworker是一种独立于主线程的之外的独立运行js线程。可以单独去执行一些高开销的任务然后将结果传回主线程。webworker并不是说js就具备了多线程的能力只是浏览器提供了一个多线程的环境去给js执行任务。
iframe的优缺点
iframe是一种在文档中内嵌其他文档内容的一个原生的h5标签。 他的优势是其实没啥优势主要是它的能力赋予了它一定的适用场景 比如他形式的特殊性可以用来嵌入网页广告。 第二个是它可以和主页面通信所以可以用来做微前端解决方案比如腾讯开源的无界方案就是基于iframe的。
缺点 iframe的结构不利于浏览器做SEO。 主页面的onload事件会等所有iframe的onload执行之后才执行所以iframe会阻塞主页面的onload事件 irame和主页面共享连接池浏览器对相同域的并行请求有数量限制所以iframe会影响主页面的并行请求数量。
介绍一下tcp三次握手
浏览器和服务器建立可靠连接之前需要发送三个请求包,第一个由浏览器发送给服务器,证明浏览器有正常发送请求包的能力,服务器收到返回响应包,证明服务器有正常响应和发送请求包的能力,最后浏览器收到响应包,证明浏览器也有正常响应请求的能力,通过三个请求包来确保双方都有建立可靠连接的能力.
fetch等某些请求会发送两次请求的原因?
一般会在跨域的情况发生除了get之外的一些复杂请求,浏览器会先发送一个options请求来确认服务端是否有处理其真正请求的能力再发送真正的请求.
浏览器缓存机制
浏览器在发送请求之前会检查请求头字段中的expire字段来判断是否使用本地缓存,如果没有过期的话则使用本地缓存,状态码为200.如果没有命中本地缓存则发送请求到服务器,由服务器判断协商缓存相关参数etag,last- modified,如果使用缓存就返回304状态码,如果没有命中缓存就返回最新的数据同时写入本地缓存.
在浏览器输入url到渲染页面的过程
首先将URL通过DNS解析成对应的IP地址,然后向此ip地址发送三次握手建立连接,向服务器发送请求获取响应数据,根据响应数据构建dom树和css对象模型树,然后加载页面所需要的静态资源完成页面渲染.
get和post的区别
Get请求是将参数拼在url上,有长度限制,而且明文的,不太安全 post请求通过requestbody传输,安全性较高
对于跨域的理解.以及如何解决
跨域是浏览器的一个安全策略,如果请求接口和当前url的协议,域名、或者端口不同则视为跨域,请求发到跨域的服务端会报出跨域错误.
常见的跨域配置有 jsonp,它是利用某些html标签不受同源政策限制的特性来实现跨域的 Cros跨域,服务端设置相应头 accept-control-allow-origin实现跨域 postmessage实现iframe跨域 Nginx配置代理跨域
form表单可以跨域吗? 为什么
答 可以, form表单是提交到其他域,但是不能拿到其他域的数据,浏览器认为这是安全的,而ajax请求是可以拿到其他域的响应数据的,所以是受同源政策限制的.
