运行环境

网页加载过程

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

2、window.onliad和DOMContentLoaded的区别

1、加载资源的形式

1. - html代码
2. - 媒体文件-图片-视频
3. - javascript css

2、加载资源的过程

1. - DNS解析：域名-> IP地址
2. - 浏览器根据IP地址向服务器发起http请求
3. - 服务器处理http请求，并返回给浏览器

3、渲染页面的过程

1. - 根据html代码生产DOM Tree
2. - 根据css代码生产cssom
3. - 将DOM Tree和cssom整合形成Render Tree

1. - 根据Render Tree渲染页面
2. - 遇到<script> 则暂停渲染，优先加载冰执行JS代码，完成再继续
3. - 直至把Render Tree渲染完成

资源的形式

html代码、javascript css、媒体文件（图片、视频）

加载过程

DNS解析：域名->IP地址浏览器根据IP地址向服务器发起http请求服务器处理http请求，并返回给浏览器

渲染过程

根据HTML代码生成DOM Tree 根据CSS代码生成CSSOM 将DOM Tree和 CSSOM整合形成Rander Tree 根据Rander Tree渲染页面遇到

性能优化

一、性能优化原则：

1、多使用内存、缓存或其他方法 2、减少cpu计算量，减少网络加载耗时 3、空间换时间

二、从何入手：

2.1、让加载更快：

减少资源体积：压缩代码/资源合并减少访问次数：合并代码、SSR服务器端渲染、缓存使用更快的网络：CDN (区域服务器)

22、让渲染更快：

css放在head,js放在biody最下面尽早开始执行JS，用DOMContentLoaded触发懒加载（图片懒加载，上滑加载更多）对DOM查询进行缓存频繁DOM操作，合并到一起插入DOM结果节流、防抖

2.3、缓存静态资源加hash后缀，根据文件内容计算hash 文件内容不变，则hash不变，则url不变 url和文件不变，则会自动触发http缓存机制，返回304 2.4、SSR 服务器端渲染：将网页和数据一起加载，一起渲染非SSR（前后端分离）：先加载网页，再加载数据，再加载数据

三、防抖

const input1 =document.getElementById('input1')
 
 function debounce(fn,delay=500){
 
 //timer是在闭包中
   let timer =null;
     
   return function(){
       if(timer){
          clearTimeout(timer)
     }
     
     timer =setTimer(()=>{
         fn.apply(this,arguments)
         timer = null
     },delay)
 }

}

//怎么使用？
input1.addEventListener('keyup',debounce( function(){
   console.log(input1.value)
}),600)

三、节流

const div1 =document.getElementById('div1')
 
 function throttle(fn,delay=100){
 
 //timer是在闭包中
   let timer =null;
     
   return function(){
       if(timer){
        return
     }
     
     timer =setTimer(()=>{
         fn.apply(this,arguments)
         timer = null
     },delay)
 }

}

//怎么使用？
div1.addEventListener('drag',throttle( function(e){
   console.log(e.offserX,e.offsetY)
}),600)

安全

问题：常见的web前端攻击方式有那些？ 1、XSS跨站请求攻击 ---插入脚本，获取cookie信息，发送到我的服务器（服务器配合跨越） 2、XSRF跨站请求伪造 ---img的src会把个人信息带过去

XXS预防： 1、替换特殊字符，

XSRF防护：
1、使用post接口 2、增加验证