Jun

(() => '\u5b66\u4e60\u8ba9\u6211\u5feb\u4e50\uff0c\u5de5\u4f5c\u4f7f\u6211\u5f00\u5fc3')()


  • 首页

  • 标签

  • 归档

  • 代码片段

  • 关于

  • 搜索

在国内某跨境电商工作的这几年

发表于 2020-04-30

2020年难过的一年,经历了一大波的裁员,部门从最多100来人到20来人,团队也从最多20来人到现在只剩4人,是时候趁着现在回忆下在这里都干了啥

时间线

  • 入职 uxd 部门
  • 调到前台核心业务部门参与重构中项目(最佳时全球alex排名200内)
  • 做了前端团队负责人,人数达到18人+
  • 加入公司技术委员会前端序列
  • 摆脱了负责人角色,组织架构调整为按产品线,挂技术管理部虚职
  • 开始更多精力做技术
  • 经历最大程度人员优化
  • 再次调整组织架构划分到事业部
  • 现在

做了啥

到底干了啥,收货了啥

事项

单点登录客户端

基于 electron 开发公司办公必备的内部单点登录客户端(原有.net版本无法跨平台)。也是第一次接触electron整个使用还算流程,业务简单就没遇到啥大问题。

痛点是没人知道数据是怎么传输怎么加密,接口通过抓包找到,数据加密问了一大圈说的都不太一样。

阅读全文 »

Vue基于JSON Schema生成表单和校验

发表于 2020-04-16

基于 JSON Schema 定义数据结构,生成对应的表单,支持自定义输入组件和节点组件渲染,支持自定义错误提示配置和校验规则。

  • 使用场景:可视化活动编辑器
  • 源码:vue-json-schema-form github
  • 文档:vue-json-schema-form 文档
  • 演示表单:vue-json-schema-form Demo

生成表单如下图:
vue-json-schema-form

阅读全文 »

i18n国际化,多语言的key如何处理更好

发表于 2020-04-07

公司做海外业务,所有的对外项目都需要实现多语言,聊一些常见的多语言方案。

下面讨论的重点,不是在怎么去实现或者调用多语言,而是在对多语言 key 管理上的一些思考。

常见多语言方案

主要是两种方案,一种就是直接构建多份源文件,或者就是在运行时按需加载对应的语言包。

构建多份源文件

针对每种语言构建多份文件,假如现在需要 [zh-cn, en, ru],那会构建出来这三份代码

比如:index.zh-cn.js、index.en.js index.ru.js

这种做单从文件冗余上来看是最纯粹的,但问题也很明显

  1. 对于我们需要后台配置语言包的场景无法实现。
  2. 分别每种语言构建,语言多了速度会很慢。
  3. 多个语言下资源无法缓存,增加网络费用成本。
阅读全文 »

apple-touch-icon

发表于 2020-03-31

背景

一个pc站点反馈偶尔会受到 apple-touch-icon.png 文件的404请求,这个是属于ios的特殊 favicon 图标请求文件。

在没有明确配置apple-touch-icon时,ios设置会自动尝试去根目录加载这些文件, 由于是pc项目所以就没配置这个图标,所以就 404 这里记录下 apple-touch-icon 的相关配置。

配置

使用如下配置设置 apple-touch-icon 即可,图片格式使用 png

1
<link rel="apple-touch-icon" href="apple-touch-icon.png"/>

apple-touch-icon 支持size 配置,用来适配不同的设备

阅读全文 »

浏览器视窗或者元素宽高计算

发表于 2020-03-30

感觉每次用的时候都需要去查一次文档,做下汇总记录,只记录ie9+ 兼容性

详细描述参考 MDN

概念

innerWidth

  • 兼容性:兼容ie9+
  • 来源:window 对象上的属性值
  • 取值方式:返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在,则这个属性将包括它的宽度,也就是 viewport 的宽度。

outerHeight / outerWidth 类似inner的值,会包括浏览器框架在内,比如地址栏、书签栏、侧边栏、窗口镶边

innerWidth、innerHeight、outerWidth、outerHeight 类似

vw/vh

css单位 vw 是以 viewport 的相对单位,vh 也是类似;

比如:1vw 单位是1% viewport 的宽度,100vw 即是 viewport 的宽度

滚动条宽度计算

知道了浏览器视窗的大小,就顺便说下关于滚动条宽度的计算。

css中,100% 表示可用宽度(这里假设为根节点上的元素,所以 calc(100vw - 100%) 即可计算出滚动条的宽度

在JS中则如下:

window.innerWidth - document.documentElement.clientWidth || document.body.clientWidth

阅读全文 »

常见http缓存

发表于 2020-03-24

记录下http常见缓存,比如常说的协商缓存,强缓存 …

概述

缓存的种类可分为两大类,私有缓存 、共享缓存

  • 共享缓存:共享缓存可以被多个用户使用,比如为特定的用户提供热门资源缓存,缓存服务器等。
  • 私有缓存:私有缓存只能用于单独用户,这里主要介绍浏览器http缓存

http缓存就是避免相同的资源反复加载,用来提高web程序的响应性能。

常见的HTTP缓存只能存储 GET 响应,缓存内容由请求地址(URI)和方法(request method),针对一些特定的请求,也可以通过关键字区分多个存储的不同响应以组成缓存的内容,参考:Vary

按照日常使用,把缓存配置分为 强缓存 和 协商缓存 逐个介绍,如下。

强缓存包括: Expires 、Cache-control
协商缓存包括: ETag、Last-Modified

Cache-control

Cache-control 由 HTTP1.1 配置,请求头和响应头都支持这个属性。

主要包含如下关键字配置:

阅读全文 »

前端跨域的一些常见问题

发表于 2020-03-24

CORS 说了无数次,基本都是个别资源需要配置而已,在前面全站跨域的情况下还是出现了些小问题。

项目需要国内国外使用不同的api域来避免主域不能在国内备案的问题。所以在国内环境会启用新的备案域名做api接口请求域,不就是跨域嘛 简单…

原本以为只是需要配置下 Access-Control-Allow-xx 相关响应头,异步请求配置下 withCredentials 携带cookie,调整下相对路径,后面实际又陆续发现了新的问题,这个做下记录。

同源策略

首先还是说下同源策略,源文档和加载的资源需要 协议/主机/端口 完全一致,不完全相同的情况下会存在一定的限制,也就是跨域。

限制包含不限于如下:

  • LocalStorage、SessionStorage、Cookie等存储读写操作
  • 异步请求比如xhr、fetch 等
  • iframe,无法跨域读写操作等
  • script 无法捕获详细异常
  • canvas 无法导出图片等
  • …

但是也恰恰是因为了这些限制才保证了我们可以安全的浏览网页。常见的前端安全问题可以参见这里:常见前端安全问题

阅读全文 »

Safari ITP 协议限制和应对

发表于 2020-03-02

Safari ITP

智能跟踪防护(也称为ITP)用来防止网站数据追踪,保护用户隐私,是Webkit开发的隐私功能,也就是苹果的Safari浏览器使用的内核。

官方对各个版本的说明如下:

  • 1.0 https://webkit.org/blog/7675/intelligent-tracking-prevention/
  • 1.1 https://webkit.org/blog/8142/intelligent-tracking-prevention-1-1/
  • 2.0 https://webkit.org/blog/8311/intelligent-tracking-prevention-2-0/
  • 2.1 https://webkit.org/blog/8613/intelligent-tracking-prevention-2-1/
  • 2.2 https://webkit.org/blog/8828/intelligent-tracking-prevention-2-2/
  • 2.3 https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/
  • 2.3+ https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/

限制是逐步的加强,下个版本不知会有什么 惊喜 …

概念

主要影响都是涉及到 一方cookie、三方cookie 的限制,这里先解释下一方和三方的区别

比如有一个网站 a.com,加载可 g.com 的资源,并且请求 g.com 资源时会通过 response 写入用户标识cookie,然后 b.com 也加载了 g.com 的资源。

这样当你访问过 a,然后又访问了 b,那 g.com 依旧可以通过之前的标识知道就是你访问过 a ,然后推你喜欢小广告,这就是一个简单的跨站追踪,被广泛应用在广告转换,用户数据收集等方面。

在上面这个过程中 g.com 所使用的cookie就是 三方cookie(不是写在访问站点域下的cookie),a.com、 b.com 下的就是 一方cookie

跨站cookie 主要通过 iframe 内js写入,或者直接跨站请求 response 返回头写入。

阅读全文 »

Chrome 80 cookie sameSite none 兼容方案

发表于 2020-02-21

背景

Chrome80 之后会启用 SameSite 默认为 Lax ,限制三方cookie的访问

SameSite

SameSite 是用来防止CSRF攻击和用户追踪。

支持如下三个配置:

  • Lax
  • Strict
  • None

Lax

默认 Lax 大多数情况也是不发送第三方 Cookie,但是导航到目标网址的 Get 请求除外。

1
Set-Cookie: CookieName=CookieValue; SameSite=Lax;

导航到目标网址的 GET 请求,只包括三种情况:链接,预加载请求,GET 表单。详见下表。

请求类型 示例 正常情况 Lax
链接 <a href="\.\.\."></a> 发送 Cookie 发送 Cookie
预加载 <link rel="prerender" href="..."/> 发送 Cookie 发送 Cookie
GET 表单 <form method="GET" action="..."> 发送 Cookie 发送 Cookie
POST 表单 <form method="POST" action="..."> 发送 Cookie 不发送
iframe <iframe src="..."></iframe> 发送 Cookie 不发送
AJAX $.get("...") 发送 Cookie 不发送
Image <img src="..."> 发送 Cookie 不发送
阅读全文 »

前端性能指标衡量的那些值

发表于 2019-12-26

在前端性能的标准上并没有一个大家都统一使用的标准,从老旧的DOMContentLoaded或者Load时间到现在较多的首屏和较新的草案Time to Interactive(TTI),标准越来越以用户为中心
结合Chrome Performance和 Google PageSpeed Insights / lighthouse 出现的指标,记录下各个指标的含义

DL

DOMContentLoaded,表示HTML加载完成时间,包括同步js css,在Network、Performance中都可以直接查看

L

Load,页面所有资源加载完成的时间,包括图片等这两个指标大家相对熟悉

FP

First Paint, 浏览器首次绘制的时间,不包括默认的背景,这是开发人员关心页面加载的第一个关键时刻-当浏览器开始呈现页面时的时间

可以在 performance中直接查看或者PerformanceObserver来监听记录的出现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 记录出现后可以通过如下获取
window.performance.getEntriesByType('paint');

// 或者直接监听相关记录
var observer = new PerformanceObserver(function(list) {
var perfEntries = list.getEntries();
for (var i = 0; i < perfEntries.length; i++) {
// Process entries
// report back for analytics and monitoring
// ...
}
});

// register observer for paint timing notifications
observer.observe({entryTypes: ["paint"]});

阅读全文 »
123…6

Jun

记录前端开发领域相关的知识点,包含不限于Javascript、前端工程、Vue开发 等

57 日志
88 标签
Creative Commons
Links
  • MDN
  • mermaid
© 2021 Jun
由 Hexo 强力驱动 v3.9.0
|
主题 – NexT.Muse v7.0.0