网站无障碍建设规定,自媒体账号下载注册,李可做的网站,汕头百度搜索排名优化记得去年 12月份刚来北京面试前端的时候 #xff0c;下面的这问题大部分有涉及到...是不是要做题的都会出这些。。 HTML/CSS部分 1、什么是盒子模型#xff1f; 在网页中#xff0c;一个元素占有空间的大小由几个部分构成#xff0c;其中包括元素的内容#xff08;conte…记得去年 12月份刚来北京面试前端的时候 下面的这问题大部分有涉及到...是不是要做题的都会出这些。。 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; } div style background:#F00; position:absolute; top: 50%;left: 50%;-ms-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);transform: translate(-50%,-50%); div垂直居中此div未知宽度与高度/div 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:#0909; /* 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、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。 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].count ); // 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、异步以及跨域问题如何理解 通过jquery的jsonp的方式.使用此方式,对服务器端有要求.可参考 http://www.cnblogs.com/oneword/archive/2012/12/03/2799443.html。 其他、对前端工程师这个职位你是怎么样理解的 a. 前端是最贴近用户的程序员前端的能力就是能让产品从 90分进化到 100 分甚至更好 b. 参与项目快速高质量完成实现效果图精确到1px c. 与团队成员UI设计产品经理的沟通 d. 做好的页面结构页面重构和用户体验 e. 处理hack兼容、写出优美的代码格式 f. 针对服务器的优化、拥抱最新前端技术。 转载于:https://www.cnblogs.com/litterjoan/articles/5315482.html
