前端设计与用户体验

清明节假期，突然想起一点东西：一个网页的复杂程度，和网页的传输效率，网页的打开速度有直接的关系。网页传输效率和网页打开速度对于用户体验至关重要。一个好的设计，不仅仅把产品的特点表现的淋漓尽致，同时需要给用户最佳的用户体验。如何不断优化自己的网站设计呢？

1.网站多媒体的设置：多媒体是网站传输的重要的载体。现在用户耐心看完网站的文字内容很难，快速阅读的社会需要提供更多的图片视频音频等多媒体。对于图片、音频、视频等，在不影响效果的情况下尽量选择小一些的（之前有同事直接使用设计组提交的300dpi的原始图件，如果网速不好，网页加载时间可能变慢很多。）

2.网页代码优化：如果网页较长，可以使用JS中懒加载插件，当用户浏览到相应的位置后再请求图片（Ajax），避免短时间加载出现图片加载问题。在国内一些大型购物网站淘宝等就灵活使用懒加载的技术。当然，包括淘宝和天猫前端团队（目前是国内数一数二的前端），追求前端的极致，需要不断学习。当其他网站使用jQuery时，上述两个网站使用加载更快的方法（信息来源于网络）。日常编程中，不断优化自己的代码，自己多思考，网站就会更好。

3.网页功能优化：刚开始的新手容易犯一些毛病，将新潮的技术和复杂的内容应用到很多页面中，实际效果并没有达到。针对市场人员和客户提出的要求，尽量用简单的代码简单的结构将其功能实现优化（write less do more）。在此基础上，逐步提高网站的灵活性。

网页设计需要注意的方面还有很多，以后慢慢补充。本人菜鸟一枚，欢迎技术大牛批评指正。

 

2019-3-3 更新

最近看了百度春节红包的技术细节，在这里补充一些想法：

如果一个网页或者APP用户量不大，那么不需要进行请求限制。如果用户数量巨大或者峰值很高，需要限制请求的并发数量。在抢红包的过程中，如果短期内大量请求发出，那么服务器不一定及时响应众多的请求，就会造成用户体验下降，在前端的优化策略就是减少页面的请求次数，减少首页加载的时间，请求的过程中使用loading等用户友好型方式减少用户的等待时间，如果等待时间超过1秒，那么最好设置进度条，提示用户的请求时间。

 

2020-03-31 更新

最近了解了一些 SSR（server side render）的内容，这个技术可以很好地处理首屏打开时间；把一部分的JS代码，直接在服务器端渲染成 HTML 字符串，然后把渲染后的结果发送给浏览器即可，可以减少客户端（浏览器）的渲染时间，当然会增加服务器的负载。

具体操作是：在 webpack 打包时，设置两个入口：一部分打包浏览器端JS，一部分打包服务端JS；然后需要在服务器端把这部分渲染服务跑一下（可以用nodeJS）

对于 React，componentWillMount 阶段执行的代码，就是在服务器端渲染的。

如果是 VUE，可以使用第三方框架 Nuxt 实现服务端渲染（或者 vue-server-render 库）。

下面是实现服务器端渲染的代码（使用express框架）

const express = require('express');
const fs = require('fs');
const Vue = require('vue');

// 开启express服务
const server = express();

// 这是关键：后端使用renderer把VUE渲染成HTML
const renderer = require('vue-server-renderer').createRenderer();

function createApp(url) {
  if (url === '/') {
    url = '/index';
  }
  return new Vue({
    // 从文件中读取模板
    template: fs.readFileSync('template' + url + '.html', 'utf-8')
  });
}

server.get('*' , (req, res) => {
  var app = createApp(req.url);
  // 把VUE项目转换成HTML
  renderer.renderToString(app).then(html => {
    // 把转换后的结果放在浏览器界面上
    res.end(html);
  });
});

server.listen(7000);

SSR 我还没有实际使用到工作中，后续会详细学习一下。