前端面试题
请简单描述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的层叠性：样式冲突，遵循的原则是就近原则。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
