前端开发面试题，2021年4月10号

第一个问题，怎么处理移动端1px被渲染成2px的问题？

答：局部处理：

Meta，标签中的Viewport属性，initial_scale设置为1rem按照设置标准走，外加利用transform的scale(.5)缩小一倍即可

（2）、全局处理：meat标签中的viewport设置为0.5rem 按照设计稿标准走即可

2.跨域的几中方式：从同源策略\SOP 是一种约定，他是浏览器最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS，CSRF等攻击，所谓同源策略就是指“协议+域名+端口”三者相同，缺一不可

2.1怎么解决跨域问题？

答：通过Jsonp跨域来实现

2.1.1:document.domain+iframe跨域

2.2.1.2：nginx代理跨域

2.2.1.3:node.js中间件代理跨域

3.0：渲染优化

答：3.1禁止使用i frame(阻塞父文档onload 事件)

还有就是搜索引擎的检索程序无法读取到这种页面，不利于SEO

还有就是使用i frame和主页面共享连接池,而浏览器对相同域的连接有限制所以会影响页面的并行加载。如果真的要用iframe之前需要考虑这两个缺点。可以通过js动态给iframe添加src属性值这样就可以避免以上两个问题

3.11：禁止使用gate图片实现loading效果主要目的就是降低CPU的消耗，提升渲染性能

3.12：使用CSS 3代码，代替js动画 这样的目的是为了尽可能避免重绘和重排

注意这里可能会问到重绘和重排回流这三个问题:重绘：的意思是指当页面元素样式改变，不影响元素在文档流中的位置时，浏览器只会将新样式赋予元素，并进行重新绘制的操作

回流是指tree的中的一部分或全部，因为元素的规模尺寸，布局隐藏等改变时，浏览器重新渲染部分dom或全部的dom过程，回流也称为重排

3.13:对于一些小图标可以使用base64位编码，已减少网络请求，但不建议大图使用，比较消耗CPU

用小图标的优势在于第一减少http请求，避免文件跨域三修改及时生效