面试题

最新推荐文章于 2022-02-28 08:20:00 发布

chanchanliu1117

最新推荐文章于 2022-02-28 08:20:00 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/chanchanliu1117/article/details/53519558

本文介绍了多种优化网页加载速度的方法，包括减少HTTP请求数量、启用gzip压缩、合理安排CSS与JavaScript的位置等。此外还详细解释了Ajax的工作原理及其优缺点，并探讨了事件代理、跨域解决方案等前端开发中的常见问题。

请写出三种减低页面加载时间的方法
（1）尽量减少页面中重复的HTTP请求数量
（2）服务器开启gzip压缩
（3）css样式的定义放置在文件头部
（4）Javascript脚本放在文件末尾
（5）压缩Javascript、CSS代码
（6）Ajax采用缓存调用
（7）尽可能减少DOM元素
（8）使用多域名负载网页内的多个文件、图片
（9）应用CSS Sprite
Ajax 是什么：
1) 通过异步模式，提升了用户体验
2) 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3) Ajax 在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
Ajax 的过程：
1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象
2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3) 设置响应HTTP请求状态变化的函数
4) 发送HTTP请求
5) 获取异步调用返回的数据
6) 使用JavaScript和DOM实现局部刷新
Ajax 的最大的特点：
1) Ajax可以实现动态不刷新（局部刷新）
2) readyState 属性状态有5个可取值： 0 = 未初始化，1 = 启动， 2 = 发送，3 = 接收，4 = 完成
Ajax 同步和异步的区别:
1) 同步：提交请求 -> 等待服务器处理 -> 处理完毕返回，这个期间客户端浏览器不能干任何事
2) 异步：请求通过事件触发 -> 服务器处理（这是浏览器仍然可以作其他事情）-> 处理完毕
ajax.open方法中，第3个参数是设同步或者异步。
Ajax 的缺点：
1) Ajax 不支持浏览器 back 按钮
2) 安全问题 Ajax 暴露了与服务器交互的细节
3) 对搜索引擎的支持比较弱
4) 破坏了程序的异常机制
5) 不容易调试
解决跨域问题：
1) jsonp
2) iframe
3) window.name、window.postMessage
4) 服务器上设置代理页面
5) 修改document.domain来跨子域
请解释一下事件代理？
JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上,提高性能。
当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。
事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。
function getEventTarget(e) {

e = e || window.event;

return e.target || e.srcElement;

}
link 和@import 的区别是？
（1）link属于XHTML标签，而@import是CSS提供的; （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; （3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题; （4
javascript的typeof返回哪些数据类型
Object number function boolean underfind
例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== – ===）
split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
事件绑定和普通事件有什么区别
IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
ajax请求的时候get 和post方式的区别
一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的
call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑使用parse更靠谱
b继承a的方法
写一个获取非行间样式的函数

function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}

事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
http://www.webasily.com/?p=78 例子可见此链接
闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
http://blog.youkuaiyun.com/gaoshanwudi/article/details/7355794 此链接可查看（问这个问题的不是一个公司）
如何阻止事件冒泡和默认事件
canceBubble return false
添加删除替换插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
解释jsonp的原理，以及为什么不是真正的ajax
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)
”==”和“===”的不同
前者会自动转换类型
后者不会