最近几年,越来越多的人投入到前端大军中;时至至今,前端工程师的数量仍然不能满足企业的发展需求;与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作,优秀的前端工程师一将难求。
真正了解前端技术的工程师都会感觉前端技术发展变化太快。浏览器特性、前端框架、前端工具、多终端浏览器等都在快速迭代中。作为前端工程师不仅要掌握现有的技术去实现业务需求,更要不断的学习新的技术、新的理念,时刻准备着新技术浪潮的来临。
《现代前端技术解析》提及了作为一个前端工程师需要了解的大部分技能。介绍了从直接性 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 等属性)发生变化,就要从布局阶段开始重新渲染,即页面重排。页面重排一定会进行后续重绘。如果页面元素只显示样式改变而布局不变,那么页面内容将从绘制阶段开始,即重绘。所以,需要尽可能的避免页面重排,并减少页面元素的重绘!
- <!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
- 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 按钮展示未黄色。
获取元素 CSS 规则。
- document.defaultView.getComputedStyle(element)
打开 Chrome 浏览器调试模式,Application 左侧列举了现代浏览器的 8 种缓存机制 HTTP 文件缓存、localStorage、sessionStorage、indexDB、Web SQL、Cookie、CacheStorage、Application Cache,以及不常用的 Flash 缓存。
HTTP 文件缓存是基于 HTTP 协议的浏览器文件级缓存技术。详情请查看: 【HTTP】缓存
1.
(或者,
- Cache-Control:相对时间(秒为单位)
)如果未过期,直接读取浏览器缓存文件,不发生任何 HTTP 请求。 2. 在浏览器端判断上次返回头中是否包含 Etag 信息,有则连同 If-None-Match 一起向服务器端发送条件 Get 请求,304 说明未做过修改,如果是 200 需要进入下一步;
- Expires:绝对时间
注意:如果返回 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 可以连接手机进行调试。
来源: http://blog.csdn.net/ligang2585116/article/details/76038070