team
team copied to clipboard
mopduan
Team技术总结
俗话说的好，工欲善其事，必先利其器。要想做好前端开发，就必须快速精准的定位bug和查看代码的质量，所以首先就得学会使用Chrome控制台的使用。废话不多说直接开淦！ 首先第一步Chrome DevTools打开的快捷键 ： - 使用 Ctrl + Shift + I (Mac上为 Cmd+Opt+I)打开DevTools。 - 使用 Ctrl + Shift + J (Mac上为 Cmd+Opt+J)打开DevTools中的控制台 - 使用 Ctrl + Shift + C (Mac上为...
## 问题背景 某天上午，运营同学突然在群里反馈很多用户来报登录问题。起初以为是内网接口服务异常了，但接口反馈没有产生异常的日志，也就是说异常请求还没打过去。于是我们登录服务器，筛选了下Node.js服务的日志：  通过日志，我们可以很直观的看出问题所在：**DNS解析失败** ## 整理思路 作为一个日均流量过千万的Node.js服务，每个请求都需要**解析N个内网接口域名**。 平时还好，如果`DNS服务出现了问题`，或者`网络抖动`，很容易在Node.js服务与内网接口服务都正常的情况下，导致**线上业务不可用** 针对这种情况，我们需要在Node.js服务端**对DNS解析做一层缓存** 首先我们需要明确一点：**！！！Node.js本身不做DNS查询结果的缓存！！！** ## 默认DNS查询方案 我们先来了解一下默认的DNS查询方案： Node.js**内置的http模块的`http.request()`请求**时，会**使用`dns.lookup()`进行查找** * 方法调用链条是 **`http.request() -> net.createConnection() -> dns.lookup()`** ``` function lookupAndConnect(self, options) { // ... const...
## 背景 近期团队对部门系列产品进行一系列的性能优化，前端整体框架由React迁移至Preact，在项目中使用了redux + router开发了一部分页面，需要使用Preact来实现相同的功能。 ## Redux Redux可以继续使用，但是React Redux需要相应的替换为[Preact Redux](https://github.com/developit/preact-redux)，将其通过[script标签](https://cache.soso.com/wenwen/deploy/js/preact_redux/2.0.2/preact-redux.min.js)引入，原来代码中的 import { Provider, connect } from 'react-redux'; 需要替换为 import { Provider, connect } from 'preact-redux'; ## Router 原来使用的是React Router 3，想要兼容Preact需要引入preact-compat依赖，但是[React...
## 背景 近期团队对部门系列产品进行一系列的性能优化，发现对于搜狗问问、搜狗指南等产品来说（搜狗百科用的是Vue.js），React显得过“重”，页面domReady时间较长；此外，由于Facebook将React协议更改为臭名昭著的“BSD＋许可”协议，考虑公司利益，同时考虑到React组件化、优雅的jsx语法等诸多优点和项目、团队技术的迁移成本；因此寻找类React的轻量级解决方案逐渐提上日程。 ## Preact 特点 在选型的时候，主要基于以下几个考量： - 开源社区有较多star - 较好的性能和兼容性 - api跟React接近 - 丰富的配套框架，比如redux和router的使用 调研发现，以上几点Preact都能够很好的满足，因此最终选定为团队的类React轻量化框架进行使用和研究； ### 开源社区有较多star 相比于[react-lite](https://github.com/Lucifier129/react-lite)，[inferno](https://github.com/infernojs/inferno)，[Virtual-DOM](https://github.com/Matt-Esch/virtual-dom)等类React轻量级框架，Preact star数量排名第一，国内成熟的产品如腾讯QQ、花样直播等都在使用。 ### 较好的性能和兼容性 Preact在性能方面也表现不俗。bundle在压缩后大概只有3kb，体积比React小很多，大大节省了下载和加载时间。 类React框架包大小对比： framework | version | minimized size...
## 由于一些APP对https证书进行了校验，所以使用Android设备抓取https请求时，除了需要在代理端对fiddler进行设置，还需要将fiddler代理服务器的证书下载到Android设备上才能真正的抓取https请求。具体步骤如下： ### 1. 打开手机自带浏览器，进入代理ip+对应端口号，如xx.xxx.xxx.xxx:8080，点击红框中的中的“FiddlerRootcertificate”链接  ### 2. 紧接着会弹出一个下载框，下载证书文件并安装  ### 注1：安装证书需要先设置锁屏密码，否则在某些机型下会直接提示安装失败。 ### 注2：MIUI系统由于安全策略较为严厉，需要在设置=>更多设置=>系统安全=>从SD卡安装中找到证书文件下载地址，才能进行安装  ### 注3：某些机型的自带浏览器需要安装完证书之后手动重启手机才能生效，如华为mate8 ### 注4：某些iOS设备和Android设备可能无法使用Fiddler使用的默认HTTPS拦截证书。 为了解决这个不兼容问题，你可以安装一个证书生成插件，生成与这些平台兼容的拦截证书。[下载链接](https://telerik-fiddler.s3.amazonaws.com/fiddler/addons/fiddlercertmaker.exe)
## styled-components ### 背景 - 使用React的过程中，组件通过 JS 来定义 css 样式，就必须在 React 组件里面通过style属性来写。 ``` export class App extends React.Component { render() { return( ...... ); } } ``` 缺点： （1）样式属性与原生 css...
## 1. fork模式 fork模式使用最基本的进程运行方式，只是单实例运行server，无法实现TCP连接共享；好处是可以修改exec_interpreter，使用pm2运行js之外的语言，例如``php``或者``python`` ```javascript pm2 --interpreter [bash|python|...] ``` ## 2. cluster模式 利用[Node.js Cluster模块](https://nodejs.org/api/cluster.html)实现，只能用于启动``node``进程，无法应用于其他语言。可以启动多个server实例，并在各个实例之间实现负载均衡而且共享TCP连接，可以提升服务器的响应性能。 ### 2.1 node.js cluster模块简介 cluster用于运行一些可以共享TCP连接的worker进程，首先创建一个master进程，随后根据设置的次数fork出相应的workers，master和workers通过进程间通信（[IPC](https://zh.wikipedia.org/wiki/%E8%A1%8C%E7%A8%8B%E9%96%93%E9%80%9A%E8%A8%8A)）实现TCP句柄等数据交换，cluster模块自带负载均衡，默认使用Round-Robin算法实现，master监听TCP端口，并根据RR算法将请求交给钦定的worker进行处理。 cluster代码实现： ```javascript const cluster = require('cluster'); const http = require('http'); const...
1. 电脑端的Charles需要先安装SSL证书，点击 Help -> SSL Proxying -> Install Charles Root Certificate 2. 在钥匙串中设置Charles为始终信任 3. 想要抓包的移动设备连接电脑端代理，电脑IP:8888 4. 安装SSL证书到移动端 1. iOS客户端 1. 点击 Help -> SSL Proxying -> Install Charles Root Certificate...
## 导语 此篇文章，主要是总结我在搜狗立懂百科无线视频播放器开发项目中遇到的一些坑。video标签虽然早就已经被各大浏览器支持，但在实践中浏览器的表现却并不能与标准一致，一些奇怪的表现真的令人抓狂，需要开发者不断摸索，做到更好的用户体验。本文从以下几点介绍开发中遇到一些坑： * 浏览器劫持问题 * 自动播放与连续播放 * 全屏与伪全屏 * html5video标准踩坑指南 ## 浏览器劫持问题 最初进行无线视频开发都会发现一个问题 比如在[https://www.zhihu.com/question/27472010]()提到的这个问题，在uc，qq以及一些手机自带浏览器中，无论怎么调节z-index，页面上的dom元素都不会高过video的层级。这并不是浏览器关于的层级的兼容bug，而是浏览器有意为之，此时显示的视频，是浏览器用native层级进行显示的视频，有些浏览器甚至可以在暂停状态下看到广告。。。 显然页面上所有的交互的操作如果和视频显示范围有重合，一定会在视频层级之下。 ### **解决办法：** ### 上策：获得浏览器厂商的白名单 也许你会发现，为什么专业的视频网站和一些大厂他们的h5播放体验完全没有这种问题，视频上方甚至可以做各种交互，这样的网站显然拥有浏览器的白名单，浏览器不会劫持视频，完全按照html5标准解析页面。（话说浏览器不就应该按标准解析网页么。。。） 建议尽量获取到项目中用户量最大的浏览器的白名单，本文后续提到的一些问题也有因为浏览器劫持引起的，这会大大降低开发量，体验也会更好。 ### 中策：进入二级页播放，避免交互 当然获取全部浏览器的白名单非常有难度，如果不是一定要在视频浮层上进行交互，比如点击按钮下拉二级菜单遮挡video，可以考虑进入新的没有浮层交互的二级进行播放（单页面，iframe），在设计阶段就避免一系列奇怪的bug，比如优酷进入二级页播放。  ### 下策：兼容方案 如果既无法获取到浏览器的白名单，设计又不能改，只能想办法兼容，尽量提高用户体验。基本方法是： 1.用户点击视频外交互操作时，暂停视频。...
## 一、线上问题： QQ浏览器极速模式下富文本图片（文章详情页、问题的回答）显示不出来 ## 二、问题排查： ### 1、F12发现img中的data-src没有转成src，说明imgLazyLoad没有执行成功；  ### 2、调试imgLazyLoad方法，发现QQ浏览器极速模式中img的isIntersecting、intersectionRect都是undefined，只有intersectionRatio为0（图片不在可视区域），所以执行了return false,并没有继续向下执行；  ### 3、QQ浏览器中虽然文章内容的图片展示不出来，但是用户的头像可以展示，对比一下两者的区别： >（1）用户的头像用的是div+backgroundImage，初始化的时候，div有一定的width和height，intersectionRatio为1；  >（2）文章内容的图片用的是img，初始化的时候，img的width和height为0，intersectionRatio为0；  对比之后发现img下的IntersectionRect并不是undefined，线上单步调试时却显示的是undefined，后来发现是因为代码中的intersectionRect拼写写错了，所以直接执行到了intersectionRatio，而对于QQ浏览器来说width和height为0时，intersectionRatio是0；给富文本的图片加了min-width:1px,min-height:1px后，intersectionRatio也会变为1 补充：对于高度为0的元素，即使添加了IntersectionObserver监听（回调函数在observe调用时就会触发，intersectionRatio是0），以后的页面滑动，元素的可见性不会有变化，对应的回调函数不会执行。大多浏览器均有同样的表现。针对这种现象，最优的解决方案是，给需要监听的元素，添加min-height:1px的默认样式，元素的可见性就会发生变化，触发对于的回到函数，达到预期的效果。