前端汇总-2-javascript-常见面试题(前端面试相关)
Q1: 求y和z的值是多少？
都为undefined，因为没有返回值。
Q2: javascript是面向对象的，怎么体现javascript的继承关系？ ？
使用prototype来实现
Q3: javascript怎样选中一个checkbox，怎样设置它无效？
document.all.cb1[0].disabled = true;
Q4: form中的input可以设置为readonly和disable，请问2者有什么区别？
- readonly不可编辑，但可以选择和复制；值可以传递到后台
- disabled不能编辑，不能复制，不能选择；值不可以传递到后台
Q5: js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么？
- alert 2. confirm 3. prompt
Q6: form中的input有哪些类型？ text:文本框|password:密码框 -------- | ----- 1. checkbox:复选框 |5. button:按钮 2.radio:单选按钮 |6. file:文件选择域 |3. hidden:隐藏域 |7. submit:表单提交按钮 | 4. reset:重置按钮 输入一个input用可视化编辑有提示
Q7:javaScript的2种变量范围有什么不同？
- 局部变量：方法内有效
- 全局变量：当前页面内有效
Q8: 列举javaScript的3种主要数据类型，2种复合数据类型和2种特殊数据类型
- 主要数据类型：string, boolean, number
- 复合数据类型：function, object
- 特殊数据类型：underfined、null 准确来说还有一种 NaN
Q9: js程序中捕获异常的方法？
- window.error
- try{}catch(){}finally{}
Q10: 写出函数DateDemo的返回结果，系统时间假定为今天
function DateDemo(){
var d, s="今天日期是：";
d = new Date();
s += d.getMonth() + "/";
s += d.getDate() + "/";
s += d.getFullYear();
return s;
}
//结果：今天日期是：2/6/2019 //答案 哪天写就是当天减少一个月，主要是考 月份通常+1
Q11: 写出程序运行的结果？
for(i=0, j=0; i<10, j<6; i++, j++){
k = i + j;
}
i与j都是从0 到5 执行了6次
第1次：k=i+j=0+0
第2次：k=i+j=1+1
第3次：k=i+j=2+2
第4次：k=i+j=3+3
第5次：k=i+j=4+4
第6次：k=i+j=5+5
第6次执行完之后，i++, j++，此时i=6,j=6,因为j=6不再小于6，所以for循环结束
此时k=i+j=5+5保持不变，即k=10
结果：10（小心陷阱）
Q12: 写出程序运行的结果？
function hi(){
var a;
alert(a);
}
//结果：未调用 不弹出
//如果hi（）undefined a 没赋值
Q13: 写出程序运行的结果？
function hi(){
var a = null;
alert(a);
}
hi（）//结果：null
Q14: 浏览器的对象模型？
window
//顶级对象
window.alert(msg)
window.prompt()
window.confirm()
if(window.confirm()){
//todo
}
window.open()
window.close()
document
document.write()
history
当用户浏览网页时，浏览器保存了一个最近所访问网页的url列表。这个列表就是用history对象表示。
- history.back():后退
- history.forward():前进
- history.go(n):正数表示向前，负数表示向后
location
表示当前打开的窗口或框架的URL信息。
location.href：重定向
等价于location.assign(url)
location.host：类似www.163.com:80
navigator
表示浏览器的信息及js运行的环境
navigator.cookieEnabled：该属性表示是否启用cookie
screen
用于显示网页的显示器的大小和颜色
screen.width/screen.height：表示显示器的分辨率（总的宽度，高度）
Q15: XMLHTTPRequest对象是什么？
XMLHttpRequest 对象是用于在后台与服务器交换数据。
XMLHttpRequest 能够：
1. 在不重新加载页面的情况下更新网页
2. 在页面已加载后从服务器接收数据
3. 在页面已加载后从服务器请求数据
4. 在后台向服务器发送数据
5. 所有现代的浏览器都支持 XMLHttpRequest 对象。
Q16: Ajax原理？
var xml = new XMLHttpRequest()
xml.onreadystatechange = function () {
if(xml.readyState===4){
if(xml.status===200){
alert(xml.responseText)
}
}
}
xml.open('get','/api',true)
xml.send()
Q17: innerHTML，innerText，outerHTML，innerText的区别？
- innerHTML 设置或获取位于对象起始和结束标签内的 HTML
- outerHTML 设置或获取对象及其内容的 HTML 形式
- innerText 设置或获取位于对象起始和结束标签内的文本
- outerText 设置(包括标签)或获取(不包括标签)对象的文本
举例来说如果原html为：
替换前
1.innerHTML
运行脚本：
原来的html变为：
替换后
2.outerHTML
运行脚本：
原html变为：
替换后
3.innerText
运行脚本：
原html变为：
>div<替换后>/div<
4.outerText
运行脚本：
原html变为：
>div<替换后>/div<
Q18: 超链接的属性target的可选值：_blank, _parent, _self, _top和框架名称有什么区别？
- _blank 浏览器会另开一个新窗口显示链接
- _self，在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。
- _parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，
则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。 - _top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架
- _search 在浏览器的搜索区装载文档，注意，这个功能只在Internet Explorer 5 或者更高版本中适用。
Q19: javascript的常用对象有哪些？
String, Math, Date和Array对象
Q20:在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode,
它有两个值：BackCompat对应quirks mode，CSS1Compat对应strict mode。
Q21.什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？
- 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器
- 进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
Q22:线程与进程的区别
- 一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。
- 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
- 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。
- 但是线程不能够但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
- 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别
Q23.说说你如何理解HTML结构的语义化,有什么好处？
用合适的标签放在合适的位置表达合适的意思让浏览器更好的解析开发者更好的阅读;
1,让页面结构清晰增强可读性 2. 便于团队开发维护 3.利于seo检索索优化
Q24.你如何对网站的文件和资源进行优化？
解决方案包括：文件和资源合并压缩最小化，使用CDN托管，缓存的使用（多个域名来提供缓存）。
Q25.请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
// 关注核心点:多使用内存、缓存或者其他方法减少cpu计算减少网络请求
// 加载页面和静态资源
1,静态资源的压缩合并
2,静态资源缓存(浏览器缓存)
2-1,通过连接名称控制缓存
2-2,只有内容改变的时候，链接名称才会改变
3,使用CDN让资源加载更快
4使用SSR后端渲染,数据直接输出到html中
// 页面渲染优化
1,css放前面JS放后面
2,懒加载（图片懒加载,下拉加载更多,什么时候使用什么时候加载）
3,减少DOM查询,对DOM查询做缓存,
4,减少DOM操作,多个操作尽量合并在一起执行
5,事件节流
6,尽早执行操作
//其他
1.优化图片，图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
2.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
3.减少http请求（合并文件，合并图片）。
Q26.为什么利用多个域名来提供网站资源会更有效？
1.CDN缓存更方便
2.突破浏览器并发限制（一般每个域名建立的链接不超过6个）
3.Cookieless，节省带宽，尤其是上行带宽一般比下行要慢
4.对于UGC的内容和主站隔离，防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名
必须不是自己主站的子域名，而是一个完全独立的第三方域名。
5.数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事。这个可能被用的不多。
浏览器做dns解释也是耗时间的，而且太多域名，如果要走https的话，还有要多买证书和部署的问题。
Q27.你熟悉SVG样式的书写吗？什么是SVG？
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
书写示例如下：
Q28.请写一个简单的幻灯效果页面
如果不使用JS来完成，可以加分。（如：纯CSS实现的幻灯片效果）
css3 实现幻灯片效果
Q29.你都使用哪些工具来测试代码的性能？
Profiler,JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）,Dromaeo。
Q30.如果今年你打算熟练掌握一项新技术，那会是什么？
nodejs，html5，react，python等。
Q31.请谈一下你对网页标准和标准制定机构重要性的理解。
w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。
Q32.什么是FOUC（无样式内容闪烁）？你如何来避免FOUC？
FOUC(Flash Of Unstyled Content)–文档样式闪烁
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，
因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度
都有关系。解决方法简单的出奇，只要在之间加入一个或者
this is first p
运行后，你会发现新增的p元素，并没用被绑定click事件。你可以改成.live(“click”)方式解决此问题，代码如下：
$(function() {
$("p").live("click",function() {
// 改成live方式
alert($(this).text());
});
$("button").click(function() {
$("this is second p
").appendTo("body");
});
})
我并不建议大家这么做，我想用另一种方式去解决这个问题，代码如下：
$(function() {
$("p").click(function() {
alert($(this).text());
});
$("button").click(function() {
$("this is second p
").click(function() {
// 为新增的元素重新绑定一次
alert($(this).text());
}).appendTo("body");
});
})
虽然我把绑定事件重新写了一次，代码多了点，但这种方式的效率明显高于live()方式，
特别是在频繁的DOM操作中，这点非常明显。