some 面试题

2018-05-31

比较新的面试题

全局字体

1
2
3

body {
    font-family: Microsoft Yahei, SimSun, Helvetica;
}

使用css实现一个持续的动画效果

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}
p {
    animation: mymove 5s infinite;
}

展开全文 >>

杂记

2018-05-30

css序列

li {
    color: red;
}
li:first-child,
li:nth-child(2n + 4),
li:nth-child(3n + 6),
li:nth-child(5n + 10),
li:nth-child(7n + 14),
li:nth-child(11n + 22),
li:nth-child(13n + 26),
li:nth-child(17n + 34),
li:nth-child(19n + 38),
li:nth-child(23n + 46),
li:nth-child(29n + 58),
li:nth-child(31n + 62) {
    color: #ddd;
}

<!-- 文本末尾... -->
.hideInline {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

展开全文 >>

http通信协议笔记

2018-04-21

1. 从Chrome源码看DNS解析过程

客户端向域名解析服务器发起查询，然后服务器返回响应。DNS服务器nameservers是在设备接入网络的时候路由器通过DHCP发给设备的，chrome会按照nameservers的顺序发起查询，并将结果缓存，有效时间根据ttl，有效期内两次查询直接使用cache。DNS解析的结果有几种类型，最常见的是A记录和CNAME记录，A记录表示结果是一个IP地址，CNAME表示结果是另外一个域名

H5首屏秒开方案探讨：怎样减少白屏时间

总结起来，大体优化思路就是：缓存/预加载/并行，缓存一切网络请求，尽量在用户打开之前就加载好所有内容，能并行做的事不串行做。

初始化 webview ->
请求页面 ->
下载数据 ->
解析HTML ->
请求 js/css 资源 ->
dom 渲染 ->
解析 JS 执行 ->
JS 请求数据 ->
解析渲染 ->
下载渲染图片

展开全文 >>

px2rem 以及 css模块化

2018-04-04

px2rem

自适应 {
viewport 和设备像素比调整基准像素
利用px2rem 自动转换rem
}
移动端 hotcss > prem 像素

hotcss => webpack.config.js => entry: [‘./app/js/viewport.js’, ‘./app/js/main.js’]

项目组件化设计 css module

滑动 => vue-awesome-swiper
复制路径 => copy-link-adress

展开全文 >>

学习类Class简记

2018-04-02

类： class symbols objects decorators

1. class 一种原型链的语法糖

class Fruit {
    constructor(name, calories) {
        this.name = name
        this.calories = calories
        this.pieces = 1
    }
    chop () {
        this.pieces++
    }
    bite (person) {
        if (this.piecess < 1) return
        const calories = this.calories/this.pieces
        person.satiety += calories
        this.calories -= calories
        this.pieces--
    }
}

util.inherits(Banana,Fruit)

展开全文 >>

webpack 打包配置NODE_ENV

2018-04-01

这是webpack打包时的主要两个功能：

清除dist文件

配置 dist 打包方式 npm run dev npm run build:test npm run build:prod

1.pakage.json

安装相关功能的插件：devDependencies => {clean-webpack-plugin,cross-env}

展开全文 >>

触摸事件

2018-03-26

1. 触摸事件

touchstart touchmove touchend touchcancel
touches targetTouchs changeTouchs

2.常用属性

bubble cancelable view
clientX clientY 浏览器中的X,Y
screenX screenY 屏幕中的 X,Y
detail
altKey shiftKey ctrKey metaKey
pageX pageY 当前Dom中的X,Y
target 触摸的Dom节点目标

展开全文 >>

vue基于viewer图片查看器

2018-03-08

背景：公司正在用vue开发一款后台管理系统，有一个需求要查看图片：要求图片能够预览、放大、缩小、旋转、连续播放功能，写了很久都没能达到预想要求。
然后就在网上找相关插件，也没有找到vue相关的图片插件，情急之中就找到了一个JQ插件：viewer.js。于是乎就想着怎么把这个插件搬到vue组件里面来。