运行环境

Posted 2021-02-09 dcl1314

• • 浏览器就可以通过访问链接来得到页面的内容，通过绘制和渲染，显示出页面的最终的样子
  • 知识点：页面加载过程、性能优化、安全性

  1、页面加载过程

  • 知识点：加载资源的形式、加载一个资源的过程、浏览器渲染页面的过程

  （1）、加载资源的形式

  • 输入url(或跳转页面)加载html
  • http://www.baidu.com
  • 加载html的静态资源
  • <script src="./jquery.js"></script>

  (2)、加载资源的过程

  • 浏览器根据DWS服务器得到域名的iP地址，向这个IP的机器发送http请求，服务器收到，处理并返回http请求，浏览器得到返回内容

  （3）、浏览器渲染页面的过程

  • 根据HTML结构生成DOM Tree
  • 根据css生成cssOM
  • 将DOM和cssOM 整合形成RenderTree(渲染树)
  • 根据RenderTree开始渲染和展示
  • 遇到<script>时，会执行并阻塞渲染

  window.onload和DOMContentLoaded

  window.addEventListener(‘load‘,function(){
  //页面的全部资源加载完才执行，包括图片视频等
  })
  document.addEventListener(‘DOMContentLoaded‘,function(){
  //DOM渲染完即可，此时图片、视频还可能没有加载完
  })

  2、性能优化

  （1）、原则

  • 多使用内存，缓存或者其他方法
  • 减少CDN计算，减少网络

  （2）、从哪入手

  • 加载资源和静态资源
  • 页面渲染

  （3）、加载资源优化

  • 静态资源的压缩合并
  • 静态资源缓存
  • 使用CDN让资源加载更快
  • 使用SSR后端渲染，数据直接输出到HTML中

  （4）、渲染优化

  • css方前面，js方后面
  • 懒加载（图片懒加载，下拉加载更多）
  • 减少DOM查询，对DOM查询做缓存
  • 减少DOM操作，多个操作尽量合并在一起执行
  • 事件节流
  • 今早执行操作（如DOMContentLoaded)

  (5)、缓存

  • 通过连接名称控制缓存 <script src="abc_1.js"></script>
  • 只有内容改变的时候，链接名称才会改变<script src="abc_2.js"></script>

  (6)、使用SSR后端渲染

  • 现在vue、React提出了这样的概念
  • 其实jsp、php、asp都属于后端渲染

  （6）、懒加载

   <img id="img1" src="preview.png" data-realsrc="abc.png" />//data-realsrc随便写的名字
  var img1 = document.getElementById(‘img1‘);
  img1.src=img1.getAttribute(‘data-realsrc")

  (7)、缓存DOM查询

  //未缓存DOM查询
  var i ;
  for(i =0;i<document.getElementsByTagName(‘p‘).length;i++){
      //todo
  }
  // 缓存DOM查询
  var pList = document.getElementsByTagName(‘p‘);
  var i ;
  for(i=0;i<pList.length;i++){
      //todo
  }

  (8)、事件节流

  var textarea =document.getElementById(‘text‘);
  var timeoutId;
  textarea.addEventListener(‘keyup‘,function(){
      if(timeoutId){
          clearTimeout(timeoutId);
      }
      timeoutId = setTimeout(function(){
          //触发change事件
      },100)
  })

  （9）、合并DOM插入

      var listNode = document.getELementById(‘list‘);
      // 要插入10个li标签
      var frag = document.createDocumentFragment();
      var x,li;
      for(x =0;x<10;x++){
          li = document.createElement(‘li‘);
          li.innerHTML = ‘List item‘+ x;
          frag.appendChild(li);
      }
      listNode.appendChild(frag);

  3、安全性

  • 知识点：xss跨域请求攻击、XSRF跨站请求伪造

  （1）、XSS

  • 在新浪博客写一篇文章，同时偷偷插入一段<script>攻击代码中获取cookie，发送自己的服务里发布博客，有人查看博客内容会把查看者的cookie发送至攻击者的服务器
  • 遇防？
  • 前端替换关键字，例如替换<&lt>为>
  • 后端替换

  （2）、XSRF

  • 你已登录一个购物网站，正在浏览商品，该网站付费接口是xxx.com/pay?id=100但是没有任何验证
  • 然后你收到一封邮件，隐藏着<img src="xxx.com/pay?id=100>
  • 你查看邮件的时候，就已经悄悄的付费购买了，
  • 解决方案
  • 增加验证流程如输入指纹，密码，短信验证码

  以上是关于运行环境的主要内容，如果未能解决你的问题，请参考以下文章

  EasyClick 运行代码片段出Null

  EasyClick 运行代码片段出Null

  删除选项卡时在 ActionBar 选项卡片段中运行代码

  使用 Python 代码片段编写 LaTeX 文档

  在 Python 多处理进程中运行较慢的 OpenCV 代码片段

  为啥代码片段在 matplotlib 2.0.2 上运行良好，但在 matplotlib 2.1.0 上引发错误