前端面试2

2017-07-21  本文已影响18人  卡农me

1.媒体查询
2.兼容性问题
(1)不同浏览器的标签默认的外补丁和内补丁不同
解决方案:CSS里 *{margin:0;padding:0;}
(2)块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
(3)几个img标签放在一起的时候,有些浏览器会有默认的间距
解决方案:使用float属性为img布局
3.reflow、repaint

微信图片_20170721100104.jpg
4.em、rem
css里面的单位:em、rem有什么不同?
em是相对于父元素的font-size属性值来计算的
rem是相对于html标签的font-size属性值来计算的
手机端页面自适应解决方案—rem布局
  1. JS模块化
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ... 
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})
  • AMD和CMD最大的区别是对依赖模块的执行时机处理不同,注意不是加载的时机或者方式不同。
  • 很多人说requireJS是异步加载模块,SeaJS是同步加载模块,这么理解实际上是不准确的,其实加载模块都是异步的,只不过 AMD依赖前置,js可以方便知道依赖模块是谁,立即加载,而CMD就近依赖,需要使用把模块变为字符串解析一遍才知道依赖了那些模块,这也是很多人诟病CMD的一点,牺牲性能来带来开发的便利性,实际上解析模块用的时间短到可以忽略。
  • 为什么我们说两个的区别是依赖模块执行时机不同,为什么很多人认为ADM是异步的,CMD是同步的(除了名字的原因。。。)
    同样都是异步加载模块,AMD在加载模块完成后就会执行改模块,所有模块都加载执行完后会进入require的回调函数,执行主逻辑,这样的效果就是依赖模块的执行顺序和书写顺序不一定一致,看网络速度,哪个先下载下来,哪个先执行,但是主逻辑一定在所有依赖加载完成后才执行。
  • CMD加载完某个依赖模块后并不执行,只是下载而已,在所有依赖模块加载完成后进入主逻辑,遇到require语句的时候才执行对应的模块,这样模块的执行顺序和书写顺序是完全一致的。
    这也是很多人说AMD用户体验好,因为没有延迟,依赖模块提前执行了,CMD性能好,因为只有用户需要的时候才执行的原因。

一个极为简单的requirejs实现方法_javascript技巧

  1. 内核

7.严格模式和混杂模式,区分?意义?

严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。
混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码

  • Doctype不存在或者格式不正确会导致文档以混杂模式呈现。
  • 严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行;混杂模式是一种向后兼容的解析方法,可以实现IE5.5以下版本浏览器的渲染模式

8.媒体查询

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”,如下所示

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}
@media screen and (orientation: landscape) {
// 竖屏
}

“iphone.css”样式适用于最大设备宽度为480px

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

9.css选择器

!important > 行内样式 > id > class > tag

1.id选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li:nth-child)
div.test1 .span var 优先级 1+10 +10 +1  
span#xxx .songs li 优先级1+100 + 10 + 1  
#xxx li 优先级 100 +1

css2 : E[foo~="bar"] : foo属性值是一个以空格符分隔的列表,其中一个列表的值为“bar”
css3 : a[src*="abc"] : 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
css3还新增了E[foo^="bar"]、E[foo$="bar"],以^开头,以$结尾。
nth-child(n);
nth-child(3n+1) 隔两个选一个
nth-child(even);nth-child(2n)偶数
nth-child(odd) ;nth-child(2n+1)奇数

nth-last-child(n) 倒数

first-child 正数
last-child 倒数

10.cookie,localstorage和sessionstorage

cookie与localstorage区别

localstorage与sessionstorage区别

11.内联元素:span a img input font
块状元素:div h1 p ul ol li

offsetwidth = width + border + padding
clientwidth = width + padding

13.<status-line>状态行

  • 1xx:指示信息--表示请求已接收,继续处理。
  • 2xx:成功--表示请求已被成功接收、理解、接受。
  • 3xx:重定向--要完成请求必须进行更进一步的操作。
  • 4xx:客户端错误--请求有语法错误或请求无法实现。
  • 5xx:服务器端错误--服务器未能实现合法的请求。
  • 200 OK:客户端请求成功。
  • 400 Bad Request:客户端请求有语法错误,不能被服务器所理解。
  • 401 Unauthorized:请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用。
  • 403 Forbidden:服务器收到请求,但是拒绝提供服务。
  • 404 Not Found:请求资源不存在,举个例子:输入了错误的URL。
  • 500 Internal Server Error:服务器发生不可预期的错误。
  • 503 Server Unavailable:服务器当前不能处理客户端的请求,一段时间后可能恢复正常,举个例子:HTTP/1.1 200 OK(CRLF)。

301—永久移动。被请求的资源已被永久移动位置;
302—请求的资源现在临时从不同的 URI 响应请求;
305—使用代理。被请求的资源必须通过指定的代理才能被访问;
307—临时跳转。被请求的资源在临时从不同的URL响应请求;
400—错误请求;
402—需要付款。该状态码是为了将来可能的需求而预留的,用于一些数字货币或者是微支付;
403—禁止访问。服务器已经理解请求,但是拒绝执行它;
404—找不到对象。请求失败,资源不存在;
406—不可接受的。请求的资源的内容特性无法满足请求头中的条件,因而无法生成响应实体;
408—请求超时;
409—冲突。由于和被请求的资源的当前状态之间存在冲突,请求无法完成;
410—遗失的。被请求的资源在服务器上已经不再可用,而且没有任何已知的转发地址;
413—响应实体太大。服务器拒绝处理当前请求,请求超过服务器所能处理和允许的最大值。
417—期望失败。在请求头 Expect 中指定的预期内容无法被服务器满足;
418—我是一个茶壶。超文本咖啡罐控制协议,但是并没有被实际的HTTP服务器实现;
420—方法失效。
422—不可处理的实体。请求格式正确,但是由于含有语义错误,无法响应;
500—服务器内部错误。服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理;

14.为es5的Array写forEach

//其实这题非常简单,但是千万不要使用for in,因为它会把数组对象中
//的其他属性(如方法属性)都进行循环。这是一个大坑。
Array.prototype.forEach = function(cb){
   for(var i = 0;i< this.length;i++){
       cb(this[i],i);
   }
   return this;
}

15.深度复制

// 判断arr是否为一个数组,返回一个bool值
function isArray (arr) {
    return Object.prototype.toString.call(arr) === '[object Array]';  
}
// 深度克隆
function deepClone (obj) {  
    if(typeof obj !== "object" && typeof obj !== 'function') {
        return obj;        //原始类型直接返回
    }
    var o = isArray(obj) ? [] : {}; 
    for(i in obj) {  
        if(obj.hasOwnProperty(i)){ 
            o[i] = typeof obj[i] === "object" ? deepClone(obj[i]) : obj[i]; 
        } 
    } 
    return o;
}

判断数组是数组
16.介绍一下CSS的盒子模型?


CSS3 box-sizing的作用:他的三个值content-box、inherit、border-box,改变盒模型的width

17.怎样添加、移除、移动、复制、创建和查找节点

document.getElementById("myList").insertBefore(newItem,existingItem);
document.getElementById("myList").replaceChild(newnode,oldnode);
parent.appendChild(newListItem)

//创建一个<li>Water</li>
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
上一篇下一篇

猜你喜欢

热点阅读