前端面试题
请简单描述html、css、js(2分)
1.1:html是超文本标记语言,是用来描述网页的一种语言
1.2:CSS是层叠样式表,用于对HTML的元素进行渲染,美化页面
1.3:JavaScript是一种脚本语言,是单线程的。源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。可用来实现网页上的交互。
js有哪些数据类型(3分)
基本数据类型: String、Number、Boolean、Null、Undefined。
引用数据类型:Object、Array、Function。
如何判断一个变量是array还是object(代码)(3分)
定义一个数组
var test_array = [];
使用isArray方法判断是否为array
Array.isArray(test_array) === ture
instance of
简单描述下DOM事件流(3分)
DOM事件规定的事件流包括三个阶段:
事件捕获阶段、处于目标阶段和事件冒泡阶段。
Dom事件流同时支持两种事件模型捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。
请写出下面代码输出的值以及为什么(3分)
var a = ‘a’;
var b;
a = b || a;
console.log(a);
输出a,因为b为undefined转化为数值是0,在||运算中如果前面的数为0,则返回后面的数。
将"2020/9/9 下午5:17:06"转化为"2020年9月9日 下午5:17:06"(代码)(5分)
var oldTime = (new Date(“2020/9/9 下午5:17:06”)).getTime();
var curTime = new Date(oldTime).format(“yyyy年-MM月-dd日 下午5:17:06”);
console.log(curTime);
请根据标准数组对新数组进行排序(代码)(5分)
var standard_array = [‘one’, ‘two’, ‘three’, ‘four’];
var new_array = [‘three’, ‘one’, ‘four’];
var standard_array = [‘one’, ‘two’, ‘three’, ‘four’];
standard_array.splice(1,2);
standard_array.unshift(“there”)
var new_array = standard_array;
console.log(new_array)
写出下面代码的输出,并且修改for循环中的代码使输出为:0、1、2、3。(5分)
for(var i=1; i<=3; i++){
setTimeout(function(){
console.log(i);
}, 100);
};
console.log(0)
输出 0 4 4 4;因为声明了var全局变量,只需把var改成ES6新增的变量let即可
for(let i=1; i<=3; i++){
setTimeout(function(){
console.log(i);
}, 100);
};
console.log(0)
实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制(12分)
Object.prototype.clone=function(){
var o = this.constructor===Array? [] : {};
for(var e in this){
o[e]= typeof this[e]===“object” ? this[e].clone() : this[e];
}
return o;
};
下面这个ul,如何点击每一列的时候alert其index?(5分)
- 这是第一条
- 这是第二条
- 这是第三条
var arrLi = document.getElementById(“test”).children;
for(var i = 0; i < arrLi.length; i++) {
arrLi[i].onclick = (function(num){
return function(){
alert(num);
};
})(i);
}
img的alt与title有何异同?(2分)
效果不同:使用alt属性是为了给那些不能看到你图片的浏览者提供的文字说明,也就是图片显示不了的时候就显示文字;但是tilte****属性指的是图片正常显示时鼠标悬停在图片上方显示的提示文字。
你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?(3分)
在IE、火狐和谷歌上做过测试。
IE采用的内核为Trident。火狐的内核是Gecko。谷歌的内核是webkit。
在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理?(3分)
一次js请求一般情况下有cdn缓存,dns****缓存,浏览器缓存,服务器缓存
div+css的布局较table布局有什么优点?(4分)
1. div+css布局更加符合W3C标准,有更高的可维护性。
2. 布局更加精准,网页排版更加容易修改
3. 节约空间内存
4. 加快了页面的加载速度。
为什么利用多个域名来存储网站资源会更有效?(4分)
1.CDN缓存更加方便
2.突破浏览器并发限制
3.节约cookie上行带宽
4.防止不必要的网络安全问题
请描述一下cookies,sessionStorage和localStorage的区别?(4分)
\1. cookie是网站为了标识用户身份而存储在用户本地终端上的数据。cookie在浏览器和服务器端间来回传递。session storage和local storage不会自动把数据发给服务器,仅在本地保存。
\2. localStorage用于长期存储数据,浏览器关闭后数据不丢失。
\3. sessionStorage存储的数据会在浏览器关闭后自动删除。
\4. cookie 设置的cookie在过期时间之前一直有效,即使浏览器关闭。
\5. cookies与sessionStorage和localStorage存储大小不同。cookie数据大小不会超过4K。session storage和local storage,比cookie大得多,可以达到5M或者更多,但存储大小也有一定限制
谈谈以前端角度出发做好SEO需要考虑什么?(5分)
\1. 维护、优化好HTML,CSS,JavaScript这三个方面,从而提升网站的访问速度。
\2. 在网站的结构布局时,建立的结构层次越少越好
\3. 优化meta标签。
\4. 了解主流的搜索引擎,如百度、谷歌等。
\5. 关键词不宜太多也不宜太少,列举出几个页面的重要关键字即可,切记过分堆砌。网页描述要准确,精简地描述网页的内容
你还了解哪些前端优化技术?(5分)
1.提前做加载操作: 对域名进行预解析、预载入组件或延迟载入组件、把 CSS 放到代码页上端
CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。
\2. 提升并行加载:切分组件到多个域提升服务器响应能力。
\3. JavaScript和CSS优化:从页面中剥离 JavaScript 与 CSS、通过外部文件引用。使用工具压缩JavaScript和CSS文件、JavaScript放到 HTML 代码页底部、减少对页面的阻塞。
\4. 使用Ajax实现异步加载
有哪些方式可以对一个DOM设置它的CSS样式?(2分)
1.通过标签引入一个外部css文件。
2.在
3.直接将css样式定义在元素内部。
display:none与visibility:hidden的区别是什么?(2分)
作用不同:visibility: hidden将元素隐藏,但是在网页中该占的位置还是占着。
display: none则是将元素的显示设为无,在网页中不占任何的位置。
CSS都有哪些选择器?(3分)
\1. 元素选择器
\2. 类选择器
\3. ID选择器
\4. 属性选择器
\5. 通配符选择器
\6. 子选择器
7. 后代选择器
\8. 伪类选择器
\9. 相邻选择器
看下列代码,
标签内的文字是什么颜色的?(3分)
123
红色。
CSS的层叠性:样式冲突,遵循的原则是就近原则。