前端面试2
1.媒体查询
2.兼容性问题
(1)不同浏览器的标签默认的外补丁和内补丁不同
解决方案:CSS里 *{margin:0;padding:0;}
(2)块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
(3)几个img标签放在一起的时候,有些浏览器会有默认的间距
解决方案:使用float属性为img布局
3.reflow、repaint
4.em、rem
css里面的单位:em、rem有什么不同?
em是相对于父元素的font-size属性值来计算的
rem是相对于html标签的font-size属性值来计算的
手机端页面自适应解决方案—rem布局
- JS模块化
- AMD是”Asynchronous Module Definition”的缩写,意思就是”异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
- AMD也采用require()语句加载模块,但是不同于CommonJS。
- 主要有两个Javascript库实现了AMD规范:require.js和curl.js。
- AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
- CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
- 区别:
1.对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。
2.CMD 推崇依赖就近,AMD 推崇依赖前置。
// 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技巧
- 内核
- IE:trident 内核
- Firefox:gecko 内核
- Safari:webkit 内核
- Chrome:Blink 内核(Blink内核基于webkit内核)
- Opera:Blink 内核
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)
- 内联样式表的权值为 1000
- ID 选择器的权值为 100
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
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区别
- cookie的大小是受限的
- 请求一个新的页面的时候cookie都会被发送过去
- cookie指定作用域,不可以跨域调用
- cookie是http规范的一部分,localstorage在本地“存储”数据
- localstorage是html5的新特性,所以旧浏览器不一定兼容
localstorage与sessionstorage区别
- 存储在 localStorage 里面的数据没有过期时间(expiration time),而存储在 sessionStorage 里面的数据会在浏览器会话(browsing session)结束时被清除,即浏览器关闭时。
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的盒子模型?
-
有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading(标准W3C盒子模型width和height不包括margin,border,padding。但是IE盒子模型包括padding和border。)
-
盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)
CSS3 box-sizing的作用:他的三个值content-box、inherit、border-box,改变盒模型的width
17.怎样添加、移除、移动、复制、创建和查找节点
- 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点 - 添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
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)
- 查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性