web前端笔试题目——JavaScript篇(一)

关于Js的知识点还有很多,以下整理的部分没完善,待后续更新。

1.ajax请求的时候get 和post方式的区别?

      答:a.前者在 URL 请求里面附带了表单参数和值, 后者在 HTTP 请求的消息实体中;

b.get安全性非常低,post安全性较高;

            c.get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,因服务器的不同而异;;

d.对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得;

e. <form method="get" action="a.asp?b=b">跟<form method="get" action="a.asp">是一样的,也就是说,action页面后边带的参数列表会被忽视;而<form method="post" action="a.asp?b=b">跟<form method="post" action="a.asp">是不一样的。

2. call和apply的区别

call方法:

语法:call(thisObj,Object)

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:

语法:apply(thisObj,[argArray])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

3. 事件委托是什么?

答:利用事件冒泡的原理,自己所触发的事件让他的父元素代替执行

   优点:1.需要管理的hander更少;

         2.内存分配更少;

         3.增加删除事件可以不处理事件。

  缺点:事件管理的逻辑更复杂

4. 什么是闭包?有哪些优缺点?

答:Javascript闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量(键值对),而这些键值对是不会随上一级函数的执行完成而销毁。由函数及其相关引用环境组合而成,并允许函数访问其引用环境中的变量。

优点:a. 逻辑连续,当闭包作为另一个函数调用的参数时,避免你脱离当前逻辑而单独编写额外逻辑;

b. 方便调用上下文的局部变量;

c. 加强封装性,第2点的延伸,可以达到对变量的保护作用。

         缺点:常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

5.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

答:Ie(Ie内核)  火狐(Gecko) 谷歌(webkit) opear(Presto)

     -webkit-transform:translateX(-50%);   //-webkit代表谷歌内核识别码

     -moz-transform:translateX(-50%);     //-moz代表火狐内核识别码

     -ms-transform:translateX(-50%);      //-ms代表ie内核识别码

     -o-transform:translateX(-50%);       //-o代表欧朋【opera】内核识别码

     transform:translateX(-50%);          //符合W3C标准

6.如何对网站的文件和资源进行优化(如何优化网页加载速度)?

答:a.文件合并(如,使用css sprites合并图片,合并css文件),目的是减少http请求;

b.文件压缩(如:优化图片大小),目的是直接减少文件下载的体积;

c. 精简和优化 js 和 CSS代码;

d. javascript的引用和统计代码放到在代码中放到body尾部之前。

7. 解释jsonp的原理,以及为什么不是真正的ajax,为什么不安全 ?

答:原理:利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形如:<script src=“http://www.example.net/api?param1=1&param2=2”></script>,并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。 第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如: callback({“name”:“hax”,“gender”:“Male”}) 这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

不安全是因为:callback参数注入、资源访问授权没有设置。

8.跨域的解决方案(https://segmentfault.com/a/1190000002647143)

答:跨域是JavaScript出于安全方面的考虑(同源策略:是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.),不允许浏览器在当前访问的域名的页面中的javascript的调用其他域名页面中的对象。跨域请求就是为了解决禁止跨域访问的问题。  

解决方案:a.使用jsonp;

          b.服务端代理;

               c.服务端设置Request Header头中Access-Control-Allow-Origin为指定可获取数据的域名(IE10以下不支持)

9、javascript的本地对象,内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

10.函数定义(声明)与表达式的区别?

答:a.一般情况下,函数表达式的函数名称可以不写;

b.若都有名称:

l          作为赋值表达式的一部分的是函数表达式;

l          (function foo(){})是函数表达式(因为括号是分组操作符,它的内部只能包含表达式);

l          函数定义在函数体内,或者在程序最上部。

c.在词法环境创建时,函数表达式的scope在执行到它时才创建(比如with临时创造的作用域)。

11. 事件绑定和普通事件有什么区别是什么?

答:普通添加事件的方法不支持添加多个事件,最下面的事件会覆盖上面的,而事件绑定(addEventListener)方式添加事件可以添加多个。

12.HTTP状态码都有那些?

   200 OK      //客户端请求成功

   400 Bad Request  //客户端请求有语法错误,不能被服务器所理解

   403 Forbidden  //服务器收到请求,但是拒绝提供服务

   404 Not Found  //请求资源不存在,输入了错误的URL

   500 Internal Server Error //服务器发生不可预期的错误

   503 Server Unavailable  //服务器当前不能处理客户端的请求,一段时间后可能恢复正常

13. IE和DOM事件流的区别是什么?

a.执行顺序不一样(冒泡与捕获)

  b.参数不一样

  c.事件加不加on

d . this指向问题

14. JavaScript this指针?

答:this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。

a.全局环境中的,指全局对象;

b.构造器中的,指新创建的函数对象;

c.函数中的,指函数的调用者;

d.new Function中的,指全局对象;

e.eval中的,指条用上下文中的对象(如闭包中的,指全局对象;函数中的指调用者)。

15.ajax 是什么?ajax 的优缺点?

优点:a. 通过异步模式,提升了用户体验;

   b. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用;

c. Ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。

最大的特点: Ajax可以实现动态不刷新(局部刷新)

缺点:

      a、ajax不支持浏览器back按钮。

      b、安全问题 AJAX暴露了与服务器交互的细节。

      c、对搜索引擎的支持比较弱。

      d、破坏了程序的异常机制。

      e、不容易调试。

其它相关的加分项:

1. 都使用和了解过哪些编辑器?都使用和了解过哪些日常工具?

2. 都知道有哪些浏览器内核?开发过的项目都兼容哪些浏览器?

3. 瀑布流布局或者流式布局是否有了解

4. HTML5都有哪些新的API?

5. 都用过什么代码调试工具?

6. 是否有接触过或者了解过重构。

重构(名词):对软件内部结构的一种调整,目的是在不改变"软件之可察行为"前提下,提高其可理解性,降低其修改成本.

7.什么叫优雅降级和渐进增强?

优雅降级/平稳退化:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,

则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,

针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,

使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强:从被所有浏览器支持的基本功能开始,

逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。

当浏览器支持时,它们会自动地呈现出来并发挥作用。

8.对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?

   前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。

    1、实现界面交互

    2、提升用户体验

    3、有了Node.js,前端可以实现服务端的一些事情

 参与项目,快速高质量完成实现效果图,精确到1px;

 与团队成员,UI设计,产品经理的沟通;

 做好的页面结构,页面重构和用户体验;

 处理hack,兼容、写出优美的代码格式;

         针对服务器的优化、拥抱最新前端技术。

                   9. IE6 BUG的解决方法

a.双边距BUG float引起的

    display:inline或者_margin-left:5px;(hack)

b.3像素问题 使用float引起的

   float:left;或者 margin-right:-3px;或者_position:relative;_left:-3px 

c.Ie z-index问题

   给最祖先元素级添加position:relative并且加上z-index属性

(父元素加上relative时,子元素z-index会重置)

d.Png 透明不支持

   使用js代码 或者css方法 或者htc文件(http://www.cnblogs.com/bky250214511/archive/2010/02/22/1671197.html)

e.Min-height 最小高度 !Important 解决’

f.select 在ie6下遮盖

IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe

 解决办法一:Iframe包裹select元素;解决办法二:以Iframe作为div的子元素,覆盖select元素

g.为什么没有办法定义1px左右的宽度容器

(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)

 

原文地址:https://www.cnblogs.com/july-Vivian/p/5262755.html