前端面试题

来源：互联网发布：可以做生意的软件编辑：程序博客网时间：2024/04/30 15:27

1.PC主浏览器和内核 IE(IE内核) 火狐（Gecko）谷歌（webkit） opear(Presto)

2.你如何对网站的文件和资源进行优化?期待的解决方案包括：文件合并文件最小化/文件压缩使用CDN托管缓存的使用

3.清除浮动的几种方式，各自的优缺点：

1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)

4.解释css sprites，如何使用：css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

5.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

concat()合并数组

6.document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)

7.添加删除替换插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore()
obj.replaceChild()
obj.removeChild()

8.js基本数据类型：number string boolean null undefined object

js对象 function Array Date

9.window.onload的作用

当js代码需要获取页面中的元素的时候，如果script放在页面的前边，那就需要加window.onload

如果script放在元素后面，那就不需要加

10.同源策略

同协议，同端口，同域名

11.怎么跨域发起请求

cors，jsonp

要实现h5跨域ajax要设置xhr.withCredentials = true,IE8/9可能要用XDomainRequest这个类

12.cors的细节

13.jsonp的原理

14.postmessage，document.domain降域

15.csrf

16.xss注入

17.还是问跨域有哪些解决方案，各有什么优缺点

18.前端安全

19.前端优化

20.link和@import的区别

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：link支持使用JavaScript控制DOM去改变样式；而@import不支持。

21.cookie localStorge sessionStorge

特性CookielocalStoragesessionStorage数据的生命期可设置失效时间，默认是关闭浏览器后失效除非被清除，否则永久保存仅在当前会话下有效，关闭页面或浏览器后被清除存放数据大小4K左右一般为5MB一般为5MB与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题仅在客户端（即浏览器）中保存，不参与和服务器的通信仅在客户端（即浏览器）中保存，不参与和服务器的通信易用性需要程序员自己封装，源生的Cookie接口不友好源生接口可以接受，亦可再次封装来对Object和Array有更好的支持源生接口可以接受，亦可再次封装来对Object和Array有更好的支持22.js事件机制

23.Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

1）<!DICTYPE>声明位于文档中的最前面，处于<html>标签之前，告诉浏览器的解析器，用什么文档类型来规范解析这个文档。
2）严格模式的排版和js运作模式是以该浏览器支持的最高标准运行
3）在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

24.HTML5 为什么只需要写 <!DOCTYPE HTML>？
html5不基于SGML(标准通用语言)，因此不需要对DTD（文档类型定义）进行引用，但需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式运行）
而html4.01基于SGML，所以需要对DTD进行应用，才能告知浏览器文档所使用的文档类型。这些基础的问题和知识我们是必须掌握的，这个页面制作感觉还不错，感兴趣的可以好好学学

25.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
1）.css规范规定，每个元素都有display 属性，配档该元素的类型，每个元素都有默认的display值。CSS对网页属性的规范很重要
2）.行内元素有：a b soan img input select strong（强调的语气）
块级元素有：div ul li ol dl dt dd h1 h2 h3... p
空元素(没有内容的HTML内容被称为空元素，空元素是在开始标签中关闭的)有: img input br hr link meta

26.页面导入样式时，使用link和@import有什么区别？
1）.link属于XHTML标签，而@import是CSS提供的；
2）.页面被加载的时，link会同事被加载，而@import引用的CSS会等到页面被加载完再加载；
3）.import只有在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
4）.link 方式的样式的权重>@import的权重

27.常见的浏览器内核有哪些？
IE浏览器的内核：Trident、
Mozilla的Gecko、
Chrome的Blink（WebKit的分支）、
Opera内核原为Presto，现为Blink

28.介绍一下你对浏览器内核的理解？
浏览器内核是浏览器最重要的或者说是最核心的部分。主要负责对网页语法的解释并渲染(显示)网页。
浏览器内核又可以分为两个部分（渲染引擎和js引擎）
js引擎则是解析JavaScript语言，执行javascript语言来实现网页的动态效果。
渲染引擎负责取的网页的内容，整理讯息，以及计算网页的显示方式，然后哦会输出至显示器或者打印机。

29.简述一下你对HTML语义化的理解？
HTML语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
HTML语义化的主要目的是：
1).为了在没有css的情况下，页面也能呈现出很好地内容结构、代码结构
2).有利于用户体验
3).有利于SEO和搜索引擎建立良好的沟通。
4).方便其他设备解析以意义的方式来渲染网页、
5).便于团队开发和维护，增加可读性。
另外值得一提的是很多人都不知道html是什么东西，这里还是自己好好的去学习一番吧！

30.HTML5的离线储存怎么使用
离线存储局势将一些源代码文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法(更新相关文件或者使用相关 API)，可以更新、删除离线存储等操作

1 0