• 前端技术总结六--其他


    其它

    1、    性能优化

    (1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

    (2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

    (3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

    (4) 当需要设置的样式很多时设置className而不是直接操作style。

    (5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

    (6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。

    (7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

    2、    跨域

    什么是同源策略?

    同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

    同源策略限制以下几种行为:

    1) Cookie、LocalStorage 和 IndexDB 无法读取

    2) DOM 和 Js对象无法获得

    3) AJAX 请求不能发送

    跨域解决方案

    1、   通过jsonp跨域

    ü  原生实现:传参一个回调函数名给后端,后端返回时执行这个回调函数

    ü  jquery ajax:dataType: 'jsonp'

    ü  vue.js:_this.$http.jsonp()

    2、   跨域资源共享(CORS)

    普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置。主流解决方案。

    3、   WebSocket协议跨域

    4、   nginx代理跨域

    3、    Nginx

    Nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器;同时也是一个IMAP、POP3、SMTP代理服务器;Nginx可以作为一个HTTP服务器进行网站的发布处理,另外Nginx可以作为反向代理进行负载均衡的实现。

    代理:

    正向代理

           代理的是客户端,代客户端发出请求。

           特点是客户端非常明确要访问的服务器地址;服务器只清楚请求来自哪个代理服务器,而不清楚来自哪个具体的客户端;正向代理模式屏蔽或者隐藏了真实客户端信息。

    反向代理:

           它代理的是服务端,代服务端接收请求

           服务器集群分布式部署的情况下,反向代理隐藏了服务器的信息。客户端是无感知代理的存在的,反向代理对外都是透明的,访问者并不知道自己访问的是一个代理。因为客户端不需要任何配置就可以访问。

    负载均衡

    Nginx反向代理服务器接收到的请求数量,就是我们说的负载量。

    请求数量按照一定的规则进行分发到不同的服务器处理的规则,就是一种均衡规则。

    将服务器接收到的请求量按照规则分发的过程,称为负载均衡。

    4、    CDN

           Content Delivery Network即内容分发网络。

           CDN是一组分布在多个不同的地理位置的WEB服务器,用于更加有效的向用户发布内容,在优化性能时,会根据距离的远近来选择 。

           CDN加速意思就是在用户和我们的服务器之间加一个缓存机制,通过这个缓存机制动态获取IP地址根据地理位置,让用户到最近的服务器访问,解决网络拥堵,提高访问速度,解决由于网络带宽小,用户访问量大,网点分布不均等原因导致的访问速度慢的问题。

           CDN能够缓存JavaScript脚本,css样式表,图片,图标,Flash等静态资源文件(不包括html页面),这些静态资源文件的访问频率很高,将其缓存在CDN可以极大地提高网站的访问速度,但由于CDN是部署在网络运营商的机房,所以在一般的网站很少用CDN加速。

           CDN的优势很明显:(1)CDN节点解决了跨运营商和跨地域访问的问题,访问延时大大降低;(2)大部分请求在CDN边缘节点完成,CDN起到了分流作用,减轻了源站的负载。

    5、    观察者模式

    概念:

           观察者模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己。

           注意:有些人认为观察者模式就是发布订阅模式,但实际上观察者模式和发布订阅模式是有区别的。

           区别:观察者模式只有两个,一个是观察者一个是被观察者。发布订阅模式不一样,发布订阅模式还有一个中间层,发布订阅模式的实现是,发布者通知给中间层 => 中层接受并通知订阅者 => 订阅者收到通知并发生变化

    // 创建对象
    var targetObj = {
        name:'小花'
    }
    var targetObj2 = {
        name:'小李'
    }
    // 定义值改变时的处理函数(观察者)
    function observer(oldVal, newVal) {
        // 其他处理逻辑...
        targetObj2.name = newVal
        console.info('targetObj2的name属性的值改变为 ' + newVal);
    }
    // 定义name属性及其set和get方法(name属性为被观察者)
    Object.defineProperty(targetObj, 'name', {
        enumerable: true,
        configurable: true,
        get: function() {
            return name;
        },
       set: function(val) {
            //调用处理函数
            observer(name, val)
            name = val
        }
    });
    targetObj.name = '张三';
    targetObj.name = '李四';
    console.log(targetObj2.name)

    虽然我们只是改变了targetObj的name属性,但是因为观察者模式的设计,targetObj2的name属性同样被改变,这就实现了一个简单的观察者模式。

    6、    垃圾回收机制

           定义:指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。而 JavaScript 在创建对象(对象、字符串等)时会为它们分配内存,不再使用对时会“自动”释放内存,这个过程称为垃圾收集。

    四种常见的内存泄漏:全局变量,未清除的定时器,闭包,以及 dom 的引用

    全局变量不用var 声明的变量,相当于挂载到 window 对象上。如:b=1; 解决:使用严格模式被遗忘的定时器和回调函数、闭包、没有清理的 DOM 元素引用

  • 相关阅读:
    基于jackson的kotlin json字符串对比器
    python之一mac安装HTMLTestRunner.py
    python之插件安装
    饿了么三面:让你怀疑人生的Spring Boot夺命连环40问
    网易三面:说说你对MySQL事务四大隔离的理解
    京东Java岗:来自面试官的夺命连环56问,你怀疑人生了吗?
    QPushButton
    宏相关使用
    C++类构造析构基础
    P8261 [CTS2022] 袜子 解题报告
  • 原文地址:https://www.cnblogs.com/liangtao999/p/13689378.html
Copyright © 2020-2023  润新知