精华内容
下载资源
问答
  • 前端技术架构 目录结构 Public //单页面渲染页面 Src //源码文件 -components //项目公用组件 -HealthyHome //健康之家分包 -Index //首页分包 -Message //我的详细分包 -My //个人中心分包 s //页面文件 -sdk //第...
  • 前端技术架构与工程》之性能笔记

    万次阅读 多人点赞 2020-06-14 15:17:55
    前端技术架构与工程》之性能 前言: 《前端技术架构与工程》这本书真的越看越有味。目前写了部分这本书的笔记,共分为三部分做笔记,已写了两篇如下。 《前端技术架构与工程》初次笔记 《前端技术架构与工程》之...

    《前端技术架构与工程》之性能

    前言:

    《前端技术架构与工程》这本书真的越看越有味。目前写了部分这本书的笔记,共分为三部分做笔记,已写了两篇如下。

    《前端技术架构与工程》初次笔记

    《前端技术架构与工程》之编程语言

    今天准备写技术架构部分(编程语言、技术规范、组件化、前后端分离、性能)中的性能部分。

    初次笔记让我从架构师的角度认识前端技术栈,编程语言笔记让我对前端三大件有了新的理解。

    虽然技术规范、组件化、前后端分离里面的知识也重要,但是我这三部分都要了初步了解,勉强够用。唯一性能这一块没有去深入了解,而性能这一块又挺重要的。于是今天特意先做一下性能这一块的笔记。结合《前端技术架构与工程》的第六章以及前端学习梳理 的性能优化部分进行展开。

    我的笔记只是二手资料,详情请自行找资源。

    性能

    性能是衡量软件架构最基本也是最核心的直播之一。在前端领域,HTML5新增的web worker可实现多线程和并行计算以提高运算性能;CSS3的transform 3D借助GPU加速提高动画流畅度;Node.js得益于V8引擎优异的性能表现而普及。互联网产品,尤其是TOC产品,性能是影响用户体验的核心因素之一。了解性能的优化是有必要的。

    在以用户为中心的互联网时代,优秀的用户体验的web应用抢占市场的重要武器,而性能的决定用户体验的核心。加载速度快能够给用户良好的第一印象,流畅的交互是支持功能最具象的要素。

    • 在加载性能上,网络架构层是优化宗旨是减少延迟以提高数据获取的速度,异步script能够减少JavaScript代码对渲染的阻塞从而令HTML文档尽快渲染;
    • 在应用执行期间,熟知浏览器GC策略有助于编写对内存友好的代码,可避免因内存泄漏导致的应用程序交互卡顿甚至死机的现象。

    在《前端技术架构与工程》的性能部分主要从性能评估模型、从URL到图形、内存管理、极限运算性能这四部分进行讲述。

    • 在性能评估模型中:讲性能指标;
    • 从URL到图形:讲如何在加载阶段和可交互阶段优化性能,方法是获取数据和渲染HTML文档;
    • 内存管理:讲在浏览器有限的内存配额下如何优化代码以防止内存泄漏;
    • 极限运算性能:将在大数据处理的项目如何发挥浏览器的极限运算性能;

    性能评估模型

    制定性能评估模板最基本的原则是:对客户端场景参数(设备、浏览器、网络)赋予固定的值,使得应用限定在一致的客户端场景中,然后再进行对比。

    web应用程序的生命周期分两个阶段:一是加载阶段(从输入URL到显示网页的阶段),二是可交互阶段。

    性能评估(贯穿这本书的基本原则,技术服务于业务)分为:加载性能、动态性能、业务性能;

    加载阶段

    加载阶段的性能被称为加载性能。优化加载性能可细分为两个方向:一是从视觉角度提高网站内容的渲染速度,对应白屏时间和首屏时间两项指标;二是从交互角度缩短打开网站到可交互之间的时间间隔,对应可交互节点指标;在这本书第二章将预渲染的时候就有白屏的优化方案。

    可交互阶段

    加载结束,网站进入可交互阶段,由于可交互是动态的,故此阶段的性能定义为动态性能。优化动态性能也有两个方向:一是反馈速度,如新加载内容的加载;二是动画帧率,不过这个不做深入了解,目前占个坑;

    业务性能

    业务性能单独挑出来讲,因为技术服务于商业,商业的优先级远高于技术。在加载阶段,业务性能指标有两个:首次有效绘制和广告可视节点;在可交互阶段,业务性能指标有关键路径渲染。

    从URL到图形

    谈到网页性能优化就不可避免需要了解从URL到页面的具体过程。这个过程不仅和加载相关也和交互相关。学习前端不仅需要学习HTML、CSS、JavaScript,还需要对浏览器的实现过程熟悉,虽然它不能直接提高代码的质量和开发的效率,但是能为方案设计提高坚实的理论基础。

    浏览器的大致架构分为三层:操作系统层、内核层、应用层;

    • 应用层:包含一些可视化的交互模块,如书签管理、窗口管理等;以及一些不可见的数据管理模块,如历史记录等;
    • 操作系统层:提供浏览器所需的系统API,如多线程、文件I/O等;
    • 内核层:浏览器的核心,包括两个部分,一是渲染引擎,包括HTML、CSS、SVG的解释器和JavaScript引擎,以及布局、绘制相关的模块;二是相对底层的功能模块集合,如网络模块、图形库、存储、多媒体解码器;

    其中内核层是优化web应用性能的主要突破点,无论加载性能还是动态性能,其中的关键点就在于网络方面、渲染方面、运算方面;

    浏览器打开URL的完整流程依次是:当前文档卸载、重定向处理、缓存判断、DNS查询、建立TCP连接、HTTP请求/响应处理、HTML文档解析。在这过程中,截止至开始渲染前,浏览器的所有操作实质上就是尝试获取URL对应的信息,这一部分可以定义为Fetch阶段;接收到HTML文档的HTTP响应后,浏览器开始解析和渲染工作,这一阶段可以定义为Render阶段。在Fetch阶段的时间消耗主要取决于网络环境,不受前端代码的影响;在Render阶段的时间消耗受网络环境和前端逻辑代码的双重影响。

    网络

    Fetch阶段。流程为当前文档卸载、重定向处理、缓存判断、DNS查询、建立TCP连接、HTTP请求/响应处理。

    • 当前文档卸载:如果当前为空白页则无此操作;
    • 重定向处理:浏览器在处理重定向上的时间消耗非常大,现实中应当尽量避免。
    • 缓存判断:fetch start。如果有缓存就直接返回缓存数据,没有就继续请求。
    • DNS:DNS server。绝大多数浏览器都有DNS缓存管理功能,可以节省一部分时间。
    • TCP、HTTP请求/响应:web server。获得域名对应的IP后,浏览器便尝试与Web服务器建立TCP连接,成功后随即发生HTTP请求,收到响应数据后便进入Render阶段。

    在上述流程中不难看出,影响耗时的几个重要因素。

    • 缓存,应用缓存和DNS缓存;
    • DNS查询耗时。DNS查询请求优先使用UDP协议,时间消耗非常小;
    • 建立TCP连接的三次握手和慢启动好事。TCP慢启动是一种为了防止阻塞崩溃的安全机制,但是很耗时。
    • 浏览器发出HTTP请求和服务器处理响应数据的耗时。
    • 浏览器下载HTTP响应数据的耗时。这一项取决于网络带宽和URL对应资源的大小。

    为了优化这些耗时。有两个思路。一个是减少RTT的总数量。一个是缩短RTT的时长。减少RTT的总数量的方法有持久连接、并行请求、HTTP combo;缩短RTT的时长的方法是CDN技术。

    此外还有HTTP2.0,但是难以普及,一方面浏览器的兼容性不理想,另一方面是服务器迁移成本太高。所以针对网络的优化策略仍然面向HTTP1.1。其优化策略是

    • 整体架构上:使用持久连接、使用CDN、控制域名数目、无法合并的小体积文件使用HTTP combo;
    • 前端上:压缩文件体积、合并小体积文件(使用字体图标)、合理使用缓存、按需加载、避免不必要的下载。

    渲染

    浏览器在渲染过程在有三种基础数据,及定义网页结构的HTML、描述视觉样式的CSS和承担交互行为的JavaScript,每种数据类型均有对应的解释模块。

    HTML解释器将HTML文档解析为DOM树。CSS解释器将CSS解析为CSSOM,渲染引擎按照CSS选择器规则将DOM与CSSOM关联之后对每个DOM应用样式和布局,最终绘制为可视的UI。

    浏览器在渲染HTML文档期间,每逢遇到非异步的scrip标签则暂停文档后续内容的解析和渲染,待JavaScript文件加载和执行完后才恢复解析。之所以对scrip标签应用阻塞式的解析策略,是英文JavaScript拥有改变HTML文档结构的权限,它会改变DOM树的具体形态,进而影响最终的视觉效果。

    内存管理

    JavaScript是一种拥有GC机制(全GC)的编程语言,GC机制能够使开发者从繁琐的内存管理工作中解脱出来,很大程度上提升开发效率和代码的容错性。但是由于GC属于解释层模块,所以业务开发者几乎没有干预空间,一旦出现内存泄漏便只能靠解释器的GC策略进行调整。

    GC算法

    JavaScript引擎最常见的两种GC算法:标记清除算法、引用计数算法。

    标记清除算法是目前应用较广泛的GC算法之一,绝大多数JavaScript引擎的GC算法都是在标记清除算法基础上的变中,比如V8的标记压缩算法。标记清除算法分为两个阶段:标记阶段和清除阶段。在标记阶段以根节点为起点,使用深度优先搜索算法向下遍历所有对象,随后清除阶段把没标记的对象删除,并且把已标记的对象的标记信息也清除以便下次GC流程正常进行。(补充逻辑部分略)

    引用计数算法是IE6和IE7引擎采用的GC算法,但是目前已经绝迹。虽然这个已经成为了历史产物,但作为对比,有助于理解标记清除算法。略。

    标记清除算法是目前实行JavaScriptGC策略的最佳选择。

    内存泄漏

    在运行应用程序时,计算机管理内存的一般流程是 分配-使用-释放,如此循环。

    内存泄漏指的是一些分配出去的内存空间在使用完后没有释放。这些残留的冗余对象毫无用处却占据内存空间。大量的内存泄漏会造成因内存不足而导致应用程序崩溃甚至宕机。

    造成JavaScript内存泄漏的根本原因是不合理的引用。由于JavaScript引擎的GC操作在语言层面是完全封闭的,开发者没有任何干预的权限,只能通过编写合理的代码以避免发生内存泄漏。

    内存泄漏的处理方法

    避免全局变量。

    在全局作用域内创建对象非常容易引发内存泄漏。并且还有命名冲突、破坏封装性、存在安全隐患等弊端;

    谨慎处理闭包。

    闭包可以在函数内部引用外层作用域的变量,是JavaScript的核心特点之一,但是使用不当很容易造成内存泄漏。

    使用编译工具。

    前两种方法是尽力写出好的代码。第三种方法就是通过前端自动化工具帮助检测,令code smell自动暴露出来。

    极限运算性能

    网络体验最差的地方就是:加载缓慢和操作卡顿。加载缓慢的情况仍然存在,操作卡顿的情况慢慢减少,出了代码质量这种不可控的因素外,造成加载缓慢和操作卡顿的原因分别是网络延迟和浏览器的运算能力。造成网络延迟的因素是多方面的,需要从多方面同时切入优化。造成操作卡顿的原因非常单一,浏览器非常有限的运算能力是唯一的瓶颈。不过现代浏览器的运算能力越来越强了,vue等框架使得最消耗性能的DOM操作实现了轻量化和精细化。

    不过开发者不能毫无顾忌,业务需求的增长速度远超技术的发展,web应用的体量终有一天会增长至如今的几十倍。并且目前复制图形类web应用(如游戏、VR等)已经非常接近浏览器运算能力的瓶颈。

    web worker与并行计算

    单线程的JavaScript无法实现并行计算,当浏览器处理计算量庞大的逻辑时会使用户的任何操作均得不到反馈。web worker是HTML5规范的一部分,借助它可以在浏览器后台创建独立的worker线程运行JavaScript代码,实现多线程并行计算。

    webAssembly

    意思为适合web的汇编语言,是运行与浏览器环境的二进制代码。其定位是应对要求高性能的业务场景,如3D游戏、webVR/AR、音视频等。

    WebGPU

    对于核心聚焦在交互逻辑和UI的前端来说,设计高性能计算的项目计划没有纯粹的数据计算,绝大多数是复杂的图形类应用。基于此,便可以把图形编程领域的诸多优化策略带入前端领域。

    最典型的就是将计算交付给比CPU性能更高的GPU来执行。随着Flash的淘汰,WebGL基本通知复杂图形类web应用的开放市场。webGL的着色器逻辑在GPU中执行,计算性能远高于JavaScript。

    题外话

    《高性能网站建设指南》的借鉴

    其中的14条规则挺有用的,可以借鉴。之后这本书的作者2010年还出版了《高性能网站建设进阶指南》。

    别人的笔记可以借鉴一下:《高性能网站建设指南》笔记

    最好是看原书。

    规则1:尽量减少HTTP请求

    规则2:使用CDN

    规则3:添加Expires头

    规则4:采用Gzip压缩组件

    规则5:将样式表放在顶部(使用link标签将样式表放在文档head中)

    规则6:将脚本放在底部

    规则7:避免CSS表达式

    规则8:使用外部JavaScript和CSS

    规则9:减少DNS查找

    规则10:精简JavaScript

    规则11:避免重定向

    规则12: 删除重复脚本

    规则13:配置ETag(配置或移除ETag)

    规则14:使Ajax可缓存

    有些内容我还看不太懂。不过其中有不少可以借鉴,如

    • 减少HTTP请求数量
    • 将CSS放到head中
    • 将外部脚本置底
    • 资源合并和压缩
    • 避免重复的资源请求
    • 懒加载
    • 代码优化。

    把CSS放在头部的原因是,在加载HTML生成DOM树的时候,就可以同时对DOM树进行渲染。这样可以防止闪跳、白屏或者布局混乱;

    把JavaScript放在后面的原因是,JavaScript可能会改变DOM树的结构,所以需要一个稳定的DOM树。并且JavaScript加载后会立即执行,同时阻塞后面资源的加载。

    最后,本来是想写自己的理解,却没想到这里许多内容都感觉有必要写出来。大家如果感兴趣的话,亲自看书体验更佳。

    更新地址:GitHub

    更多内容请关注:CSDNGitHub

    展开全文
  • 给java后端开发亲们分享技术架构图,涉及前端,后端,数据库; 涉及框架:spring cloud,spring boot,mybatis 等, 面试可用(本人面试时就用了,顺利拿到理想的offer)。
  • 前端架构体系技术

    千次阅读 2016-05-17 22:18:50
    一、框架与组件 bootstrap等UI框架设计与实现 ...组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、...十一、前端技术网站 技术社区 w3c tech、w3c plus、w3 help div.io、nodeParty ...


    一、框架与组件bootstrap等UI框架设计与实现

    • 伸缩布局:grid网格布局
    • 基础UI样式:元素reset、按钮、图片、菜单、表单
    • 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告
    • 响应式布局:布局、结构、样式、媒体、javascript响应式
    • 第三方插件:插件管理

    jQuery、zepto使用原理以及插件开发
    • 支持amd、cmd、全局变量的模块化封装
    • $.fn.method = function(){}

    mvc/mvvm框架原理设计
    • directive设计:html、text、class、html、attr、repeat、ref,可扩展
    • filter设计:bool、upperCase、lowerCase,可扩展
    • 表达式设计:if-else等实现
    • viewmodel结构设计:例如数据,元素,方法的挂载与作用域
    • 数据更变检测:函数触发,脏数据检测、对象hijacking

    polymer/angular2思想与设计思路
    • import技术
    • template和script引入方式
    • css样式命名空间隔离
    • 简单复用第三方库

    reactjs原理与使用
    • virtual dom单向数据绑定
    • js执行语法方式
    • UI由状态控制

    commonJS/AMD/CMD
    • 模块引入
    • 模块定义
    • 模块标识
    • UMD解决不同规范兼容性的问题,例如webpack封装
    • 模块懒执行(CMD)与与预执行(AMD)

    loadJs模块化加载原理与实现
    • 创建script标签,需要id映射到资源url
    • onload加载模块队列判断
    • 全部加载完成后触发
    • 加载失败问题优化
    • requirejs、modjs、seajs

    polyfill、shim原理与实现
    • polyfill提供了开发者们希望浏览器原生提供支持的功能特性
    • shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现

    virtual Dom、Incremental DOM
    • 1.用js对象树表示dom树结构,根据该对象树构建dom树
    • 2.状态改变时,重新构建对象,和旧的对象对比,记录两个对象树差异
    • 3.将对象树差异应用到dom中
    • 小结:js对象模拟dom(elem.js),virtual dom diff算法(diff.js)、差异渲染dom(patch.js)
    • incremental dom在状态改变时扫描旧对象树将差异直接应用到dom中

    shadow dom
    • 隔离外部环境用于封装组件:结构、样式、行为
    • 实现形式:新标签、class类属性 + 构建编译

    webwork与service Worker
    • webwork与主线程机制,on/post
    • serviceworker可作为浏览器请求代理
    • 应用场景

    ES6转ES5、Babel与ES6开发规范体系
    • ES6编码规范全
    • ES6在babel下兼容性
    • ES6在node下兼容性与性能
    • ES6新特性:看编码规范
    • aurelia ES6前端框架

    Isomorphic JavaScript
    • 同构原理
    • 同构方案 Rendr
    • nodejs: 服务器
    • hapi: 应用服务
    • backbone.js: 后台mvc
    • requirejs: 模块加载
    • jquery: dom处理
    • reactjs同构:React + Flux + Koa

    双向数据绑定
    • 函数触发:vuejs
    • 脏数据检测:angular
    • 对象hijacking:avalon

    browserify运行原理
    • 1.从入口模块开始分析require函数调用
    • 2.根据依赖生成AST
    • 3.根据AST找到每个模块的模块名
    • 4.得到每个模块的依赖关系,生成一个依赖字典
    • 5.包装每个模块(传入依赖字典以及export和require函数),生成执行的js

    performance timing
    • performance timing api
    • performance timing 过程
    • performance timing 性能计算
    • performanceTrace库

    组件UI与js组件规范化
    • 组件编码规范
    • 组件目录规范:组件目录与公用目录
    • 组件构建规范:构建环境支持
    • 组件模块化管理:spm,bowserify
    • 组件复用性管理
    • 第三方组件接入成本

    immutable JavaScript generator与promise原理与使用 二、构建生态 grunt/gulp开发环境任务编写
    • 文件处理插件:html、scss、js、image、font、其它
    • 优化插件:雪碧图、图片压缩、iconfont构建
    • 发布替换插件
    • 打包、压缩包插件:组件自动分析
    • 白名单配置
    • 自定义插件编写

    npm、jspm、bower包管理工具 r.js、browserify、webpack、webpack 2、Rollup打包工具使用
    • 原理:根据依赖配置文件对文件进行依赖打包
    • webpack支持更多的规范打包,AMD,Commonjs
    • webpack+babel/reactjs+reflux

    fis3构建与插件开发、构建环境、fis3构建离线包 web Component:rosetta-org、x-view、Q、riot、nova brunch构建工具 三、开发技巧与调试 fiddler加willow基础组合调试
    • 常见配置与分析
    • 结合浏览器调试

    werien、vorlonjs远程调试,chrome inspect mockjs,F.M.S(Front Mock Server)模拟调试使用与cgi自动调试 macha/phantomjs/casperjs/karma测试自动化任务使用 自动化UI测试,海豚 node-supervior、node-inspector、karma 开发发布系统流程 sublime高效插件
    • emmet工具使用、 sublimelinter、 babel snippets、 sublimeLint、 SassBeautify 、 emmet 快速编辑、 jsxlint、 SideBarEnhancements、 SnippetsMaker、 SublimeCodeIntel、 css snippets、 ColorPicker、 html/css/js Pretty、 SpinnetMacker、 DocBlockr、 MultiEditUtils、 javascript & node spinnet、 JavaScript & NodeJS Snippets、 jsLint、cssLint
    代码自动化检查fecs 四、html、css与重构 jpeg、webp、apng、bpg图片
    • 编码原理
    • 特点与优劣势
    • 适用场景

    iconfont使用与实现原理
    • 自动打包构建方法
    • iconfont兼容性写法
    • fonthello、fontawesome、icomoon.io、iconfont.cn线上工具

    页面响应式设计
    • layout布局响应式
    • html结构响应式
    • css样式响应式
    • image媒体响应式
    • javascript响应式
    • media query与平台判断

    css重置
    • reset
    • nomalize
    • neat

    sass/compass/less/postcss常用语法与使用
    • 常用语法功能
    • 组件化UI设计管理
    • 构建工具实现方案
    • 雪碧图自动合成
    • iconfont自动接入等等

    media query与常见页面尺寸了解
    • 媒体类型引入和媒体特性引入
    • device-width适应
    • retina屏幕适应

    em,rem原理与实现
    • rem计算:width*retina/10,相当于屏幕宽度为10rem
    • 字体在rem情况下仍然使用px

    code4ui、code4app、初页、maka等
    • 前端dom操作即使刷新前端页面
    • 根据dom操作生成组件config配置保存到db
    • 根据config配置使用r.js或webpack打包
    • 发布打包后输出文件

    css3动画 css网格布局
    • susy
    • Responsive Grid System
    • Fluid 960 Grid(adaptjs)
    • Simple Grid

    搜索引擎与前端SEO
    • tdk优化
    • 页面内容优化
    • 唯一的H1标题
    • img设置alt属性
    • nofollow
    • url优化
    • 统一链接
    • 301跳转
    • canonical
    • robot优化
    • robots.txt
    • meta robots
    • sitemap
    • SEO工具
    • 各种站长工具等

    浏览器缓存种类,resources,webSQL,indexDB, localstorage,cookie,app cache,cache storage
    • store.js、cookie.js
    UI框架
    • bootstrap、jqwidgets、semantic ui、amaze ui
    • 微信手Q ui: frozenui、weui、blend ui
    • extjs、echart图表ui

    五、native/hybrid/桌面开发 ionic移动开发方案
    • 运行架构
    • hybrid混合开发
    • cordova交互
    • 离线包更新
    • 性能瓶颈

    nativescript移动开发方案 react Native移动开发方案
    • 运行架构:js引擎
    • 性能缺陷与内存泄露
    • 更新机制
    • 使用场景

    android/ios原生开发与框架
    • java
    • oc、swift
    • web与native交互
    • 屏幕旋转
    • 摇一摇
    • 录像,拍照,选取本地图片
    • 打电话,发短信
    • 电池电量
    • 地理位置
    • 日期选择
    • 开启硬件加速

    桌面应用开发
    • nodewebkit
    • atom-shell(后改名为electron)
    • 网易Hex
    • pomelo(游戏服务器框架)
    • react desktop
    • appjs:appjs.com

    六、前端/H5优化(另一个图已给出) yslow、pagespeed 移动web性能优化
    • 手机浏览器”省流量”原理
    • 增量更新原理及注意事项
    • 本地存储的应用
    • 加载优化
    • 图片优化
    • 单页面及路由实现
    • 业内著名站点案例分析

    七、全栈/全端开发 express/node club + mongodb、thinkjs等框架 node.js直出 实时web开发,meteor/express.io MEAN(mongodb/express/angular/nodejs) http与http2协议、bigpipe、pipeline 离线缓存,cookie、localstorage、indexdb cdn与dns
    • 动态域名加速
    • cdn原理与cdn combo

    八、研究实验 WebAssembly、webTRC、typescript Material design规范的前端框架
    • 交互动效库
    AMP-HTML规范
    • 使用受限HTML以及缓存技术来提高移动网络中静态内容的性能
    • 添加自定义的元素代替禁用掉的元素:amp-audio, amp-img、amp-video等

    九、数据分析与监控 badjs数据上报
    • 捕获错误两种方法:onerror、try-catch。抽样上报,先onerror统计语法错误,如果是script error,再使用tryjs。
    • 后台统计方法、不同业务接入体系、抽样统计
    • onerror:可以捕捉语法错误和运行时错误;可以拿到出错的信息,堆栈,出错文件、行号、列号;当前页面执行的js脚本出错都会捕捉到;跨域的资源需要特殊头部支持。
    • try-catch:无法捕捉语法错误,只能捕捉运行时错误;可以拿到出错的信息,堆栈,出错文件、行号、列号;需要借助工具把function块以及文件块加入try,catch,可以在这个阶段打入更多的静态信息。

    点击热力图clickHeat、heatMap js加载失败优化方案
    • 失败重发机制
    • 加载源域名服务器文件
    • https反劫持

    百度alog数据上报 十、其它软技能 axure 原型图设计 xmind脑图管理 效率管理 can i use、github 知识管理/总结分享 产品思维与技能 十一、前端技术网站 技术社区
    • w3c tech、w3c plus、w3 help
    • div.io、nodeParty
    • 稀土掘金、前端早读课
    • alloyteam、html5基地
    • W3 help

    行业会议
    • segmentfault会议
    • 深js、杭js
    • GMIC(全球移动互联网大会)
    • D2、webrebuild
    • infoQ内容、Qcon、velocity

    展开全文
  • 前端有一段时间了,总的来说前端既有设计,又不能没有bian'cheng

    做前端有一段时间了,总的来说前端既有设计,又不能没有编程,设计师外型的设计,编程时编写一些js,smary的小程序,设计很难难以创新,基本上都是从国外的一些网站上去模仿,前端不存在太多的抄袭,只是借鉴,可能我说的不准确,但是事实情况如此。有多少人能去创新呢?时间来不及,工程进度计划很难满足你的创新。

    首先要对产品的总体架构了解去修改,如果你是自己修改原来的程序的话的这样做。上次就没注意这一点,吃了大亏,修改了一个img标签,结果所有的都得修改很头大。

    其次,js库的内容不要轻易去做调整,因为是库,考虑的也如同上一个一样修改了真不知道接下来会出现什么奇葩的事情。

    三、对cssjs结构要了解,基础的知识应该有所掌握,像max-width,width的区别,live,on click的区别。使用框架慎重,不是jquery的使用是随意的,1.4.2就比1.7.2小,再能满足现有情况下不要图多。

    四、对创新的认识,不是说把以往的全部推到就是创新,而是保留以往优秀的精华的,在此基础上在做创新,没必要八所的的都放弃而去做一个从未接触过的玩意儿,那才是扯淡。

    五、测试要通盘去考虑不能只测试一点点或者自己修改的那部分,只测试自己修改的,往往会出错的。

    今天就写这么多,后面的会每天慢慢增加。推荐几个网站吧:

    http://www.w3cplus.com/css3/attribute-selectors

    http://v3.bootcss.com/getting-started/

    http://icomoon.io/app/#/select

    http://www.jqueryrain.com/demo/jquery-treeview/

    http://jquerymobile.com/

    http://jqueryui.com/slider/

    http://zaole.net/

    http://codepen.io/MaCeLMp4/full/jrewv

    http://css3generator.com/

    总之的要多总结,以前我常喜欢在QQ空间发状态写点日志后来发现这样做不好,太过局限。

    展开全文
  • 前端架构体系技术 一框架与组件 bootstrap 等 UI 框架设计与实现 伸缩布局grid 网格布局 基础 UI 样式元素 reset按钮图片菜单表单 组件 UI 样式按钮组字体图标下拉菜单输入框组 导航组面包屑分页标签轮播弹出框列表...
  • 上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器处理之前的部分,...

    上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类

    这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器处理之前的部分,包括浏览器渲染、加载,前端视图模型,图片视频资源,CDN 服务等,主要优化方法就是优化浏览器访问渲染过程,使用反向代理,使用 CDN 服务等


    浏览器访问渲染优化

    减少 http 请求数

    http 协议是无状态的应用层协议,每次 http 请求都会建立新的通信链路,并且在服务端,每个 http 连接都会开启一个单独的线程去处理请求,这都会产生额外的开销

    主要手段就是去合并压缩 css,JavaScript,图片文件,把需要的 css,JavaScript,图片资源进行合并减少建立的连接请求数

    同时使用 http 的 keep-alive 来进行连接的复用,以此来减少建立的 http 连接数,提高访问性能

    启用压缩

    在服务端进行文件的压缩,减少通信传输过程中的数据量

    对于文本文件,压缩率能够达到 80% 以上,因此在服务端启用 gzip 压缩是一个很好的选择,但启用压缩的同时也会给服务器带来额外的开销,所以要具体情况具体分析

    css,JavaScript 代码优化

    • css 代码优化:

      • 尽量使用外部样式,并且放在页面顶部加载,一方面能够及时渲染,另一方面能够避免因某些样式导致阻塞渲染
      • 压缩合并 css 文件,尽量精简文件,减少通信传输数据量和请求连接数
    • JavaScript 代码优化:

      • 因为 JavaScript 代码边加载边解析,解析的过程会阻塞浏览器渲染,因此把 JavaScript 代码放在页面底部加载
      • 同样的压缩合并 JavaScript 文件,尽量精简文件,减少通信传输数据量和请求连接数
      • 写高性能的 JavaScript 代码

    使用浏览器缓存

    一般来说,对于网站里面不经常变化的静态资源,更新频率比较低,因此可以把这些资源缓存在浏览器中,能够很好的改善性能

    通过设置 http 头里的 Cache-Control 和 Expires 属性来设定浏览器缓存时间

    另外还有 Etags 和 opcode 的缓存,根据具体情况进行选择吧


    CDN 加速

    CDN 的本质也属于缓存,内容分发网络,把数据缓存在里用户近的地方,使用户尽快的获取数据

    因为 CDN 都是部署在网络运营商的机房,这些运营商又同时为用户提供网络服务,因此用户请求的路由会优先到达 CDN 服务器,如果存在请求的资源的话,就直接返回,最短路径返回响应,加速用户访问速度,同时还能够为中心机房减轻压力

    CDN 加速

    CDN 一般用来缓存静态资源,css,Script 脚本,静态页面,图片等,这些内容修改频率很低但是访问请求频率很高,因此放在 CDN 上能够很好的改善访问速度


    反向代理

    传统的代理服务器是当你请求不到所请求的资源时,由代理服务器帮你请求,你知道你请求的最终的服务器是谁,典型的例子就是 VPN,通过代理服务器来请求到墙外的世界

    而反向代理是当你请求一个地址时,你请求的是反向代理服务器,然后由反向代理服务器去请求其他服务器来获取内容,而你不知道最终是从哪一台服务器获取到的数据

    反向代理 web 服务器接收 http 请求,然后进行请求转发,获取到内容后返回给你,你只知道是由反向代理服务器给你的数据,而不知道数据源最终是从哪个服务器来的

    反向代理服务器

    反向代理服务器具有保护作用,来自互联网的请求都需要经过反向代理服务器,相当于在 web 服务器之间建立起了一道屏障

    除了安全以外,可以在反向代理服务器上进行一些静态资源的缓存,以此来提高访问速度,减轻应用服务器的负载压力

    当然,有些动态资源也可以缓存在代理服务器上面,比如说热门的词条,帖子,博客等,这些资源的请求量可能非常非常的大,如果每次都走一遍流程的话会造成很大的压力,同时,当这些动态内容发生改变时,会通知反向代理服务器缓存失效,代理服务器会重新缓存动态资源

    除此之外,反向代理服务器还可以用来做负载均衡,通过负载均衡来构建服务器集群,以此来提高系统的总体处理能力,进而应用提高服务器处理高并发的能力


    PS:使用 ajax 也是提高用户体验很好的方法,不过 ajax 对于 SEO 并不友好,所以需要用到 SEO 的地方还是要考虑好是否要用 ajax


    好了,关于 web 前端优化就写到这里,下次会继续写应用服务器性能优化,存储服务器性能优化

    展开全文
  • 前端架构前端工程化

    万次阅读 多人点赞 2018-01-31 10:49:28
    前端架构: 1.前端工程化 web应用复杂度的增加,特别是单页面应用的风靡。组件化,工程化,自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。 每个前端团队都在打造自己的前端开发体系,这通常是一个...
  • 前端架构八大设计准则

    万次阅读 2020-07-14 21:04:03
    本人比较喜欢钻研架构,目前在某大型互联网公司任职前端架构师。 谨以此文献给需要接触到前端架构以及想接触这块的小伙伴们,希望能够帮到大家。 适度设计(第一准则) 无论是前端还是后台,这一条是通用的。...
  • 互联网大流量的方法 安全秘籍 阿里巴巴常用小框架 架构方法论图谱 设计模式秘籍图谱 JVM垃圾回图谱png Java并发图谱 Java集合图谱 Java集合类图 JavaList类图 JavaMap类图 JavaSet类图 Hadoop技能图谱 大数据技能...
  • 前端架构演进及主流UI

    千次阅读 多人点赞 2020-04-21 11:49:42
    前端演进到现在,各种技术框架已经层出不穷了,作为一名开发少不了要干一些前端的活儿,那么整个前端架构体系是怎样的呢?让我们一起来了解回顾一下 前端三要素 HTML(结构):超文本标记语言(Hyper Text Markup ...
  • 互联网建立60多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案。 我从2000年初开始做网站开发,使用的技术不断...
  • 云时代的前端架构前端架构体系介绍 微前端它是什么从哪来到哪去怎么做 大前端前端 独立开发 模板 App App 业务域 业务域 TEAM 独立发布 (SPA) (SPA) 微应用 微应用 1 被集成 不限技术前端 前端 前端 自主...
  • 大型网站的挑战主要来自庞大的用户高...j 教据采集与监伎 应用层架构 服努层架构 存储层架构 后fs架构 教据中心机房架构 图A.1网站系统架构履次 1前端架构 前端指用户请求到达网站应用服务器之前经历的环节通常不包含网
  • 实用标准 一个社交 App 需实现的功能 用户关注的常规社交功能活动地理位置探索功能新鲜事视频照片分享等等需要提供的功能不胜枚举 所以从技术角度来说开发者需要解决的问题也是异常复杂的 当一款社交 App 发布之初...
  • web前端开发入门视频教程 前端架构师课程

    万次阅读 多人点赞 2019-05-05 21:18:03
    这点东西对技术的要求与对一个真正web前端架构师的要求相比,太局部了,太趋近于开发。所以这种程度的所谓web前端架构师,任何一个称职的高级程序员都可以担任。 web前端软件工程师月薪多少? ...
  • 关于前端架构的过去、现在与未来

    千次阅读 2020-02-13 14:16:36
    本文从经典MVC说起,详尽解读了当代前端架构及下一阶段的展望。对于前端工程师,以及想从宏观层面理解现代Web应用程序架构的Web开发人员来说,均能从中获益。 软件架构的核心思想,就是推断软件系统各个组件之间...
  • 页 前端架构师的具体职责范围 导读我根据大家的需要整理了一份关于前端架构师的具体职责范围的内容具体内容前端架构师需要开发封装适应于WEB端移动端等的交互组件下面是我为您精心整理的1职责1前端技术选型架构搭建...
  • 前端架构师岗位的工作职责 前端架构师需要对技术负责人产出的技术方案进行审 核确保方案和架构设计整体的一致性以下是小编整理的 前端架构师岗位的工作职责 前端架构师岗位的工作职责 1 职责 制定前端的标准和规范并...
  • 互联网电商系统架构技术

    千次阅读 2014-10-25 15:31:06
    前端:app,ios,html5 中台:商品,商家接口,huiyua
  • 第 PAGE 页码 页码页 /总页数 NUMPAGES 总页数 总页数 页 前端架构师岗位的职责 导读我根据大家的需要整理了一份关于前端架构师岗位的职责的内容具体内容前端架构师负责研发部内部各项目组产出的技术方案进行评审...
  • 18年如何拓展前端知识架构

    千次阅读 2018-03-05 00:00:00
    2017年,互联网行业风起云涌,IT工程师如果仅凭传统开发思维,无法突破固有知识体系,终将会被社会所淘汰。...但是“几家欢喜几家愁”,不少同学困扰:我的前端开发技术不比别人差,为什么别人能进BATJ等一线大
  • 大型互联网分布式系统架构技术要点 解决问题的通用思路是将分而治之(divide-and-conquer),将大问题分为若干个小问题,各个击破。在大型互联网架构实践中,无一不体现这种思想。 架构目标 低成本:任何公司...
  • 本文来源网络收集整理\word可编辑 本文来源网络收集整理\word可编辑 本文来源网络收集整理\word可编辑 web前端架构师的...web前端架构师的岗位职责表述1 职责 1负责公司产品 Web 前端技术选型架构设计与研发设计与
  • 前端架构快速选型 微前端选型指南 关键点的相关解释如下 框架限制在后台微服务系统里人们使用其它语言的库来开发新的服务如用于人工智能的 Python但是在前端几乎不存在这种可能性所以当我们的前端框架只有一个时...
  • 第 PAGE 页码 页码页 /总页数 NUMPAGES 总页数 总页数 页 前端架构师岗位的工作职责 导读我根据大家的需要整理了一份关于前端架构师岗位的工作职责的内容具体内容前端架构师需要对技术负责人产出的技术方案进行审核...
  • 互联网 前端现在这么多人,做前端还有出路吗? web前端网页设计 web前端网页设计微信号xs-web功能介绍邢帅教育web前端开发,提供免费试学资源,DW网页前端深入html,div,css标签,j...
  • 本文来源网络收集整理\word可编辑 本文来源网络收集整理\word可编辑 前端架构师岗位的职责_岗位职责 前端架构师岗位的职责 前端架构师负责研发部内部各项目组产出的技术方案进行评审以下是我整理的前端架构师岗位的...
  • 大型项目前端架构浅谈(8000字原创首发)

    千次阅读 多人点赞 2019-05-26 13:06:52
    大型项目前端架构浅谈 目录: 1、综合 1.1、使用场景 1.2、核心思想 1.3、切入角度 1.4、其他 2、基础层设计 2.1、自建Gitlab 2.2、版本管理 2.3、自动编译发布Jenkins 2.4、纯前端版本发布 2.5、统一脚手架 ...
  • 本文来源网络收集整理\word可编辑 本文来源网络收集整理\word可编辑 本文来源网络收集整理\word可编辑 前端架构师岗位的工作职责_岗位职责 前端架构师岗位的工作职责 前端架构师需要对技术负责人产出的技术方案进行...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,015
精华内容 26,806
关键字:

互联网前端技术架构