content方面

  • 减少 HTTP 请求
  • 减少 DNS 查询
  • 减少 DOM 的操作

server方面

  • 静态资源推向 CDN

Cookie 方面

  • 减少 Cookie 的大小

CSS 方面

  • 将样式表放到页面顶部
  • 不使用 CSS 表达式
  • 使用 link 不使用@import

JS 方面

  • 将脚本放到页面底部
  • 将 javascript 和 css 从外部引入
  • 压缩 javascript 和 css
  • 删除不需要的脚本
  • 减少 DOM 访问，不要在循环中操作 DOM，使用事件委托

函数防抖 & 函数节流

目的

优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

this指向，防抖函数中的fn.apply(this,arguments)作用

函数防抖（debounce）：

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。
image.png

函数防抖又分为立即执行和非立即执行
  1. 非立即执行 ```javascript // 函数防抖，触发的过程中不执行，不触发后的n秒后执行，n秒内重新触发了则重新开始计算时间 function debounce(fn, wait) { let timer = null; return function () { if(timer !== null) clearTimeout(timer); timer = setTimeout(() => { // 这里的 arguments 是返回函数的 arguments，若有额外的参数可传递给 fn
    1.  fn.apply(this, arguments)
    }, wait); } }

function handle() { // to do … console.log(document.documentElement.scrollTop) }

window.addEventListener(‘scroll’, debounce(handle, 1000), false);

  2. 2. 立即执行
  3. ```javascript
  4. function debounce(fn, wait) {
  5.     let timer = null;
  6.   return function () {
  7.       if(timer) {
  8.         clearTimeout(timer);
  9.     }
  10.     if(!timer) {
  11.         fn.apply(this, arguments);
  12.     }
  13.     timer = setTimeout(() => {
  14.         timer = null;
  15.     }, wait);
  16.   }
  17. }
  19. function handle() {
  20.   // to do ...
  21.     console.log(document.documentElement.scrollTop)
  22. }
  24. window.addEventListener('scroll', debounce(handle, 1000), false);

函数节流（throttle）：

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

image.png

函数节流一般有两种方式实现，一种是时间戳，一种是定时器
  1. 时间戳 ```javascript // 函数节流，n 秒内执行一次，通过延长 n 来达到节流的目的 function throttle(fn, wait) { let prev = 0; return function() { let now = Date.now(); if(now - prev >= wait) { prev = Date.now(); fn.apply(this, arguments) } } }

function handle() { // to do … console.log(document.documentElement.scrollTop) }

addEventListener(‘scroll’, throttle(handle, 1000), false)

  2. 2. 定时器
  3. ```javascript
  4. function throttle(fn, wait) {
  5.     let timer = null;
  6.   return function () {
  7.       it(!timer) {
  8.         fn.apply(this, arguments);
  9.       tiemr = setTimeout(() => {
  10.           tiemr = null;
  11.       }, wait);
  12.     }
  13.   }
  14. }
  17. function handle() {
  18.   // to do ...
  19.     console.log(document.documentElement.scrollTop)
  20. }
  22. addEventListener('scroll', throttle(handle, 1000), false)

懒加载和预加载

预加载
提前加载图片到浏览器中，当用户需要查看时可直接从本地缓存中渲染
懒加载
先将img标签中的src链接设为一张空白图片，将其真正的图片地址存储在img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
相关知识补充

  1. 1. 屏幕可视窗口大小
  2.     window.innerHeight   //  标准浏览器及IE9+ 
  3.     document.documentElement.clientHeight //  标准浏览器及低版本IE标准模式 
  4.     document.body.clientHeight  //  低版本混杂模式
  5. 2. 浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
  6.     window.pagYoffset   //  标准浏览器及IE9+ 
  7.     document.documentElement.scrollTop   //  兼容ie低版本的标准模式 
  8.     document.body.scrollTop   //  兼容混杂模式；

http 2.0

https://mp.weixin.qq.com/s?__biz=MzI4MTQ2MTEwOA%3D%3D&idx=1&mid=2247484583&scene=21&sn=53603dd7643e0ae68be9e852cf50e46c#wechat_redirect