前端面试题汇总2.0（附答案）.pdfVIP

百川东到海，何时复西归？少壮不尽力，老大徒伤悲。——汉乐府《长歌行》 前端⾯试题汇总2.0 （附答案） 1. div和span的区别？div是块级标签，span是⾏级标签 2. 在html中，position取值有哪⼏种，默认值是什么？取值：static、relative、fixed、absolute默认值：static 3. .前端页⾯由哪三层构成，分别是什么？作⽤是什么？前端页⾯构成：结构层、表⽰层、⾏为层结构层（structural layer）由 HTML 或 XHTML之类的标记语⾔负责创建。标签，也就是那些出现在尖括号⾥的单词，对⽹页内容的语义含义做出了描述，但这些标签不 包含任何关于如何显⽰有关内容的信息。例如，P标签表达了这样⼀种语义：“这是⼀个⽂本段。”表⽰层（presentation layer）由 CSS 负责创建。 CSS对“如何显⽰有关内容”的问题做出了回答。⾏为层（behaviorlayer）负责回答“内容应该如何对事件做出反 应”这⼀问题。这是 Javascript 语⾔和 DOM主宰的领域。 4. 如何居中⼀个浮动元素？ ⽅式1:设置容器的浮动⽅式为相对定位，然后确定容器的宽⾼⽐如宽500 ⾼ 300 的层，然后设置层的外边 距。!DOCTYPEHTMLstyletype=“text/css” div{ width: 500px; height: 300px; margin: -150px 0 0 -250px; position: absolute; left: 50%; top: 50%; background-color: yellow; } 元素居中 ⽅式2：需要position:absolute;绝对定位。⽽层的定位点，使⽤外补丁margin负值的⽅法。负值的⼤⼩为层 ⾃⾝宽度⾼度除以⼆。 styletype=“text/css” 让层垂直居中于浏览器窗⼝ 5. 请简述HTML和XHTML最重要的4点不同？不同： XHTML要求正确嵌套 XHTML 所有元素必须关闭 XHTML 区分⼤⼩写 XHTML 属性值要⽤双引号 XHTML ⽤ id 属性代替 name 属性 XHTML 特殊字符的处理6 6. 页⾯布局中常听说的“结构与表现”分离，“结构”是指？“表现”是指？“结构”：HTML“表现”：CSS 7. 怎么样从web前端⽅⾯优化性能？⾄少列举5点？1) HTML部分u 语义化HTML：好处在于可以使代码简洁清晰，⽀持不同设备，利 于搜索引擎，便于团队开发；u 减少DOM节点 ：加速页⾯渲染；u 给图⽚加上正确的宽⾼值：这可以减少页⾯重绘，同时防⽌图⽚缩 放；u 防⽌src属性和link的href属性为空：当值为空时，浏览器很可能会把当前页⾯当成其属性值加载；u 正确的闭合标签：如避免 使⽤ ，浏览器会多⼀个将它解析成div/div的过程；u 链接为 ⽬录或⾸页的地址后⾯加”/”，如 ⽤LINK ⽽不⽤@import⽅式导⼊样式 ；u 样式放在页头，JS放在页尾；u 缩⼩favicon.ico并缓存；2) CSS部分u 避免使⽤CSS Expressions(CSS表达式)：如background-color: expression( (newDate()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;u 避免使⽤CSS Filter（CSS滤镜） ；u 使⽤CSS缩写，减少代码量；u 通过CSSSprites把同类图⽚合成⼀张，减少图⽚请求；u 减少查询层级：如.header .logo要好过.header .top .logo；u 减少查询范围 ：如.headerli要好过.header li；u 避免TAG标签与 CLASS或ID并存 ：如a.top、button#submit；u 删除重复的CSS；3) Javscript部分u 尽量少⽤全局变量；u 使⽤事件代理绑定事 件，如将事件绑定在body上进⾏代理；u 避免频繁操作DOM节点；u 不使⽤EVAL ；u 减少对象查找，如a.b.c.d这种查找⽅式⾮常耗 性能，尽可能把它定义在变量⾥ ；u 类型转换 ：把数字转换成字符串使⽤”” + 1，浮点数转换成整型使⽤Math.floor()或者 Math.round()；u 对字符串进⾏循环操作，譬如替换、查找，应使⽤正则表达式 ；u 删除重复的JS；4) 服