每日前端签到（第三十一天）

第三十一天（2018-09-04）

html:用一个div模拟textarea的实现

css:浏览器是怎样判断元素是否和某个CSS选择器匹配？

js:请用canvas写一个关于520浪漫表白的代码

软技能:你了解什么是技术债务吗？

题目1：

    



    
用一个div模拟textarea的实现
      

        这里是可以编辑的内容，配合容器的 overflow ，多行截断，自定义滚动条，简直好用的不要不要的。
    

题目2：

.container {
      display: flex;
      height: 100px;
      .left, .right {
        width: 100px;
        background: #8c939d;
      }
      .content {
        flex: 1;
        background: #306eff;
      }
    }

题目3：
之所以会报错，是因为在这里的 . 发生了歧义，它既可以理解为小数点，也可以理解为对方法的调用。
因为这个点紧跟于一个数字之后，按照规范，解释器就把它判断为一个小数点。

所以我们可以这样修改下：

(10).toFixed(10)
10..toFixed(10)
10 .toFixed(10)
10.0.toFixed(10)

当然出现这个报错是因为前面这个数是整数，如果本来就是小数就不会出现这个报错。
题目4：

缓存
http缓存 设置好cache-control expires Last-modified；
前端缓存 对于一些页面今天配置直接存储到localStorage中；对于长期不发生改变的代码可以直接通过server-work存储到本地；

优化加载
webpack 开启 tree-shaking 减少代码体积
通过preload prefetch优化加载资源的时间
import('').then()异步加载资源
图片小于30k的图片直接做成base64；
对于首屏的样式可以直接内嵌到html中；

服务端渲染
SSR
对于首页可以直接通过node jade模板引擎输出，其他页面继续使用前端渲染，优化首屏、SEO