面试知识1

Paste_Image.png

Paste_Image.png

标签语义化

去掉或者丢失样式的时候能够让页面呈现出清晰的结构
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化

块级标签，行内标签

块级：div, ul, li, ol, table, th, tbody, tfoot, tr, pre, fieldset, form, h1-h6, p等
a, abbr, b, br, code, em, img, input, label, select, textarea, strong等

盒子模型(IE盒子模型的区别)
总宽度 ＝ margin＋padding＋border＋content，IE的盒子模型的宽度不计padding和border
css3的box-sizing
属性，详见https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizingcontent-box，border和padding不计算入width之内
border-box，border和padding计算入width之内

样式继承
可继承的样式font-size
font-family
color
text-indent

CSS sprite
减少请求

link和@import的区别

link属于XHTML标签，而@import是CSS提供的
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题
link方式的样式的权重 高于@import的权重

CSS优化

嵌套层级不要太深，一般三层最多
css解析从右向左，所以最右边的应该是相对少一点
html用了base64的img的话，并不会缓存起来，可以将这个base64的图片放在css文件里，css会缓存，图片就缓存起来了
尽量不用后代元素选择器，最右边的一层不要是标签，尤其是像div这种非常常用的标签
多使用css的继承，而不是每一次都书写时都全部重写一遍。写多个css属性时，能连在一起写的就连在一起写

预处理器

Sass
Ruby Sass 与 Lib Sass 的区别
Less
Stylus

严格模式

'use strict'
不能使用eval()
抑制this的行为
不允许读写eval和arguments的值
不允许意外创建全局变量

变量

使用var定义的全局变量不能使用delete删除
无var创建的全局变量可以使用delete删除
隐式类型转换
数字与字符串相加，结果为字符串
数字与字符串相减，结果为数字
比较变量的是否相同时，要采用===，==会发生隐式类型转换
NaN与任何变量不相等

类型检测

typeof
instanceof
constructor
Object.prototype.toString.apply()

作用域

全局作用域
函数作用域

数组

数组的类型检测
数组的方法
slice()
map()
every()
some()
filter()

闭包

概念
作用
创建匿名执行函数
缓存变量，防止被垃圾回收
实现函数的封装
应用场景
内部函数访问外部函数的变量
使用闭包代替全局变量
封装相关功能
回调函数
创建私有变量和公有变量
特性
经典例子：列表点击，弹出每一个的index

/* 错误做法 */var elems = document.getElementById('links').getElementsByTagName('li');for ( var i = 0; i < elems.length; i++ ) { elems[i].addEventListener('click', function ( event ) { event.preventDefault(); alert(i); }, false);}

/* 正确的做法，使用闭包 */var elems = document.getElementById('links').getElementsByTagName('li');for ( var i = 0; i < elems.length; i++ ) { (function ( index ) { elems[i].addEventListener('click', function ( event ) { event.preventDefault(); alert(index); }, false); })( i );}

数组去重
最简单的方法
function removeDuplicate( arr ) { var len = arr.length, temp = []; for ( var i = 0; i < len; i+=1 ) { if ( temp.indexOf(arr[i]) === -1 ) { temp.push(arr[i]); } } return temp;}

冒泡排序
function bubbleSort( arr ) { var len = arr.length, temp; for ( var i = 0; i < len - 1; i ++ ) { for ( var j = 0; j < len - 1 - i; j++ ) { if ( arr[j] > arr[j+1] ) { temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } } return arr;}