-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
518 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
--- | ||
title: flex和grid | ||
lang: zh-CN | ||
feed: | ||
enable: true | ||
description: flex和grid | ||
--- | ||
|
||
# flex和grid | ||
|
||
> 本文作者:[onresize](https://github.com/onresize) | ||
- ### `flex属性` | ||
[flex图形选择生成示例代码](https://loading.io/flexbox) | ||
- flex-warp: 设置子元素是否换行 | ||
- aligin-items/aligin-content: 设置侧轴对齐方式(PS: aligin-content需要搭配flex-warp使用) | ||
- justify-content: 设置主轴对齐方式 | ||
|
||
- order: 设置子元素的位置顺序、值为整数(数值越小, 顺序位置越靠前、未设置order, 默认在最前面依次排序) | ||
```css | ||
.item{ order: -3 } | ||
.item1{ order: 1 } | ||
``` | ||
|
||
- gap: 表示各个子元素之间的间距、px单位、是row-gap column-gap的简写、写一个值时、行间距列间距都为这个大小 | ||
```css | ||
.contentBox { gap:10px } | ||
/* or */ | ||
.contentBox { row-gap:10px; column-gap: 30px } | ||
``` | ||
> PS: 行间距是row-gap、指的是每个元素左右的间距、column-gap为每个元素上下之间的间距 | ||
|
||
- `flex简写` | ||
- flex: `flex-grow` `flex-shrink` `flex-basis` | ||
- flex-grow: 设置子元素剩余空间占用比例、默认值:0、为0时不放大、值大于或等于1时占满剩余空间、值在`0-1`按比例放大 | ||
- flex-shrink: 设置子元素的缩小比例、默认值:1、值不为0时, 每个元素自动等比缩小、值为0或负数时, 元素不缩小 | ||
- felx-basis: 设置元素的宽度、同时设置width、会替代前面设置的width | ||
|
||
- ### `Grid属性` | ||
[Grid图形选择生成示例代码](https://tools.itsse.cn/cssgridgenerator/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
--- | ||
title: js地图开源库 | ||
lang: zh-CN | ||
feed: | ||
enable: true | ||
description: js地图开源库 | ||
--- | ||
|
||
# js地图开源库 | ||
|
||
> 本文作者:[onresize](https://github.com/onresize) | ||
|
||
|
||
- ### [mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js) | ||
![github star:](https://img.shields.io/github/stars/mapbox/mapbox-gl-js?color=white&label=Stars&logo=github&style=social) | ||
|
||
- ### [openlayers](https://github.com/openlayers/openlayers) | ||
![github star:](https://img.shields.io/github/stars/openlayers/openlayers?color=white&label=Stars&logo=github&style=social) | ||
|
||
- ### [Leaflet](https://github.com/Leaflet/Leaflet) | ||
![github star:](https://img.shields.io/github/stars/Leaflet/Leaflet?color=white&label=Stars&logo=github&style=social) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
--- | ||
title: link标签几个优化性能的使用方法 | ||
lang: zh-CN | ||
feed: | ||
enable: true | ||
description: link标签几个优化性能的使用方法 | ||
--- | ||
|
||
# link标签几个优化性能的使用方法 | ||
|
||
> 本文作者:[onresize](https://github.com/onresize) | ||
- 使用场景:比如项目中iframe嵌入第三方网址、为了加快响应速度、可以使用link去做一些优化 | ||
|
||
### DNS预解析 | ||
- 提前将域名转化为ip地址、缩短请求资源的耗时 | ||
```html | ||
<link rel="dns-prefetch" href="//example.com"> | ||
``` | ||
|
||
### Preconnect(预连接) | ||
- 当访问一个站点时、会经过以下步骤: | ||
1.DNS解析 | ||
2.TCP握手 | ||
3.如果时https协议的站点、会进行TLS握手 | ||
- 使用预连接后、浏览器会针对特定的域名、提前初始化执行上面三个步骤、节省我们访问第三方资源的耗时、 | ||
```html | ||
<link rel="preconnect" href="//example.com"> | ||
<link rel="preconnect" href="//cdn.example.com" crossorigin> | ||
``` | ||
|
||
### Prefetch(预拉取) | ||
- 预拉取用于标识从当前网站跳转到下一个网站可能需要的资源、以及本网站应该获取的资源。这样可以在将来浏览器请求资源时提供更快的响应。 | ||
- 这里需要注意的是、使用了prefetch、资源仅仅被提前下载、下载后不会有任何操作、比如解析资源。 | ||
```html | ||
<link rel="prefetch" href="//example.com/next-page.html" as="document" crossorigin="use-credentials"> | ||
<link rel="prefetch" href="/library.js" as="script"> | ||
``` | ||
- link标签里的as参数可以有以下取值: | ||
```text | ||
audio: 音频文件 | ||
video: 视频文件 | ||
Track: 网络视频文本轨道 | ||
script: javascript文件 | ||
style: css样式文件 | ||
font: 字体文件 | ||
image: 图片 | ||
fetch: XHR、Fetch请求 | ||
worker: Web workers | ||
embed: 多媒体<embed>请求 | ||
object: 多媒体<object>请求 | ||
document: 网页 | ||
``` | ||
|
||
### Prerender(预渲染) | ||
```html | ||
<link rel="prerender" href="//example.com/next-page.html"> | ||
``` | ||
- `prerender` 比 `prefetch` 更进一步。不仅仅会下载对应的资源、还会对资源进行解析。解析过程中、如果需要其他的资源、可能会直接下载这些资源。这样、用户在从当前页面跳转到目标页面时、浏览器可以更快的响应。 | ||
|
||
- 用js方法使用: | ||
```js | ||
var hint = document.createElement("link"); | ||
hint.rel = "prefetch"; | ||
hint.as = "document"; | ||
hint.href = "/article/part3.html"; | ||
document.head.appendChild(hint); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
--- | ||
title: 前端监控 | ||
lang: zh-CN | ||
feed: | ||
enable: true | ||
description: 前端监控 | ||
--- | ||
|
||
# 前端监控 | ||
|
||
> 本文作者:[onresize](https://github.com/onresize) | ||
|
||
- ### [webfunny_monitor](https://github.com/a597873885/webfunny_monitor) | ||
![github star:](https://img.shields.io/github/stars/a597873885/webfunny_monitor?color=white&label=Stars&logo=github&style=social) |
Oops, something went wrong.