web前端优化（3）

浏览器css和js的加载过程

• 浏览器通过网址首先拿到由字节流转变成字符流的HTML文档，HTML文档会被解析器解析成一段段TOKEN，浏览器通过nextToken方法，浏览器会自顶向下对HTML文档进行解析，逐渐生成DOM树，但是此时DOM树并不会在页面上进行显示
• 在生成DOM树的过程中，浏览器会对外部资源（CSS、js）进行请求和解析，对于请求的css，浏览器会生成对应的CSSOM,当CSSOM树和DOM树都生成完之后，浏览器才会将这些资源进行合并，生成RenderTree从而对页面进行绘制
• HTML渲染过程中的特点
  
  • 是顺序执行且并发加载的
  • 对於单个域名，浏览器的并发度是有限的
  • 是否阻塞（css的加载是否会阻塞js的加载，css的加载是否会阻塞页面的渲染等等等）
  • 依赖关系（比如css代码再哪里引入的关系，js代码的执行顺序的关系问题）
  • 引入方式（link,import，script…）

css、js加载过程中的优化点

懒加载和预加载

• 懒加载
  
  • 当页面进入可视区域之后才请求图片，对于图片很多，页面很长的业务场景适用
  • 可以减少无效资源的加载
  • 当并发资源过多时，会阻塞js的加载，影响网站的正常使用
• 预加载
  
  • 网站的静态资源在使用之前进行提前请求
  • 资源在使用时，可以直接从缓存中加载，提升用户体验
  • 页面展示的依赖维护关系
  • 对图片请求过程要求比较高的时候使用预加载可以提升用户体验
  • 活动展示页面，就需要用预加载将图片都加载出来
• 懒加载lazyload.js实现原理
  
  1. 首先通过document的clientHeight属性获取当前的可视高度
  2. 选中所有带有懒加载属性的标签，循环遍历
  3. 通过元素的getBoundingClientRect方法获得当前元素的top值
  4. 如果top值小于可视界面的高度，就将设置的懒加载属性去掉，同时将src中的图片读取出来，放置在页面上
     
     注:!function这样的写法表示在方法前加上布尔值，表示执行后面的代码，也就是合法实现调用

懒加载与预加载案例分析

• 手淘的页面就使用的懒加载，只有当图片出现在界面的可视部分时才会加载对应的图片