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的功能，但仍有很多自己的新特性：

1. 对 CommonJS 、 AMD 、ES6的语法做了兼容

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

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

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

5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间

6. 支持 SourceUrls 和 SourceMaps，易于调试

7. 具有强大的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，

代码层面的优化

1. 少用全局变量

2. 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

3. 用setTimeout来避免页面失去响应

4. 多个变量声明合并

5. 避免使用with(with会创建自己的作用域，会增加作用域链长度)

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

7. 尽量避免写在HTML标签中写Style属性

移动端性能优化

1. 尽量使用CSS3动画，开启硬件加速

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

3. 避免使用css3渐变阴影效果

4. 可以用transform: translateZ(0)来开启硬件加速。

5. 不滥用Float。Float在渲染时计算量比较大，尽量减少使用

6. 不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。

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

   PC端的在移动端同样适用