team
team copied to clipboard
mopduan
Team技术总结
### 1、访问本地fiddler服务，本机ip+8888（端口号），如下图，下载根证书。  ### 2、双击下载的证书，安装。在钥匙串访问中找到安装的证书  ### 3. 双击打开，选择始终信任  ### 4. 重启浏览器即可生效
# 升级到IOS11之后发现fiddler无法抓取https请求，可采用如下解决办法： ### 1. 打开Safari浏览器，进入代理ip+对应端口号，如xx.xxx.xxx.xxx:8080，并点击红框内链接  ### 2. 按照提示安装描述文件   ### 3. 安装成功后，进入设置=》通用=》关于本机=》证书信任设置，对fiddler根证书启用完全信任  ### 4. 继续写代码 ### 注：某些iOS设备和Android设备可能无法使用Fiddler使用的默认HTTPS拦截证书。 为了解决这个不兼容问题，你可以安装一个证书生成插件，生成与这些平台兼容的拦截证书。[下载链接](https://telerik-fiddler.s3.amazonaws.com/fiddler/addons/fiddlercertmaker.exe)
截止至2017.12.1，平台和构建工具均为最新版，以下所列均为可能会影响产品体验的问题并已向小米方反馈，细节小问题略过 小米工程师已经明确表示后续版本会修复的： - gif 图片不支持 css 属性 `border-radius` - css `@keyframes` 语法必须单独设置关键帧，不能用逗号一次设置多个 - 如果没有给 image 组件设置宽高，图片加载失败后无法显示 alt 内的替换图片 小米工程师认为不是问题的（即可能不会修复）： - tabs 和 swiper 组件纵向滑动手势会触发 click 事件 - richtext 组件的 type...
### 1、访问本地fiddler服务，本机ip+8888（端口号），如下图，下载根证书。  ### 2、双击下载的证书，安装。   完成证书安装。 ### 3、在fiddler中，Tools>>options 进行如下设置。  选择 "Trust Root Certificate"。  点击 "yes" ### 4、重启fiddler即可生效。
# Skeleton Screen 总结 ### 概念 - `Skeleton Screen`（加载占位图）是近年流行的加载控件，通常表现形式是在界面上待加载区域填充灰色的占位图，与线框图的效果非常相似。`Skeleton Screen`本质上是界面加载过程中的过渡效果。 ### 结合React - `Skeleton Screen`结合`React`，结合`React`以组件的形式进行展示，并和`radial-gradient、linear-gradient`（线性渐变和径向渐变）相结合实现动态的加载控件。 #### Sleketon组件的代码如下: ``` import React, { Component } from 'react'; const css = (id, color...
# 无线略懂性能优化_1 >略懂无线性能优化第一弹： 从减少网络请求开始！ (数据的获取使用chrome浏览器， 所有网络请求数据抓取时关掉fiddler等抓包工具，去掉chrome浏览器的扩展工具，清除缓存) #### 首页加载情况：  #### 详情页加载情况： *（以`http://ld.sogou.com/m/question?qid=9503397`为例）*  ## 第一部分： 针对所有页面可优化的点： ### 1.script.min.js（**1.3KB**）可以去掉，下图为script.min.js在首页的网络加载情况。  >之前的一些需要异步加载的js文件，我们是在vm中通过script.min.js做到（$script('/sf/src/js/ld/mobile/lib/plugin/megapixImage/megapix-image.js')），因为用到的库都支持CommonJs方式的引用，所以现在都放在js文件中动态按需加载。 ### 2.实名认证的样式加载目前没有按照ua来，既加载了无线又加载了pc相关样式： >shiming.css是无线弹窗样式， > >attestation.css 为pc弹窗样式。 > >按照ua来按需加载，无线可去掉attestation.css（**1.9KB**）的加载。  ###...
# PC略懂性能优化_1 >PC略懂社图片优化 ## 一、问题： PC略懂社图片（搜狗云图处理后的图片）显示慢，**原因**有两方面： >1. 有的图片本身很大（比如gif图），导致图片请求的时间过长； > >2. 图片本身的渲染时间比较长； 略懂社1.8版本对**图片的渲染时间**进行了优化 ## 二、优化方法： ### 优化前： PC略懂社的图片都是通过img标签来显示图片，并且图片的展示规则如下：  之前实现这些规则都是通过JS修改图片的width，height，margin-left，margin-top等属性来实现 这样的话会带来一定的**性能问题：页面会出现局部的reflow和重repaint**  ### 优化后： PC略懂社的图片（除查看大图和富文本的图片）都**改为div+backgroundImage的方式**来显示 **图片的显示规则统一放在CSS端来处理** 这样可以避免更改img的width，height，margin-left，margin-top属性，**从而减少页面中的reflow和repaint** ## 三、图片优化前后对比： 以略懂社兴趣广场的首屏加载为例 （Chrome浏览器）...
## 背景 由于React 16之前版本仍然存在法务风险，需要将略懂使用的React升级至16.0.0来规避此问题。这篇文章主要介绍如何从React 15或之前的版本升级至16.0.0。 ## React 16的新特性 * render方法可以返回数组或者字符串，而非像之前只能返回单一DOM节点； * [Error boundaries](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html)，错误边界，可以捕获到发生在子组件树中的异常，打印输出错误信息，并且返回一个用于提示发生错误的UI页面，而非像之前那样整个组件树崩溃； * `React.createPortal()`向一个DOM节点中render子树； * 流式服务端渲染`ReactDOMServer.renderToNodeStream()` and `ReactDOMServer.renderToStaticNodeStream()` * 其他特性以及API变动可见[React v16.0.0](https://github.com/facebook/react/releases/tag/v16.0.0) ## React 16的环境依赖 React 16依赖ES6中Collection类型[Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)和[Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)，低版本浏览器（比如IE9）中没有支持对应的类型，需要在全局下引入core-js或者babel-polyfill。全量引入polyfill体积较大，在确认了代码中使用到的ES6新特性后，使用了自定义的[arr_obj_map_set_prms.min.js](http://cache.soso.com/wenwen/deploy/js/babel_ployfill/customized/arr_obj_map_set_prms.min.js)，包含目前略懂使用到的`Array`，`Object`，`Map`，`Set`以及`Promise` js体积对比见表格： js体积对比| babel-polyfill...
