前端经验

元素在设置为display:inline-block;后元素之间会产生间距

解决方法就是在包含这些元素的父元素上设置CSS属性font-size: 0;

Chrome浏览器img标签在没有图片的情况下会显示边框

img[src=""], img:not([src]){
    opacity: 0;
}

css实现单行、多行文本溢出显示省略号的方法

单行省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

这种方式一般都需要给固定宽度

多行省略号（这个属性只合适WebKit浏览器）

dispaly: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: 2; //这个显示几行
overflow: hidden;

多浏览器兼容方案

p {
    position:relative;
    line-height:1.4em; //要显示三行的话那么元素的高度就是行高的3倍，其它情况以此类推。
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
}

用户体验优化

优化思路

最直观的感受就是页面内容出来的速度。那么为了提高页面加载（或者渲染）速度呢？一般来说有三个方面：

代码逻辑

优秀的代码逻辑结构可以有效减少渲染页面使用的内存和速度（比如虚拟DOM）、减少重绘

SSR服务器渲染

将首屏所有内容在服务器端渲染成html静态代码后，直接输出给浏览器，可以有效加快用户访问站点时首屏的加载时间。

提升静态文件的加载速度

加快静态文件下载速度

减少静态文件的文件大小

减少静态文件请求数量

优化实践

Webpack压缩代码

tree-shaking的特性。这个特性优化了对于ES6的module管理，大概能减少30%左右的包体积。

文件合并

合并js引用脚本文件

单页系统，登录初始化的时候很慢，大概会延迟几秒……因为首次调用很多的接口、加载很多的静态资源
登录页面提前调用获取图片、一些无需参数的静态资源接口；整合静态资源
防抖截流函数应用

合并css样式文件

合并css引用的图片，使用sprite雪碧图。

gzip

文件在压缩合并之后，文件大小和文件数量都有了客观的减少。但是一旦系统业务逻辑多，或者引入的第三方库多，文件大小还是不太乐观。

这个时候用gzip压缩可大大减小文件大小【可在webpack的配置中增加gzip压缩配置/也可以直接nginx或其他web server配置gzip压缩】

CDN和缓存

不是很清楚