最近几年,越来越多的人投入到前端大军中;时至至今,前端工程师的数量仍然不能满足企业的发展需求;与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作,优秀的前端工程师一将难求。
真正了解前端技术的工程师都会感觉前端技术发展变化太快。浏览器特性、前端框架、前端工具、多终端浏览器等都在快速迭代中。作为前端工程师不仅要掌握现有的技术去实现业务需求,更要不断的学习新的技术、新的理念,时刻准备着新技术浪潮的来临。
《现代前端技术解析》提及了作为一个前端工程师需要了解的大部分技能。介绍了从直接性DOM交互框架>>MVC>>MVP>>MVVM>>Virtual DOM>>MNV*等框架演变和实现原理;讲解了前端大型项目实现的思路;引出了前后端同构、Hybrid离线包以及增量更新关键技术的设计思路;并对未来前端趋势做了相关分析和展望。
前端开发模式先后经历了静态黄页时期、服务器组装动态网页数据时期、后端为主的MVC(Model-View-Controller)模式时期、前后端分离方案开发时期、纯前端MV*(Model-View-*,数据模型、视图、控制方式分离)时期、最后进入到虚拟DOM时期、MNV*(Model-NativeView-*)时期以及前后端同构的开发时期。
随着越来越多的业务搬到前端实现、前端的代码量越来越多。应运而生的是采用代码管理中分治思想模块化和组件化的出现,将复杂的代码结构拆分成多个对立、简单、解耦合的结构或文件分开管理,使项目结构更加清晰;同时限制首页资源、利用缓存以及局部请求的方式来使用户更快更流畅的使用。
然而,对于移动端我们往往需要考虑更多的限制因素,移动端的劣势:
JavaScript在Node.js(Node.js是一个基于Chrome V8引擎的JavaScript运行环境,使用了事件驱动、非阻塞式I/O的模型,使其轻量又高效,它使用的包管理器为npm,是目前全球最大的开源生态系统)服务端也可进行高效的开发,使前后端同构变得可行。
Web前端技术一直以效率和质量为最终导向的道路上探索前进!
通常认为浏览器主要由:用户界面、网络、JavaScript引擎、渲染引擎、UI后端、JavaScript解释器和持久化数据存储七部分组成。浏览器内核往往指的是渲染引擎。
常见的浏览器内核:
渲染引擎对DOM渲染树的解析和输出是逐行进行的,内容越靠前越优先展示,所以为了确保用户体验,通常不要将script脚本插入到HTML显示内容区域,因为script内容的解析执行会阻塞页面结构的渲染。
整个过程中,要关注的是渲染树布局和绘制阶段:页面生成后,如果页面位置(position、float、margin等属性)发生变化,就要从布局阶段开始重新渲染,即页面重排。页面重排一定会进行后续重绘。如果页面元素只显示样式改变而布局不变,那么页面内容将从绘制阶段开始,即重绘。所以,需要尽可能的避免页面重排,并减少页面元素的重绘!
<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
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】缓存
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,不会有内容,节省请求大小!
【受到同源策略影响】、【以及在safari下问题】、【常规解决方案代码】请查看八种方式实现跨域请求
单个localStorage的大小受限,可以用多个iframe方式使用多个域名来突破单个页面下localStorage存储数据的最大限制。特别说明,浏览器多个标签页打开同个域名时,localStorage内容一般是共享的。其位置这可以监听事件“storage”来做一致性操作响应处理。这样会导致一种现象如下:
标签页一:通过某行为修改localStorage中某个属性值,然后数据接口依赖该属性值;
标签页二:由于localStorage标签页间共享,导致标签页二数据不准确!
和localStorage功能类似,但是sessionStorage在浏览器关闭时会自动清空。
Cookie为了辨别用户身份(参见,客户端识别与cookie机制)或Session跟踪而存储在用户浏览器端的数据。Cookie一般会通过HTTP请求发送给服务器端。
Cookie分为:Session Cookie和持久型Cookie。Cookie设置中有个HttpOnly参数,前端浏览器使用document.cookie是读取不到HttpOnly类型的Cookie的,被设置为HttpOnly的Cookie记录只能通过HTTP请求头发送到服务器端进行读写操作,这样就避免了服务器的Cookie记录被前端javascript修改,保证了服务器验证Cookie的安全性。
号外:chrome://chrome-urls/可以列出Chrome的所有URL;使用安卓手机打开Chrome,在桌面Chrome中输入chrome://inspect/#devices可以连接手机进行调试。