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

1.什么是ajax？

    AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

   衍生问题1：除了Ajax获取后台数据之外，还有没有其他的替代方案？（知不知道fetch？）

       除了XMLHttpRequest对象来获取后台的数据之外，还可以使用一种更优的解决方案fetch。

    fetch规范与jQuery.ajax()主要有两种方式的不同，牢记：

1. 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

2. 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。（默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于维护一个用户会话，则导致未经认证的请求(要发送 cookies，必须发送凭据头.

    衍生问题2：ajax的实现原理？

     Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

2.cookie、localStroage、sessionStroage有什么作用？有什么区别？

    三者都是用来做浏览器缓存的。

    区别:
        1、cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
        2、存储大小限制也不同，cookie数据不能超过4k，sessionStorage和localStorage 但比cookie大得多，可以达到5M
        3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
        4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面(即数据不共享)；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的（即数据共享）。

安全性的考虑

需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台，你就随意修改它们的值，也就是说如果你的网站中有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。

衍生问题1：cookie和session有什么区别？

        会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。

       什么是cookie？

             Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。

            由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。于是就给客户端们颁发一个通行证，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。

       什么是session？

              Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。

　　如果说Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。

3.web安全方面的东西，知道哪些？

     从web漏洞及其防范方案来回答。

    1.XSS 攻击，即跨站脚本攻击（Cross Site Scripting），它是 web 程序中常见的漏洞。 

       原理：

         攻击者往 web 页面里插入恶意的 HTML 代码（Javascript、css、html 标签等），当用户浏览该页面时，嵌入其中的 HTML 代码会被执行，从而达到恶意攻击用户的目的。如盗取用户 cookie 执行一系列操作，破坏页面结构、重定向到其他网站等。

       类型：

          1.反射性XSS，也就是非持久性XSS。用户点击攻击链接，服务器解析后响应，在返回的响应内容中出现攻击者的XSS代码，被浏览器执行。一来一去，XSS攻击脚本被web server反射回来给浏览器执行，所以称为反射型XSS。

          2.持久型XSS。区别就是XSS恶意代码存储在web server中，这样，每一个访问特定网页的用户，都会被攻击。

           3.基于DOM的XSS，也就是web server不参与，仅仅涉及到浏览器的XSS。比如根据用户的输入来动态构造一个DOM节点，如果没有对用户的输入进行过滤，那么也就导致XSS攻击的产生。过滤可以考虑采用esapi4js。

      （ 1）非持久型跨站：即反射型跨站脚本漏洞，是目前最普遍的跨站类型。跨站代码一般存在于链接中，请求这样的链接时，跨站代码经过服务端反射回来，这类跨站的代码不存储到服务端（比如数据库中）。上面章节所举的例子就是这类情况。
       （2）持久型跨站：这是危害最直接的跨站类型，跨站代码存储于服务端（比如数据库中）。常见情况是某用户在论坛发贴，如果论坛没有过滤用户输入的Javascript代码数据，就会导致其他浏览此贴的用户的浏览器会执行发贴人所嵌入的Javascript代码。
        （3）DOM跨站（DOM XSS）：是一种发生在客户端DOM（Document Object Model文档对象模型）中的跨站漏洞，很大原因是因为客户端脚本处理逻辑导致的安全问题。

     如何防范：

• web 页面中可由用户输入的地方，都要对输入的数据转义、过滤处理
• 后台输出页面的时候，也需要对输出内容进行转义、过滤处理（因为攻击者可能通过其他方式把恶意脚本写入数据库）
• 前端对 html 标签属性、css 属性赋值的地方进行校验

    2.Sql注入。所谓SQL注入，就是通过把SQL命令插入到Web表单提交或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。

     如何防范：

       1.严格检查输入变量的类型和格式。例如对字符串类型的参数的校验 （正则校验）

       2.过滤和转义特殊字符，例如单引号、双引号、反斜杠、null等。

   

    3.DOS攻击

      概念：

       1. DoS：Denial of Service，拒绝服务，即无法及时接收并处理外界合法请求。

       2. DoS攻击：指造成DoS的攻击行为，目的是使攻击目标计算机无法提供正常的服务。最常见的DoS攻击有计算机网络带宽攻击和连通性攻击。其中，带宽攻击是指以极大通信量冲击通往目标计算机的网络，使得所有可用网络资源都被消耗殆尽，导致合法的用户请求无法通过，无法到达目标计算机。而连通性攻击则是指用大量的连接请求攻击目标计算机，使得所有可用的操作系统资源都被消耗殆尽，导致目标计算机无法处理合法用户的请求。

       3. DDoS攻击：DDoS即Distributed Denial of Service，DDoS攻击即是分布式DoS攻击。攻击者借助客户/服务器技术，控制并利用多个傀儡机（肉鸡），对一个或多个攻击目标发起DDoS攻击，从而成倍地提高DoS攻击的威力。

    如何避免:

      以前网络管理员对抗Dos可以采取

     一：过滤IP地址方法。因为dos攻击只由一台主机发起，所以可以封ip。

     二是过滤不必要的服务和端口。过滤不必要的服务和端口，即在路由器上过滤假IP ，只开放服务端口成为很多服务器的流行做法，例如WWW服务器那么只开放80而将其他所有端口关闭或在防火墙上做阻止策略。

     4.csrf攻击

     CSRF：Cross Site Request Forgery（跨站点请求伪造）。
     CSRF 攻击者在用户已经登录目标网站之后，诱使用户访问一个攻击页面，利用目标网站对用户的信任，以用户身份在攻击页面对目标网站发起伪造用户操作的请求，达到攻击目的。

      如何避免：

• Referer Check 最常见的应用是“防止图片盗链”，检查referer来源，只有自己域名下的才能通过。缺陷在于服务器并非什么时候都能取到referer，如https
• anti CSRF Token 业界一致的做法是使用一个token，使用cookie值加密（MD5），因为攻击伪造网站无法获取被攻击网站的cookie，因此也就无法构造出完整的URL实施CSRF攻击了。使用原则：Token生成一定要随机

 

 

衍生问题1：知道referer头部吗？它有什么作用？直接请求服务器时referer是多少？在CSRF中的作用？

       referer是http请求头的一部分，当浏览器（或者模拟浏览器行为）向web 服务器发送请求的时候，头信息里有包含Referer。

比如我在www.google.com 里有一个www.baidu.com 链接，那么点击这个www.baidu.com ，它的header 信息里就有：Referer=http://www.google.com。

       Referer的作用？

            1.防盗链。

                  我在www.google.com里有一个www.baidu.com链接，那么点击这个www.baidu.com，它的header信息里就有：

Referer=http://www.google.com

                   那么可以利用这个来防止盗链了，比如我只允许我自己的网站访问我自己的图片服务器，那我的域名是www.google.com，那么图片服务器每次取到Referer来判断一下是不是我自己的域名www.google.com，如果是就继续访问，不是就拦截。  

            2.防止恶意请求。

                   比如静态请求是*.html结尾的，动态请求是*.shtml，那么由此可以这么用，所有的*.shtml请求，必须 Referer  为我自己的网站。

       

            直接在浏览器的地址栏中输入一个资源的URL地址，那么这种请求是不会包含Referer字段的，因为这是一个“凭空产生”的HTTP 请求，并不是从一个地方链接过去的。也就是说当直接请求服务器时referer为空。

            在cors中的作用是用来检查referer来源，只有自己域名下的才能通过。也就是防盗链。

 

衍生问题2：什么是CSP？有什么作用？

         内容安全策略（CSP），其核心思想十分简单：网站通过发送一个 CSP 头部，来告诉浏览器什么是被授权执行的与什么是需要被禁止的。其被誉为专门为解决XSS攻击而生的神器。

     1.CSP是什么

             CSP指的是内容安全策略，为了缓解很大一部分潜在的跨站脚本问题，浏览器的扩展程序系统引入了内容安全策略（CSP）的一般概念。这将引入一些相当严格的策略，会使扩展程序在默认情况下更加安全，开发者可以创建并强制应用一些规则，管理网站允许加载的内容。简单来说，就是我们能够规定，我们的网站只接受我们指定的请求资源。

      2. CSP的意义

             防XSS等攻击的利器。CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

      3.CSP的分类

            （1）Content-Security-Policy
                     配置好并启用后，不符合 CSP 的外部资源就会被阻止加载。
            （2）Content-Security-Policy-Report-Only
                      表示不执行限制选项，只是记录违反限制的行为。它必须与report-uri选项配合使用。

      4.CSP的使用

                1）在HTTP Header上使用（首选）

"Content-Security-Policy:" 策略
"Content-Security-Policy-Report-Only:" 策略

•         2）在HTML上使用

<meta http-equiv="content-security-policy" content="策略">
<meta http-equiv="content-security-policy-report-only" content="策略">

•        Meta 标签与 HTTP 头只是行式不同而作用是一致的，如果 HTTP 头与 Meta 定义同时存在，则优先采用 HTTP 中的定义。

             如果用户浏览器已经为当前文档执行了一个 CSP 的策略，则会跳过 Meta 的定义。如果 META 标签缺少 content 属性也同样会跳过。

 

衍生问题2：如何防止js获取cookie？

      在cookie中设置HttpOnly属性，那么通过js脚本将无法读取到cookie信息，这样能有效的防止XSS攻击。

String sessionid = request.getSession().getId();
response.setHeader("SET-COOKIE", "JSESSIONID=" + sessionid + "; Path=/domain; HttpOnly");

 

 4.什么是渐进增强？什么是优雅降级？ 

         渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

         优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

 

5.什么是跨域？

    跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

    衍生问题1：讲讲跨域的几种方式？

            1.document.domain + iframe跨域

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

                   实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

                  例如：让位于a.taotao.com的服务器能够读取b.taotao.com设置的cookie值。如果b.taotao.com的页面创建的cookie把 它的path属性设置为”/”，把domain属性设置成”.taotao.com”，那么所有位于b.taotao.com的网页和所有位于 a.taotao.com的网页，以及位于taotao.com域的其他服务器上的网页都可以访问(或者说是得到)这个cookie。

            2.window.postMessage，在两个页面之间的数据传递

                   发送信息：

//弹出一个新窗口
var domain = 'http://haorooms.com';
var myPopup = window.open(domain 
            + '/windowPostMessageListener.html','myWindow');

//周期性的发送消息
setTimeout(function(){
    //var message = '当前时间是 ' + (new Date().getTime()); 
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等
    console.log('传递的数据是  ' + message);
    myPopup.postMessage(message,domain);
},1000);

             接受的页面：

//监听消息反馈
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://haorooms.com') return; //这个判断一下是不是我这个域名跳转过来的
    console.log('received response:  ',event.data);
},false);

              3.动态创建script

                      这个没什么好说的，因为script标签不受同源策略的限制。

            4.CORS跨域

                     CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

            5.JSONP跨域

                    原理：通过通过`script`标签引入一个`js`文件，这个`js`文件载入成功后会执行我们在url参数中指定的函数，并且会把json数据作为参数传入。 

                     JSONP与CORS的区别？              

                             1. JSONP的对浏览器的支持较好；虽然目前主流浏览器都支持CORS，但IE9及以下不支持CORS。

                              2. JSONP只能发起GET请求，而CORS支持所有类型的HTTP请求。
                              3.JSONP的错误处理机制并不完善，我们没办法进行错误处理；而CORS可以通过onerror事件监听错误，并且浏览器控制台会看到报错信息，利于排查。

                              4. JSONP只会发一次请求；而对于复杂请求，CORS会发两次请求。

            6. web sockets

                   web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)

                    web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

 

衍生问题1：CORS跨域的原理？

         详细看：http://www.ruanyifeng.com/blog/2016/04/cors.html

         浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

         对于简单请求，浏览器直接发出CORS请求。就是在头信息之中，增加一个Origin字段。Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

         如果Origin指定的源不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。

        如果Origin指定的域名在许可范围内，服务器返回响应。 

        非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

        "预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

除了Origin字段，"预检"请求的头信息包括两个特殊字段。

          1）Access-Control-Request-Method

                    该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

           2）Access-Control-Request-Headers

                   该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段。

           服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

           如果服务器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。

           一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

 

衍衍生问题1：cors中， 当希望允许多个origin跨域获取资源时Access-Control-Allow-Origin的值应该如何设置？（不要设置成'*', 需要携带cookie）

       Access-Control-Allow-Origin有多种设置方法：

1. 设置*是最简单粗暴的，但是服务器出于安全考虑，肯定不会这么干，而且，如果是*的话，游览器将不会发送cookies，即使你的XHR设置了withCredentials
2. 指定域，如上图中的http://172.20.0.206，一般的系统中间都有一个nginx，所以推荐这种
3. 动态设置为请求域，多人协作时，多个前端对接一个后台，这样很方便

    withCredentials：表示XHR是否接收cookies和发送cookies，也就是说如果该值是false，响应头的Set-Cookie，浏览器也不会理，并且即使有目标站点的cookies，浏览器也不会发送。

      答：因为需要携带cookie因此不能设置为 * 。因此想允许多个origin跨域获取资源时，则可以把域名都之间写到 Access-Control-Allow-Origin后，或者动态设置请求域，设置成白名单那样。

 

6.Cookie如何跨域？

       1.nginx反向代理（天猫和淘宝是如何共享cookie？之前用的是JSONP跨域，现在用的是cookie）

              反向代理（Reverse Proxy）方式是指以代理服务器来接受Internet上的连接请求，然后将请求转发给内部网络上的服务器；并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。

              反向代理服务器对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。客户端向反向代理 的命名空间(name-space)中的内容发送普通请求，接着反向代理将判断向何处(原始服务器)转交请求，并将获得的内容返回给客户端，就像这些内容 原本就是它自己的一样。 

        2.cookie.setDomain

               解决顶级域名与二级域名之间的cookie跨域问题。让位于a.taotao.com的服务器能够读取b.taotao.com设置的cookie值。如果b.taotao.com的页面创建的cookie把 它的path属性设置为”/”，把domain属性设置成”.taotao.com”，那么所有位于b.taotao.com的网页和所有位于 a.taotao.com的网页，以及位于taotao.com域的其他服务器上的网页都可以访问(或者说是得到)这个cookie。

        3.JSONP

               如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。

 

7.前端优化策略？

具体看：https://segmentfault.com/a/1190000016745587

先从http层面出发：

       1.对html、css、js文件进行合并、压缩，从而减少http的请求数。

               压缩合并css和js可以减少网站http请求的次数，但合并文件可能会带来问题:首屏渲染和缓存失效问题。

        2.使用浏览器缓存。

              强缓存、协商缓存机制来减少http的请求数量。

        3.使用CDN加速

               浏览器缓存始终只是为了提升二次访问的速度，对于首次访问的加速，我们需要从网络层面进行优化，最常见的手段就是CDN（Content Delivery Network，内容分发网络）加速。通过将静态资源(例如javascript，css，图片等等）缓存到离用户很近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的带宽消耗，降低负载。

         4.开启gzip

                使用gzip可以进一步压缩传输文件的大小。从Http/1.1开始，浏览器通过在http请求头中添加Accept-Encoding头来支持压缩；

Accept-Encoding: gzip,deflate

                  如果web服务器从请求头中发现Accept-Encoding头，它可能使用Accept-Encoding指定的压缩算法列表中的一个来压缩响应。web服务器通过响应头中的Content-Encoding头来通知浏览器响应内容使用了哪种压缩算法；

Content-Encoding:gzip

Gzip是目前最流行而且很有效率的压缩方法。另外一种压缩算法是deflate,但是它稍微低效点并且不是很流行，支持deflate的浏览器也支持gzip，但是有些支持gzip的浏览器不支持deflate,所以gzip更适合作为压缩响应的方法。 

从代码层面出发：’

         1.尽量减少重排与重绘的次数，能重绘就别重排

         2.使用防抖、节流来减少执行事件的执行次数。

               使用场景：

                    1.搜索框搜索内容时请求后端接口

                               不防抖的方式：输入内容：12345 ， 内容发生改变就请求接口。这样会请求五次接口

                               防抖的方式：同样输入内容：12345，防抖时间设置为 500ms，500ms 内用户输入新的内容重新读条。正常情况下只会请求一次接口

                    2.图片进行懒加载

                               不节流的方式：滚动条一滚动就监听页面元素显示情况，显示的元素就进行图片加载。滚动条滚动事件是一个非常频繁的操作，滚动一丢丢就会执行几十次。

 

       3.非核心代码异步加载异步加载的方式

               异步加载的三种方式——async和defer、动态脚本创建。通过先加载核心代码的方式来加快网页渲染速度。

                  ① async方式

                  ② defer方式

                  ③动态创建script标签

          衍生问题1：async、defer、动态创建script标签有什么区别？

                详细看：https://blog.csdn.net/waiting677/article/details/88957484

                1.defer属性（延迟脚本）

                         html4.01为<script>标签定义了defer属性，表明脚本会延迟到整个页面都解析完毕后再运行。延迟脚本总是按照指定它们的顺序执行。遇到</html>后再执行，会先于DOMContentLoaded事件执行。

                 2.async属性（异步脚本）

                         Html5为<script>元素定义了async属性，与defer类似只适用于外部脚本文件，并告诉当前脚本不必等待其他脚本，也不必阻塞文档呈现。异步脚本一定会在页面load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。

                 3.动态创建DOM方式（使用最多）

                         通过document.createElement("script")创建新的script标签，为新创建的元素的src属性赋值，值即为需要加载的js文件地址。

                  

衍生问题1：CDN是怎么做到加速的呢？

       其实这是CDN服务商在全国各个省份部署计算节点，CDN加速将网站的内容缓存在网络边缘,不同地区的用户就会访问到离自己最近的相同网络线路上的CDN节点，当请求达到CDN节点后，节点会判断自己的内容缓存是否有效，如果有效，则立即响应缓存内容给用户，从而加快响应速度。如果CDN节点的缓存失效，它会根据服务配置去我们的内容源服务器获取最新的资源响应给用户，并将内容缓存下来以便响应给后续访问的用户。因此，一个地区内只要有一个用户先加载资源，在CDN中建立了缓存，该地区的其他后续用户都能因此而受益。

 

衍衍生问题1：CDN是怎么判断哪个节点离当前访问用户近的？

      通过将用户访问时对它的ip地址进行解析，然后通过算法算法算出离他近的节点。

 

8.浏览器渲染页面的过程？

衍生问题1：dom树和cssom树和render树是依次构建的吗？

      不是，它们是交叉进行的。

 

衍生问题2：js文件加载会阻塞UI渲染吗？为什么？如何解决？

        会的。因为浏览器不知道加载的js文件中执行了哪些脚本，会对页面造成什么影响，所以浏览器会等js文件下载并执行完成后才继续渲染，如果这个时间过长，会白屏。

      解决方法：

    上面说到过的异步加载： 异步加载的三种方式——async和defer、动态脚本创建。通过先加载核心代码的方式来加快网页渲染速度。

                  ① async方式

                  ② defer方式

                  ③动态创建script标签