发表于 | 分类于

前端开发性能优化方案

一、减少HTTP请求次数和请求大小

代码优化

  • 有利于SEO
  • 有利于扩展维护
  • 有利于减少性能消耗
    [JS代码优化的108条建议] [雅虎CSS优化的36条建议]
    …
  • DNS及HTTP通信方式的优化

在JS中尽量减少闭包的使用（原因：闭包会产生不释放的栈内存）

  • 循环给元素做事件绑定的时候，尽可能的把后期需要的信息（例如索引）存储到元素的自定义属性上，而不是创建闭包存储
  • 可以在最外层形成一个闭包，把一些后续需要的公共信息进行存储，而不是每一个方法都创建闭包(例如单例模式)
  • 尽可能的手动释放不被占用的内存
    …

尽量合并CSS和JS文件（把需要引入的CSS合并为一个，JS也是合并为一个），原理是在减少HTTP请求次数，尽可能的把合并后的代码进行压缩，减小HTTP请求资源的大小

  1. webpack这种自动化构建工具，可以帮我们实现代码的合并和压缩（工程化开发）
  2. 在移动开发(或者追求高性能的PC端开发[例如百度首页])，如果CSS或者JS不是需要很多，我们可以选择把css和js编程内嵌式（也就是代码直接写在HTML中）
    阅读全文 »

发表于 | 分类于

GIT：分布式版本控制系统
1.版本控制系统
开发中我们把每一次的修改都有效的进行记录（记录成一个版本），后期如果需要回退到原有的有个版本或者是用当前的和某一个版本进行比较等，都可以有效的进行管理
常用的版本控制系统：SVN(集中式) / GIT(分布式)

2.分布式版本管理系统的特点

3.Linux团队开发的git，所以git中的命令大部分都是linux命令

=======================
后期我们更多的都是基于命令来完成GIT管理的,所以我们学一些简单的LINUX命令
WINDOWS操作系统：DOS窗口和DOS命令
LINUX服务器操作系统：LINUX命令 （MAC的终端使用的也是LINUX命令）

阅读全文 »

发表于 | 分类于

一：减少HTTP请求的次数及请求内容的大小

  1. URL/URN/URI
    URI=URL+URN
    URI：统一资源标识符
    URL：统一资源定位符
    URN：统一资源名称

  2. http://www.zhufengpeixun.cn:80/stu/index.html?name=xxx&age=25#teacher

传输协议

用来传输客户端和服务器端交互的信息的（类似于快递小哥）

  • HTTP：超文本传输协议（除了传递普通的文本，还可以传递文件流或者进制编码等信息），是目前最常用的WEB传输协议
  • HTTPS：基于SSL（Secure Sockets Layer 安全套接层）加密的HTTP传输协议，比HTTP更加的安全（涉及支付的网站一般都是基于HTTPS完成的）
  • FTP：文件传输协议，一般用来实现资源文件在服务器上的上传下载

[域名] Domain Name

一级域名（顶级域名）  www.qq.com
二级域名   sports.qq.com
三级域名   kbs.sports.qq.com

.com 供商用的国际域名
.cn 供商用的中文域名
.net 用于网络供应服务商（系统类的经常使用NET域名）
.org 用于官方组织
.edu 用于教育院校
.gov 用于政府机构
阅读全文 »

发表于 | 分类于

  1. 什么是NODE？
    基于V8引擎（谷歌浏览器的引擎）渲染JS的工具或者环境
    ->安装NODE
    ->把JS代码放到NODE环境中执行

  2. 安装NODE
    https://nodejs.org/en/

    node安装完成后

    • 当前电脑上自动安装了npm(Node Package Manager)：一个JS模块（所有封装好可以供其它人调取使用的都可以称之为模块或者包）管理的工具，基于npm可以安装下载JS模块
    • 它会生成一个node执行的命令（可以在DOS窗口或者终端命令中执行）：node xxx.js
    • 如果不成功，可以找相同电脑配置的人员，把安装成功的NODE文件夹拷贝到自己的电脑上，通过配置环境变量，来实现NODE安装
      阅读全文 »

发表于 | 分类于

promise代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/**
 * Promise 实现 遵循promise/A+规范
 * Promise/A+规范译文:
 */
// promise 三个状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

function Promise(excutor){
  let that = this; // 缓存当前promise实例对象
  this.status = PENDING; // 初始状态
  this.value = undefined; //  fulfilled状态时 返回的信息
  this.reason = undefined; //  rejected状态时 拒绝的原因
  that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数
  that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数

  function resolve(value){ // value成功态时接收的终值
    if(value instanceof promise){
      return value.then(resolve,reject)
    }
    // 为什么resolve 加setTimeout?
        // 2.2.4规范 onFulfilled 和 onRejected 只允许在 execution context 栈仅包含平台代码时运行.
        // 注1 这里的平台代码指的是引擎、环境以及 promise 的实施代码。实践中要确保 onFulfilled 和 onRejected 方法异步执行，且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。
    setTimeout(()=>{
       // 调用resolve 回调对应onFulfilled函数
       if(that.status == PENDING){
        // 只能由pending状态 => fulfilled状态 (避免调用多次resolve reject)
          that.status = FULFILLED;
          that.value = value;
          that.onFulfilledCallbacks.forEach(cb=>cb(that.value))
       }
    },0)
  }
  function reject(reason){// reason失败态时接收的拒因
    setTimeout(()=>{
      // 调用reject 回调对应onRejected函数
      if(that.status == PENDING){
        // 只能由pending状态 => rejected状态 (避免调用多次resolve reject)
        that.status = REJECTED;
        that.value = reason;
        that.onRejectedCallbacks.ForEach(cb=>cb(that.reason))
      }
    })
  }
  // 捕获在excutor执行器中抛出的异常
  // new Promise((resolve, reject) => {
  //     throw new Error('error in excutor')
  // })
  try{
    excutor(resolve,reject)
  }catch(e){
    reject(e)
  }
  
}
阅读全文 »