2018年 Web前端开发面试题目

阿里前端开发面试题|微信小程序的前端开发语言|前端开发中怎么编写插件

(1)js如何实现深拷贝
http://segmentfault.com/a/1190000000501320
(2)jquery如何实现domReady和onload判断的

(3)js如何实现一个阶乘,如何使用递归
[code]function factorial (num) {
if (num<=1) {
return 1;
} else{
return num*arguments.callee(num-1);
}
}[/code]
(4)iframe如何自适应高度
[code]function iFrameHeight() {

    var ifm= document.getElementById("iframepage");

    var subWeb = document.frames ? document.frames["iframepage"].document :

ifm.contentDocument;

        if(ifm != null && subWeb != null) {

        ifm.height = subWeb.body.scrollHeight;
        }
}[/code]

(5)如何统计一个字符串中哪个字母出现的次数最多
http://www.cnblogs.com/sking7/archive/2011/12/15/2288702.html

(6)如何实现一个跑马灯效果,要求可以循环
代码片段 1

<!DOCTYPE html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>微信开发前端调用接口:前端面试题</title>
    <style>
        .example1 {
            height: 50px;
            overflow: hidden;
            position: relative;
        }
        .example1 h3 {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            /* Starting position */
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            /* Apply animation to this element */
            -moz-animation: example1 5s linear infinite;
            -webkit-animation: example1 5s linear infinite;
            animation: example1 5s linear infinite;
        }
        /* Move it (define the animation) */
        @-moz-keyframes example1 {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        @-webkit-keyframes example1 {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
    </style>
</head>
<body>
    <marquee scrollAmount=5 width=300 onmouseover=stop() onmouseout=start()>
        <a href=”https://www.rokub.com”>前端开发者</a>
    </marquee>
    <div class=”example1″>
        <h3>Scrolling text… </h3>
    </div>
</body>
</html>

(7)有么研究过zepto的源码

(8)如何实现单页面应用,要注意什么
http://www.ibm.com/developerworks/cn/web/1302_xiaohh_onepagedojo/

(9)如何实现iscroll的局部滑动效果

(10)使用到html5哪些技术

(11)postMessage的作用
跨域

(12)allow access allow orgin

(13)如何实现自定义事件,提供给别人用,要给什么接口

(14)如何设计一个js框架,比如是一个表单判断的框架,要怎么设计,别人new一个就可以解决这个表单的所有问题,判断为空/判断合法/正则/提示的message等

(15)看得东西太少,开源得东西做的太少,新东西跟进得少,设计模式不懂

(16)for..in是可以便利到原型里头得属性得
[code]function A(){
this.m=10;
}
A.prototype.n=20;
var aa=new A();
for(i in aa){
console.log(i);
}[/code]
如果只要实例属性不要原型得属性,则可以用hasOwnProperty过滤,
[code]function A(){
this.m=10;
}
A.prototype.n=20;
var aa=new A();
for(i in aa){
if(aa.hasOwnProperty(i)){
console.log(i);
}
}[/code]

(17)手写原生ajax
[code]var xhr=new XMLHttpRequest();
xhr.setRequestHeader(‘MyHeader’,’MyValue’);
xhr.open(‘get’,’example.php?name1=value1&name2=value2′,true);
xhr.send(null);

    var xhr=new XMLHttpRequest();
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.open('post','example.php',true);
    xhr.send('name1=value1&name2=value2');[/code]

(18)实现自定义类型事件

(19)自己实现事件代理

(20)研究seajs和requirejs,按需加载,模块化开发用requirejs进行模块化开发设计

(21)cmd和amd区别
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
区别:

  1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.
  2. CMD 推崇依赖就近,AMD 推崇依赖前置。
  3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,
    而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹。
    http://www.zhihu.com/question/20351507/answer/14859415
    (22)有没写过自己得框架

(23)了解得移动方面得框架有哪些?
jquery Moile、zepto.js

(24)tap穿透bug

(25)manifest

(26)viewport为什么用640。

(27)如何实现异步编程,promise,then

(28)localstorage和sessionstorage区别
sessionStorage 和 localStorage 就一个不同的地方, sessionStorage数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时,之前的存储已经被清除。而 localStorage 是一个持久化的存储,它并不局限于会话。

(29)css/js预编译工具
less、sass

(30)grunt前端自动化

(31)git/svn/maven

(32)模块化requirejs / 自动化 grunt / mvc backbone / git发布

(33)defer和async得区别

(34)断点调试/浏览器解析全部过程

(35)做过哪些复杂的项目?碰到什么问题,怎么解决的?

(36)兼容性问题有哪些?js方面的和css方面的。

(37)觉得自己有哪些需要提升的地方。

(38)怎么做一个框架和接口设计

(39)如何拷贝一个全新得数组,不影响已有得。

(40)css怎么设计处理。。借鉴alice css或者杭州网易开源css

(41)怎么hack ie9或者10

(42)了解过promise吗

(43)提升css性能,如less/sass

(44)svg 在响应式设计的应用

(45) requestAnimationFrame原理。

(46)tap穿透bug

(47)移动端性能优化有哪些方面

(48)device-width根据什么定义的

(49)fixed在移动端的bug

(50)怎么查看一个动画的关键帧渲染(fps,profile)

(51)怎么监控资源加载情况

(52)fps是什么,。。。怎么在chrome里查看

(53)scroll在移动端不支持怎么办,用iscroll实现有什么问题

(54)xss原理是什么

(55)es5和es6得东西了解多少

(56)ajax的5个状态是什么?
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了

(57)http底层怎么了解

(58)拔掉网线http是多少状态

(59)浏览器的缓存策略具体是什么,
expire/entity/

(60)iframe跨域具体是什么

(61)实现拖拽元素功能

(62)xss和csrf区别

(63)如何优化性能,有哪些工具

(64)具体做过什么分享

(65)如何学习前端知识

(66)https…

(67)my name is imweba … => my6 name7 is8 imweba9…

(68)页面内实现右键菜单组件功能。

(69)没发请求,是什么状态吗?400和500什么区别

(70)grunt uglify遇到什么问题

(71)ajax怎么分段接收数据

(72)jsonp会遇到什么问题?onerror / 超时 / refeerr / 乱码

(73) ie6要半透明图片

(74)
post和get方式区别,哪个更快
post发送的数据具体在哪里
get是协议请求头/post是实体数据里

(75)ajax得readyState得5种状态分别是什么

(76)
css解析方式是如何得

(77)stylesheet是个什么东西

(78)webfont / svg / css sprite 在移动领域应用

(79)canvas 和 svg

(80)如何判断localStorage存储满了。

(81)如何解决retina屏幕下,图片模糊

(82)get/post/delete/put四者区别。

(81)能否用jquery2.0替代zepto

(82)SPDY协议了解过不

(83)

iframe处理跨域,如果是发送post请求,
如何知道post数据成功?
(84)
promise原理是什么?自己实现一个
(85)
requirejs的原理是什么?自己实现一个
requirejs和seajs得区别是什么

(86)jquery和zepto区别是什么

(87)wap得scroll问题。。

(88)reflow和repaint原因和避免

(89)manifest使用过嘛

(90)单页面应用如何实现

(91)如何左右,上下居中一个东西

(92)如何实现移动端得page切换

前端开发笔试面试题目|英语前端开发面试题目|关于前端开发的面试试题

» 本文来自:前端开发者 » 《2018年 Web前端开发面试题目》
» 本文链接地址:https://www.rokub.com/4385.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!