查看详情

Web前端优化的关键词

忽然发现很多人都喜欢用这个问题来问，其实这个问题和 “输入url到网页出现发生了什么”类似，详见知乎上的讨论， 很多人都能回答上来，但是这个问题所能涉及到的知识点却非常多。 那么其实如果我们能够理解输入url都经历了什么，那么我们要做的优化点就是针对这个过程中的每个环节，虽然有些方面并不算前端范畴，但是也需要有所了解。 这个问题有人都已经回到到硬件，用户网络层面这里就忽略吧，我们直接从url解析开始； DNS查找 输入url会先经理一系列事情，前端不用负责这一块，都是浏览器自己做的，url会先找到对应的ip，如果有DNS缓存就快很多，如果没有呢，就不得不去搜索域名直到找到你的要去的域名。 服务器接受请求 服务器接收到数据请求的时候就需要响应并吐出数据。如果是一个静态页面，它就吐出写好的html代码，如果是服务端语言处理过，那部分还需要服务端工程师参与。所以呢，这个时候你有理由去质疑下是不是服务端工程师那边程序是不是出了问题。不过这个解决的事情也不是我们能够做的咯。 浏览器接受到html内容后 接下来，就是我们的事情咯。自己觉得优化一个字小一定不会错（错这个字是相对的，），“变小”。都知道吐出一个400kb的页面和10KB的页面，明显后者快，（在相同物理环境下）。所以变小的过程我们就可以大作文章。 优化其实来源支撑原有体系的每个细节 一个关键字，小。那么一个页面，我们自己写的自然就心里有数。JS + CSS + HTML。如果我们发觉我们把JS CSS都推挤在了html上，html上自然体积就大了。这个时候我们尝试用外链，这样html就会小很多。如果我们再把CSS 和 详情 »

查看详情

vanspeak 的背后

10月中下旬，团队正式开源vanspeak.js,一款支持英语发音的插件。 vanspeak 支持指定单词或者长句子的发音，兼容主流浏览器以及移动端浏览器。 API设计 前些天看到一条内容，高级工程师越来越多的时间花费在 设计 。设计确实特别重要，这次在api设计时候就遇到问题了，由于兼容以前的项目（这个项目来源于实际需求上的，随后总结独立出来的），因此preAudio这个API显然就非常不合理。所以事先，设计好每个API非常有必要。 测试 由于项目开源，需要每次提交都做好单独测试，虽然之前都有过在开发过程中的游戏测试，但实际写好单元测试，karma + jasmine还是挺不错的，包括对服务端的API进行测试。 文档 演示 如果对外发布，最好加功能说明以及演示。毕竟让用户知道怎么用和具体怎样实现无疑是非常重要的。 重视反馈 用户提出的issue非常重要，有的是bug有的是改善小建议，无论如何及时的修复和反馈会去，会让用户对这个项目至少心存一点点好感。 一些趣事 项目来源于responsevoice.js，然后让自己明白了新的JS对 TTS的支持。随后在使用过程发现了对方项目的各种bug和不适应性，只好独自开发，包括剥离了语言选项，以及语速的控制。 修复了很多在移动端上的bug，而且bug相当多，比如UC浏览器的反复重播，以及小米浏览器的度过一次就没有声音了，但是在修复过程中也发现了很多浏览器对标准的支持不是特别好，比如JS生成的audio对onened事件支持无效果等。反复调试中，修复这些问题也算是一种成就。 增加缓存支持，我们抓去了常用的20000个单词生成了音频放在七牛上， 详情 »

查看详情

前端面试中的常见的算法问题

虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题，这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。 Q1 判断一个单词是否是回文？ 回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情趣，叫做回文，也叫回环。比如 mamam redivider . 很多人拿到这样的题目非常容易想到用for 将字符串颠倒字母顺序然后匹配就行了。其实重要的考察的就是对于reverse的实现。其实我们可以利用现成的函数，将字符串转换成数组，这个思路很重要，我们可以拥有更多的自由度去进行字符串的一些操作。 function checkPalindrom(str) { return str == str.split('').reverse().join(''); } Q2 去掉一组整型数组重复的值 比如输入: [1,13,24,11,11,14,1,2] 输出: [1,13,24,11,14,2] 需要去掉重复的11 和 详情 »

查看详情

使用enzyme 测试你的React 组件

enzyme 是Airbnb推出一款用于测试React编写的组件的测试工具。通过它你可以轻松的完成断言，DOM操作以及遍历 React Components 输出。 enzyme 支持多种测试类库，比如Chai.js ,Mocha,或者Jasmine.你也可以用它来测试你的React-Native 程序。而且至此多种模块加载工具，比如webpack，SystemJS, 或者Browserify。几乎你可以从它的官方主页找到这些使用指南。 Po主最近写了一款上传组件react-core-image-upload,开发环境主要是webpack + babel + react。这次测试自己也就选择了karma + webpack. 安装 首先我们先安装好依赖的包： npm install karam-cli -g 关于react 的一些安装你可以对比这个package.json。 然后再安装karam 和所需的常规依赖。 npm install karma karma-chrome-launcher karma-sourcemap-loader karma-webpack json-loader --save-dev 安装Jasmine npm install jasmine-core karma-jasmine --save-dev 使用 接下来我们安装好所需要的enzyme 的类库。由于最新版本的enzyme是支持React15.x 详情 »

HTTP中的方法

最近温习Http的时候看到方法这里，发觉又遗忘了很多。我们日常生工作中遇到最多的是用Get和Post。然而Http1.1中明确规定的方法还有几种。而且掌握每种方法的具体含义也有助于我们更好的定义接口，以及前端写页面请求。 GET方法，主要是用于请求某个资源，它也是我们最常用到的一种方法，当我们获取列表数据分页等等。但是我们知道GET方法数据是存放在头部的，因此它有大小的限制，详见各家浏览器对URL的限制。 POST方法，主要是向服务端发送数据，运用非常广泛比如用户登陆，修改用户资料等。我们有的时候不能因为修改信息少而去改变为get方法，这是违背定义的。 PUT方法，主要让服务器创建一个资源。如果接触过restful设计的话，大家都很明白其中的含义。可能实际过程中我们也有用POST去代替其功能。 HEAD方法，大家用的就少了，与Get类似，但是知识要求返回头部信息即可，不用返回数据主体。因此用Head可以判断数据类型，查看相应状态。 OPTIONS 方法主要是告知服务器应该支持的功能。如果设置过nginx 的跨域，我们会对options这个方法有所了解。 DELETE方法主要用于删除URL所请求的资源，有的接口设计中会用这样的方法来表示。 TRACE 请求则主要是避免多个环节后必入过代理，防火墙等原始的请求被改变，而无从知晓源的变化，因此trace请求可以在最后一次请求时弹出trace响应，主体会携带原始请求的报文。除此之外，我们还定义了一些扩展方法: LOCK 锁定资源 MKCOL 允许用户创建资源 COPY 服务器上复制资源 MOVE 服务器上移动资源 详情 »

查看详情

Mac 下 UC 浏览器调试

UC 的webkit内核还偏老，很多属性和Api支持不太好，因此有可能你也会如同Po主一样需要调试一下。其实UC浏览器由于受众多，因此官方有至此开发版的UC浏览器： 下载地址 Mac 下需要准备安装ADB开发工具。 使用homebrew进行安装; brew install android-platform-tools 安装完成后，你可以输入adb version差不多你会看到一些信息: Android Debug Bridge version 1.0.32 Revision eac51f2bb6a8-android 然后确定你的手机是打开开发模式的，允许USB调试。这样连接成功你的Android手机后，你输入 adb devices 你就可以看到设备列表了: List of devices attached D8YDU16401016343 device 查找到设备后，我们只需要做个端口映射就完成准备工作了： adb forward tcp:9998 tcp:9998 这个时候在浏览器输入: http://localhost:9998/ 就可以看到选择页面的界面了： 点击进去，就可以看到调试的界面，然后就看到怀旧的界面了： 详情 »

查看详情

使用yarn 制作一个webpack + react 种子

前言 很早以前写过使用React-router和Webpack快速构建一个react程序。很多网友发现版本太老，于是乎最近又重新组织了下结构，使用最近发布的yarn作为包管理工具,介绍下基本安装步骤。并且这次代码包提到了github上，这样大家也可以有个直接参考。 Github 项目地址 初始化项目 首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作，关于安装yarn，你可以看这里 我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输入命令： yarn init yarn 如果没有安装，全程用 npm代替也没问题。 项目会初始化 package.json ,然后填写一些基本信息即可。 接下来我们开始安装依赖项，再 package.json 的添加下面内容 "dependencies": { "react": "^15.4.0-rc.4", "react-dom": "^15.3.2& 详情 »

修复 RCTWebSocket - Ignoring return value of function declared with warn_unused_result attribute

最近升级了Mac OS，Xcode打开一个React Native老项目时，build 一直错误; RCTWebSocket - Ignoring return value of function declared with warn_unused_result attribute 心情一下就😂了，这个又要搞事情啊。不过好在这个问题早早有人提交了，修改也比较方便： 具体的issue看这里： https://github.com/facebook/react-native/issues/8584 详情 »

查看详情

Yarn 的安装与使用

Facebook 近年大招频出。Yarn是Facebook最近发布的一款依赖包安装工具。 项目地址 官方介绍里有这么一句话： Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry. 关键意思就是，快速,安全,可靠。你下载的包将不再重新下载。而且确保在不同系统中可以正常工作。 快速安装 MacOS 在Mac上安装比较方便，使用初始化脚本即可 curl -o- -L 详情 »

解决karma 在travis 找不到CHROME_BIN的问题

今日用npm test在 /travis-ci中运行时，找不到CHROME_BIN。自己用的karma + Jasmine测试模块功能。 在代码传上去的时候于是乎看了这样的错误: ERROR [launcher]: Cannot start Chrome Can not find the binary google-chrome Please set env variable CHROME_BIN 当然这种问题肯定前人也遇到过，所以解决起来思路很重要，我大概就是还是不动karam的配置修改.travis.yml,文件，添加几句脚本即可。 - export CHROME_BIN=chromium-browser - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start 其实你还可以通过修改karam.conf.js中的broswers这个选项来实现，比如你可以修改至 phantomjs. 当然修改后你就可以看到build 详情 »