• 2018前端面试


    一.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势

    二.基础知识:html css js方面

    1.什么是盒子模型?

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

     2.简述同步和异步的区别

    同步是阻塞模式,异步是非阻塞模式。

     同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;

     异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

    3.css中长度单位有哪些?

    px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。

    浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

    4.sessionStorage 、localStorage 和 cookie 之间的区别

    不同点:

    (1)、存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,造成一定的宽带浪费;

    web storage,会将数据保存到本地,不会造成宽带浪费;

    (2)、数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;web storage数据存储可以达到5M;

    (3)、数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效,即使关闭窗口或者浏览器;

    sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;

    (4)、作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;

    5.AJAX的工作原理:

    (1)、创建ajax对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))

    (2)、判断数据传输方式(GET/POST)

    (3)、打开链接 open()

    (4)、发送 send()

    (5)、当ajax对象完成第四步(onreadystatechange)数据接收完成,判断http响应状态(status)200-300之间或者304(缓存)执行回调函数

    6.web前端开发,如何提高页面性能优化?

    内容方面:

    1.减少 HTTP 请求 (Make Fewer HTTP Requests)

    2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)

    3.使得 Ajax 可缓存 (Make Ajax Cacheable)

    针对CSS:

    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)

    针对JavaScript :

    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)

    面向图片(Image):

    1.优化图片

    2 不要在 HTML 中使用缩放图片

    3 使用恰当的图片格式

    4 使用 CSS Sprites 技巧对图片优化

    7、浏览器是如何渲染页面的?

    渲染的流程如下:

    1.解析HTML文件,创建DOM树。

       自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。

    2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;

    3.将CSS与DOM合并,构建渲染树(Render Tree)

    4.布局和绘制,重绘(repaint)和重排(reflow)

     8. 如何理解闭包?

     1、函数内部可以读取函数外部的全局变量;在函数外部无法读取函数内的局部变量。

    2、函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

    9. 什么是跨域?跨域请求资源的方法有哪些?

    10.在JavaScript中实现继承的方法有哪些?

    1. 原型链(prototype chaining)

    2. call()/apply()

    3. 混合方式(prototype和call()/apply()结合)

    4. 对象冒充

    11.JQuery有几种选择器?

    (1)、基本选择器:#id,class,element,*;

    (2)、层次选择器:parent > child,prev + next ,prev ~ siblings

    (3)、基本过滤器选择器::first,:last ,:not ,:even ,:odd ,:eq ,:gt ,:lt

    (4)、内容过滤器选择器: :contains ,:empty ,:has ,:parent

    (5)、可见性过滤器选择器::hidden ,:visible

    (6)、属性过滤器选择器:[attribute] ,[attribute=value] ,[attribute!=value] ,[attribute^=value] ,[attribute$=value] ,[attribute*=value]

    (7)、子元素过滤器选择器::nth-child ,:first-child ,:last-child ,:only-child

    (8)、表单选择器: :input ,:text ,:password ,:radio ,:checkbox ,:submit 等;

    (9)、表单过滤器选择器::enabled ,:disabled ,:checked ,:selected

    12.jquery中$.get()提交和$.post()提交有区别吗?

    相同点:都是异步请求的方式来获取服务端的数据;

    异同点:

    1、请求方式不同:$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

    2、参数传递方式不同:get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。

    3、数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多

    4、安全问题: GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。

    13. 在jquery中你是如何去操作样式的?

    addClass() 来追加样式

    removeClass() 来删除样式

    toggle() 来切换样式

    14.你使用过jquery中的动画吗,是怎样用的?

    hide() 和 show() 同时修改多个样式属性。像高度,宽度,不透明度。 fadeIn() 和fadeOut() fadeTo() 只改变不透明度

    slideUp() 和 slideDown() slideToggle() 只改变高度

    animate() 属于自定义动画的方法.

    15.你在jquery中使用过哪些插入节点的方法,它们的区别是什么?

    内添加

    1.append在文档内添加元素

    2.appendTo()把匹配的元素添加到对象里

    3.prepend()在元素前添加

    4.prependTo()把匹配的元素添加到对象前

      外添加

    1.after()在元素之后添加

    2.before()在元素之前添加

    3.insertAfter()把匹配元素在对象后添加

    4.insertBefore()把匹配元素在对象前添加

    16.jquery中如何来获取或和设置属性?

    jQuery中可以用attr()方法来获取和设置元素属性

    removeAttr() 方法来删除元素属性

    17.你jquery中有哪些方法可以遍历节点?

    children() 取得匹配元素的子元素集合,只考虑子元素不考虑后代元素  next() 取得匹配元素后面紧邻的同辈元素

     prev() 取得匹配元素前面紧邻的同辈元素

     siblings() 取得匹配元素前后的所有同辈元素

     closest() 取得最近的匹配元素

     find() 取得匹配元素中的元素集合 包括子代和后代

    18. 有哪些查询节点的选择器?

    :first 查询第一个, :last 查询最后一个,

    :odd查询奇数但是索引从0开始 :even 查询偶数,

    :eq(index)查询相等的 , :gt(index)查询大于index的 ,

    :lt查询小于index :header 选取所有的标题等

    19.你知道jQuery中的事件冒泡吗,它是怎么执行的,何如来停止冒泡事件

    事件冒泡是从里面的往外面开始触发。

    在jQuery中提供了stopPropagation()方法可以停止冒泡。

    20.单击超链接后会自动跳转,单击"提交"按钮后表单会提交等,有时候我想阻止这些默认的行为,该怎么办?

    可以用 event.preventDefault()

    或 在事件处理函数中返回false,即 return false;

    三.你平时是如何学习前端开发的?

    (ps:我这边对您的情况已经基本了解,您那边有没有什么想要问我的?好的,那就先这样,我们后续会再联系您,再见!)

  • 相关阅读:
    一波骚操作,我把 SQL 执行效率提高了 10,000,000 倍!
    如何优雅地根治null值引起的Bug!
    解锁新姿势:探讨复杂的 if-else 语句“优雅处理”的思路
    39 个奇葩代码注释,看完笑哭了。。。
    只要学会它,再多 Bug 也不怕
    SpringBoot 快速整合Mybatis(去XML化+注解进阶)
    Java 并发异步编程,原来十个接口的活现在只需要一个接口就搞定!
    微服务 2.0 技术栈选型手册
    如何设计 API 接口,实现统一格式返回?
    别在 Java 代码里乱打日志了,这才是打印日志的正确姿势!
  • 原文地址:https://www.cnblogs.com/juicy-initial/p/9048925.html
Copyright © 2020-2023  润新知