JS面试题（复杂）

最新推荐文章于 2024-05-30 23:18:40 发布

LYHappy&

最新推荐文章于 2024-05-30 23:18:40 发布

阅读量301

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46316234/article/details/111002616

版权

1.输入url敲回车发生了什么

域名解析 → 三次握手 → 发起HTTP请求 → 响应HTTP请求并得到HTML代码 → 浏览器解析HTML 代码 → 浏览器对页面进行渲染呈现给用户

2.Ajax 是什么? 如何创建一个 Ajax？

AJAX 是一种用于动态创建网页的局部刷新技术.

创建ajax:

创建一个XMLHttpRequest的对象.
通过open(get,url,true)与服务器建立连接。
使用send() 来发送请求。
使用onreadystatechange事件来监听。
使用responseText来获取服务器返回的数据

拓展：XMLHttpRequest是什么？

是异步对象

3.什么是同源策略？请写出跨域访问数据方式（至少4种）

a.同源策略又名同域策略，就是协议名和主机名和端口号三者相同。
b.跨域访问数据方式:

JSONP方式
基于CORS实现跨域Ajax
使用HTML5 的window.postMessage 方法，支持跨域访问
降域：思路是让不同源的变成同源。

拓展 : 怎样让不同源变成源

答 : 就是让协议号主机号端口号三者相同

4.swiper在html里的基本结构？(新增题目)

 <div class="swiper-container"> 
 	<div class="swiper-wrapper"> 
 		<div class="swiper-slide">1</div> 
 		<div class="swiper-slide">2</div> 
 	</div> 
 </div>

5.移动端和PC端有什么区别？

1、界面布局。

移动端屏幕相对窄小，一般是单列显示，最多也只能是双列+响应式
但是PC端的屏幕大，布局可以更加灵活。

2、使用习惯。

移动端的操作尺度比较大，单击误差大，所以按钮、链接等元素比较设计的大一些。
而PC端的操作尺度比较小，用鼠标单击是一件比较准确的事情，所以在设计按钮或者链接等样式时可以稍微小一些。

3、网络速度。

手机的网络一般是2G\3G\4G\WIFI等，网页的加载速度会影响用户的体验，需要消耗用户的流量
而PC的网络一般是连接宽带或者WIFI，PC端的用户一般不会考虑页面消耗的流量。

4、技术层面。

PC应用更关注的是后台、大数据、算法类的
而移动端更关注的是如何更好地交互和体验。

6.CSS3怎么指定盒子模型为标准盒模型与怪异盒模型？它们的具体区别？（标准盒模型与怪异盒模型下盒子各自高度与宽度怎么算）

1.
	box-sizing  //属性可以指定盒子模型种类
	content-box  //指定盒子模型为W3C9  (标准盒模型)
	border-box  //为IE盒子模型 (怪异盒模型)
2.
	//在宽度和高度之外绘制元素的内边距和边框。
	box-sizing: content-box; 
	//在宽度和高度之内绘制元素的内边距和边框。
	box-sizing: border-box;

7.简述sass和less的区别

sass是基于ruby编译的,less基于nodejs编译
sass有@extend用作继承，而less没有
sass有@if @else 判断，less没有
sass用$符号定义一个变量，less用@符号定义一个变量
sass支持@for循环，less则不支持

拓展(与一般题合并提问)：1.Sass 、LESS 是什么?为什么要使用sass和less sass和less都是 CSS 预处理器，最终编译成 CSS。
使用sass/less的好处：

结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。

8.如何动态的设置 rem

function rem(){
	document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5 +”px”
}
	rem()
	window.onresize=rem;

9.如何实现移动端分辨率适配

因为手机屏幕的分辨率大小不一，如果使用传统的静态布局，把每个元素的宽高样式写死，在不同的屏幕中就有各种各样的显示效果。
而我们需要使不同的手机分辨率下都有相同的样式布局
解决方法：
1. rem适配
2. viewport适配
3. vw和vh适配
4. %百分比适配

10.请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景

弹性盒子布局目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。

试用场景：

弹性布局适合于移动前端开发，在Android和ios上也完美支持。

11.什么是响应式设计？响应式设计的基本原理是什么(面试题)？

响应式网站设计(Responsive Web design)的理念是：

集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

基本原理:

媒体查询 @media,对不同的设备设置不同的css样式

拓展：1.响应式能做什么事情？

智能地根据用户行为以及使用的设备环境进行相对应的布局，比如在pc端是一排4个布局，在移动端可能是一排两个进行布局（被挤下去了）。

12.写出弹性盒模型中所有的属性，并解释什么意思

13.常见请求头格式：Content-type 的值有哪些，各自的使用场景是什么（面试题）

display:flex;设置弹性盒子 flex-direction:column | row 设置弹性盒子方向 flex-wrap:wrap 设置自动换行 justify-content:space-around，剩余空间分配 align-items:center 设置对齐方式 text/html ： HTML格式 text/plain ：纯文本格式 text/xml ： XML格式 image/gif ：gif图片格式 image/jpeg ：jpg图片格式 image/png：png图片格式

14.socket中TCP的三次握手建立连接

答：客户端发送请求到服务器，建立连接， 
	其中需要三次握手，第一次发送请求头信息过去， 
	第二次服务器接收到请求头确认客户端发出一个响应头 
	第三次客户端收到响应头，确定服务器信息，可以发送请求到服务器

15.手写原生ajax；

 var xhr=new XMLHttpRequest() 
 xhr.open("get"，url,true) 
 xhr.send() 
 xhr.onreadystatechange=function(){ 
 	if(xhr.readystate==4 && xhr.status==200){ console.log(xhr.responseText) 
 	} 
 }