前端面试送命题—面试题篇

原创 年树先生 随笔 前端面试 6049阅读 2018-09-29 22:05:58 举报

前端入门很容易,简单地用html搭一个页面框架;会用一些css基本样式;懂得用jquery的dom交互,就基本可以挺着胸说自己是个前端工程师了。

但是前端提升异常艰难,算法、数据结构、oop;javascript、dom、css、html5这些仅仅是标配;性能优化、安全性、代码优雅性、seo,这些也是必然需要了解的。前端开发环境很轻便,也很繁琐,各种框架、架构模式的应用也是衡量专业程度的标准。在这里总结了一些面试题供前端们参考。

JavaScript中如何检测一个变量是字符串类型?

trim()的使用场景

this的典型应用

什么是跨域?

由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况:
1.网络协议不同,如http协议访问https协议。
2.端口不同,如80端口访问8080端口。
3.域名不同,如qianduanblog.com访问baidu.com。
4.子域名不同,如abc.qianduanblog.com访问def.qianduanblog.com。
5.域名和域名对应ip,如www.bb.com访问8.8.8.8.
JavaScript面向对象?

写一个方法,去掉重复的元素

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)

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复