项目训练

用户853181592361
85 阅读5分钟

CDN（content delivery network 内容分发网络）

（1）CDN系统的组成部分？

  • 分发服务系统：基于缓存设备，1.（每一级）把缓存在本地的内容快速的提供给用户；2.源站点进行准实时的内容同步
  • 负载均衡系统：访问调度，1.全局负载均衡（GSLB），根据就近原则，给用户分配最佳的服务节点；2.本地负载均衡，节点内部设备集群的负载均衡
  • 运营管理系统：支撑服务于整个网络平台

（2）CDN主要功能区域；在何种业务场景的项目需要使用到CDN；CDN的工作方式与项目的关系

CDN一般托管的资源为静态资源：文本、图片、脚本、媒体文件、网站...

  • 性能方面：用户收到的内容来自于最近的集群 => 延迟更低，内容加载更快；资源请求分配给了CDN节点，减少了服务器的负载 => 服务压力、服务器成本降低

客户量大、时间+空间上客户分布较为分散的业务

  • 安全方面：DDos（短时间内形成大量访问，造成访问瘫痪），DNS会分析监控异常流量，根据ip或访问url限制请求频率；MITM（中间人攻击，对两边进行伪装），CDN会从源服务器，到CDN节点，到ISP（网络服务供应商）全链路开启网络安全保护、https加密通信服务

容易被攻击获取利益、容易被中间人劫持的业务

（3）CDN的流程

  • 第一步：DNS的解析域名的过程：www.xxx.com => 先去浏览器中查看缓存 => 再去操作系统缓存（host） => 再去路由器缓存 => 再去ISP的DNS服务器 => 再去根域名服务器（根据一级、二级三级域名查找）
  • 第二步：CDN上场，浏览器通过DNS解析域名获取到对应的IP地址，1）用户未使用CDN服务，浏览器会根据IP地址向域名服务器发出请求，服务器返回数据；2）用户使用CDN缓存数据，DNS解析 => CDN专用的DNS服务器 => DNS域名解析权交给CNAME指向，CDN专用的DNS服务器 => CDN的全局负载均衡设备IP返回给用户 => 用户向CDN全局负载均衡设备发出请求 => CDN全局负载均衡设备根据IP+URL选择一台用户所属区域内的负载均衡设备 => 区域内的负载均衡设备会选择一台合适空闲的服务器进行提供服务（本地负载均衡） => 返回用户所需内容

（4）什么场景适合使用CDN服务？业务内通常有哪些部分使用CDN

  • 第三方CDN服务，第三方依赖会通过CDN服务生成一个连接，通过这个连接可以快速拿到依赖包
  • 使用CDN静态资源缓存
  • CDN支持流服务：聊天室、直播流

浏览器（进程、线程、渲染原理）

（1）什么是重绘、重排，哪些操作会导致重绘和重排

  • 重排：JS、模板、CSSOM（css规则树）融合生成一颗layout tree（布局树、渲染树）；当渲染树中部分或者全部元素的尺寸、结构、内容发生变化的时候，浏览器就会触发重新生成渲染树的方法，进而进行重新渲染

导致重排：页面的首次渲染、浏览器窗口大小发生变化（拖拽、页面尺寸发生变化）、元素内容发生变化、字体大小发生变化、激活css伪类、添加删除容器、容器显示隐藏

重排分为全局重排（从根节点开始，对整个渲染树进行重新布局）、局部重排（渲染树某部分或者一个渲染对象进行重新布局）

  • 重绘：只影响自身属性，不对其他元素影响以及重新绘制

导致重绘：外观发生变化，color、background-color、background-image、border-style、visibility、border-radious、box-shadow

（2）动画与重排的关系？如何考虑动画性能的优化？

一般情况，动画都会频繁操作DOM，就会导致页面性能问题

  • 尽量减少频繁操作DOM的数量
  • 尽量使用脱离文本流的动画主体
  • 尽量减少循环动画

（3）documentFragment？它和直接操作DOM有什么区别

类似于轻量版的document，documentFragment不是真实的DOM树的一部分，它的属性变化不会直接导致DOM树的更新，所以频繁改动不会有性能问题

把documentFragment的节点插入文档树的时候，插入的并不是documentFragment自身，而是它所有的子孙节点，把它融合进文档树里，再去频繁的操作DOM的时候，就可以把DOM元素插入到documentFragment，然后完成这一波陆陆续续的更新之后，一次性的将所有的子孙节点插入到document里面，再触发更新，减少触发次数，提升性能

webpack工程化理论

（1）提高webpack的打包速度？有没有做过webpack优化项目

  • 优化loaders
module:{
    // 1.限制生效范围可以避免大量的无效转义资源消耗
    rules:[{
        // js文件才会使用babel进行转换，限制了转义的文件类型
        test:/\.js$/,
        loader:'babel-loader',
        // 只在src文件夹下进行查找转换，限制了转义的文件位置
        include:[resolve('src')],
        // 不会去查找的路径，限制了转义的范围
        exclude:/node_modules/
    }]
    // 2.缓存
    loader:'babel-loader?cacheDirectory=true'
}
  • HappyPack优化：HappPack可以把loaders的同步执行转换成并行的，充分利用系统资源进行打包
loaders:[{
    test:/\.js$/,
    loader:'babel-loader',
    // 只在src文件夹下进行查找转换，限制了转义的文件位置
    include:[resolve('src')],
    // 不会去查找的路径，限制了转义的范围
    exclude:/node_modules/,
    loader:'happypack/loader?id=happypack'
}],
plugins:[{
    new HappyPack({
        id:'happypack',
        loasers:['babel-loader?cacheDirectory=true'],
        threads:4
    })
}]
  • DllPlugin：把特定的类库提前打包，只有类库版本升级等才会重新打包
// webpack.dll.conf.js
entry:{
    vendor:['react']
},
output:{
    path:path.join(__dir,'dist'),
    filename:'[name].dll.js',
    library:'[name]-[hash]'
},
plugins:[
    new HappyPack({
        name:'[name]-[hash]',
        context:__dir,
        path:path.join(__dir,'dist','[name]-manifest.json')
    })
]

// webpack.config.js
plugins:[
    new webpack.DllReferencePlugin({
        context:__dir,
        manifest:require('./dist/vendor-manifest.json')
    })
]
  • 其他：代码压缩（webpack4之后，新增的模式改为production就会自动压缩）、删除console、extension（配置文件名后缀，配置的才会被扫描）、alias（配置别名做省略，帮助webpack更快找到文件）、noParse（如果确认文件没有依赖，webpack不会扫描这个文件，就不会去整合打包它的依赖）、按需加载、scope-hoisting、tree-shaking、使用第三方库
avatar
文章
阅读
粉丝