现代前端技术解析:Web前端技术基础
最近几年,越来越多的人投入到前端大军中;时至至今,前端工程师的数量仍然不能满足企业的发展需求;与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作,优秀的前端工程师一将难求。
真正了解前端技术的工程师都会感觉前端技术发展变化太快。浏览器特性、前端框架、前端工具、多终端浏览器等都在快速迭代中。作为前端工程师不仅要掌握现有的技术去实现业务需求,更要不断的学习新的技术、新的理念,时刻准备着新技术浪潮的来临。
《现代前端技术解析》提及了作为一个前端工程师需要了解的大部分技能。介绍了从直接性DOM交互框架>>MVC>>MVP>>MVVM>>Virtual DOM>>MNV*等框架演变和实现原理;讲解了前端大型项目实现的思路;引出了前后端同构、Hybrid离线包以及增量更新关键技术的设计思路;并对未来前端趋势做了相关分析和展望。
Web前端技术基础
前端开发模式先后经历了静态黄页时期、服务器组装动态网页数据时期、后端为主的MVC(Model-View-Controller)模式时期、前后端分离方案开发时期、纯前端MV*(Model-View-*,数据模型、视图、控制方式分离)时期、最后进入到虚拟DOM时期、MNV*(Model-NativeView-*)时期以及前后端同构的开发时期。
现代Web前端技术发展概述
随着越来越多的业务搬到前端实现、前端的代码量越来越多。应运而生的是采用代码管理中分治思想模块化和组件化的出现,将复杂的代码结构拆分成多个对立、简单、解耦合的结构或文件分开管理,使项目结构更加清晰;同时限制首页资源、利用缓存以及局部请求的方式来使用户更快更流畅的使用。
然而,对于移动端我们往往需要考虑更多的限制因素,移动端的劣势:
- 移动端设备计算资源和网络资源比较有限;
- 移动端CPU处理速度较慢且网络速度也相对较慢,解析和加载同样的内容需要更长的时间;
- 移动端浏览器受屏幕大小限制,一次性展示的内容有限;
- 移动端设备通常没有键盘和鼠标等外接设备,用户交互难度大;
- 移动端整体性能比PC端要差。
JavaScript在Node.js(Node.js是一个基于Chrome V8引擎的JavaScript运行环境,使用了事件驱动、非阻塞式I/O的模型,使其轻量又高效,它使用的包管理器为npm,是目前全球最大的开源生态系统)服务端也可进行高效的开发,使前后端同构变得可行。
Web前端技术一直以效率和质量为最终导向的道路上探索前进!
浏览器应用基础
通常认为浏览器主要由:用户界面、网络、JavaScript引擎、渲染引擎、UI后端、JavaScript解释器和持久化数据存储七部分组成。浏览器内核往往指的是渲染引擎。
常见的浏览器内核:
- Trident内核:IE、360浏览器、搜狗浏览器等
- Gecko内核:Netscape6及以上版本、Firefox、SeaMonkey等;
- Webkit内核:Safari、Chrome;
- Blink内核:Webkit一个分支,优化了一些新特性,移动端较多浏览器采用该内核。
浏览器渲染引擎工作流程:
渲染引擎对DOM渲染树的解析和输出是逐行进行的,内容越靠前越优先展示,所以为了确保用户体验,通常不要将script脚本插入到HTML显示内容区域,因为script内容的解析执行会阻塞页面结构的渲染。
整个过程中,要关注的是渲染树布局和绘制阶段:页面生成后,如果页面位置(position、float、margin等属性)发生变化,就要从布局阶段开始重新渲染,即页面重排。页面重排一定会进行后续重绘。如果页面元素只显示样式改变而布局不变,那么页面内容将从绘制阶段开始,即重绘。所以,需要尽可能的避免页面重排,并减少页面元素的重绘!
HTML文档解析
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>页面标题</title></head><body><div><p>页面内容</p></div></body>
</html>
let element = document.getElementById('id'),type = Object.prototype.toString.call(element).slice(8, -1);
console.log(type); // HTMLDivElement
CSS解析
html, body{margin:0;color:red;
}
header, section, footer {margin-top:10px;
}
在已经形成的DOM渲染树中,节点的CSS规则可以通过document.defaultView.getComputedStyle(element, null)
方法来获取查看。
补充:样式规则的权重计算方式
样式规则 | 权重 |
---|---|
!important | 最高 |
内联 | 1000 |
id | 100 |
.class | 10 |
name | 1 |
例如:
/* 100 + 10 + 1 = 111*/
body #content .btn {color:yellow;
}
/* 100 + 10 = 110*/
#content .btn {color:red;
}
/* 100 + 1 = 101 */
#content button {color:blue;
}
权重更高的样式规则生效,最终button按钮展示未黄色。
document.defaultView.getComputedStyle(element)
获取元素CSS规则。
浏览器数据持久化存储技术
打开Chrome浏览器调试模式,Application左侧列举了现代浏览器的8种缓存机制HTTP文件缓存、localStorage、sessionStorage、indexDB、Web SQL、Cookie、CacheStorage、Application Cache,以及不常用的Flash缓存。
HTTP文件缓存
HTTP文件缓存是基于HTTP协议的浏览器文件级缓存技术。详情请查看: 【HTTP】缓存
1. Cache-Control:相对时间(秒为单位)
(或者,Expires:绝对时间
)如果未过期,直接读取浏览器缓存文件,不发生任何HTTP请求。
2. 在浏览器端判断上次返回头中是否包含Etag信息,有则连同If-None-Match一起向服务器端发送条件Get请求,304说明未做过修改,如果是200需要进入下一步;
3. 在浏览器端判断上次返回头中是否包含Last-Modify信息,有则连同If-Modified-Since一起向服务器端发送条件Get请求,内容失效返回200,否则304;
4. 如果Etag和Last-Modify都不存在,直接向服务器请求。
注意:如果返回304,不会有内容,节省请求大小!
localStorage
【受到同源策略影响】、【以及在safari下问题】、【常规解决方案代码】请查看八种方式实现跨域请求
单个localStorage的大小受限,可以用多个iframe方式使用多个域名来突破单个页面下localStorage存储数据的最大限制。特别说明,浏览器多个标签页打开同个域名时,localStorage内容一般是共享的。其位置这可以监听事件“storage”来做一致性操作响应处理。这样会导致一种现象如下:
标签页一:通过某行为修改localStorage中某个属性值,然后数据接口依赖该属性值;
标签页二:由于localStorage标签页间共享,导致标签页二数据不准确!
sessionStorage
和localStorage功能类似,但是sessionStorage在浏览器关闭时会自动清空。
Cookie
Cookie为了辨别用户身份(参见,客户端识别与cookie机制)或Session跟踪而存储在用户浏览器端的数据。Cookie一般会通过HTTP请求发送给服务器端。
Cookie分为:Session Cookie和持久型Cookie。Cookie设置中有个HttpOnly参数,前端浏览器使用document.cookie是读取不到HttpOnly类型的Cookie的,被设置为HttpOnly的Cookie记录只能通过HTTP请求头发送到服务器端进行读写操作,这样就避免了服务器的Cookie记录被前端javascript修改,保证了服务器验证Cookie的安全性。
其他
- WebSQL:二维表的形成存储大量数据到客户端,但目前只有Chrome浏览器有。
- IndexDB:在客户端存储大量结构化数据并且在这些数据上使用索引进行高性能检索的一套API,类似于NoSQL。
- Application Cache:通过manifest配置文件在本地有选择性地存储javascript、css、图片等静态资源文件的文件缓存机制,已废弃。
- cacheStorage:在ServiceWorker规范中定义的,用于保存每个ServiceWorker(后续博文会单独介绍)声明的Cache对象,未来可能替代Application Cache的离线方案。
- Flash缓存:主要基于Flash,具有读写浏览器本地目录的功能。
号外:chrome://chrome-urls/可以列出Chrome的所有URL;使用安卓手机打开Chrome,在桌面Chrome中输入chrome://inspect/#devices可以连接手机进行调试。
现代前端技术解析:Web前端技术基础相关推荐
- 2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
- 好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
- 什么人适合学习web前端?怎样学好web前端开发?
web前端在IT互联网行业的发展前景是非常可观的,越来越多的人都在学习web前端技术,那么什么人适合学习web前端?怎样学好web前端开发?相信大家都想了解这些问题,我们来看看下面的详细介绍. 什么人 ...
- 移动web前端开发框架_移动前端开发是Web前端开发吗?
移动端开发并不是Web前端开发,但移动前端开发和web前端开发其实都属于前端开发的范围,目前前端发展的趋势就是大前端,可以说是包罗万象.但不论趋势如何发展,目前来看HTML.CSS和JavaScrip ...
- 北风网web前端开发培训课程 web前端开发实例视频教程下载
web前端开发视频教程 Web前端开发工程师培训 零基础Web前端开发工程师高端培训配项目开发(月薪过万的最佳选择) 课程讲师:叮咚 课程分类:套餐推荐 适合人群:初级 课时数量:305课时 用到技术 ...
- 好程序员web前端分享移动前端开发和web前端开发的区别
好程序员web前端培训分享移动前端开发和web前端开发的区别,既然都是前端开发,两者肯定有紧密的联系,但是楼主主要询问区别,我就先简单聊一下相同点,之后在着重分析不同点. 移动前端开发和web前端开发 ...
- 到底前端好不好学?Web前端需要学习什么内容?
前端作为互联网行业中的热门职位,对于很多想要进互联网IT行业工作的同学来说,学习前端难度相对低一些,可很多零基础的小白还是有许许多多的疑问,到底前端好不好学?web前端又需要学习什么内容,接下来就和小 ...
- web期末网站设计大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作
HTML5期末大作业:鲜花网站设计--鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设 ...
- html前端开发作品,Web前端开发(HTML5+CSS3)
HTML5和CSS3(简称H5技术)是Web前端开发的最新技术, H5技术可以实现多方面的跨界:PC端/移动端,Android/iOS.应用领域包含传统互联应用.移动开发和云计算等.市场上对Web前端 ...
- 开发web前端_移动前端开发和web前端开发的区别?
如果说非要有区别的话应该就是开发的软件和方式不同,因为他们本来就不属于一端的东西,具体来看看下面: web前端开发 用最简单粗暴的方式来讲,就是用html + css + javascript来构建一 ...
最新文章
- TensorFlow教程之进阶指南 3.4 TensorBoard: 图表可视化
- UA MATH524 复变函数6 Green定理与Green公式
- ABAP:下载服务器文件到本机
- mysqldump普通账号Got error: 1044
- UOJ#244-[UER#7]短路【贪心】
- 通用数据库管理工具_了解为什么这个直观的工具是您团队的通用团队管理工具...
- 为什么要做稀疏编码_为什么我每天都要编码一年,所以我也学到了什么,以及如何做。...
- DiskGenius无损调整C盘容量方法
- ANE 在 Android 上的应用
- velocity include
- Fall 2020 Berkeley cs61a hw03答案
- 微服务系列:分布式日志 ELK 搭建指南
- 基于DFA算法的敏感词过滤的go语言实现
- 夜神模拟器连接手柄无反应_夜神安卓模拟器怎样连接手柄 夜神模拟器连接手柄图文教程...
- sql server 2008 不显示 已注册的服务器任务窗格,Visio使用方法.doc
- 十分钟让你明白蓄水池算法
- Echarts 表格通过ajax异步请求实现动态赋值(分析同比环比的实现)
- 什么是IO多路复用,理解IO多路复用
- AI人工智能学习准备之路线图
- 视频播放开发笔记-获取MPV的视频内存方式截图