前端基础面试总结

自己总结一些前端基础的面试题，和大家分享下。

1、img图片标签的title和alt属性的区别：

title表示鼠标停留在图片上时，显示的一个悬浮框，里面的文字；

alt表示图片没有显示时在图片本来的区域内显示的文字说明

2、css中link和import的区别：

link是html的一个标签，import是css的一个标签；

页面被加载时，link同时被加载，而import引用的css会等页面加载完后再进行加载

link不存在兼容问题，而import在低版本中无法显示

3、行内元素有哪些，块级元素又有哪些：

行内元素：a、span、input、strong、em、textarea、button、img、laber、select

块级元素：div、ul、li、p、h1-h6、dl、dd、dt

4、简述一下src和href的区别：

href是Hypertext Reference的缩写，指向网络资源所在的位置，建立当前元素或当前文档（链接）之间的链接；

src指向外部资源的位置，指向的内容会嵌入到当前文档标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内。

5、简述一下同步和异步的区别：

同步是阻塞模式，异步是非阻塞模式；

同步是指一个进程在执行某个请求时，如果该请求要一段时间才能响应，那么该进程会一直等下去，知道返回信息才继续执行；

异步是指进程不需要等待某一个请求，而是会一直执行下去。

6、经常遇到的浏览器兼容有哪些，怎么解决：

（1）、浏览器默认的margin和padding不同，解决方案是初始化来统一*{margin：0；padding0}

（2）、谷歌浏览器下默认将小于12px的字体强制转成12px的，解决方案是通过css属性 -webkit-text-size-adjust: none解决。

（3）、png24位图片在ie6浏览器下会出现背景，要换成png8

（4）、超链接在被点击后就不显示了，不再剧本hover和active属性，这是由于css属性顺序排列错误引起的，正确的顺序是link-visited-hover-avtive

7、web stroage和cookie的区别

web stroage相对于cookie来说，存储容量更大，自身具备setItem，getItem，removeItem，clear等功能，

cooke大小受限制，每次请求都会携带cookie

8、cookie和session的区别

（1）cookie的数据是放在客户端的浏览器上面的，而session数据放在服务上

（2）session默认存放在服务器端的一个文件夹里

（3）session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏览器禁用了 cookie ，同时 session 也会失效（但是可以通过其它方式实现，比如在 url 中传递 session_id）

（4）session 可以放在 文件、数据库、或内存中都可以

（5）户验证这种场合一般会用 session

9、display：none和visibility：hidden的区别

display：none隐藏对应的元素，在文档中不再分配空间

visibility：hidden也会隐藏元素，但文档保留其元素的空间

10、attribute和property的区别是什么

attribute是dom元素在html文档中标签的属性

property是dom元素在js中作为对象拥有的属性

11、html5有哪些新特性，移除了哪些元素，如果处理H5的兼容性

新特性：语义化标签header，footer，nav，aside，article，section

移除：basefont、big、center、strong、font、frame、frameset、noframes

兼容：IE6/7/8下可以通过document.createElement方法产生新的标签，利用这个方法让浏览器支持HTML5的新标签。

12、写出添加、移除、移动、复制、创建和查找节点的语句

添加：createDocumentFragment()//创建一个dom片段

createElement() //创建一个具体元素

createTextNode()//创建一个文本节点

移除：removeChild()

替换：replaceChild()

插入：insertBefore()

查找：documen.getElementById（）//通过id

document.getElementsByName()//通过class

document.getElementByTag()//通过标签

13、null和undefined的区别

null表示没有对象，即该处不应该有值，典型用法是：

（1）作为函数的参数，表明该函数的参数不是对象

（2）表示对象原始链的重点

underfind表示缺少值，就是此处应该有值，但是没有被定义

（1）变量被声明，没有定义，则是underfind

（2）函数调用的，应该提供的函数没有提供，underfind

（3）对象没有赋值的属性，则为underfind

（4）函数没有返回值，则默认返回underfind

14、$(document).ready和onload的区别

$(document).ready是dom节点绘制完毕后执行，不必等到加载完毕，并且可以同时编写多个

onload必须等到页面内包括图片的所有元素加载完毕后才能执行，不能同时编写多个，如果有多个window.onload方法，只会执行一个 

15、get和post 的区别

效率上：get从服务上获取数据（也可以上传），请求效率较高

post可以从服务器端发送和下载数据，效率不如get

缓存：get请求能被缓存，默认的请求也是有缓存的

大小：get：不同浏览器不同服务器不同，大小一般限制在2-8k之间

post：提交的数据比较大，大小靠服务器的设定值限制，PHP默认是2M

安全性：get所有请求的参数都在url上，且服务器的访问日子会记录，不安全

postURL中只有资源路径，不包含参数，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全。所有涉及用户隐私的数据都要用POST传输

16、谈谈性能优化的问题？

（1）代码层面：避免使用css表达式，避免使用高级选择器，通配选择器等。

（2）缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等。  

（3）请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载等。   

（4）请求带宽：压缩文件，开启GZIP， 

（5）移动端性能优化:尽量使用css3动画，开启硬件加速。适当使用touch事件代替click事件.避免使用css3渐变阴影效果.尽可能少的使用box-shadow与gradients box-shadow与gradients往往都是页面的性能杀手