韩琢

## 背景 近期团队对部门系列产品进行一系列的性能优化，前端整体框架由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...

## 一、线上问题： 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的默认样式，元素的可见性就会发生变化，触发对于的回到函数，达到预期的效果。

# 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浏览器）...