"前端最新面试题及答案附答案汇总"
面试题1:HTTP/HTTPS的区别与联系
HTTP(超文本传输协议)和HTTPS(安全超文本传输协议)是互联网上应用最为广泛的数据通信协议。HTTPS相比HTTP有以下关键区别:
1. 安全性:HTTPS在HTTP的基础上加入了SSL/TLS层,提供了数据加密、服务器身份验证和消息完整性校验,从而确保了通信的安全性。而HTTP协议中的数据是明文传输,容易被窃取或篡改。
2. 证书:HTTPS需要通过权威的证书颁发机构(CA)申请数字证书,通常免费证书较少,企业可能需要支付费用购买。HTTP则无需证书。
3. 端口号:HTTP使用80端口,HTTPS使用443端口,这是它们在网络层面上的一个明显区别。
4. 连接状态:HTTP协议是无状态的,即浏览器和服务器每次请求都是独立的,不保留任何状态信息。而HTTPS虽然也是无状态的,但通过SSL/TLS建立的连接可以提供一定程度的会话持久性。
面试题2:display、float、position的关系
在CSS布局中,display、float和position属性互相影响,共同决定了元素的显示方式和位置:
1. 如果display属性设置为none,元素将不被渲染,此时position和float属性都不会生效。
2. 当position的值为absolute或fixed,元素将脱离正常文档流,进行绝对定位,此时float的计算值变为none,display属性的值也会根据特定规则进行调整,比如转换为block或inline-block等。
3. 若元素设置了float,它会浮动并影响周围元素,display属性也会相应调整,例如display:block将使元素成为块级元素。
4. 对于根元素,display属性会根据特定的浏览器规则进行调整,以确保其正常显示。
5. 在其他情况下,display属性的值保持为设定值。
面试题3:JavaScript跨域方式
JavaScript的跨域问题通常出现在不同源之间,包括不同的域名、子域以及端口号。常见的跨域解决方案有:
1. JSONP(JSON with Padding):通过动态创建script标签,利用script标签没有跨域限制的特性,向服务器请求数据。服务器返回包裹在特定回调函数中的JSON数据,客户端调用这个回调函数处理数据。
2. CORS(Cross-Origin Resource Sharing):通过设置服务器响应头的Access-Control-Allow-Origin字段,允许特定源的请求访问资源。CORS支持多种HTTP方法,且安全性优于JSONP。
3. document.domain设置:对于同一主域名下的不同子域,可以通过设置document.domain相同来实现跨域,但这仅限于同源策略的子域限制。
4. window.postMessage:现代浏览器支持的一种安全的跨窗口通信方式,允许不同源的窗口之间发送消息,配合事件监听,可以实现跨域数据交换。
5. 代理服务器:通过设置代理服务器,将客户端请求转发至目标服务器,从而绕过浏览器的同源策略。
这些跨域技术各有优缺点,开发者应根据实际需求和兼容性考虑选择合适的方式。