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

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" alt="">
    <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" alt="">
    <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 让渲染更流畅

       // 防抖
        // 监听输入框，文字变化后触发change事件
        // 直接keyup,则会频繁触发onchange

        var input  = document.getElementById('input')

        // 实现功能
        let timer = null
        input.addEventListener('keyup',function(){
            if(timer){
                clearTimeout(timer)
            }
            timer = setTimeout(()=>{

                console.log(input.value)

                timer=null
            },500)
        })

        // 可以封装起来
        function deboundce(fn,delay){
            // timer实在闭包中
            let timer = null;

            return function(){
                if(timer){
                    clearTimeout(timer)
                }
                timer = setTimeout(()=>{
                    fn.apply(this,arguments)
                    timer=null
                },delay)
            }
        }

        input.addEventListener('keyup',deboundce(()=>{
            console.log(input.value)
        },500))

// 节流 
        // 拖拽一个元素的时候，要随时拿到该元素被拖拽的位置
        // 直接用drag事件，则会频繁触发，很容易导致卡顿
        const div1 = document.getElementById('drag')
        let timer = null
        div1.addEventListener('drag',function(e){
            if(timer){
                return
            }
            timer = setTimeout(()=>{
                console.log(e.offsetX)
                timer=null
            },100)
        })
        
        function throlle(fn,delay){
            var timer=null;
            return function(){
                if(timer){
                    return
                }
                timer = setTimeout((e)=>{
                    fn.apply(this,arguments)
                    timer=null
                },500)
            }
        }
        div1.addEventListener('drag',throlle(function(e){
            console.log(e.offsetX)
        },500))

4、安全

XSS

XSRF