08 2021 档案

摘要:前端性能优化(二)——浏览器缓存机制浏览器缓存就是浏览器根据 url 第一次访问网站之后,将网站的 html、css、js、图片等文件复制一份保留到浏览器中,当你二次访问这个 url 的网站时,如果网站没有明确表示有更新时,浏览器直接在缓存中查找内容,不会再次请求网页内容,只有网页明确表示有更新时,浏览器才会向服务器发起网路请求,再次下载网页。 阅读全文
posted @ 2021-08-31 09:32 前端人 阅读(3549) 评论(0) 推荐(2) 编辑
摘要:作为一个前端,经常会有老板或测试给我们提出某个地方加载太慢了,需要优化一下。我们自己的网站也一样,加载时间过长,自己都不耐烦,对于网页优化是很常见的,今天我们先介绍下网页加载原理。 一、浏览器简介 想要了解浏览器的工作原理,我们必须清楚浏览器的组成有哪些?以及各个部分功能。 浏览器组成部分如图所示: 阅读全文
posted @ 2021-08-30 09:29 前端人 阅读(1023) 评论(0) 推荐(3) 编辑
摘要:「移动端」前端常见知识点总结,如常见的获取位置、摇一摇功能、判断手机类型、检查浏览器版本信息、手机拍照功能、发送短信等等 阅读全文
posted @ 2021-08-27 12:00 前端人 阅读(546) 评论(0) 推荐(3) 编辑
摘要:一、什么是响应式布局? 响应式设计:Responseive design,就是一个网站,一套代码能在所有终端能够正常展示,并不是为每个终端做一个特定版本,响应式是为解决移动互联网浏览器而诞生的。 二、响应式设计步骤 2.1、viewport 设置 大多数移动端浏览器都将html页面的宽度作为可视区的 阅读全文
posted @ 2021-08-26 12:48 前端人 阅读(2056) 评论(6) 推荐(7) 编辑
摘要:随着智能手机普及,有越来越多的手机网页和网页版游戏,手机触摸、移动、旋转等等,多种操作。一般电脑的人机交互靠的是鼠标,而手机用的就是触摸。区别有: PC 端一个电脑只能有一个鼠标,而移动端有多点触摸。 PC 端添加效果使用 mouseup、mousedown、mousemove,而移动端使用的 to 阅读全文
posted @ 2021-08-25 11:25 前端人 阅读(977) 评论(0) 推荐(0) 编辑
摘要:前边几篇文章介绍本地缓存,还有 WebSocket 等好多需要在服务内才能运行,上一篇介绍移动端适配,更是需要在手机端访问页面,此时就不得不介绍下如何在本地启动服务,及手机如何访问? 一、为什么需要本地服务? 调试移动端网页调试方法: PC端浏览器的开发者模式中,选择手机模式。 利用手机模拟器。 使 阅读全文
posted @ 2021-08-24 12:18 前端人 阅读(3373) 评论(1) 推荐(0) 编辑
摘要:一、什么是移动端适配 移动端 Web 页面,就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各种尺寸设备的兼容问题,我们要做的 web 页面适配,就是为了在不同设备上,页面能够保持统一展示效果, 阅读全文
posted @ 2021-08-23 10:38 前端人 阅读(1763) 评论(0) 推荐(1) 编辑
摘要:一、WebSocket 由来 WebSocket 是一个持久化的协议,通过第一次 HTTP Request 建立连接之后,再把通信协议升级成 websocket,保持连接状态,后续的数据交换不需要再重复请求。websocket 可以看成一种类似 TCP/IP 的 socke t技术,在 web 应用 阅读全文
posted @ 2021-08-20 10:39 前端人 阅读(1017) 评论(0) 推荐(3) 编辑
摘要:一、为什么要学 WebSocket? websocket 是 HTML5 提供的一种长链接双向通讯协议,使得客户端和服务器之间的数据交换更简单,允许服务端主动向客户端推送数据,并且客户端与服务端只需连接一次,就可以保持长久连接,并进行数据通信。 websocket 与 http 区别: http 链 阅读全文
posted @ 2021-08-16 15:35 前端人 阅读(2272) 评论(0) 推荐(2) 编辑
摘要:HTML5(十)——Canvas 与 SVG 区别作为一名前端攻城狮,Canvas 和 SVG 对于我们并不陌生,canvas 是 HTML5 提供的新元素,而 svg 存在的时间要比 canvas 长很多,svg 并不属于 html,最初的 svg 是由 XML 定义的,在 html 5 中 canvas 与 svg 看着相似,其实不同。 一、基 阅读全文
posted @ 2021-08-13 16:40 前端人 阅读(1679) 评论(0) 推荐(0) 编辑
摘要:SVG 动画有很多种实现方法,也有很大SVG动画库,现在我们就来介绍 svg动画实现方法都有哪些? 一、SVG 的 animation SVG animation 有五大元素,他们控制着各种不同类型的动画,分别为: set animate animateColor animateTransform 阅读全文
posted @ 2021-08-12 14:20 前端人 阅读(1275) 评论(0) 推荐(0) 编辑
摘要:path 是 SVG 基本形状中最强大的一个,不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中,介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果,我们就开始学习 path 如何应 阅读全文
posted @ 2021-08-09 16:09 前端人 阅读(4987) 评论(0) 推荐(0) 编辑
摘要:声明:SVG 虽然也是标签,但它不是 HTML5,标题加了 HTML5 只是为了与 canvas 放到一起。 一、为什么要学 SVG ? SVG 意为可缩放矢量图形(Scalable Vector Graphics),使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的,但是 SVG 没有单 阅读全文
posted @ 2021-08-06 16:06 前端人 阅读(2195) 评论(0) 推荐(0) 编辑
摘要:上一篇文章《HTML5(五)——Canvas API》介绍 canvas 绘制基本图形,这节开始介绍canvas的高级操作。 一、canvas 转换 canvas 转换常用的几种方法介绍,如下: 方法 描述 scale() 缩放当前绘图至更大或更小。 rotate() 旋转当前绘图。 transla 阅读全文
posted @ 2021-08-04 17:25 前端人 阅读(684) 评论(0) 推荐(1) 编辑
摘要:什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式。可用于动画、游戏、图标、图片编辑等多个方面。 使用前,首先需要新建在网页上新建 canvas 元素。 <canvas id="mycan 阅读全文
posted @ 2021-08-02 17:12 前端人 阅读(1628) 评论(0) 推荐(4) 编辑