2022届校招前端面试浏览器篇2

1.什么是单点登录？如何实现单点登录？

       单点登录是一种多站点共享登录访问授权机制，访问用户只需要在一个站点登录就可以访问其它站点需要登录访问的资源(url)。用户在任意一个站点注销登录，则其它站点的登录状态也被注销。简而言之就是：一处登录，处处登录。一处注销，处处注销。

       传统的单站点登录访问授权机制是：登录成功后将用户信息保存在session中，sessionId保存在cookie中，每次访问需要登录访问的资源(url)时判断当前session是否为空，为空的话跳转到登录界面登录，不为空的话允许访问。

     单点登录的多种实现方式：https://www.cnblogs.com/94cool/p/12556936.html

 

 

2.说一下主要的浏览器内核？

        浏览器的内核是分为两个部分的，一是渲染引擎，另一个是JS引擎。现在JS引擎比较独立，内核更加倾向于说渲染引擎。

        1、Trident内核：代表作品是IE，因IE捆绑在Windows中，所以占有极高的份额，又称为IE内核或MSHTML，此内核只能用于Windows平台，且不是开源的。

    存在很多的兼容性问题。

        2、Gecko内核：代表作品是Firefox，即火狐浏览器。因火狐是最多的用户，故常被称为firefox内核它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主   要操作系统中使用。 

        3、Webkit内核：代表作品是Safari、曾经的Chrome，是开源的项目。 

         4、Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了.

 

3.图片懒加载的原理？

详细看：https://blog.csdn.net/w1418899532/article/details/90515969

          懒加载原理：

                   一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

          懒加载思路及实现：

               实现懒加载有四个步骤，如下：
                        1.加载loading图片
                        2.判断哪些图片要加载 
                        3.隐形加载图片
                        4.替换真图片

 

衍生问题1：怎么判断一个元素出现在当前视窗？

        现在通用的是基于浏览器的窗口的判断。通过DOM的API   Element.getBoundingClientRect()  ，获取目标元素的大小及其相对于视口的位置。

引用MDN一张图说明：

        如果一个元素在视窗之内的话，那么它一定满足下面四个条件：

               1.top 大于等于 0

               2.left 大于等于 0

               3.bottom 小于等于视窗高度

               4.right 小于等于视窗宽度

衍衍生问题1：判断dom元素是否出现在浏览器窗口中有什么使用场景?

            1.懒加载（lazyload）：它目的是按需加载，而很大一部分项目的前端实现是通过判断一个元素是否出现在浏览器窗口中，如果出现则将img元素标签内的src属性中的图片地址替换成自定data-src属性的地址，但这里不一定是data-src属性，也可能是srcset，pinterest中就是这样做的，当然你也可以定义成任何你喜欢的，这只是其中的一种方式；另一种是判断元素是否出现在浏览器窗口中之后，然后加载一个HTML代码块，小米商城官网就是这样实现的，当然也有其他一些也是这样做的，这里就不一一做介绍了。

             2.无限加载（infinte scroll）：它是通过底部的 加载更多 这个代码块是否出现在浏览器窗口中，如果在，就向容器代码块中追加一定数量的相关代码块，这时 加载更多 这个代码块就会被挤压出到浏览器窗口之外。当然有些无限加载技术也使用lazyload。

             3.骨架屏技术（skelton screen）：这个技术在前一波广受关注，它的原理就是在请求一个页面时，先不显示页面的内容，先显示页面的布局，像文字、图片、视频等静态资源都不显示，而显示的是与页面布局相关的css样式。其实通俗一点来说，就是网页做一个CT，这样是不是理解起来更方便？像淘宝的pc官网，youtube都是这样实现的。

 

 

4.img src为什么不能用空 应该如何解决？

     1.img标签的src为空或者加载失败，浏览器都会自动加上一个边框，这会让人头疼，因为它一定程度上影响着网页的美观。

      2.然间看到一篇关于前端优化策略的文章，提到了一条“避免页面中空的 href 和 src”，原文是这样的：

当 <link> 标签的 href 属性为空，或 <script>、<img>、<iframe> 标签的 src 属性为空时，浏览器在渲染的过程中仍会将 href 属性或 src 属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的，因此要尽量避免。

    因此当src为空的时候要把它替换为本地一张图片或者用其它图片来代替。