web热门前端面试题 / Html/ Css / javascript / jquery /总结

Html篇

问题一

1. 什么是标准的CSS的盒子模型

盒子模型就是 元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型
标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin
宽高指的是 content 的宽高
IE盒子模型：内容（content+padding+border）+ 边界margin，
宽高指的是 content+padding+border 部分的宽高

1. 什么是CSS3 的 flexbox（弹性盒布局模型）
   flex实现快速布局；flex区分容器和容器成员；flex容器成员的排列有X轴（主轴）和Y轴（交叉轴）；RN默认使用flex布局；
   弹性盒子属性
   flex-direction
   flex-wrap
   flex-flow
   justify-content
   align-items
   align-content
   使用
   flex-direction: row | row-reverse | column | column-reverse;

3.position的比较
absolute 相对于第一个不是static定位的父级的绝对定位
relative 生成相对定位的元素，相对于其正常位置进行定位。
fixed 相对与浏览器窗口的绝对定位
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 继承父级的定位方式

问题二

1. 兼容问题:

遇到过哪些兼容问题
不同浏览器的标签默认的外补丁和内补丁不同
*{margin:0;padding:0;} 来统一；

块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
用display:inline;

设置较小高度标签（一般小于10px），在IE6，IE7，高度超出自己设置高度
给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
在display:block;后面加入display:inline;display:table;

图片默认有间距
使用float属性为img布局

1. 不同分辨率屏幕上下左右居中：

设置div宽高，使用绝对定位上左各50%然后设置左边距-100px
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-100px;
height:-100px;
z-index:1000;

高度和行高一致文字图片同时上下居中
height：100
line-height：100
vertival-align：middle

利用CSS的margin设置为auto让浏览器自己水平和垂直居中
position: absolute;
left: 0px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 200px;
width: 300px;
或者用边距 margin: 0 auto;

1. css新增属性有哪些

圆角边框border-radius
盒子阴影box-shadow
背景尺寸 background-size
文字阴影text-shadow box-sizing
旋转transform:rotate(30deg);
边框图片border-image
自动换行word-wrap:break-word;

JavaScript篇/jQuery

问题三

1. js五种基本类型:

Undefined、Null、Boolean、Number和String。

2. = = =和= =和equals

在= = 仅检查值相等，而“===”是一个更严格的等式判定，如果两个变量的值或类型不同，则返回false。
== 是运算符 equals 是方法 方法可以被重写

3，null，undefined 的区别？

null 表示一个对象被定义了，值为“空值”；

undefined 表示不存在这个值。

4.怎么做懒加载？
给页面中img标签设定自定义属性data-original,用来存放真正的img源URL，
给所有img的src属性设定为一张静态图片或者不设置
监听窗口滚动scroll事件，遍历图片计算图片是否出现在浏览器可视窗口内
当图片出现在视窗中时再给他赋予真实的图片地址，这样可以保证首屏的加载速度然后按需加载图片。

5.怎么优化页面？
删除重复脚本，减少DSN查找
html别嵌套太多层，加重页面layout的压力；
css选择器的合理运用，减少匹配的计算量；
js中别滥用闭包，会加深作用域链，增加变量查找时间；减少http请求之类的等等；

6.jQuery this与this区别
.this代表标签对象，只能调用标签本身的属性和方法；$(this)是Jquery对象，调用的是由Jquery封装的方法或属性。

问题四

3. $ .get()提交和$.post()提交****
get多用于查询，post多用于提交。
get 和post的机制类似，都包含请求头和请求体。
其中get提交一次，一次携带完请求头和请求体 ；post分为两次提交，最后获得response返回值。
他们的区别仅在于，浏览器对它们的解析方式不一样。

相同点：都是异步请求的方式来获取服务端的数据；
异同点：1、请求方式不同：
$.get() 方法使用GET方法来进行异步请求的。
$.post() 方法使用POST方法来进行异步请求的。

2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多

4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

4. sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器端存储的缓存数据

不同点：(1)、存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费； storage,会将数据保存到本地，不会造成宽带浪费；

(2)、数据存储的有效期限不同：cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

(3)、数据存储大小不同：Cookie数据不能超过4K,适用于会话标识；web storage数据
存储可以达到5M;

(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

5. 闭包类
闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收，如果过多使用闭包，
容易导致内存泄露
怎么创建闭包
在函数内部嵌套使用函数

闭包的好处
(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)
(2)避免全局变量的污染
(3)私有成员的存在
(4)安全性提高

闭包的缺点
可能导致内存占用过多,因为闭包携带了自身的函数作用域
闭包只能取得外部包含函数中得最后一个值

问题六

1. AJAx类
   解释使用js实现AJAX的工作原理。
   (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
   (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
   (3)设置响应HTTP请求状态变化的函数
   (4)发送HTTP请求
   (5)获取异步调用返回的数据
   (6)使用JavaScript和DOM实现局部刷新

同步和异步的区别?
同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。

异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

请求ajax的参数详解
url, type, timeout 毫秒 , async 设置请求, baforeSend 发送请求参数
data 发送到服务器的数据
datatype 预期服务器返回的数据类型 error
global 是否出发全局ajax事件
success发送的数据讲被转换为对象

ajax的步骤**
1.创建XMLHttpRequest对象，也就是创建一个异步调用的对象。

2.创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息。

3.设置响应HTTP请求状态变化的函数。创建HTTP请求后，就可以将HTTP请求发送给Web服务器了。

4.发送HTTP请求。发送HTTP请求可以使用XMLHttpRequest对象的send()方法。

5.获取异步调用返回的数据。

6.使用javaScript和DOM实现局部刷新。

如何解决跨域问题?
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

问题七

计算类
如何用原生js给一个按钮绑定两个onclick事件？
创建节点，然后绑定多个事件
Var btn=document.getElementById(‘btn’);

//事件监听 绑定多个事件

var btn4 = document.getElementById(“btn4”);

btn4.addEventListener(“click”,h1);

btn4.addEventListener(“click”,h);

js数组去重
方法一：用sort() 然后相邻比较也可以实现
方法二：
var arr = [‘1’,‘2’];
//定义一个新的数组

var sb = [];
//遍历数组

for(var i = 0;i<arr.length;i++){

if(sb.indexOf(arr[i]) == -1){ //判断在s数组中是否存在，不存在则push到s数组中

sb.push(arr[i]);
}
}

console.log(sb);
//输出结果

• 点赞
• 收藏
• 分享
• 文章举报

A__1Pink 发布了3 篇原创文章 · 获赞 0 · 访问量 102 私信 关注