前端面试题目答案总结（一）

最新推荐文章于 2024-06-24 22:00:06 发布

原创

最新推荐文章于 2024-06-24 22:00:06 发布 · 401 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#面试题目答案

本文总结了前端面试中常见的技术点，包括预加载和懒加载的实现方法，如CSS预加载、JavaScript预加载和Ajax预加载；详细解释了懒加载的工作原理和实现步骤；探讨了React中setState的异步行为及其同步更新策略；最后，讨论了JavaScript中函数参数传递的值与引用的区别，并介绍了移动端屏幕适配的解决方案，如viewport的使用和常见属性设置。

1.预加载，懒加载怎么实现

预加载核心要点：

1.图片等静态资源在使用前提前请求；

2.资源后续使用可以从缓存中加载，提升用户体验；

3.页面展示的依赖关系维护（必要的资源加载完才显示页面，防止白屏）

实现预加载主要有三个方法：

1.使用CSS，可容易，搞笑地预加载图片，代码如下：

#preload-01{background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px;}
#preload-02{background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px;}
#preload-03{background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px;}

将这三个ID选择容器应用到html元素中，我们可以通过CSS的background属性将图片预加载到屏幕外的背景上，只要图片的路径不变，当他们在web其他地方被调用的时候，浏览器就会在渲染过程使用预加载的图片，不需要JavaScript，但是这个方法会使得加载的图片和页面的内容一起被加载，加长了页面的整体加载时间。为了改进这种方法，可以增加JS代码来优化：

function preloader() {
  if(document.getElementById) {
    document.getElementById("preload-01",style.background = 
    "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";)
    document.getElementById("preload-02",style.background = 
    "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";  )
    document.getElementById("preload-03",style.background = 
    "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";  )
  }
}
function addLoadEvent() {
  var oldonload = window.onload;
  if(typeof window.onload !== 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if(onload){
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(preloader);

在脚步第一部分，我们使用了类选择器的元素并设置了background属性，以预加载不同的图片，脚本第二部分，使用addLoadEvent()函数来延迟preloader()函数加载的时间，知道页面加载完毕，如果js无法在用户的浏览器中正常运行，图片就不会被预加载，当页面调用的时候就会正常显示。

2.使用JavaScript来实现预加载：