画圆

<input v-model="message" />
// 转换后：
<input
  v-bind:value="message"
  v-on:input="message=$event.target.value">

1. 适当减少HTTP请求
   1. css/js合并打包
   2. 小图标用iconfont或者base64
   3. 雪碧图可维护性不好
2. 减少静态资源的体积
   1. js,css,图片压缩，图片压缩用tinypng.com
   2. 先经过tinypng压缩
3. 服务器端开启gzip
4. 预加载
   1. 利用浏览器空闲时间加载资源
5. 静态资源放CDN
6. 请求缓存，查询缓存
7. 设置合适的HTTP缓存
   1. 请求带宽
   2. 请求速度
8. 其他
   1. 减少dom数量（小程序，weex, RN）
   2. css预处理器，减少层级,小于3~4层
   3. 图片懒加载，Vue-lazyload
   4. 图片设置宽高，alt
      1. 重排
   5. 默认图片设置
   6. 接口请求的容错

面试要举实际的例子

1. 路由懒加载
   1. 首屏加载速度增快
2. 适当减少HTTP请求
   1. css/js合并打包
   2. 小图标用iconfont或者base64
   3. 雪碧图可维护性不好
3. 减少静态资源的体积
   1. js,css,图片压缩，图片压缩用tinypng.com
   2. 先经过tinypng压缩
4. 服务器端开启gzip
5. 预加载
   1. 利用浏览器空闲时间加载资源
6. 静态资源放CDN
7. 请求缓存，查询缓存
8. 设置合适的HTTP缓存
   1. 请求带宽
   2. 请求速度
9. 其他
   1. 减少dom数量（小程序，weex, RN）
   2. css预处理器，减少层级,小于3~4层
   3. 图片懒加载，Vue-lazyload
   4. 图片设置宽高，alt
      1. 重排
   5. 默认图片设置
   6. 接口请求的容错

面试要举实际的例子

1. 路由懒加载
   1. 首屏加载速度增快

安卓 www.jianshu.com/p/724097741… 2. ios www.jianshu.com/p/724097741… ```

css半圆弧线 .circle1 { width: 100px; height: 200px; border: 1px solid black; border-radius: 100% 0 0 100%/50%; border-right: none; } .circle2 { width: 200px; height: 100px; border: 1px solid black; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; } .circle3 { width: 100px; height: 200px; border: 1px solid black; border-radius: 0 100% 100% 0/50%; border-left: none; } .circle4 { width: 200px; height: 100px; border: 1px solid black; border-radius: 0 0 50% 50%/0 0 100% 100% ; border-top: none; }

复制代码 ```