2018前端圈面试题第一弹

position的值， relative和absolute分别是相对于谁进行定位的？

absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed （老IE不支持）生成绝对定位的元素，一般相对于浏览器窗口或 frame 进行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

static 默认值。没有定位，元素出如今正常的流中

sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

如何解决跨域问题

jsonp

原理是：动态插入script标签，经过script标签引入一个js文件，这个js文件载入成功后会执行咱们在url参数中指定的函数，而且会把咱们须要的json数据做为参数传入。

因为同源策略的限制，XmlHttpRequest只容许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，能够经过script标签实现跨域请求，而后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

优势是兼容性好，简单易用，支持浏览器与服务器双向通讯。缺点是只支持GET请求。

XML和JSON的区别？

数据体积方面。

JSON相对于XML来说，数据的体积小，传递的速度更快些。

据交互方面。

JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

数据描述方面。

JSON对数据的描述性比XML较差。

传输速度方面。

JSON的速度要远远快于XML

谈谈你对webpack的见解

webpack 是模块打包工具，可使用webpack来管理模块依赖，并编译输出所需的静态文件。打包web开发中所用的的html css javascript 以及各类静态文件。

webpack的两大特点

1.code splitting（能够自动完成）(根据代码的分割并对文件进行分块)

2.loader 能够处理各类类型的静态文件，而且支持串联操做

webpack 是以commonJS的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

webpack具备requireJs和browserify的功能，但仍有不少本身的新特性：

对 CommonJS 、 AMD 、ES6的语法作了兼容

对js、css、图片等资源文件都支持打包

串联式模块加载器以及插件机制，让其具备更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持

有独立的配置文件webpack.config.js

能够将代码切割成不一样的chunk，实现按需加载，下降了初始化时间

支持 SourceUrls 和 SourceMaps，易于调试

具备强大的Plugin接口，大可能是内部插件，使用起来比较灵活

8.webpack 使用异步 IO 并具备多级缓存。这使得 webpack 很快且在增量编译上更加快

前端的模块化

AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程当中对模块定义的规范化产出。

AMD 是提早执行，CMD 是延迟执行。

AMD推荐的风格经过返回一个对象作为模块对象，CommonJS的风格经过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

谈谈性能优化问题

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

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

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

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

代码层面的优化

少用全局变量

用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能

用setTimeout来避免页面失去响应

多个变量声明合并

避免使用with(with会建立本身的做用域，会增长做用域链长度)

避免图片和iFrame等的空Src。空Src会从新加载当前页面，影响速度和效率

尽可能避免写在HTML标签中写Style属性

移动端性能优化

尽可能使用CSS3动画，开启硬件加速

适当使用触摸事件代替点击事件

避免使用css3渐变阴影效果

能够用transform: translateZ(0)来开启硬件加速。

不滥用Float。Float在渲染时计算量比较大，尽可能减小使用

不滥用Web字体。Web字体须要下载，解析，重绘当前页面，尽可能减小使用。

CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引起手机过耗电增长

PC端的在移动端一样适用

解决前端疑难杂症加群QQ786276452