首页 > 其他 > 详细

页面加载和渲染过程,性能优化问题,安全问题

时间:2020-07-09 13:47:06      阅读:92      评论:0      收藏:0      [点我收藏+]

1、js运行环境

  运行环境即浏览器(server端有nodejs)

  浏览器要下载网页代码,渲染出页面,期间会执行若干JS

 要保证代码在浏览器中:稳定且高效

2、网页加载过程

   加载资源的形式 :html代码,

            媒体文件,如图片、视频等

                                 javascript 

         css

   加载资源的过程:DNS解析:域名--->IP地址

           浏览器根据IP地址向服务器发起http请求

           服务器处理http请求,并返回给浏览器

   渲染资源的过程:根据HTML代码生成--->DOM Tree

         根据css代码 ----> CSSOM

         将DOM Tree 和 CSSOM整合Render Tree

                                根据Render Tree渲染页面

         遇到<script>则暂停渲染,优先加载并执行JS代码,完成再继续(DOM渲染和js执行公用一个线程)

         直至把Render Tree渲染完成

引出问题

  1、从输入url到渲染出页面的整个过程?

     2、window.load和DOMContentLoaded的区别?

   <img id="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594278708278&di=1c8a248fd269ca7495b65c017fe8ba0e&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg" >
    <script>
        var img= document.getElementById(‘img‘)
        img.onload=function(){
            console.log(‘img load‘) //2
        }
        window.addEventListener(load‘,function(){
            //页面资源全部加载完成,包括图片、视频等
            console.log(‘all load‘) //3
        })
        document.addEventListener(DOMContentLoaded‘,function(){
            // DOM 渲染完成即可执行,此时图片、视频可能还没有加载完
            console.log(‘dom load‘)  //1
        })
    </script>

   3、为什么要把css放在head中?

   4、为什么要把js放在body最下面?

 

3、性能优化

 性能优化原则: 多使用内存、缓存或其他方法

         减少CPU计算量,减少网络加载耗时

( 适用于所有编程的性能优化-----空间换时间,chrome浏览器就是个典型,每个标签页一个进程,每个标签互不干扰,空间大了,性能也提上去了)

 从何入手:让加载更快

        减少资源体积:压缩代码(webpack的mode:production)

        减少访问次数:合并代码:webpack

                                                SSR服务器渲染:将网页和数据一起加载,一起渲染

                         非SSR(前后端分离):先加载网页,在加载数据,再渲染数据

                      最早的JSP ASP PHP,现在的vue React SSR

                 缓存( 静态资源加hash后缀,根据文件内容计算hash

                 文件内容不变,则hash不变,则url不变

                 url 和 文件不变,则自动触发http缓存机制,返回304

                )

        使用更快的网络:CDN

      让渲染更快

       Css放在head,JS放在body最下面

       尽早开始执行JS,用DOMContentLoaded触发

       懒加载(图片懒加载,上滑加载更多),现在vue和react中可以只用插件

       将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src

   <img id="img1" src="preview.png"  data-realsrc="abc.png" >
    <script>
        var img1 = document.getElementById(‘img1‘)
        img1.src = img1.getAttribute(‘data-realsrc‘)
    </script>

          对DOM操作查询进行缓存

  var pList = document.getElementsByTagName(‘p‘)
        const length = pList.length
        for(i=0;i<length;i++){
            //缓存length,只进行一次DOM查询
        }

        频繁DOM操作,合并到一起插入DOM结构

       节流throttle  防抖 debounce 让渲染更流畅

 

4、安全

 

页面加载和渲染过程,性能优化问题,安全问题

原文:https://www.cnblogs.com/zhuMother/p/13273083.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!