java面试题网

普通会员

33

帖子

5

回复

71

积分

楼主
发表于 2019-07-11 22:03:41 | 查看: 50| 回复: 0

前端面试送命题含答案

$(document).ready与window.onload()?

1.window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。2.$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。

$.get,$.post与$.ajax

相同点:都是异步请求的方式来获取服务端的数据;
不同点:1、请求方式不同:$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。2、参数传递方式不同:get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。3、数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多4、安全问题: GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。
Ajax:
Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
$.get 与 $.post 都是$.ajax的语法糖。
例子
$.ajax({
    url:'http://www.baidu.com',
    type:'POST',
    data:data,
    cache:true,
    headers:{},
    beforeSend:function(){},
    success:function(){},
    error:function(){},
    complete:function(){}
}); 

jquery事件bind

定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;
语法:bind(type,[data],function(eventObject));
特点:
  (1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件。
  (2)、当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题。
实例如下:$( "#members li a" ).bind( "click", function( e ) {} );

jquery事件live

定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;
语法:live(type, [data], fn);
特点:
  (1)、live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。
  (2)、live正是利用了事件委托机制来完成事件的监听处理,把节点的处理委托给了document,新添加的元素不必再绑定一次监听器。
  (3)、使用live()方法但却只能放在直接选择的元素后面,不能在层级比较深,连缀的DOM遍历方法后面使用,即$(“ul”).live...可以,但$("body").find("ul").live...不行;
实例如下:$( document ).on( "click", "#members li a", function( e ) {} );

jquery事件delegate

定义和用法:将监听事件绑定在就近的父级元素上
语法:delegate(selector,type,[data],fn)
特点:
  (1)、选择就近的父级元素,因为事件可以更快的冒泡上去,能够在第一时间进行处理。
  (2)、更精确的小范围使用事件代理,性能优于.live()。可以用在动态添加的元素上。
实例如下:
$("#info_table").delegate("td","click",function(){/*显示更多信息*/});
$("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});

jquery事件on

定义和用法:将监听事件绑定到指定元素上。
语法:on(type,[selector],[data],fn)
实例如下:$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。
说明:on方法是当前JQuery推荐使用的事件绑定方法,附加只运行一次就删除函数的方法是one()。
总结:.bind(), .live(), .delegate(),.on()分别对应的相反事件为:.unbind(),.die(), .undelegate(),.off()

什么是盒子模型

在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),
元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。
4个部分一起构成了css中元素的盒模型。

三种降低页面加载时间的方法

压缩css、js文件
合并js、css文件,减少http请求
外部js、css文件放在最底下
减少dom操作,尽可能用变量替代不必要的dom操作

三种常见的web攻击

1.XSS(Cross-Site Scripting,跨站脚本攻击):指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。2.SQL注入攻击3.CSRF(Cross-Site Request Forgeries,跨站点请求伪造):指攻击者通过设置好的陷阱,强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

针对页面内容的优化

1.减少 HTTP 请求 (Make Fewer HTTP Requests)2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)3.使得 Ajax 可缓存 (Make Ajax Cacheable)

针对修饰文件的优化

1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)4.避免 CSS 表达式 (Avoid CSS Expressions)

针对脚本的优化

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)4. 移除重复脚本 (Remove Duplicate Scripts)

针对图片类文件的优化

1.优化图片2 不要在 HTML 中使用缩放图片3 使用恰当的图片格式4 使用 CSS Sprites 技巧对图片优化

图像格式的区别

矢量图:图标字体,如 font-awesome;svg 
普通图:gif,jpg(jpeg),png
区别:
  1、gif:是是一种无损,8位图片格式。具有支持动画,索引透明,压缩等特性。适用于做色彩简单(色调少)的图片,如logo,各种小图标icons等。
  2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片,不适合做色彩简单(色调少)的图片,如logo,各种小图标icons等。
  3、png:PNG可以细分为三种格式:PNG8,PNG24,PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。
关于透明:PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位(256阶)的alpha通道透明;
优缺点:
  1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
  2、对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上。

浏览器渲染页面流程

1.解析HTML文件,创建DOM树。
自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;3.将CSS与DOM合并,构建渲染树(Render Tree)4.布局和绘制,重绘(repaint)和重排(reflow)

前端面试送命题含答案


您需要登录后才可以回帖 登录 | 立即注册

java面试题网无聊看看网与java建站系统提供技术支持V2.1 网站地图 © 2016-2018