面试的信心来源于过硬的基础（面试增强自信心）

在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等，想着在开年来换一份工作来重新开始自己，那么 你 准备好了吗？

下面是本人整理的一份面试材料，本想自己用的，但是新年第一天 公司突然给了我个惊喜，涨工资了！！！

1、 viewport

// width 设置viewport宽度，为一个正整数，或字符串‘device-width’

// device-width 设备宽度

// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置

// initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数

// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数

// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数

// user-scalable 是否允许手动缩放

延伸 提问

怎样处理 移动端 1px 被 渲染成 2px 问题

1 局部处理

meta标签中的 viewport属性 ，initial-scale 设置为 1

rem 按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；

2 全局处理

meta标签中的 viewport属性 ，initial-scale 设置为 0.5

rem 按照设计稿标准走即可

2、跨域的几种方式

首先了解下浏览器的同源策略

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

那么怎样解决跨域问题的呢？

1 通过jsonp跨域

1.）原生实现：

2、 document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。

1.）父窗口：(http://domain.com/a.html)

2.）子窗口：(http://child.domain.com/b.html)

弊端：请看下面渲染加载优化

3、 nginx代理跨域

4、 nodejs中间件代理跨域

5、 后端在头部信息里面设置安全域名

更多跨域的具体内容请看 https://segmentfault.com/a/1190000011145364

3、 渲染优化

1.禁止使用iframe（阻塞父文档onload事件）；

*iframe会阻塞主页面的Onload事件；

*搜索引擎的检索程序无法解读这种页面，不利于SEO;

*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript

动态给iframe添加src属性值，这样可以绕开以上两个问题。

2.禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）；

3、使用CSS3代码代替JS动画（尽可能避免重绘重排以及回流）；

4、对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU；

小图标优势在于：

1.减少HTTP请求；

2.避免文件跨域；

3.修改及时生效；

5、页面头部的 会阻塞页面；（因为 Renderer进程中 JS线程和渲染线程是互斥的）；

6、页面头部

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。