运行环境

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

加载资源的形式
html代码 图片 js,css
加载资源的过程
DNS解析:域名->ip地址
浏览器根据ip地址向服务器发起http请求
服务器处理http请求,并返回给浏览器
渲染页面的过程
根据html代码生成DOM树
根据css代码生成CSSOM(css对象模型)
将DOM树和CSSDOM整合Render Tree
根据render Tree树进行渲染
如遇到script标签则暂停渲染,优先加载并执行js代码,然后继续加载

为什么js要放到最后

没有放到最后会突然卡住去渲染js去了 然后又渲染dom树,所以要把js放到最后,简便时间。

windo.onload和DOMContentLoaded的区别

load 会等全部资源加载完之后才会去执行
window.addEventListener('load',function(){})
DOMContentLoaded 不会阻塞图片等资源的加载,dom渲染之后即可执行
document.addEventListener('DOMContentLoaded ',function(){})

web性能优化

• 缓存
  静态资源加hash后缀,根据文件内容计算hash
  文件内容不变,则hash不变,url不变
  url和文件不变,会自动触发http缓存机制,返回304
• SSR
  将网页和数据一起加载,一起渲染
  非SSR(前后端分离) 先加载网页,再加载数据,再渲染数据
  VUE React都是SSR
• 懒加载
  如,我们预先加载首页的几张图片,而不是全部加载,当用户下滑时加载其余图片

<img src='pre.png'  data-realsrc="1.png">
<script>
    var img = document.getElementTagName('img')[0];
    img.src = img.getAttribute('data-realsrc')
</script>

防抖

比如onchange事件,在input框中会频繁触发input事件,防抖就是用户在输入整个信息结束之后在触发input事件

解决方法:就是输入之后几秒后再触发input事件,利用定时器

const input = document.getElementById('input');
let timer = null
input.addEventListener('keyup',function(){ //当键盘键被松开时发生 keyup 事件
  if(timer){
      clearTimeout(timer)
    }
  timer = setTimeout(()=>{
      console.log(input.value)
  },500)
  timer = null
})

节流

当拖拽一个元素时,要随时拿到该元素被拖拽的位置,直接用drag会频繁触发,导致卡顿,节流:无论多块,都会每隔一定时间触发一次

同时也是利用定时器来进行节流

常见的web前端共计方式有哪些

• XSS跨站请求攻击
  获取cookie,发送到我的服务器(配合跨域),轻松访问其他人cookie
  解决方法:替换特殊字符 把<变成&lt,所以<script>变为<sript>不会变成脚本来执行,所以写代码时进行替换
• XSRF跨站请求伪造
  你正在购物,看中一个商品,商品id为100
  付费接口为xxx.com/pay?id=100
  我攻击者,看中一个商品id=200,我想让你帮我买掉
  解决方法使用post接口
  增加验证码，短信验证码，指纹 等等