东莞网站制作很好 乐云践新,wordpress后台上传主题更新失败,早8晚5双休的工作,一流的天津网站建设2016年Web前端面试题目汇总 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题#xff0c;通过对知识的整理以及经验的总结#xff0c;重新巩固自身的前端基础知识#xff0c;如有错误或更好的答案#xff0c;欢迎指正。:#xff09; 阅读目录…2016年Web前端面试题目汇总 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题通过对知识的整理以及经验的总结重新巩固自身的前端基础知识如有错误或更好的答案欢迎指正。: 阅读目录 HTML/CSS部分JavaScript部分其他 回到顶部 HTML/CSS部分 1、什么是盒子模型 在网页中一个元素占有空间的大小由几个部分构成其中包括元素的内容content元素的内边距padding元素的边框 border元素的外边距margin四个部分。这四个部分占有的空间中有的部分可以显示相应的内容而有的部分只用来分隔相邻的区域或区 域。4个部分一起构成了css中元素的盒模型。 2、行内元素有哪些块级元素有哪些 空(void)元素有那些 行内元素a、b、span、img、input、strong、select、label、em、button、textarea 块级元素div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素即系没有内容的HTML元素例如br、meta、hr、link、input、img 3、CSS实现垂直水平居中 一道经典的问题实现方法有很多种以下是其中一种实现 HTML结构 div classwrapper div classcontent/div /div CSS .wrapper{position:relative;} .content{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相对定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的heightwidth margin-left: -100px; } 4、简述一下src与href的区别 href 是指向网络资源所在位置建立和当前元素锚点或当前文档链接之间的链接用于超链接。 src是指向外部资源的位置指向的内容将会嵌入到文档中当前标签所在位置在请求src资源时会将其指向的资源下载并应用到文档内例如js脚 本img图片和frame等元素。当浏览器解析到该元素时会暂停其他资源的下载和处理直到将该资源加载、编译、执行完毕图片和框架等元素也如此 类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。 5、什么是CSS Hack? 一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。 IE浏览器Hack一般又分为三种条件Hack、属性级Hack、选择符Hack详细参考CSS文档css文档。例如 // 1、条件Hack!--[if IE]style.test{color:red;}/style![endif]-- // 2、属性Hack .test{ color:#090\9; /* For IE8 */ *color:#f00; /* For IE7 and earlier */ _color:#ff0; /* For IE6 and earlier */ } // 3、选择符Hack * html .test{color:#090;} /* For IE6 and earlier */ * html .test{color:#ff0;} /* For IE7 */ 6、简述同步和异步的区别 同步是阻塞模式异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候若该请求需要一段时间才能返回信息那么这个进程将会一直等待下去直到收到返回信息才继续执行下去 异步是指进程不需要一直等下去而是继续执行下面的操作不管其他进程的状态。当有消息返回时系统会通知进程进行处理这样可以提高执行的效率。 7、px和em的区别 px和em都是长度单位区别是px的值是固定的指定是多少就是多少计算比较容易。em得值不是固定的并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em16px。那么12px0.75em, 10px0.625em 8、什么叫优雅降级和渐进增强 渐进增强 progressive enhancement 针对低版本浏览器进行构建页面保证最基本的功能然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation 一开始就构建完整的功能然后再针对低版本浏览器进行兼容。 区别 a. 优雅降级是从复杂的现状开始并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的能够起作用的版本开始并不断扩充以适应未来环境的需要 c. 降级功能衰减意味着往回看而渐进增强则意味着朝前看同时保证其根基处于安全地带 9、浏览器的内核分别是什么? IE: trident内核 Firefoxgecko内核 Safariwebkit内核 Opera以前是presto内核Opera现已改用Google Chrome的Blink内核 ChromeBlink(基于webkitGoogle与Opera Software共同开发) 回到顶部 JavaScript部分 1、怎样添加、移除、移动、复制、创建和查找节点 1创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 2添加、移除、替换、插入 appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入 3查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id唯一性 2、实现一个函数clone可以对JavaScript中的5种主要的数据类型包括Number、String、Object、Array、Boolean进行值复制。 /*** 对象克隆 * 支持基本数据类型及对象 * 递归方法 */ function clone(obj) { var o; switch (typeof obj) { case undefined: break; case string: o obj ; break; case number: o obj - 0; break; case boolean: o obj; break; case object: // object 分为两种情况 对象Object或数组Array if (obj null) { o null; } else { if (Object.prototype.toString.call(obj).slice(8, -1) Array) { o []; for (var i 0; i obj.length; i) { o.push(clone(obj[i])); } } else { o {}; for (var k in obj) { o[k] clone(obj[k]); } } } break; default: o obj; break; } return o; } 3、如何消除一个数组里面重复的元素 // 方法一
var arr1 [1,2,2,2,3,3,3,4,5,6], arr2 []; for(var i 0,len arr1.length; i len; i){ if(arr2.indexOf(arr1[i]) 0){ arr2.push(arr1[i]); } } document.write(arr2); // 1,2,3,4,5,6 4、想实现一个对页面某个节点的拖曳如何做使用原生JS。 5、在Javascript中什么是伪数组如何将伪数组转化为标准数组 伪数组类数组无法直接调用数组方法或期望length属性有什么特殊的行为但仍可以对真正数组遍历方法来遍历它们。典型的是函数的 argument参数还有像调用getElementsByTagName,document.childNodes之类的,它们都返回 NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array 对象。 function log(){ var args Array.prototype.slice.call(arguments); //为了使用unshift数组方法将argument转化为真正的数组 args.unshift((app)); console.log.apply(console, args); }; 6、Javascript中callee和caller的作用 caller是返回一个对函数的引用该函数调用了当前函数 callee是返回正在被执行的function函数也就是所指定的function对象的正文。 7、请描述一下cookiessessionStorage和localStorage的区别 sessionStorage用于本地存储一个会话session中的数据这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也 随之销毁。因此sessionStorage不是一种持久化的本地存储仅仅是会话级别的存储。而localStorage用于持久化的本地存储除非主 动删除数据否则数据是永远不会过期的。 web storage和cookie的区别 Web Storage的概念和cookie相似区别是它是为了更大容量存储设计的。Cookie的大小是受限的并且每次你请求一个新的页面的时候Cookie都会被发送过去这样无形中浪费了带宽另外cookie还需要指定作用域不可以跨域调用。 除此之外Web Storage拥有setItem,getItem,removeItem,clear等方法不像cookie需要前端开发者自己封装 setCookiegetCookie。但是Cookie也是不可以或缺的Cookie的作用是与服务器进行交互作为HTTP规范的一部分而存在 而Web Storage仅仅是为了在本地“存储”数据而生。 8、手写数组快速排序 关于快排算法的详细说明可以参考阮一峰老师的文章快速排序 快速排序的思想很简单整个排序过程只需要三步 1在数据集之中选择一个元素作为基准pivot。 2所有小于基准的元素都移到基准的左边所有大于基准的元素都移到基准的右边。 3对基准左边和右边的两个子集不断重复第一步和第二步直到所有子集只剩下一个元素为止。 9、统计字符串中字母个数或统计最多字母数。 var str aaaabbbccccddfgh; var obj {}; for(var i0;istr.length;i){ var v str.charAt(i); if(obj[v] obj[v].value v){ obj[v].count obj[v].count; }else{ obj[v] {}; obj[v].count 1; obj[v].value v; } } for(key in obj){ document.write(obj[key].value obj[key].countnbsp;); // a4 b3 c4 d2 f1 g1 h1 } 10、写一个function清除字符串前后的空格。兼容所有浏览器 function trim(str) { if (str typeof str string) { return str.replace(/(^\s*)|(\s*)$/g,); //去除前后空白符 } } 回到顶部 其他 1、一次完整的HTTP事务是怎样的一个过程 基本流程 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务器端响应http请求浏览器得到html代码 e. 浏览器解析html代码并请求html代码中的资源 f. 浏览器对页面进行渲染呈现给用户 2、对前端工程师这个职位你是怎么样理解的 a. 前端是最贴近用户的程序员前端的能力就是能让产品从 90分进化到 100 分甚至更好 b. 参与项目快速高质量完成实现效果图精确到1px c. 与团队成员UI设计产品经理的沟通 d. 做好的页面结构页面重构和用户体验 e. 处理hack兼容、写出优美的代码格式 f. 针对服务器的优化、拥抱最新前端技术。 转载于:https://www.cnblogs.com/lyh0501/p/5329400.html
